|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MIXt - Cocktails Simplified</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
|
|
|
<link href="https://unpkg.com/@taiga-ui/core@next/styles/taiga-ui-global.css" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
background-color: #101214; |
|
|
color: #ECECEC; |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
} |
|
|
.glass-card { |
|
|
background: rgba(27, 30, 32, 0.7); |
|
|
backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(47, 51, 54, 0.3); |
|
|
} |
|
|
.primary-gradient { |
|
|
background: linear-gradient(135deg, #C28F2C 0%, #E6B25C 100%); |
|
|
} |
|
|
.secondary-gradient { |
|
|
background: linear-gradient(135deg, #7A9EA6 0%, #A0C5C8 100%); |
|
|
} |
|
|
.shadow-gold { |
|
|
box-shadow: 0 4px 16px rgba(194, 143, 44, 0.15); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<nav class="border-b border-[#2F3336] py-4 px-6 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full primary-gradient flex items-center justify-center"> |
|
|
<i data-feather="droplet" class="text-[#1B1E20] w-4 h-4"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">MIXt</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="user"></i> |
|
|
</button> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="settings"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex flex-col items-center justify-center p-6 text-center"> |
|
|
<div class="glass-card rounded-2xl p-8 max-w-md w-full shadow-gold"> |
|
|
<div class="w-16 h-16 rounded-full primary-gradient flex items-center justify-center mx-auto mb-6"> |
|
|
<i data-feather="maximize-2" class="text-[#1B1E20] w-6 h-6"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold mb-2">What would you like to mix?</h2> |
|
|
<p class="text-[#B4B6B8] mb-6">Scan, search, or browse your way to cocktail perfection</p> |
|
|
|
|
|
|
|
|
<button class="tui-button tui-button_large tui-button_primary w-full mb-4" style="background-color: #C28F2C;"> |
|
|
<div class="flex items-center justify-center space-x-2"> |
|
|
<i data-feather="maximize"></i> |
|
|
<span>Scan Bar Code</span> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="tui-button tui-button_secondary" style="background-color: #24282B;"> |
|
|
<div class="flex items-center justify-center space-x-2"> |
|
|
<i data-feather="search"></i> |
|
|
<span>Search</span> |
|
|
</div> |
|
|
</button> |
|
|
<button class="tui-button tui-button_secondary" style="background-color: #24282B;"> |
|
|
<div class="flex items-center justify-center space-x-2"> |
|
|
<i data-feather="book"></i> |
|
|
<span>Recipes</span> |
|
|
</div> |
|
|
</button> |
|
|
<button class="tui-button tui-button_secondary" style="background-color: #24282B;"> |
|
|
<div class="flex items-center justify-center space-x-2"> |
|
|
<i data-feather="home"></i> |
|
|
<span>My Bar</span> |
|
|
</div> |
|
|
</button> |
|
|
<button class="tui-button tui-button_secondary" style="background-color: #24282B;"> |
|
|
<div class="flex items-center justify-center space-x-2"> |
|
|
<i data-feather="map-pin"></i> |
|
|
<span>The Scene</span> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card rounded-2xl p-6 mt-8 max-w-md w-full"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="w-16 h-16 rounded-lg bg-[#24282B] flex items-center justify-center"> |
|
|
<i data-feather="star" class="text-[#C28F2C]"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Today's Featured</h3> |
|
|
<p class="text-[#B4B6B8] text-sm">Death & Co's</p> |
|
|
<h4 class="text-xl font-bold mt-1" style="color: #E6B25C;">Oaxaca Old Fashioned</h4> |
|
|
<p class="text-[#B4B6B8] text-sm mt-2">Tequila, Mezcal, Agave, Bitters</p> |
|
|
<button class="tui-button tui-button_flat tui-button_small mt-3" style="color: #A0C5C8;"> |
|
|
View Recipe <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="border-t border-[#2F3336] py-3 px-6 flex justify-around"> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="home" class="text-[#E6B25C]"></i> |
|
|
</button> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="compass"></i> |
|
|
</button> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="bookmark"></i> |
|
|
</button> |
|
|
<button class="tui-button tui-button_icon tui-button_transparent"> |
|
|
<i data-feather="bell"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
