Spaces:

BitBean
/

company

Sleeping

App Files Files Community

noranisa commited on Aug 27, 2025

Commit

2afaaa9

verified ·

1 Parent(s): 31c14a2

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +85 -46

templates/index.html CHANGED Viewed

@@ -1,26 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bit & Bean Coffee</title>
-    <!-- 1. HAPUS link ke style.css yang lama -->
-    <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> -->
-    <!-- 2. TAMBAHKAN script Tailwind Play CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- 3. (PENTING) Konfigurasi custom warna dan font langsung di sini -->
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
-                        'brand-yellow': '#F3C13E', // Warna dari logo
-                        'brand-green': '#2E572B',   // Warna dari logo
-                        'brand-brown': '#8A5E2A',   // Warna dari logo
-                        'brand-cream': '#FEFDEE',   // Warna latar belakang
                     },
                     fontFamily: {
                         'sans': ['Poppins', 'sans-serif'],
@@ -30,55 +28,91 @@
         }
     </script>
-    <!-- Import Font Poppins (ini tetap diperlukan) -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
-    <!-- Sedikit style tambahan jika diperlukan -->
-    <style>
-        /* Anda masih bisa menambahkan CSS custom di sini jika ada */
-    </style>
 </head>
-<body class="bg-brand-cream font-sans text-brand-green">
-    <!-- Header -->
-    <header class="container mx-auto p-6 flex justify-between items-center">
-        <!-- Logo atau Nama Brand -->
-        <div class="flex items-center space-x-2">
-            <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Bit & Bean Mini Logo" class="w-10 h-10">
-            <span class="text-2xl font-bold">Bit & Bean</span>
-        </div>
-        <!-- Navigasi -->
-        <nav class="hidden md:flex items-center">
-            <a href="#produk" class="mx-3 text-gray-700 hover:text-brand-brown transition-colors">Produk</a>
-            <a href="#tentang" class="mx-3 text-gray-700 hover:text-brand-brown transition-colors">Tentang Kami</a>
-            <a href="#kontak" class="bg-brand-yellow text-brand-green font-bold py-2 px-5 rounded-full hover:bg-opacity-80 transition-all shadow-sm">
-                Hubungi Kami
             </a>
-        </nav>
     </header>
     <!-- Hero Section -->
-    <main class="container mx-auto text-center py-16 px-6">
-        <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Bit & Bean Logo" class="w-60 h-60 md:w-64 md:h-64 mx-auto mb-8 drop-shadow-lg animate-pulse-slow">
-        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-brand-green">Kode, Kopi, dan Ketenangan.</h2>
-        <p class="text-lg md:text-xl max-w-2xl mx-auto text-brand-brown mb-8">
             Secangkir kopi sempurna untuk menemani setiap baris kodemu. Diseduh untuk para inovator.
         </p>
-        <button class="bg-brand-green text-white font-bold py-3 px-8 rounded-full text-lg hover:scale-105 transform transition-transform shadow-lg">
             Lihat Biji Kopi Kami
-        </button>
     </main>
-    <!-- Fitur Interaktif: Rekomendasi Kopi -->
-    <section id="recommender" class="bg-white py-20">
-        <div class="container mx-auto text-center px-6">
             <h3 class="text-3xl font-bold mb-2">Bingung Pilih Kopi?</h3>
             <p class="text-brand-brown mb-8">Jawab pertanyaan singkat ini dan temukan jodoh kopimu!</p>
-            <div class="max-w-md mx-auto bg-gray-50 p-8 rounded-xl shadow-md">
                 <div class="mb-6 text-left">
                     <label for="time" class="block mb-2 font-semibold text-gray-700">Kapan kamu biasanya ngopi?</label>
                     <select id="time" class="w-full p-3 rounded-lg border-2 border-gray-200 focus:border-brand-yellow focus:ring-0 outline-none transition-all">
@@ -90,12 +124,17 @@
                 <button id="find-coffee-btn" class="bg-brand-yellow text-brand-green font-bold py-3 px-8 rounded-full w-full hover:bg-opacity-90 transition-all text-lg">
                     Temukan Kopi Saya!
                 </button>
-                <div id="result" class="mt-6 p-4 bg-brand-cream rounded-lg text-lg font-semibold hidden text-left transition-all">
-                    <!-- Hasil rekomendasi akan muncul di sini -->
-                </div>
             </div>
         </div>
     </section>
     <!-- Script JavaScript untuk interaktivitas -->
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>

 <!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>Bit & Bean Coffee</title>
+    <!-- Memuat Tailwind CSS melalui CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Konfigurasi custom untuk Tailwind CSS -->
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     colors: {
+                        'brand-yellow': '#F3C13E',
+                        'brand-green': '#2E572B',
+                        'brand-dark-green': '#213f1f',
+                        'brand-brown': '#8A5E2A',
+                        'brand-cream': '#FEFDEE',
                     },
                     fontFamily: {
                         'sans': ['Poppins', 'sans-serif'],
         }
     </script>
+    <!-- Memuat font Poppins dari Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
 </head>
+<body class="bg-brand-cream font-sans text-brand-dark-green">
+    <!-- Header / Navbar -->
+    <header class="bg-brand-cream/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
+        <div class="container mx-auto flex justify-between items-center p-4">
+            <a href="#" class="flex items-center space-x-2">
+                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Bit & Bean Logo" class="w-10 h-10">
+                <span class="text-xl font-bold text-brand-green">Bit & Bean</span>
             </a>
+            <nav class="hidden md:flex items-center space-x-6 text-lg">
+                <a href="#produk" class="hover:text-brand-brown transition-colors">Produk</a>
+                <a href="#recommender" class="hover:text-brand-brown transition-colors">Rekomendasi</a>
+                <a href="#" class="bg-brand-green text-white font-semibold py-2 px-5 rounded-full hover:bg-brand-dark-green transition-colors shadow-sm">
+                    Hubungi Kami
+                </a>
+            </nav>
+            <!-- Tambahkan tombol menu mobile jika diperlukan nanti -->
+        </div>
     </header>
     <!-- Hero Section -->
+    <main class="container mx-auto text-center py-20 md:py-28 px-6">
+        <h1 class="text-4xl md:text-6xl font-bold mb-4 text-brand-green">Kode, Kopi, dan Ketenangan.</h1>
+        <p class="text-lg md:text-xl max-w-2xl mx-auto text-brand-brown mb-10">
             Secangkir kopi sempurna untuk menemani setiap baris kodemu. Diseduh untuk para inovator.
         </p>
+        <a href="#produk" class="bg-brand-yellow text-brand-green font-bold py-3 px-8 rounded-full text-lg hover:scale-105 transform transition-transform shadow-lg">
             Lihat Biji Kopi Kami
+        </a>
     </main>
+    <!-- Product Menu Section -->
+    <section id="produk" class="bg-white py-20">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-4xl font-bold text-brand-green">Pilihan Biji Kopi Terbaik</h2>
+                <p class="text-brand-brown mt-2">Dikelola melalui panel admin, ditampilkan secara dinamis.</p>
+            </div>
+            <!-- Product Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <!-- Jinja2 loop untuk menampilkan data produk dari Flask -->
+                {% for product in products %}
+                <div class="bg-brand-cream rounded-xl shadow-lg overflow-hidden flex flex-col transform hover:-translate-y-2 transition-transform duration-300">
+                    <!-- Gambar Produk -->
+                    <!-- TIPS: Upload gambar produk Anda (misal: sumatra.jpg) ke folder static/img/ -->
+                    <!-- Lalu ganti div di bawah ini dengan tag img: -->
+                    <!-- <img src="{{ url_for('static', filename='img/' + product.image) }}" alt="{{ product.name }}" class="w-full h-48 object-cover"> -->
+                    <div class="w-full h-48 bg-brand-green flex items-center justify-center text-white/50 text-center p-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        (Gambar untuk {{ product.name }})
+                    </div>
+                    <div class="p-6 flex-grow flex flex-col">
+                        <h3 class="text-2xl font-bold text-brand-green">{{ product.name }}</h3>
+                        <p class="text-brand-brown mt-2 flex-grow">{{ product.description }}</p>
+                        <div class="mt-6 pt-4 border-t border-brand-green/20 flex justify-between items-center">
+                            <span class="text-2xl font-bold text-brand-green">{{ product.price }}</span>
+                            <!-- Menampilkan QR Code yang di-generate oleh Flask -->
+                            <img src="data:image/png;base64,{{ product.qr_code }}" alt="QR Code for {{ product.name }}" class="w-20 h-20 border-4 border-white rounded-md shadow-sm">
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+    <!-- Coffee Recommender Section -->
+    <section id="recommender" class="bg-brand-cream py-20">
+         <div class="container mx-auto text-center px-6">
             <h3 class="text-3xl font-bold mb-2">Bingung Pilih Kopi?</h3>
             <p class="text-brand-brown mb-8">Jawab pertanyaan singkat ini dan temukan jodoh kopimu!</p>
+            <div class="max-w-md mx-auto bg-white p-8 rounded-xl shadow-md">
                 <div class="mb-6 text-left">
                     <label for="time" class="block mb-2 font-semibold text-gray-700">Kapan kamu biasanya ngopi?</label>
                     <select id="time" class="w-full p-3 rounded-lg border-2 border-gray-200 focus:border-brand-yellow focus:ring-0 outline-none transition-all">
                 <button id="find-coffee-btn" class="bg-brand-yellow text-brand-green font-bold py-3 px-8 rounded-full w-full hover:bg-opacity-90 transition-all text-lg">
                     Temukan Kopi Saya!
                 </button>
+                <div id="result" class="mt-6 p-4 bg-brand-cream rounded-lg text-lg font-semibold hidden text-left transition-all"></div>
             </div>
         </div>
     </section>
+    <!-- Footer -->
+    <footer class="bg-brand-green text-white/80 py-8">
+        <div class="container mx-auto text-center">
+            <p>&copy; 2024 Bit & Bean Coffee. Dibuat dengan Flask & Tailwind CSS.</p>
+        </div>
+    </footer>
     <!-- Script JavaScript untuk interaktivitas -->
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>