haitham/hostpioneers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs

Browse Source
This commit is contained in:
Horus AI
2026-04-24 12:58:02 +02:00
parent 51d7df0f26
commit 9406bdc06b
19 changed files with 7092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/ristorante/indian/index.html
+303
View File
@@ -0,0 +1,303 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maharaja Spice — Indian Restaurant Benalmádena</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg: #0f0a08; --bg-card: #1c1410; --bg-warm: #231a14; --gold: #d4a843; --gold-light: #e8c97a; --red: #c0392b; --maroon: #6b1e1e; --cream: #f5efe6; --text: #e0d5c8; --text-muted: #9a8a78; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
/* DECORATIVE MANDALA PATTERN */
.mandala-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,0.12) 0%, transparent 70%); pointer-events: none; }
/* NAV */
nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
nav.scrolled { background: rgba(15,10,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.15); }
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); font-weight: 700; text-decoration: none; letter-spacing: 0.05em; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; }
.nav-links a:hover { color: var(--gold); }
.nav-cta { background: var(--maroon); color: var(--gold); padding: 0.5rem 1.2rem; border: 1px solid var(--gold); border-radius: 2px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-cta:hover { background: var(--gold); color: var(--bg); text-decoration: none; }
/* HERO */
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,10,8,0.3) 0%, rgba(15,10,8,0.85) 65%, var(--bg) 100%), url('https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=1600&q=80') center/cover no-repeat; }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
.hero-ornament { color: var(--gold); font-size: 1.5rem; margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
.hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1.0; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
.hero-subtitle { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
.btn-primary { background: var(--gold); color: var(--bg); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgba(212,168,67,0.4); color: var(--gold); padding: 0.9rem 2.2rem; border-radius: 2px; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; display: inline-block; }
.btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,67,0.08); text-decoration: none; }
section { padding: 6rem 2rem; }
.container { max-width: 1100px; margin: 0 auto; }
.section-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 0.5rem; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 700; }
.section-title em { font-style: italic; color: var(--gold); }
/* THALI / SPECIALTIES */
#specialties { background: var(--bg-card); }
.thali-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
.thali-card { background: var(--bg); border: 1px solid rgba(212,168,67,0.12); border-radius: 8px; overflow: hidden; transition: border-color 0.3s; }
.thali-card:hover { border-color: var(--gold); }
.thali-card img { width: 100%; height: 180px; object-fit: cover; }
.thali-info { padding: 1.2rem; }
.thali-info .thali-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 0.3rem; font-weight: 700; }
.thali-info .thali-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.6; }
.thali-info .thali-price { font-size: 1.05rem; color: var(--gold); font-weight: 700; }
/* MENU */
.menu-section { background: var(--bg-warm); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
.menu-col h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--gold); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(212,168,67,0.2); }
.menu-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.menu-item-name { font-size: 0.9rem; color: var(--text); }
.menu-item-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
.menu-item-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
/* TANDOOR */
#tandoor { background: var(--bg-card); }
.tandoor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.tandoor-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }
.tandoor-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--cream); margin-bottom: 1rem; }
.tandoor-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.7; }
.tandoor-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
.tandoor-item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(212,168,67,0.08); }
.tandoor-item span:first-child { color: var(--text); }
.tandoor-item span:last-child { color: var(--gold); font-weight: 700; }
/* REVIEWS */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.review-card { background: var(--bg-card); border: 1px solid rgba(212,168,67,0.1); border-radius: 8px; padding: 1.5rem; }
.review-card .stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.8rem; }
.review-card .review-text { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.8rem; line-height: 1.6; }
.review-card .review-author { font-size: 0.8rem; color: var(--cream); font-weight: 600; }
/* LOCATION */
#location { background: var(--bg-card); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.hours-table { width: 100%; }
.hours-table tr { border-bottom: 1px solid rgba(212,168,67,0.08); }
.hours-table td { padding: 0.7rem 0; font-size: 0.9rem; }
.hours-table td:first-child { color: var(--text-muted); }
.hours-table td:last-child { color: var(--text); text-align: right; }
.address-block { margin-top: 2rem; }
.address-block p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.9; }
.address-block strong { color: var(--gold); font-weight: 400; }
/* FOOTER */
footer { background: #080504; padding: 4rem 2rem 2rem; text-align: center; }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: var(--gold); font-weight: 700; margin-bottom: 0.5rem; }
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1rem; }
footer p { font-size: 0.8rem; color: var(--text-muted); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
.nav-links { display: none; }
.menu-cols, .tandoor-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
.tandoor-items { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav id="navbar">
<a href="#" class="nav-logo">Maharaja Spice</a>
<ul class="nav-links">
<li><a href="#specialties">Specialties</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#tandoor">Tandoor</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#location" class="nav-cta">Book a Table</a></li>
</ul>
</nav>
<section class="hero">
<div class="hero-bg"></div>
<div class="mandala-top"></div>
<div class="hero-content">
<div class="hero-ornament">✦ ✦ ✦</div>
<h1>Maharaja Spice</h1>
<p class="hero-subtitle">Royal Indian Cuisine · Benalmádena Costa</p>
<p class="hero-desc">Experience the flavours of India, reimagined. From the smoky clay ovens of the Punjab to the aromatic spice markets of Kerala — every dish tells a story of tradition, passion, and the finest ingredients.</p>
<div class="hero-btns">
<a href="#menu" class="btn-primary">Explore Menu</a>
<a href="#location" class="btn-ghost">Book a Table</a>
</div>
</div>
</section>
<section id="specialties">
<div class="container">
<p class="section-tag">Chef's Specialties</p>
<h2 class="section-title">Signature <em>Dishes</em></h2>
<div class="thali-grid">
<div class="thali-card reveal">
<img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=500&q=75" alt="Butter Chicken" loading="lazy">
<div class="thali-info">
<div class="thali-name">Butter Chicken</div>
<div class="thali-desc">Tandoor-charred chicken in a velvety tomato-cream sauce with kashmiri spices. Our most loved dish for 15 years.</div>
<div class="thali-price">€14.50</div>
</div>
</div>
<div class="thali-card reveal">
<img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=500&q=75" alt="Lamb Rogan Josh" loading="lazy">
<div class="thali-info">
<div class="thali-name">Lamb Rogan Josh</div>
<div class="thali-desc">Slow-braised lamb shoulder in aromatic Kashmiri chilli and yogurt gravy. A dish fit for royalty.</div>
<div class="thali-price">€16.50</div>
</div>
</div>
<div class="thali-card reveal">
<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&q=75" alt="Biryani" loading="lazy">
<div class="thali-info">
<div class="thali-name">Hyderabadi Biryani</div>
<div class="thali-desc">Fragrant basmati rice layered with spiced meat, saffron, and fried onions. Cooked dum-style in sealed clay pot.</div>
<div class="thali-price">€15.00</div>
</div>
</div>
</div>
</div>
</section>
<section id="menu" class="menu-section">
<div class="container">
<p class="section-tag">Our Menu</p>
<h2 class="section-title">Taste of <em>India</em></h2>
<div class="menu-cols">
<div class="menu-col">
<h3>Starters</h3>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Samosa Chaat</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Crispy samosas, chickpea curry, tamarind, yogurt</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Paneer Tikka</span><span class="menu-item-price">€9.50</span></div><div class="menu-item-desc">Chargrilled cottage cheese, mint chutney</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Onion Bhaji</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Crispy onion fritters, mango chutney</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka</span><span class="menu-item-price">€10.00</span></div><div class="menu-item-desc">Tandoor-grilled chicken, seekh chutney</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Sheek Kebab</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Minced lamb, coriander, ginger, charcoal grill</div></div>
</div>
<div class="menu-col">
<h3>Curries</h3>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Chicken Tikka Masala</span><span class="menu-item-price">€13.50</span></div><div class="menu-item-desc">Tomato cream sauce, kashmiri spices</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Lamb Rogan Josh</span><span class="menu-item-price">€15.50</span></div><div class="menu-item-desc">Slow-braised lamb, Kashmiri chilli</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Palak Paneer</span><span class="menu-item-price">€12.00</span></div><div class="menu-item-desc">Spinach curry, fresh paneer, garlic, cumin</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Dal Makhani</span><span class="menu-item-price">€11.00</span></div><div class="menu-item-desc">Black lentils, butter, cream — slow-cooked overnight</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Prawn Curry</span><span class="menu-item-price">€16.50</span></div><div class="menu-item-desc">Tiger prawns, coconut, curry leaf, mustard seed</div></div>
</div>
<div class="menu-col">
<h3>Breads & Rice</h3>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Garlic Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Tandoor bread, fresh garlic, butter</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Butter Naan</span><span class="menu-item-price">€4.00</span></div><div class="menu-item-desc">Soft leavened bread, clarified butter</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Cheese Naan</span><span class="menu-item-price">€5.00</span></div><div class="menu-item-desc">Stuffed with cheddar and paneer</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Keema Naan</span><span class="menu-item-price">€6.00</span></div><div class="menu-item-desc">Stuffed with spiced minced lamb</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Basmati Rice</span><span class="menu-item-price">€3.50</span></div><div class="menu-item-desc">Fragrant long-grain, steamed</div></div>
<div class="menu-item"><div class="menu-item-header"><span class="menu-item-name">Saffron Biryani</span><span class="menu-item-price">€7.00</span></div><div class="menu-item-desc">Basmati, saffron, fried onions</div></div>
</div>
</div>
</div>
</section>
<section id="tandoor">
<div class="container">
<div class="tandoor-grid">
<div class="tandoor-img reveal">
<img src="https://images.unsplash.com/photo-1596797038530-2c107229654b?w=800&q=80" alt="Tandoor oven" loading="lazy">
</div>
<div class="tandoor-text reveal">
<p class="section-tag">From the Clay Oven</p>
<h3>The Heart of Indian Cooking</h3>
<p>Our tandoor is a traditional Indian clay oven, burning at over 450°C. It gives our breads their distinctive char, keeps our meats impossibly tender inside, and fills the restaurant with the irresistible aroma of saffron, charcoal, and roasting spices.</p>
<p>Every morning our kitchen prepares fresh dough and marinates meats in our house spice blend — a recipe passed down three generations.</p>
<div class="tandoor-items">
<div class="tandoor-item"><span>Tandoori Chicken</span><span>€13.00</span></div>
<div class="tandoor-item"><span>Seekh Kebab</span><span>€12.00</span></div>
<div class="tandoor-item"><span>Paneer Tikka</span><span>€11.00</span></div>
<div class="tandoor-item"><span>Garlic Naan</span><span>€4.00</span></div>
<div class="tandoor-item"><span>Chicken Tikka</span><span>€13.50</span></div>
<div class="tandoor-item"><span>Lamb Chops</span><span>€16.00</span></div>
</div>
</div>
</div>
</div>
</section>
<section id="reviews">
<div class="container">
<p class="section-tag">Reviews</p>
<h2 class="section-title">What Our <em>Guests</em> Say</h2>
<div class="reviews-grid">
<div class="review-card reveal">
<div class="stars">★★★★★</div>
<p class="review-text">"The biryani is the best I've had outside India. Fragrant, perfectly spiced, the rice grains are separate and fluffy. The tandoori chicken had that authentic charcoal flavour. Truly exceptional."</p>
<div class="review-author">— Priya S., Google</div>
</div>
<div class="review-card reveal">
<div class="stars">★★★★★</div>
<p class="review-text">"We eat here every week. The butter chicken is consistently perfect — creamy, spiced just right, generous portions. The staff always remembers us. Feels like a home from home."</p>
<div class="review-author">— Michael R., TripAdvisor</div>
</div>
<div class="review-card reveal">
<div class="stars">★★★★★</div>
<p class="review-text">"The lamb rogan josh transported me straight to Kashmir. Slow-braised to perfection, falling off the bone. The ambiance is warm and the service is impeccable. A real find."</p>
<div class="review-author">— Anna K., TheFork</div>
</div>
</div>
</div>
</section>
<section id="location">
<div class="container">
<p class="section-tag">Visit Us</p>
<h2 class="section-title">Find Your Way to <em>Maharaja Spice</em></h2>
<div class="info-grid">
<div class="reveal">
<h3 style="font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
<table class="hours-table">
<tr><td>Monday — Thursday</td><td>18:00 — 23:00</td></tr>
<tr><td>Friday — Saturday</td><td>18:00 — 00:00</td></tr>
<tr><td>Sunday</td><td>13:00 — 22:00</td></tr>
</table>
<div class="address-block">
<p><strong>📍 Address</strong></p>
<p>Av. Antonio Machado, 116<br>29630 Benalmádena Costa<br>Spain</p>
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
<p>+34 952 569 012<br>info@maharajaspice.es</p>
</div>
</div>
<div class="reveal">
<div style="border-radius:8px;overflow:hidden;border:1px solid rgba(212,168,67,0.2);">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.0!2d-4.57!3d36.60!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" width="100%" height="340" style="border:0;display:block;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</section>
<footer>
<p class="footer-logo">Maharaja Spice</p>
<p class="footer-tagline">Royal Indian Cuisine · Benalmádena Costa</p>
<p>Av. Antonio Machado, 116 · 29630 Benalmádena · +34 952 569 012</p>
<p style="margin-top:1rem;opacity:0.4;">© 2026 Maharaja Spice. All rights reserved.</p>
</footer>
<script>
const nav = document.getElementById('navbar');
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', window.scrollY > 60));
document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if(t) t.scrollIntoView({behavior:'smooth',block:'start'}); }); });
const revealEls = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(entries => entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), {threshold:0.1});
revealEls.forEach(el => observer.observe(el));
</script>
</body>
</html>