<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitcoin Coffee — Café & Crypto</title>
<style>
/* Estilos básicos de respaldo para asegurar el diseño */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #0d0d0d; color: #fff; margin: 0; padding: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #141414; }
nav a { color: #fff; margin: 0 15px; text-decoration: none; }
.ticker { background-color: #f7931a; color: #000; padding: 10px; overflow: hidden; white-space: nowrap; font-weight: bold; }
.hero { text-align: center; padding: 60px 20px; }
.btn { background-color: #f7931a; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 5px; font-weight: bold; display: inline-block; margin: 10px; }
#menu { padding: 60px 20px; text-align: center; }
.menu-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 40px auto 0; }
.menu-item { background-color: #1a1a1a; padding: 20px; border-radius: 12px; border: 1px solid #333; position: relative; text-align: left; }
.menu-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; background-color: #222; }
.badge { position: absolute; top: 15px; right: 15px; background-color: #f7931a; color: #000; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.crypto-type { color: #f7931a; font-weight: bold; margin: 5px 0; }
.description { color: #aaa; font-size: 14px; min-height: 60px; }
.price { font-size: 18px; font-weight: bold; color: #fff; margin-top: 15px; }
.add-btn { background-color: #222; color: #fff; border: 1px solid #444; padding: 8px 16px; border-radius: 5px; cursor: pointer; float: right; margin-top: -35px; }
.add-btn:hover { background-color: #f7931a; color: #000; }
#history, #pago, #contacto { padding: 60px 20px; max-width: 800px; margin: 0 auto; text-align: center; }
footer { background-color: #141414; padding: 40px 20px; text-align: center; color: #666; font-size: 14px; }
footer a { color: #aaa; margin: 0 10px; text-decoration: none; }
.cart-sidebar { position: fixed; right: -400px; top: 0; width: 350px; height: 100%; background-color: #141414; box-shadow: -5px 0 15px rgba(0,0,0,0.5); padding: 20px; transition: 0.3s; z-index: 1000; }
</style>
</head>
<body>
<header>
<div class="logo">Bitcoin Coffee</div>
<nav>
<a href="#inicio">Inicio</a>
<a href="#menu">Menú</a>
<a href="#pago">Precios</a>
<a href="#history">Nosotros</a>
<a href="#contacto">Contacto</a>
</nav>
<a href="#menu" class="btn">Ordenar ₿</a>
</header>
<div class="ticker">
₿ BTC $69,420 ▲ 3.2% Ξ ETH $3,850 ▲ 1.8% ◎ SOL $182 ▼ 0.5% ✦ BNB $410 ▲ 2.1% ✺ ADA $0.62 ▲ 4.0% ⬡ DOGE $0.18 ▼ 1.2% ⬟ MATIC $0.95 ▲ 5.3%
</div>
<section class="hero" id="inicio">
<p>☕ Est. 2024 · Decentralized Coffee</p>
<h1>El Café que<br>HODL-arás<br>para siempre</h1>
<p>Premium coffee meets blockchain culture. Paga con BTC, ETH, SOL y más. Cada sorbo es un bloque en tu cadena.</p>
<a href="#menu" class="btn">Ver Menú ☕</a>
<a href="#history" class="btn" style="background-color: #222; border: 1px solid #444;">Nuestra Historia</a>
<div style="margin-top: 40px; display: flex; justify-content: center; gap: 40px;">
<div><strong>21M</strong><br><span style="color:#666;">Tazas Máximas</span></div>
<div><strong>5★</strong><br><span style="color:#666;">Rating On-Chain</span></div>
<div><strong>0%</strong><br><span style="color:#666;">Fees de Gas</span></div>
</div>
</section>
<section id="menu">
<h2>— Nuestro Menú —</h2>
<h3>Elige tu Bloque</h3>
<p>Cada bebida inspirada en el mundo crypto. Paga como un Satoshi.</p>
<div class="menu-container">
<div class="menu-item">
<span class="badge">🔥 Más Vendido</span>
<img src="<img src="https://images.unsplash.com/photo-1510972527409-cca19de31749?w=500" alt="Bitcoin Espresso">" alt="Bitcoin Espresso">
<h2>Bitcoin Espresso</h2>
<p class="crypto-type">₿ BTC</p>
<p class="description">Concentrado y poderoso como el rey de las cryptos. Arte latte con el símbolo ₿. Origen etíope de altura.</p>
<p class="price">0.00005 BTC</p>
<button class="add-btn">+ Añadir</button>
</div>
<div class="menu-item">
<span class="badge">⚡ Smart Choice</span>
<img src="coldbrew.png" alt="Ethereum Cold Brew">
<h2>Ethereum Cold Brew</h2>
<p class="crypto-type">Ξ ETH</p>
<p class="description">Largo y refrescante como una transacción en la red Ethereum. 24h de extracción en frío, notas de chocolate.</p>
<p class="price">0.0015 ETH</p>
<button class="add-btn">+ Añadir</button>
</div>
<div class="menu-item">
<span class="badge">🌐 DeFi Pick</span>
<img src="latte.png" alt="Blockchain Latte">
<h2>Blockchain Latte</h2>
<p class="crypto-type">◎ SOL</p>
<p class="description">Suave y conectado. Arte latte con patrón de red blockchain. Leche de avena, espresso doble, vainilla cripto.</p>
<p class="price">1.2 SOL</p>
<button class="add-btn">+ Añadir</button>
</div>
<div class="menu-item">
<span class="badge">🕶️ Anónimo</span>
<img src="cappuccino.png" alt="Satoshi Cappuccino">
<h2>Satoshi Cappuccino</h2>
<p class="crypto-type">₿ BTC</p>
<p class="description">El original. Misterioso como su creador. Espuma perfecta con retrato de Satoshi Nakamoto. Identidad desconocida.</p>
<p class="price">0.00008 BTC</p>
<button class="add-btn">+ Añadir</button>
</div>
<div class="menu-item">
<span class="badge">💎 Diamond Hands</span>
<img src="frappuccino.png" alt="DeFi Frappuccino">
<h2>DeFi Frappuccino</h2>
<p class="crypto-type">⬡ DOGE</p>
<p class="description">To the moon! Crema batida con monedas de oro comestibles y caramelo cripto. El más HODL-able del menú.</p>
<p class="price">420 DOGE</p>
<button class="add-btn">+ Añadir</button>
</div>
<div class="menu-item">
<span class="badge">⚡ Lightning</span>
<img src="americano.png" alt="Lightning Americano">
<h2>Lightning Americano</h2>
<p class="crypto-type">⚡ Lightning</p>
<p class="description">Rapidísimo como la Lightning Network. Pago en microsegundos. El café más rápido del bloque.</p>
<p class="price">500 sats</p>
<button class="add-btn">+ Añadir</button>
</div>
</div>
</section>
<section id="history">
<h2>— Nuestra Historia —</h2>
<h3>Café descentralizado, sin intermediarios</h3>
<p>En 2024, un grupo de entusiastas de Bitcoin y amantes del café de especialidad fundaron Bitcoin Coffee con una misión: crear un espacio donde la cultura crypto y el café premium coexistan en perfecta armonía.</p>
<p>Aceptamos más de 20 criptomonedas. Cada taza es roasted con granos seleccionados a mano de origen único, y cada transacción es inmutable, transparente y deliciosa.</p>
<div style="display: flex; justify-content: center; gap: 20px; margin-top: 30px; font-size: 14px; color: #f7931a;">
<span>☕ Specialty Grade</span>
<span>🔗 On-Chain Verified</span>
<span>🌱 Carbon Neutral</span>
<span>⚡ Lightning Ready</span>
</div>
</section>
<section id="pago">
<h2>— Métodos de Pago —</h2>
<h3>Paga como un Whale</h3>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px;">
<div>₿ Bitcoin</div>
<div>Ξ Ethereum</div>
<div>◎ Solana</div>
<div>✦ BNB</div>
<div>⬡ Dogecoin</div>
<div>⚡ Lightning</div>
<div>✺ Cardano</div>
<div>⬟ Polygon</div>
</div>
</section>
<section id="contacto">
<h2>— Contáctanos —</h2>
<h3>¿Listo para tu primer bloque?</h3>
<form style="display: flex; flex-direction: column; gap: 15px; max-width: 400px; margin: 30px auto 0;">
<input type="text" placeholder="Tu nombre*" required style="padding: 10px; background: #222; border: 1px solid #444; color: #fff; border-radius: 5px;">
<input type="email" placeholder="[email protected]*" required style="padding: 10px; background: #222; border: 1px solid #444; color: #fff; border-radius: 5px;">
<input type="text" placeholder="Tu wallet (opcional) ₿" style="padding: 10px; background: #222; border: 1px solid #444; color: #fff; border-radius: 5px;">
<textarea placeholder="¿Qué te gustaría ordenar o consultar?" rows="4" style="padding: 10px; background: #222; border: 1px solid #444; color: #fff; border-radius: 5px;"></textarea>
<button type="submit" class="btn" style="border: none; cursor: pointer;">Enviar Transacción ⚡</button>
</form>
</section>
<footer>
<p>Bitcoin Coffee</p>
<p>© 2024 Bitcoin