I'm building a cocktail app
Browse filesName: MIXt
"Focused Utility." The app is trying to be the clearest, most direct path from question ("What's in this drink?") to answer ("Here's how you make it, and here's how you can make it with what you have.").
The app is positioned as an indispensable, intelligent companion for any cocktail occasion. It’s the modern, minimalist tool that demystifies the world of mixology, making it accessible and fun for everyone.
Tagline: "Cocktails Simplified"
Flagship feature : "Bar Code"
Scan any cocktail menu or take a picture of various liquor bottles and the app will build a full cocktail recipe for you, with instructions, and a recipe card that can be saved or iterated on.
Other features:
my bar: store your inventory of cocktail ingredients
my cocktails: store your saved cocktails, easy search and find, shareable, and can be iterated on while storing revisions and comments
the scene: search local cocktail bars and places to get a cocktail, see what is being served there, and what people are saying
Theme: Dark mode - cocktail bars are typically dark, so keep the light down on the app
Style: Simple, clean, Subtle glassmorphism - a slight nod towards the cocktail glassware, but simple, airy, lots of space.
Color scheme:
$color-bg: #101214;
$color-surface: #1B1E20;
$color-surface-elevated: #24282B;
$color-border: #2F3336;
$color-primary: #C28F2C;
$color-secondary: #7A9EA6;
$color-highlight: #E6B25C;
$color-error: #C35B48;
$color-text-primary: #ECECEC;
$color-text-secondary: #B4B6B8;
$color-text-disabled: #707375;
$color-text-link: #A0C5C8;
$shadow-soft: 0 4px 16px rgba(194,143,44,0.15);
$glass-blur: blur(12px);
Can you help design the homepage for this app. I want it to be clean, not busy, intuitive, and direct the user to the things they want to do most. I want it to have a nod towards the death and Co cocktail bars, feeling like they opened the app into one of their cocktail bars.
please research taiga-ui components and use stylized taiga components for as much as possible
make sure to feature the bar code
use glasmorphism subtly, but not too much
- README.md +8 -5
- index.html +143 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: MIXt - Your Liquid Librarian 🍸
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
|
@@ -1,19 +1,144 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" class="scroll-smooth">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>MIXt - Cocktails Simplified</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<!-- Taiga UI -->
|
| 11 |
+
<link href="https://unpkg.com/@taiga-ui/core@next/styles/taiga-ui-global.css" rel="stylesheet">
|
| 12 |
+
<style>
|
| 13 |
+
body {
|
| 14 |
+
background-color: #101214;
|
| 15 |
+
color: #ECECEC;
|
| 16 |
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
| 17 |
+
}
|
| 18 |
+
.glass-card {
|
| 19 |
+
background: rgba(27, 30, 32, 0.7);
|
| 20 |
+
backdrop-filter: blur(12px);
|
| 21 |
+
border: 1px solid rgba(47, 51, 54, 0.3);
|
| 22 |
+
}
|
| 23 |
+
.primary-gradient {
|
| 24 |
+
background: linear-gradient(135deg, #C28F2C 0%, #E6B25C 100%);
|
| 25 |
+
}
|
| 26 |
+
.secondary-gradient {
|
| 27 |
+
background: linear-gradient(135deg, #7A9EA6 0%, #A0C5C8 100%);
|
| 28 |
+
}
|
| 29 |
+
.shadow-gold {
|
| 30 |
+
box-shadow: 0 4px 16px rgba(194, 143, 44, 0.15);
|
| 31 |
+
}
|
| 32 |
+
</style>
|
| 33 |
+
</head>
|
| 34 |
+
<body class="min-h-screen flex flex-col">
|
| 35 |
+
<!-- Navigation -->
|
| 36 |
+
<nav class="border-b border-[#2F3336] py-4 px-6 flex justify-between items-center">
|
| 37 |
+
<div class="flex items-center space-x-2">
|
| 38 |
+
<div class="w-8 h-8 rounded-full primary-gradient flex items-center justify-center">
|
| 39 |
+
<i data-feather="droplet" class="text-[#1B1E20] w-4 h-4"></i>
|
| 40 |
+
</div>
|
| 41 |
+
<h1 class="text-xl font-bold">MIXt</h1>
|
| 42 |
+
</div>
|
| 43 |
+
<div class="flex space-x-4">
|
| 44 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 45 |
+
<i data-feather="user"></i>
|
| 46 |
+
</button>
|
| 47 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 48 |
+
<i data-feather="settings"></i>
|
| 49 |
+
</button>
|
| 50 |
+
</div>
|
| 51 |
+
</nav>
|
| 52 |
+
|
| 53 |
+
<!-- Hero Section -->
|
| 54 |
+
<main class="flex-1 flex flex-col items-center justify-center p-6 text-center">
|
| 55 |
+
<div class="glass-card rounded-2xl p-8 max-w-md w-full shadow-gold">
|
| 56 |
+
<div class="w-16 h-16 rounded-full primary-gradient flex items-center justify-center mx-auto mb-6">
|
| 57 |
+
<i data-feather="maximize-2" class="text-[#1B1E20] w-6 h-6"></i>
|
| 58 |
+
</div>
|
| 59 |
+
<h2 class="text-2xl font-bold mb-2">What would you like to mix?</h2>
|
| 60 |
+
<p class="text-[#B4B6B8] mb-6">Scan, search, or browse your way to cocktail perfection</p>
|
| 61 |
+
|
| 62 |
+
<!-- Bar Code Button -->
|
| 63 |
+
<button class="tui-button tui-button_large tui-button_primary w-full mb-4" style="background-color: #C28F2C;">
|
| 64 |
+
<div class="flex items-center justify-center space-x-2">
|
| 65 |
+
<i data-feather="maximize"></i>
|
| 66 |
+
<span>Scan Bar Code</span>
|
| 67 |
+
</div>
|
| 68 |
+
</button>
|
| 69 |
+
|
| 70 |
+
<!-- Other Actions -->
|
| 71 |
+
<div class="grid grid-cols-2 gap-3">
|
| 72 |
+
<button class="tui-button tui-button_secondary" style="background-color: #24282B;">
|
| 73 |
+
<div class="flex items-center justify-center space-x-2">
|
| 74 |
+
<i data-feather="search"></i>
|
| 75 |
+
<span>Search</span>
|
| 76 |
+
</div>
|
| 77 |
+
</button>
|
| 78 |
+
<button class="tui-button tui-button_secondary" style="background-color: #24282B;">
|
| 79 |
+
<div class="flex items-center justify-center space-x-2">
|
| 80 |
+
<i data-feather="book"></i>
|
| 81 |
+
<span>Recipes</span>
|
| 82 |
+
</div>
|
| 83 |
+
</button>
|
| 84 |
+
<button class="tui-button tui-button_secondary" style="background-color: #24282B;">
|
| 85 |
+
<div class="flex items-center justify-center space-x-2">
|
| 86 |
+
<i data-feather="home"></i>
|
| 87 |
+
<span>My Bar</span>
|
| 88 |
+
</div>
|
| 89 |
+
</button>
|
| 90 |
+
<button class="tui-button tui-button_secondary" style="background-color: #24282B;">
|
| 91 |
+
<div class="flex items-center justify-center space-x-2">
|
| 92 |
+
<i data-feather="map-pin"></i>
|
| 93 |
+
<span>The Scene</span>
|
| 94 |
+
</div>
|
| 95 |
+
</button>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
|
| 99 |
+
<!-- Featured Cocktail -->
|
| 100 |
+
<div class="glass-card rounded-2xl p-6 mt-8 max-w-md w-full">
|
| 101 |
+
<div class="flex items-start space-x-4">
|
| 102 |
+
<div class="flex-shrink-0">
|
| 103 |
+
<div class="w-16 h-16 rounded-lg bg-[#24282B] flex items-center justify-center">
|
| 104 |
+
<i data-feather="star" class="text-[#C28F2C]"></i>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
<div>
|
| 108 |
+
<h3 class="font-bold">Today's Featured</h3>
|
| 109 |
+
<p class="text-[#B4B6B8] text-sm">Death & Co's</p>
|
| 110 |
+
<h4 class="text-xl font-bold mt-1" style="color: #E6B25C;">Oaxaca Old Fashioned</h4>
|
| 111 |
+
<p class="text-[#B4B6B8] text-sm mt-2">Tequila, Mezcal, Agave, Bitters</p>
|
| 112 |
+
<button class="tui-button tui-button_flat tui-button_small mt-3" style="color: #A0C5C8;">
|
| 113 |
+
View Recipe <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
|
| 114 |
+
</button>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
</main>
|
| 119 |
+
|
| 120 |
+
<!-- Bottom Navigation -->
|
| 121 |
+
<div class="border-t border-[#2F3336] py-3 px-6 flex justify-around">
|
| 122 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 123 |
+
<i data-feather="home" class="text-[#E6B25C]"></i>
|
| 124 |
+
</button>
|
| 125 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 126 |
+
<i data-feather="compass"></i>
|
| 127 |
+
</button>
|
| 128 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 129 |
+
<i data-feather="bookmark"></i>
|
| 130 |
+
</button>
|
| 131 |
+
<button class="tui-button tui-button_icon tui-button_transparent">
|
| 132 |
+
<i data-feather="bell"></i>
|
| 133 |
+
</button>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<script>
|
| 137 |
+
feather.replace();
|
| 138 |
+
// Taiga UI initialization
|
| 139 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 140 |
+
// Add any Taiga UI specific initialization here
|
| 141 |
+
});
|
| 142 |
+
</script>
|
| 143 |
+
</body>
|
| 144 |
</html>
|