Spaces:
Running
Running
| <html lang="sl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Premium Naravni Med in Čebelarski Izdelki | Čebelarstvo Cigoj</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .aspect-w-1 { | |
| position: relative; | |
| padding-bottom: 100%; | |
| } | |
| .aspect-h-1 { | |
| position: relative; | |
| padding-bottom: 100%; | |
| } | |
| .aspect-w-1 > * { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .group:hover .group-hover\:opacity-75 { | |
| opacity: 0.75; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-amber-800 text-white shadow-md sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4 md:justify-start md:space-x-10"> | |
| <div class="flex justify-start lg:w-0 lg:flex-1"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="hexagon" class="text-amber-300"></i> | |
| <h1 class="text-xl font-bold">Čebelarstvo Cigoj</h1> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-10"> | |
| <a href="#" class="text-base font-medium text-white hover:text-amber-200">Domov</a> | |
| <a href="#" class="text-base font-medium text-white hover:text-amber-200">Izdelki</a> | |
| <a href="#" class="text-base font-medium text-white hover:text-amber-200">O nas</a> | |
| <a href="#" class="text-base font-medium text-white hover:text-amber-200">Kontakt</a> | |
| </nav> | |
| <div class="flex items-center justify-end md:flex-1 lg:w-0 space-x-6"> | |
| <a href="cart.html" class="relative p-2 rounded-full hover:bg-amber-700 transition" id="cart-button"> | |
| <i data-feather="shopping-cart"></i> | |
| <span id="cart-count" class="hidden absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </a> | |
| <a href="admin_login.php" class="text-white hover:text-amber-200 px-3 py-2 rounded">Admin</a> | |
| <button class="md:hidden p-2 rounded-full hover:bg-amber-700 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Banner --> | |
| <section class="bg-gradient-to-br from-amber-50 to-amber-100 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center"> | |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left"> | |
| <h2 class="text-4xl tracking-tight font-extrabold text-amber-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Naravni cvetni prahovi</span> | |
| </h2> | |
| <p class="mt-3 text-lg text-amber-800 sm:mt-5 sm:text-xl sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Izjemna superhrana direktno iz narave, bogata z vitamini in minerali. | |
| </p> | |
| <p class="mt-3 text-2xl font-bold text-amber-700">Že od 5€</p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg shadow-sm text-white bg-amber-600 hover:bg-amber-700 transition"> | |
| Oglejte si ponudbo | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> | |
| <img src="https://static.photos/nature/640x360/42" alt="Cvetni prah" class="object-cover rounded-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12" data-aos="fade-up">Priljubljeni izdelki</h2> | |
| <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="100" data-product-id="1"> | |
| <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none"> | |
| <img src="https://static.photos/nature/320x240/101" alt="Cvetni prah 50g" class="w-full h-full object-center object-cover lg:w-full lg:h-full"> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <div> | |
| <h3 class="text-lg text-amber-900 font-bold"> | |
| <a href="#"> | |
| <span aria-hidden="true" class="absolute inset-0"></span> | |
| Cvetni prah 50g | |
| </a> | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500">100g</p> | |
| </div> | |
| <p class="text-lg font-bold text-amber-700">4,50€</p> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-2"> | |
| <button class="w-full bg-amber-100 hover:bg-amber-200 text-amber-800 py-2 px-2 rounded text-sm flex items-center justify-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> <span>Ogled</span> | |
| </button> | |
| <button class="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 px-2 rounded text-sm flex items-center justify-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> <span>V košarico</span> | |
| </button> | |
| </div> | |
| <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"> | |
| RAZPRODAJA! | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="https://static.photos/nature/320x240/102" alt="Balzam za ustnice" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Balzam za ustnice iz čebeljega voska</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">2,50€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="sale-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"> | |
| RAZPRODAJA! | |
| </div> | |
| <img src="https://static.photos/nature/320x240/103" alt="Cvetni prah 100g" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Cvetni prah 100g</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">7,00€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="sale-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"> | |
| RAZPRODAJA! | |
| </div> | |
| <img src="https://static.photos/nature/320x240/104" alt="Balzam za ustnice" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Balzam za ustnice iz čebeljega voska</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">2,50€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 font-medium transition"> | |
| Vsi izdelki <i data-feather="chevron-right" class="ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-16 bg-amber-50"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right"> | |
| <img src="https://static.photos/nature/640x360/105" alt="Nov čebelnjak" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12" data-aos="fade-left"> | |
| <h2 class="text-3xl font-bold text-amber-900 mb-4">Čebelarstvo Cigoj gradi nov čebelnjak!</h2> | |
| <p class="text-lg text-amber-800 mb-6"> | |
| Z veseljem sporočamo, da gradimo nov čebelnjak! Korak naprej za boljše pogoje za naše čebele in kakovostnejše pridelke iz domače narave. | |
| </p> | |
| <p class="text-amber-800 mb-6"> | |
| Hvala vsem, ki nas spremljate in podpirate. | |
| </p> | |
| <a href="#" class="text-amber-700 hover:text-amber-900 font-medium inline-flex items-center transition"> | |
| Preberite več <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Best Sellers --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-amber-900 mb-12" data-aos="fade-up">Prodajne uspešnice</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="https://static.photos/nature/320x240/106" alt="Balzam za ustnice" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Balzam za ustnice iz čebeljega voska</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">2,50€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="sale-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"> | |
| RAZPRODAJA! | |
| </div> | |
| <img src="https://static.photos/nature/320x240/107" alt="Balzam za ustnice" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Balzam za ustnice iz čebeljega voska</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">2,50€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-white rounded-lg overflow-hidden shadow-md relative transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="sale-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"> | |
| RAZPRODAJA! | |
| </div> | |
| <img src="https://static.photos/nature/320x240/108" alt="Cvetni prah 100g" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-amber-900">Cvetni prah 100g</h3> | |
| <p class="text-amber-700 font-bold text-xl mb-3">7,00€</p> | |
| <div class="flex justify-between"> | |
| <button class="bg-amber-100 hover:bg-amber-200 text-amber-800 px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="eye" class="mr-1 w-4 h-4"></i> Hitri ogled | |
| </button> | |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm flex items-center transition"> | |
| <i data-feather="shopping-cart" class="mr-1 w-4 h-4"></i> V košarico | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 font-medium transition"> | |
| Vse prodajne uspešnice <i data-feather="chevron-right" class="ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-amber-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Čebelarstvo Cigoj</h3> | |
| <p class="text-amber-200">Kakovostni naravni izdelki iz čebeljega panja.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Izdelki</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Med</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Cvetni prah</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Čebelji vosek</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Balzami</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Povezave</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">O nas</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Pogoji poslovanja</a></li> | |
| <li><a href="#" class="text-amber-200 hover:text-white transition">Varstvo zasebnosti</a></li> | |
| <li><a href="backend.php" class="text-amber-200 hover:text-white transition">Administracija</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Kontakt</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="mr-2"></i> info@cebelarstvo-cigoj.si | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="mr-2"></i> +386 40 123 456 | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="map-pin" class="mr-2"></i> Čebelarska ulica 1, 1000 Ljubljana | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-amber-800 mt-8 pt-8 text-center text-amber-200"> | |
| <p>© 2023 Čebelarstvo Cigoj. Vse pravice pridržane.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Cart functions | |
| function addToCart(productId, productName, productPrice) { | |
| let cart = JSON.parse(localStorage.getItem('cart')) || []; | |
| let found = false; | |
| cart.forEach(item => { | |
| if(item.id === productId) { | |
| item.quantity++; | |
| found = true; | |
| } | |
| }); | |
| if(!found) { | |
| cart.push({ | |
| id: productId, | |
| name: productName, | |
| price: productPrice, | |
| quantity: 1 | |
| }); | |
| } | |
| localStorage.setItem('cart', JSON.stringify(cart)); | |
| updateCartCount(); | |
| } | |
| function updateCartCount() { | |
| const cart = JSON.parse(localStorage.getItem('cart')) || []; | |
| const count = cart.reduce((total, item) => total + item.quantity, 0); | |
| const cartCount = document.getElementById('cart-count'); | |
| cartCount.textContent = count; | |
| if(count > 0) { | |
| cartCount.classList.remove('hidden'); | |
| } else { | |
| cartCount.classList.add('hidden'); | |
| } | |
| } | |
| // Initialize cart count on page load | |
| updateCartCount(); | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| </script> | |
| <script src="cart-fix.js"></script> | |
| </body> | |
| </html> | |