Spaces:
Running
Running
напиши плашин для Wordpress: Создай современный и функциональный плагин, где пользователи смогут находить, изучать и оставлять отзывы на разные виды кофе: 🔹 Виды кофе: Зерновой Молотый Растворимый Капсульный Дрип-кофе Зелёный (необжаренный) Авторские смеси и купажи 🧠 Умная система поиска кофе: Добавь продвинутый фильтр + интеллектуальный поиск (по принципу “как в Spotify, Netflix, Vivino”): 🔍 Фильтры (с возможностью комбинирования): Тип кофе: зерновой, дрип, капсулы и т.д. Производитель / Бренд: Illy, Lavazza, Tasty Coffee и др. Страна происхождения: Бразилия, Колумбия, Эфиопия и др. Обжарка: светлая, средняя, тёмная Степень помола: под эспрессо, под френч-пресс, универсальный Вкус / Вкусовые ноты: шоколад, орех, цитрус, специи и т.п. Аромат: насыщенный, слабый, фруктовый, древесный и т.д. Метод заваривания: подходит ли под турку, капельную, дрип, воронку, автомат Цена: слайдер от до Рейтинг пользователей: по 5-бальной шкале Поиск по названию или ключевым словам 🤖 Дополнительно: “Подбор кофе по вкусу”: пользователь отвечает на 3–5 простых вопросов (любишь ли кислинку? молочные напитки? нужен кофе для утра или вечера?) — и получает подборку “Я пробовал вот этот – подберите похожий”: система ищет аналоги Поиск по штрихкоду или QR (в перспективе) 💬 Дополнение к разделам: Главная страница Секция “Подобрано для вас” (на основе вкусов, любимых брендов) “Новинки дрип-кофе” и “Лучшее за месяц” Карточка кофе Тип (например, Дрип) Для каких методов подходит Фото упаковки, вкус, аромат, цена, рейтинг Отзывы с фото/видео “Похожие варианты” Добавить кофе Если не найден в базе Модерация + подтверждение сообщества 🎨 Визуальный стиль: Современный, лёгкий, в кофейных тонах Удобство чтения отзывов Микроанимации для фильтров и поиска Карточки кофе с аккуратной иконографикой (вкус, обжарка, страна) 📱 Функции (технически): Быстрый AJAX-поиск и фильтрация Возможность сохранить фильтр (например: “дрип-кофе с фруктовыми нотами до 600₽”) Регистрация / Авторизация Рейтинги и лайки на отзывы Система «награды за активность» (значки, уровни) - Initial Deployment
b3da2d7 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Coffee Connoisseur - WordPress Plugin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for elements that need more styling */ | |
| .coffee-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .coffee-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .taste-profile { | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .search-dropdown { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .flavor-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .flavor-tag:hover { | |
| transform: scale(1.05); | |
| } | |
| .filter-section { | |
| transition: max-height 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .rating-star { | |
| color: #fbbf24; | |
| } | |
| .rating-star-empty { | |
| color: #d1d5db; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50"> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Header --> | |
| <header class="mb-12 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-amber-900 mb-4">Coffee Connoisseur</h1> | |
| <p class="text-lg text-amber-800 max-w-3xl mx-auto">Discover, explore, and review the world's finest coffees. Find your perfect cup based on your taste preferences.</p> | |
| </header> | |
| <!-- Search Bar --> | |
| <div class="mb-10 relative"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search coffees, brands, flavors..." | |
| class="w-full p-4 pl-12 rounded-full border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent shadow-sm text-amber-900 bg-white"> | |
| <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-amber-500"> | |
| <i class="fas fa-search fa-lg"></i> | |
| </div> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-amber-600 text-white px-6 py-2 rounded-full hover:bg-amber-700 transition"> | |
| Search | |
| </button> | |
| </div> | |
| <!-- Search Suggestions Dropdown --> | |
| <div class="search-dropdown absolute z-10 w-full mt-2 bg-white rounded-lg shadow-lg hidden"> | |
| <div class="p-4 border-b border-amber-100"> | |
| <h3 class="font-medium text-amber-900">Popular Searches</h3> | |
| </div> | |
| <div class="p-2"> | |
| <a href="#" class="block px-4 py-2 text-amber-800 hover:bg-amber-50 rounded">Ethiopian Yirgacheffe</a> | |
| <a href="#" class="block px-4 py-2 text-amber-800 hover:bg-amber-50 rounded">Dark Roast</a> | |
| <a href="#" class="block px-4 py-2 text-amber-amber-800 hover:bg-amber-50 rounded">Chocolate Notes</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Filter Section --> | |
| <div class="mb-10 bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-amber-900">Filter Coffees</h2> | |
| <button class="text-amber-600 hover:text-amber-800 text-sm font-medium"> | |
| <i class="fas fa-sliders-h mr-1"></i> Advanced Filters | |
| </button> | |
| </div> | |
| <!-- Quick Filters --> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <button class="px-4 py-2 bg-amber-100 text-amber-800 rounded-full hover:bg-amber-200 transition flex items-center"> | |
| <i class="fas fa-coffee mr-2"></i> All Types | |
| </button> | |
| <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center"> | |
| <i class="fas fa-wheat mr-2"></i> Whole Bean | |
| </button> | |
| <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Drip | |
| </button> | |
| <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center"> | |
| <i class="fas fa-capsules mr-2"></i> Capsules | |
| </button> | |
| <button class="px-4 py-2 bg-white text-amber-800 border border-amber-300 rounded-full hover:bg-amber-50 transition flex items-center"> | |
| <i class="fas fa-leaf mr-2"></i> Green Coffee | |
| </button> | |
| </div> | |
| <!-- Advanced Filters (Collapsible) --> | |
| <div class="filter-section" style="max-height: 0;"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-4"> | |
| <!-- Coffee Type --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Coffee Type</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Whole Bean</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Ground</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Instant</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Drip</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Capsules</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Roast Level --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Roast Level</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Light</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Medium</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-amber-600"> | |
| <span class="ml-2 text-amber-800">Dark</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Flavor Notes --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Flavor Notes</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Chocolate</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Nutty</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Fruity</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Floral</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Spicy</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Caramel</span> | |
| </div> | |
| </div> | |
| <!-- Brew Methods --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Brew Methods</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-coffee mr-1"></i> Espresso | |
| </span> | |
| <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-filter mr-1"></i> Pour Over | |
| </span> | |
| <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm flex items-center"> | |
| <i class="fas fa-mug-hot mr-1"></i> French Press | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Price Range --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Price Range</label> | |
| <div class="px-2"> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-amber-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-amber-800 mt-1"> | |
| <span>$0</span> | |
| <span>$50</span> | |
| <span>$100+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rating --> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-2">Minimum Rating</label> | |
| <div class="flex items-center"> | |
| <div class="flex mr-2"> | |
| <i class="fas fa-star rating-star"></i> | |
| <i class="fas fa-star rating-star"></i> | |
| <i class="fas fa-star rating-star"></i> | |
| <i class="fas fa-star rating-star"></i> | |
| <i class="fas fa-star rating-star-empty"></i> | |
| </div> | |
| <span class="text-amber-800">4+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-6"> | |
| <button class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Personalized Recommendations --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-amber-900">Selected For You</h2> | |
| <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">See all</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Coffee Card 1 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Ethiopian Yirgacheffe" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| <i class="fas fa-wheat mr-1"></i> Whole Bean | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Ethiopian Yirgacheffe</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Bright acidity with floral and citrus notes</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Ethiopia</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-3/4"></div> | |
| <div class="taste-profile bg-amber-600 w-1/2"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$14.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coffee Card 2 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551033401-64a1fdf73725?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Colombian Supremo" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| <i class="fas fa-filter mr-1"></i> Drip | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Colombian Supremo</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.5</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Balanced with caramel and nutty notes</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Colombia</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-1/2"></div> | |
| <div class="taste-profile bg-amber-600 w-3/4"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$12.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coffee Card 3 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Italian Dark Roast" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| <i class="fas fa-capsules mr-1"></i> Capsules | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Italian Dark Roast</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Bold with dark chocolate and smoky notes</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Italy</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-1/4"></div> | |
| <div class="taste-profile bg-amber-600 w-full"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$0.75/capsule</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coffee Card 4 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Costa Rican Tarrazu" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| <i class="fas fa-leaf mr-1"></i> Green Coffee | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Costa Rican Tarrazu</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.6</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Clean with honey and citrus notes</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Costa Rica</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-2/3"></div> | |
| <div class="taste-profile bg-amber-600 w-1/2"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$16.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Taste Quiz Section --> | |
| <section class="mb-12 bg-amber-100 rounded-xl p-6"> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-amber-900 mb-2">Find Your Perfect Coffee</h2> | |
| <p class="text-amber-800 max-w-2xl mx-auto">Answer a few simple questions and we'll recommend coffees tailored to your taste preferences.</p> | |
| </div> | |
| <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-amber-800">Question 1 of 5</span> | |
| <span class="text-sm text-amber-600">60% complete</span> | |
| </div> | |
| <div class="w-full bg-amber-200 rounded-full h-2"> | |
| <div class="bg-amber-600 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-medium text-amber-900 mb-4">How do you prefer your coffee's acidity?</h3> | |
| <div class="space-y-3"> | |
| <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer"> | |
| <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500"> | |
| <span class="ml-3 text-amber-800">Bright and lively (like citrus fruits)</span> | |
| </label> | |
| <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer"> | |
| <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500"> | |
| <span class="ml-3 text-amber-800">Moderate and balanced</span> | |
| </label> | |
| <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer"> | |
| <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500"> | |
| <span class="ml-3 text-amber-800">Low and mellow</span> | |
| </label> | |
| <label class="flex items-center p-3 border border-amber-300 rounded-lg hover:bg-amber-50 cursor-pointer"> | |
| <input type="radio" name="acidity" class="h-4 w-4 text-amber-600 focus:ring-amber-500"> | |
| <span class="ml-3 text-amber-800">I'm not sure</span> | |
| </label> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button class="px-4 py-2 border border-amber-300 text-amber-800 rounded-lg hover:bg-amber-50 transition"> | |
| Back | |
| </button> | |
| <button class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Arrivals Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-amber-900">New Drip Coffee Arrivals</h2> | |
| <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">View all</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- New Arrival 1 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1534778101976-7f9afc9a7e88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Kenyan AA" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-amber-900 mb-1">Kenyan AA</h3> | |
| <p class="text-xs text-amber-700 mb-2">Berry and wine-like notes</p> | |
| <div class="flex items-center text-xs text-amber-700 mb-2"> | |
| <i class="fas fa-globe-americas mr-1"></i> | |
| <span>Kenya</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900 text-sm">$15.99</span> | |
| <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition"> | |
| View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Arrival 2 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Brazilian Santos" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-amber-900 mb-1">Brazilian Santos</h3> | |
| <p class="text-xs text-amber-700 mb-2">Nutty and chocolatey</p> | |
| <div class="flex items-center text-xs text-amber-700 mb-2"> | |
| <i class="fas fa-globe-americas mr-1"></i> | |
| <span>Brazil</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900 text-sm">$12.99</span> | |
| <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition"> | |
| View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Arrival 3 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Sumatra Mandheling" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-amber-900 mb-1">Sumatra Mandheling</h3> | |
| <p class="text-xs text-amber-700 mb-2">Earthy and herbal</p> | |
| <div class="flex items-center text-xs text-amber-700 mb-2"> | |
| <i class="fas fa-globe-americas mr-1"></i> | |
| <span>Indonesia</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900 text-sm">$13.99</span> | |
| <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition"> | |
| View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Arrival 4 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Guatemalan Antigua" class="w-full h-40 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium text-amber-900 flex items-center"> | |
| New | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-amber-900 mb-1">Guatemalan Antigua</h3> | |
| <p class="text-xs text-amber-700 mb-2">Spicy and complex</p> | |
| <div class="flex items-center text-xs text-amber-700 mb-2"> | |
| <i class="fas fa-globe-americas mr-1"></i> | |
| <span>Guatemala</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900 text-sm">$14.99</span> | |
| <button class="text-xs bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition"> | |
| View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Top Rated Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-amber-900">Top Rated This Month</h2> | |
| <a href="#" class="text-amber-600 hover:text-amber-800 font-medium">View all</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Top Rated 1 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Blue Mountain" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-amber-600 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center"> | |
| #1 Top Rated | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Jamaican Blue Mountain</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.9</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Smooth with mild acidity and sweet flavor</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Jamaica</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-1/3"></div> | |
| <div class="taste-profile bg-amber-600 w-2/3"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$29.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Rated 2 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517701550928-30cf4ba1dba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Gesha Village" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-amber-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center"> | |
| #2 Top Rated | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Panama Gesha</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Jasmine and bergamot with tea-like body</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Panama</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-3/4"></div> | |
| <div class="taste-profile bg-amber-600 w-1/3"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$34.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Rated 3 --> | |
| <div class="coffee-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" | |
| alt="Hawaiian Kona" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-amber-400 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center"> | |
| #3 Top Rated | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-semibold text-lg text-amber-900">Hawaiian Kona</h3> | |
| <div class="flex items-center bg-amber-100 px-2 py-1 rounded-full"> | |
| <i class="fas fa-star text-amber-500 text-xs mr-1"></i> | |
| <span class="text-xs font-medium text-amber-800">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-3">Rich and flavorful with nutty undertones</p> | |
| <div class="flex items-center text-sm text-amber-700 mb-3"> | |
| <i class="fas fa-globe-americas mr-2"></i> | |
| <span>Hawaii, USA</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs text-amber-700 mb-1"> | |
| <span>Acidity</span> | |
| <span>Body</span> | |
| </div> | |
| <div class="flex gap-1 mb-1"> | |
| <div class="taste-profile bg-amber-400 w-1/2"></div> | |
| <div class="taste-profile bg-amber-600 w-3/4"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-amber-900">$27.99</span> | |
| <button class="text-amber-600 hover:text-amber-800"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Add Coffee Section --> | |
| <section class="mb-12 bg-white rounded-xl shadow-md p-6"> | |
| <div class="text-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-amber-900 mb-2">Don't See Your Favorite Coffee?</h2> | |
| <p class="text-amber-800 max-w-2xl mx-auto">Help us grow our database by adding new coffees to our collection.</p> | |
| </div> | |
| <div class="max-w-lg mx-auto"> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Coffee Name</label> | |
| <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Brand/Producer</label> | |
| <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Type</label> | |
| <select class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent"> | |
| <option>Whole Bean</option> | |
| <option>Ground</option> | |
| <option>Instant</option> | |
| <option>Drip</option> | |
| <option>Capsules</option> | |
| <option>Green Coffee</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Origin Country</label> | |
| <input type="text" class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Flavor Notes</label> | |
| <div class="flex flex-wrap gap-2 mb-2"> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Chocolate</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Nutty</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">Fruity</span> | |
| <span class="flavor-tag px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">+ Add</span> | |
| </div> | |
| <input type="text" placeholder="Add custom flavor notes..." class="w-full p-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-amber-900 mb-1">Upload Photo</label> | |
| <div class="border-2 border-dashed border-amber-300 rounded-lg p-6 text-center"> | |
| <i class="fas fa-camera text-amber-400 text-3xl mb-2"></i> | |
| <p class="text-amber-700">Drag & drop coffee photo here or click to browse</p> | |
| <input type="file" class="hidden"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button class="px-8 py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition font-medium"> | |
| Submit Coffee | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-amber-900 text-amber-100 py-8"> | |
| <div class="container mx-auto px-4 max-w-7xl"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Coffee Connoisseur</h3> | |
| <p class="text-sm">Discover, explore, and review the world's finest coffees.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Explore</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-amber-300">Popular Coffees</a></li> | |
| <li><a href="#" class="hover:text-amber-300">New Arrivals</a></li> | |
| <li><a href="#" class="hover:text-amber-300">Top Rated</a></li> | |
| <li><a href="#" class="hover:text-amber-300">Coffee Guides</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Community</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-amber-300">Write a Review</a></li> | |
| <li><a href="#" class="hover:text-amber-300">Forums</a></li> | |
| <li><a href="#" class="hover:text-amber-300">Meetups</a></li> | |
| <li><a href="#" class="hover:text-amber-300">Leaderboard</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-xl hover:text-amber-300"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| <p class="text-sm">Subscribe to our newsletter for coffee tips and new discoveries.</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-amber-800 mt-8 pt-6 text-sm text-center"> | |
| <p>© 2023 Coffee Connoisseur. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Toggle advanced filters | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const advancedFilterBtn = document.querySelector('.text-amber-600.hover\\:text-amber-800.text-sm.font-medium'); | |
| const filterSection = document.querySelector('.filter-section'); | |
| advancedFilterBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| if (filterSection.style.maxHeight) { | |
| filterSection.style.maxHeight = null; | |
| } else { | |
| filterSection.style.maxHeight = filterSection.scrollHeight + 'px'; | |
| } | |
| }); | |
| // Search input focus | |
| const searchInput = document.querySelector('input[type="text"][placeholder="Search coffees, brands, flavors..."]'); | |
| const searchDropdown = document.querySelector('.search-dropdown'); | |
| searchInput.addEventListener('focus', function() { | |
| searchDropdown.classList.remove('hidden'); | |
| }); | |
| searchInput.addEventListener('blur', function() { | |
| setTimeout(() => { | |
| searchDropdown.classList.add('hidden'); | |
| }, 200); | |
| }); | |
| // Flavor tag selection | |
| const flavorTags = document.querySelectorAll('.flavor-tag'); | |
| flavorTags.forEach(tag => { | |
| tag.addEventListener('click', function() { | |
| this.classList.toggle('bg-amber-100'); | |
| this.classList.toggle('bg-amber-600'); | |
| this.classList.toggle('text-amber-800'); | |
| this.classList.toggle('text-white'); | |
| }); | |
| }); | |
| // Coffee card hover effect | |
| const coffeeCards = document.querySelectorAll('.coffee-card'); | |
| coffeeCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.querySelector('img').style.transform = 'scale(1.05)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.querySelector('img').style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=digpas/coffee-list-ver2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |