File size: 6,488 Bytes
78b0f9e 1153c7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!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>
<!-- Taiga UI -->
<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">
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- Bar Code Button -->
<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>
<!-- Other Actions -->
<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>
<!-- Featured Cocktail -->
<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>
<!-- Bottom Navigation -->
<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();
// Taiga UI initialization
document.addEventListener('DOMContentLoaded', () => {
// Add any Taiga UI specific initialization here
});
</script>
</body>
</html>
|