Prompt Details
Model
(gemini-3.0-flash)
Token size
979
Example input
[Project Name]: VoltDrink
[What it does]: Organic Energy
[Target User]: Athletes
[Key Functionality]: Cart & Checkout Simulation
[Visual Vibe]: High-Energy Green
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoltDrink | Organic Performance</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
volt: '#32FF00',
dark: '#0A0A0A',
}
}
}
}
</script>
<style>
.glow-hover:hover { box-shadow: 0 0 20px rgba(50, 255, 0, 0.6); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #32FF00; border-radius: 10px; }
</style>
</head>
<body class="bg-dark text-white font-sans antialiased">
<nav class="sticky top-0 z-50 bg-dark/90 backdrop-blur-md border-b border-volt/20 p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-black tracking-tighter text-volt italic">VOLT<span class="text-white">DRINK</span></h1>
<div class="flex items-center gap-6">
<button onclick="toggleCart()" class="relative hover:text-volt transition">
<i class="fa-solid fa-cart-shopping text-xl"></i>
<span id="cart-count" class="absolute -top-2 -right-2 bg-volt text-black text-xs font-bold px-1.5 rounded-full">0</span>
</button>
<div id="user-display" class="hidden md:block text-sm font-medium border-l border-gray-700 pl-6">
<span id="welcome-msg">Athlete Guest</span>
</div>
</div>
</div>
</nav>
<header class="relative h-[70vh] flex items-center overflow-hidden">
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=2070" class="absolute inset-0 w-full h-full object-cover opacity-40" alt="Athlete training">
<div class="container mx-auto px-6 relative z-10">
<span class="bg-volt text-black px-3 py-1 font-bold text-sm uppercase tracking-widest">Organic Fuel</span>
<h2 class="text-6xl md:text-8xl font-black italic mt-4 mb-6">RAW POWER.<br><span class="text-volt">CLEAN ENERGY.</span></h2>
<p class="max-w-md text-gray-300 text-lg mb-8">No jitters. No crash. Just pure organic electrolyte-infused performance for elite athletes.</p>
<button onclick="scrollToProducts()" class="bg-volt text-black px-8 py-4 font-bold rounded-full glow-hover transition-all transform hover:scale-105">SHOP THE COLLECTION</button>
</div>
</header>
<main id="products" class="container mx-auto py-20 px-6">
<h3 class="text-3xl font-bold mb-12 flex items-center gap-4">
<span class="h-1 w-12 bg-volt"></span> FEATURED FORMULAS
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-[#111] border border-gray-800 p-6 rounded-2xl hover:border-volt/50 transition group">
<img src="https://images.unsplash.com/photo-1622467827417-bbe2237067a9?q=80&w=1887" class="w-full h-64 object-cover rounded-xl mb-6 group-hover:scale-105 transition duration-500" alt="Volt Green">
<h4 class="text-xl font-bold mb-2">Volt Classic (Lime)</h4>
<p class="text-gray-400 text-sm mb-4">100% Organic Matcha + Yerba Mate base.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-black text-volt">$4.99</span>
<button onclick="addToCart('Volt Classic', 4.99)" class="bg-white text-black p-3 rounded-full hover:bg-volt transition"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
<div class="bg-[#111] border border-gray-800 p-6 rounded-2xl hover:border-volt/50 transition group">
<img src="https://images.unsplash.com/photo-1551610226-557580492115?q=80&w=1776" class="w-full h-64 object-cover rounded-xl mb-6 group-hover:scale-105 transition duration-500" alt="Volt Blue">
<h4 class="text-xl font-bold mb-2">Nitro Recovery</h4>
<p class="text-gray-400 text-sm mb-4">Post-workout electrolytes with Baobab.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-black text-volt">$5.49</span>
<button onclick="addToCart('Nitro Recovery', 5.49)" class="bg-white text-black p-3 rounded-full hover:bg-volt transition"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
<div class="bg-[#111] border border-gray-800 p-6 rounded-2xl hover:border-volt/50 transition group">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=1840" class="w-full h-64 object-cover rounded-xl mb-6 group-hover:scale-105 transition duration-500" alt="Volt Red">
<h4 class="text-xl font-bold mb-2">Primal Focus</h4>
<p class="text-gray-400 text-sm mb-4">Lion's Mane Mushroom & Beetroot.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-black text-volt">$5.99</span>
<button onclick="addToCart('Primal Focus', 5.99)" class="bg-white text-black p-3 rounded-full hover:bg-volt transition"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</div>
</main>
<div id="cart-sidebar" class="fixed inset-y-0 right-0 w-80 bg-black border-l border-volt/30 transform translate-x-full transition-transform duration-300 z-[60] p-6">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold italic">YOUR STACK</h2>
<button onclick="toggleCart()" class="text-gray-400 hover:text-white"><i class="fa-solid fa-xmark text-2xl"></i></button>
</div>
<div id="cart-items" class="space-y-4 mb-8 h-[60vh] overflow-y-auto">
</div>
<div class="border-t border-gray-800 pt-6">
<div class="flex justify-between text-xl font-bold mb-4">
<span>Total:</span>
<span id="cart-total" class="text-volt">$0.00</span>
</div>
<button onclick="checkout()" class="w-full bg-volt text-black py-4 font-black tracking-widest hover:bg-white transition">CHECKOUT NOW</button>
</div>
</div>
<footer class="bg-[#050505] border-t border-gray-900 py-12 text-center text-gray-500">
<p>© 2024 VoltDrink Labs. Built for the Unstoppable.</p>
</footer>
<script>
// --- Simulation Logic ---
let cart = JSON.parse(localStorage.getItem('volt_cart')) || [];
function updateUI() {
const cartItems = document.getElementById('cart-items');
const cartCount = document.getElementById('cart-count');
const cartTotal = document.getElementById('cart-total');
cartItems.innerHTML = '';
let total = 0;
cart.forEach((item, index) => {
total += item.price;
cartItems.innerHTML += `
<div class="flex justify-between items-center bg-[#111] p-3 rounded-lg border border-gray-800">
<div>
<p class="font-bold text-sm">${item.name}</p>
<p class="text-volt text-xs">$${item.price}</p>
</div>
<button onclick="removeItem(${index})" class="text-gray-600 hover:text-red-500"><i class="fa-solid fa-trash"></i></button>
</div>
`;
});
cartCount.innerText = cart.length;
cartTotal.innerText = `$${total.toFixed(2)}`;
localStorage.setItem('volt_cart', JSON.stringify(cart));
}
function addToCart(name, price) {
cart.push({ name, price });
updateUI();
toggleCart(true);
}
function removeItem(index) {
cart.splice(index, 1);
updateUI();
}
function toggleCart(forceOpen = false) {
const sidebar = document.getElementById('cart-sidebar');
if (forceOpen) sidebar.classList.remove('translate-x-full');
else sidebar.classList.toggle('translate-x-full');
}
function scrollToProducts() {
document.getElementById('products').scrollIntoView({ behavior: 'smooth' });
}
function checkout() {
if(cart.length === 0) return alert("Your cart is empty, athlete.");
alert("Order Simulation Successful! Fuel is on the way.");
cart = [];
updateUI();
toggleCart();
}
// Initialize UI
updateUI();
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
5
Favorites
112
Views
GEMINI-3.0-FLASH
Launch a professional, full-stack website in minutes—even from your phone. This premium prompt takes you from "Idea" to "Hosting Your Own Website!" It generates a high-conversion, single-file website using Modular Copy-Paste Blocks, making it the only system perfectly optimized for both Desktop and Mobile users.
What’s Inside:
Sequential Assembly: Code is delivered in labeled blocks to prevent errors and clipboard limits.
Simulation Mode: Built-in logic for Logins and Carts that work
...more
Added over 1 month ago
