tailwind로 만드는 키오스크
2024. 11. 12. 10:27ㆍ웹개발
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="max-w-7xl ">
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<h1 class="text-center py-1 shadow-lg shadow-gray-500/50 bg-black text-white rounded-lg text-[15px] cursor-pointer active:scale-[.97]">
상품타입1
</h1>
<h1 class="text-center py-1 shadow-lg shadow-gray-500/50 bg-black text-white rounded-lg text-[15px] cursor-pointer active:scale-[.97]">
상품타입2
</h1>
<h1 class="text-center py-1 shadow-lg shadow-gray-500/50 bg-black text-white rounded-lg text-[15px] cursor-pointer active:scale-[.97]">
상품타입3
</h1>
<h1 class="text-center py-1 shadow-lg shadow-gray-500/50 bg-black text-white rounded-lg text-[15px] cursor-pointer active:scale-[.97]">
상품타입4
</h1>
</div>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5 cursor-pointer">
<div class="flex p-6">
<div class="flex justify-between mb-6">
<div>
<div class="flex items-center mb-1">
<div class="text-2xl font-semibold">상품타입1</div>
</div>
<div class="text-2xl font-medium text-gray-400">1,000</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5 cursor-pointer">
<div class="flex p-6">
<div class="flex justify-between mb-6">
<div>
<div class="flex items-center mb-1">
<div class="text-2xl font-semibold">상품타입1</div>
</div>
<div class="text-2xl font-medium text-gray-400">10,000</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-70 text-center">
<!-- <div class=" absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> -->
<div class="w-80 bg-white p-8 rounded-lg shadow-lg ">
<h1 class="text-2xl font-bold mb-6 text-center">Phone Number Lookup</h1>
<div id="phone-number" class="bg-gray-200 text-center text-xl p-4 rounded mb-4 ">_ _ _ -_ _ _ _ - _ _ _ _</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(1)">1</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(2)">2</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(3)">3</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(4)">4</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(5)">5</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(6)">6</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(7)">7</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(8)">8</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(9)">9</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="clearNumber()">C</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="inputNumber(0)">0</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded" onclick="deleteNumber()">←</button>
</div>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded w-full" onclick="lookupNumber()">Lookup</button>
</div>
<!-- </div> -->
</div>
<div class="flex items-end w-full min-h-screen bg-white">
<footer class="w-full text-gray-700 bg-gray-100 body-font">
<div
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
<p class="mt-2 text-sm text-gray-500">Design, Code and Ship!</p>
<div class="mt-4">
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
<a class="text-gray-500 cursor-pointer hover:text-gray-700">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">About</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Company</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Careers</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Blog</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Support</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Contact Support</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Help Resources</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Release Updates</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Platform
</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Terms & Privacy</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Pricing</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">FAQ</a>
</li>
</nav>
</div>
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font">Contact</h2>
<nav class="mb-10 list-none">
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Send a Message</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">Request a Quote</a>
</li>
<li class="mt-3">
<a class="text-gray-500 cursor-pointer hover:text-gray-900">+123-456-7890</a>
</li>
</nav>
</div>
</div>
</div>
<div class="bg-gray-300">
<div class="container px-5 py-4 mx-auto">
<p class="text-sm text-gray-700 capitalize xl:text-center">© 2020 All rights reserved </p>
</div>
</div>
</footer>
</div>
</body>
<script>
let phoneNumber = [];
function inputNumber(num) {
if (phoneNumber.length < 11) {
phoneNumber.push(num);
updateDisplay();
}
}
function deleteNumber() {
phoneNumber.pop();
updateDisplay();
}
function clearNumber() {
phoneNumber = [];
updateDisplay();
}
function updateDisplay() {
const formattedNumber = phoneNumber.join('');
document.getElementById('phone-number').textContent = formattedNumber.padEnd(11, '_');
}
function lookupNumber() {
if (phoneNumber.length === 11) {
alert('Looking up phone number: ' + phoneNumber.join(''));
// 여기서 전화번호 조회 로직을 추가합니다.
} else {
alert('Please enter a valid 7-digit phone number.');
}
}
</script>
</html>
728x90
반응형
'웹개발' 카테고리의 다른 글
| HTML5/CSS3 div태그 좌우 반으로 나누기 (1) | 2024.11.15 |
|---|---|
| 스프링 부트 jwt mybatis 연동 설정 (5) | 2024.11.11 |
| 무료 클라우드 서비스 (1) | 2024.06.11 |
| MSSQL 대용량 데이터 삭제 (0) | 2023.10.16 |
| 자바 쿠키 설정 JAVA COOKIE (0) | 2023.09.13 |