Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs
This commit is contained in:
+466
@@ -0,0 +1,466 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Haitham's Resume Manager</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--sidebar-gray: #f3f3f3;
|
||||||
|
--accent-dark: #1a1a1a;
|
||||||
|
--accent-blue: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resume Styling */
|
||||||
|
.resume-page {
|
||||||
|
width: 850px;
|
||||||
|
min-height: 1100px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||||
|
margin: 2rem auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 280px;
|
||||||
|
background-color: var(--sidebar-gray);
|
||||||
|
padding: 2.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 3.5rem 3rem;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-frame {
|
||||||
|
width: 176px;
|
||||||
|
height: 176px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 10px solid #e2e2e2;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
background: #d1d1d1;
|
||||||
|
position: relative;
|
||||||
|
group: hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-frame img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-edit-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-frame:hover .photo-edit-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-dark);
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--accent-dark);
|
||||||
|
border-bottom: 2px solid var(--accent-dark);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
[contenteditable="true"] {
|
||||||
|
outline: none;
|
||||||
|
border: 1px dashed transparent;
|
||||||
|
transition: border 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[contenteditable="true"]:hover {
|
||||||
|
border: 1px dashed #3b82f6;
|
||||||
|
background-color: rgba(59, 130, 246, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
[contenteditable="true"]:focus {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -9px;
|
||||||
|
top: 6px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #333;
|
||||||
|
border: 3px solid white;
|
||||||
|
border-radius: 9999px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.experience-dot-sub {
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar Styling */
|
||||||
|
.toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 60px;
|
||||||
|
background: #1f2937;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 2rem;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.no-print, .toolbar, .photo-edit-overlay { display: none !important; }
|
||||||
|
body { background: white; padding: 0; margin: 0; }
|
||||||
|
.resume-page { margin: 0; box-shadow: none; width: 100%; }
|
||||||
|
[contenteditable="true"]:hover { border-color: transparent; background: transparent; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="pt-20 pb-10">
|
||||||
|
|
||||||
|
<!-- Toolbar -->
|
||||||
|
<div class="toolbar flex justify-between no-print">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<h1 class="font-bold text-lg text-blue-400">Haitham's Resume Manager</h1>
|
||||||
|
<select id="resumeSelect" class="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 outline-none">
|
||||||
|
<!-- Profiles will load here -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button onclick="createNewProfile()" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
|
||||||
|
<button onclick="saveCurrentProfile()" class="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
|
||||||
|
<button onclick="window.print()" class="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
|
||||||
|
<button onclick="deleteProfile()" class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Resume Container -->
|
||||||
|
<div id="resumeRoot" class="resume-page">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="circle-frame" onclick="document.getElementById('photoInput').click()">
|
||||||
|
<img id="userPhoto" src="Resume.jpg" alt="Haitham Khalifa" onerror="this.src='https://via.placeholder.com/180?text=Photo'">
|
||||||
|
<div class="photo-edit-overlay no-print">EDIT PHOTO</div>
|
||||||
|
<input type="file" id="photoInput" class="hidden" accept="image/*" onchange="handlePhotoUpload(this)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 id="userName" contenteditable="true" class="text-2xl font-black text-center text-gray-900 mb-8 tracking-tighter uppercase leading-none">HAITHAM KHALIFA</h1>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<div class="space-y-3 text-[11px] text-gray-700 mb-10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📞</span>
|
||||||
|
<span contenteditable="true" id="userPhone" class="font-medium">+34 614 821 331</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">✉️</span>
|
||||||
|
<span contenteditable="true" id="userEmail" class="font-medium">Haitham@Khalifa.se</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px] font-bold">in</span>
|
||||||
|
<span contenteditable="true" id="userLinkedin" class="font-medium">linkedin.com/in/haithamekhalifa/</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📍</span>
|
||||||
|
<span contenteditable="true" id="userLocation" class="font-medium">Málaga, Spain</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-10">
|
||||||
|
<h2 class="section-header">About Me</h2>
|
||||||
|
<div id="aboutMe" contenteditable="true" class="text-[10px] leading-relaxed text-gray-600 font-medium text-justify">
|
||||||
|
A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-10">
|
||||||
|
<h2 class="section-header">Education</h2>
|
||||||
|
<div id="educationList" contenteditable="true" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-[11px] font-bold text-gray-800 leading-tight">Intensive Software Development Academy</p>
|
||||||
|
<p class="text-[10px] text-gray-600">Lund University</p>
|
||||||
|
<p class="text-[9px] text-gray-400 font-bold">Sweden, Lund - 2019</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-[11px] font-bold text-gray-800 leading-tight">Bachelor of Computer Science</p>
|
||||||
|
<p class="text-[10px] text-gray-600">Modern Academy Maadi</p>
|
||||||
|
<p class="text-[9px] text-gray-400 font-bold">Egypt, Cairo 2001 - 2006</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-10">
|
||||||
|
<h2 class="section-header">Skills</h2>
|
||||||
|
<div id="skillsList" contenteditable="true" class="text-[11px] text-gray-700 space-y-2 font-medium">
|
||||||
|
• E-commerce Strategy<br>
|
||||||
|
• Digital Marketing<br>
|
||||||
|
• SEO/SEM<br>
|
||||||
|
• Product Ownership<br>
|
||||||
|
• Team Leadership
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="section-header">Language</h2>
|
||||||
|
<div id="languageList" contenteditable="true" class="text-[11px] text-gray-700 space-y-1 font-medium">
|
||||||
|
• Arabic<br>
|
||||||
|
• English<br>
|
||||||
|
• Swedish
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Experience -->
|
||||||
|
<div class="main-content">
|
||||||
|
<h2 class="main-header">Experience</h2>
|
||||||
|
<div id="experienceContainer" contenteditable="true" class="space-y-10">
|
||||||
|
|
||||||
|
<!-- Protein.com -->
|
||||||
|
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
|
||||||
|
<div class="experience-dot"></div>
|
||||||
|
<div class="flex justify-between items-baseline mb-1">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 leading-none">Product Owner & IT Consultant</h3>
|
||||||
|
<span class="text-xs font-bold text-gray-400">2020-2025</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-bold text-blue-600 mb-3">Protein.com | Sweden, Malmö</p>
|
||||||
|
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
|
||||||
|
• Managed product backlog to drive e-commerce sales.<br>
|
||||||
|
• Developed/executed SEO strategies (+20% organic traffic).<br>
|
||||||
|
• Implemented/managed MarTech for e-commerce performance.<br>
|
||||||
|
• Drove Agile practices.<br>
|
||||||
|
• Utilized data analytics to optimize e-commerce growth.<br>
|
||||||
|
• Managed product data feeds.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- HostPioneers -->
|
||||||
|
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
|
||||||
|
<div class="experience-dot experience-dot-sub"></div>
|
||||||
|
<div class="flex justify-between items-baseline mb-1">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 leading-none">Founder & CEO</h3>
|
||||||
|
<span class="text-xs font-bold text-gray-400">2012-2021</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-bold text-blue-600 mb-3">HostPioneers.com | Denmark, Copenhagen</p>
|
||||||
|
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
|
||||||
|
• Led e-commerce platform development/optimization.<br>
|
||||||
|
• Implemented MarTech to drive engagement/revenue.<br>
|
||||||
|
• Developed/executed e-commerce marketing strategies.<br>
|
||||||
|
• Managed all aspects of the online business.<br>
|
||||||
|
• Executed e-commerce marketing (SEO, email, social).<br>
|
||||||
|
• Oversaw customer journey.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Red Cross -->
|
||||||
|
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
|
||||||
|
<div class="experience-dot experience-dot-sub"></div>
|
||||||
|
<div class="flex justify-between items-baseline mb-1">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 leading-none">Social Media Manager (Volunteer)</h3>
|
||||||
|
<span class="text-xs font-bold text-gray-400">2013-2016</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-bold text-blue-600 mb-3">Danish Red Cross - Newtimes.dk</p>
|
||||||
|
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
|
||||||
|
• EU-funded project to raise awareness of asylum seekers and policymakers.<br>
|
||||||
|
• Developed and managed the website, enhancing SEO and user engagement.<br>
|
||||||
|
• Wrote articles and managed social media to increase brand visibility.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Cayenne -->
|
||||||
|
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
|
||||||
|
<div class="experience-dot experience-dot-sub"></div>
|
||||||
|
<div class="flex justify-between items-baseline mb-1">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 leading-none">C.I.O Deputy</h3>
|
||||||
|
<span class="text-xs font-bold text-gray-400">2007-2012</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-bold text-blue-600 mb-3">Cayenne Technologies | Egypt, Cairo</p>
|
||||||
|
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
|
||||||
|
• Web Business Manager & Deputy Chief Information Officer.<br>
|
||||||
|
• Managed projects in the web technology department.<br>
|
||||||
|
• Developed and presented web projects to clients and stakeholders.<br>
|
||||||
|
• Installed and supported web servers and applications.<br>
|
||||||
|
• Improved website traffic and SEO scores for clients.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Data Structure
|
||||||
|
let resumes = JSON.parse(localStorage.getItem('haitham_resumes_v2')) || {};
|
||||||
|
let currentProfileName = localStorage.getItem('haitham_current_profile_v2') || 'Main Resume';
|
||||||
|
|
||||||
|
const initialContent = {
|
||||||
|
name: "HAITHAM KHALIFA",
|
||||||
|
photo: "Resume.jpg",
|
||||||
|
phone: "+34 614 821 331",
|
||||||
|
email: "Haitham@Khalifa.se",
|
||||||
|
linkedin: "linkedin.com/in/haithamekhalifa/",
|
||||||
|
location: "Málaga, Spain",
|
||||||
|
about: "A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives.",
|
||||||
|
education: document.getElementById('educationList').innerHTML,
|
||||||
|
skills: document.getElementById('skillsList').innerHTML,
|
||||||
|
language: document.getElementById('languageList').innerHTML,
|
||||||
|
experience: document.getElementById('experienceContainer').innerHTML
|
||||||
|
};
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
if (Object.keys(resumes).length === 0) {
|
||||||
|
resumes['Main Resume'] = { ...initialContent };
|
||||||
|
saveToDisk();
|
||||||
|
}
|
||||||
|
updateSelect();
|
||||||
|
loadProfile(currentProfileName);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePhotoUpload(input) {
|
||||||
|
const file = input.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function(e) {
|
||||||
|
const base64Image = e.target.result;
|
||||||
|
document.getElementById('userPhoto').src = base64Image;
|
||||||
|
// Auto-save photo to current profile
|
||||||
|
saveCurrentProfile();
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelect() {
|
||||||
|
const select = document.getElementById('resumeSelect');
|
||||||
|
select.innerHTML = '';
|
||||||
|
Object.keys(resumes).forEach(name => {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = name;
|
||||||
|
opt.textContent = name;
|
||||||
|
if (name === currentProfileName) opt.selected = true;
|
||||||
|
select.appendChild(opt);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadProfile(name) {
|
||||||
|
const p = resumes[name] || resumes[Object.keys(resumes)[0]];
|
||||||
|
currentProfileName = name;
|
||||||
|
localStorage.setItem('haitham_current_profile_v2', name);
|
||||||
|
|
||||||
|
document.getElementById('userName').innerText = p.name;
|
||||||
|
document.getElementById('userPhoto').src = p.photo || "Resume.jpg";
|
||||||
|
document.getElementById('userPhone').innerText = p.phone;
|
||||||
|
document.getElementById('userEmail').innerText = p.email;
|
||||||
|
document.getElementById('userLinkedin').innerText = p.linkedin;
|
||||||
|
document.getElementById('userLocation').innerText = p.location;
|
||||||
|
document.getElementById('aboutMe').innerText = p.about;
|
||||||
|
document.getElementById('educationList').innerHTML = p.education;
|
||||||
|
document.getElementById('skillsList').innerHTML = p.skills;
|
||||||
|
document.getElementById('languageList').innerHTML = p.language || initialContent.language;
|
||||||
|
document.getElementById('experienceContainer').innerHTML = p.experience;
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveCurrentProfile() {
|
||||||
|
resumes[currentProfileName] = {
|
||||||
|
name: document.getElementById('userName').innerText,
|
||||||
|
photo: document.getElementById('userPhoto').src,
|
||||||
|
phone: document.getElementById('userPhone').innerText,
|
||||||
|
email: document.getElementById('userEmail').innerText,
|
||||||
|
linkedin: document.getElementById('userLinkedin').innerText,
|
||||||
|
location: document.getElementById('userLocation').innerText,
|
||||||
|
about: document.getElementById('aboutMe').innerText,
|
||||||
|
education: document.getElementById('educationList').innerHTML,
|
||||||
|
skills: document.getElementById('skillsList').innerHTML,
|
||||||
|
language: document.getElementById('languageList').innerHTML,
|
||||||
|
experience: document.getElementById('experienceContainer').innerHTML
|
||||||
|
};
|
||||||
|
saveToDisk();
|
||||||
|
showStatus('Changes Saved');
|
||||||
|
}
|
||||||
|
|
||||||
|
function createNewProfile() {
|
||||||
|
const name = prompt("Name this version (e.g., Geely IT Manager):");
|
||||||
|
if (name && !resumes[name]) {
|
||||||
|
resumes[name] = { ...resumes[currentProfileName] };
|
||||||
|
currentProfileName = name;
|
||||||
|
saveToDisk();
|
||||||
|
updateSelect();
|
||||||
|
loadProfile(name);
|
||||||
|
} else if (resumes[name]) {
|
||||||
|
alert("This name already exists.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteProfile() {
|
||||||
|
if (Object.keys(resumes).length <= 1) return alert("You need at least one profile.");
|
||||||
|
if (confirm(`Delete "${currentProfileName}"?`)) {
|
||||||
|
delete resumes[currentProfileName];
|
||||||
|
currentProfileName = Object.keys(resumes)[0];
|
||||||
|
saveToDisk();
|
||||||
|
updateSelect();
|
||||||
|
loadProfile(currentProfileName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveToDisk() {
|
||||||
|
localStorage.setItem('haitham_resumes_v2', JSON.stringify(resumes));
|
||||||
|
}
|
||||||
|
|
||||||
|
function showStatus(msg) {
|
||||||
|
const btn = document.querySelector('button[onclick="saveCurrentProfile()"]');
|
||||||
|
const original = btn.textContent;
|
||||||
|
btn.textContent = msg;
|
||||||
|
btn.style.backgroundColor = '#059669';
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.textContent = original;
|
||||||
|
btn.style.backgroundColor = '';
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('resumeSelect').addEventListener('change', (e) => {
|
||||||
|
loadProfile(e.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
init();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
email company country
|
||||||
|
botters@archmage.net US
|
||||||
|
imcooldude2012@rediff.com IN
|
||||||
|
exp0s3d@Tormail.net US
|
||||||
|
brandon.wamboldt@northernlightstechnology.ca _ CA
|
||||||
|
martin@vestjyskdata.dk Vestjyskdata SY
|
||||||
|
pritchett@neyardpha.com US
|
||||||
|
th5tuananh@netzero.net abc US
|
||||||
|
abele62@tiscali.it IT
|
||||||
|
kevin@uhelios.com uhelios US
|
||||||
|
support@lifescapehosting.com Lifescapehosting.com CA
|
||||||
|
lukasz.piotrowski@connected.pl none PL
|
||||||
|
qa000067@kill3r.net PE
|
||||||
|
kathleen123threadwel@me.com GB
|
||||||
|
ginaz111@sbcglobal.net US
|
||||||
|
jakob@spinzone.net PK
|
||||||
|
ps9@live.fr majj MA
|
||||||
|
admin@fenris-gaming.net GB
|
||||||
|
charlesgrimm@zing.vn US
|
||||||
|
info@moynahanmultimedia.com Moynahan Multimedia GB
|
||||||
|
grigori22@wp.pl - PL
|
||||||
|
houyee@foxmail.com hy CN
|
||||||
|
mario.klein80@web.de DE
|
||||||
|
diana@dr-point.net AU
|
||||||
|
serser@ser.com AE
|
||||||
|
baaaaaary@msn.com IL
|
||||||
|
mat@dangs.ag US
|
||||||
|
admin@wiki-pedia.biz US
|
||||||
|
xm5@live.fr Secrityeme US
|
||||||
|
swartsopia@allmail.net GB
|
||||||
|
vmfear@ymail.com VM US
|
||||||
|
oriake001@ovi.com john &co ltd GH
|
||||||
|
lkj@YAHKDF.COM jjkl US
|
||||||
|
ankaboot2010@live.com crouzmind US
|
||||||
|
linda.sachs@giadinhnahi.org US
|
||||||
|
service@blackshades.biz US
|
||||||
|
xggzohqm@sharklasers.com Mexico MX
|
||||||
|
white_hat@null.net FR
|
||||||
|
qweqweqwe@mailinator.com qweqweqwe US
|
||||||
|
vpnmuell@trash-mail.com US
|
||||||
|
pay@animesll.tugaspeed.info HelpSys TG
|
||||||
|
tedibushi@live.com tedi-ndertim AL
|
||||||
|
marcduffy@ymail.com GB
|
||||||
|
vailon@vncoder.sharkserve.com US
|
||||||
|
chieutannang@live.com Kimberley Edgmon US
|
||||||
|
ryan@naturalsourcestore.com Natural Source Store US
|
||||||
|
raul@mailinator.com microshuit GB
|
||||||
|
freeredirect@fastmail.co.uk none DE
|
||||||
|
admin@loanvu.com microsoft US
|
||||||
|
watumbe@web.de - DE
|
||||||
|
kcqbeiek@sharklasers.com momdomdom US
|
||||||
|
ilyes@infinityways.com INFINITY WAYS INT'L TN
|
||||||
|
0678024136@orange.fr BE
|
||||||
|
f4b3r@op.pl PL
|
||||||
|
mark@oceanviewnetworks.com US
|
||||||
|
rosimiere12@live.com MairaLopes BR
|
||||||
|
Thatcher@dominhit.pro US
|
||||||
|
vaiqvai23@bol.com.br BR
|
||||||
|
julioreymiamifl@msn.com nop GB
|
||||||
|
admin@Gytis.eu nee LT
|
||||||
|
anarchoi@anarkhia.org CA
|
||||||
|
nereafannucci@armyspy.com IT
|
||||||
|
info@tukangshopping.org US
|
||||||
|
ger@vnugroup.us ATILAHOSTING CA
|
||||||
|
tomas@duomenucentras.lt UAB Duomenu centras LT
|
||||||
|
idontknowwhyyoursendingmeinvoices@google.com GB
|
||||||
|
samuelgtc@gmx.com WPW IN
|
||||||
|
soxkid999@aim.com MuRKRoW :) US
|
||||||
|
cathy.easter@ymail.com US
|
||||||
|
suporte@tugaspeed.info isepic PT
|
||||||
|
joshuajroche@me.com AU
|
||||||
|
z0rank@live.com US
|
||||||
|
z0mb1-@live.com US
|
||||||
|
admin@9srv.com non US
|
||||||
|
paulford877@rocketmail.com US
|
||||||
|
ph.huguet@wanadoo.fr FR
|
||||||
|
norton.garmar@att.net US
|
||||||
|
JosephWatts@mailcatch.com US
|
||||||
|
za.hosting23@googlemail.com DE
|
||||||
|
DICC@anonymousspeech.com US
|
||||||
|
gongstar@live.fr devloper US
|
||||||
|
RACHELMTHOMAS@goodmail.us US
|
||||||
|
bkay@bax.co.za ZA
|
||||||
|
bery@cyberindon.co.cc Melbourne AU
|
||||||
|
mo.motamedifar@googlemail.com MY
|
||||||
|
josue.2021@live.com Capo US
|
||||||
|
erland.larsson@storliens.com GB
|
||||||
|
flighttime121@safe-mail.net none TH
|
||||||
|
rojam_liu@126.com Discover high tech CN
|
||||||
|
esrothebest@free.fr piere FR
|
||||||
|
pazarche@email.bg US
|
||||||
|
payments@pwnxile.com GB
|
||||||
|
voyage999@blumail.org US
|
||||||
|
lind_otr@msn.com US
|
||||||
|
Adam.jones19@live.co.uk AJ-Host GB
|
||||||
|
freemanelectric@googlemail.com SE
|
||||||
|
Ico-ns@m00dy.org Ico-ns M00dy US
|
||||||
|
jfkkuhn@mac.com Luvideez US
|
||||||
|
boxcase@ymail.com javanet GB
|
||||||
|
nana@instrumentbirth.com GB
|
||||||
|
kontakt@urynowicz.com.pl UG
|
||||||
|
to1@zaaap.net DE
|
||||||
|
dark-hill@live.fr Dz DZ
|
||||||
|
feeldark@enonmovies.com MX
|
||||||
|
Hax@me.com DK
|
||||||
|
asim@techbytes.pk PK
|
||||||
|
ircnet@waphacker.zzn.com AU
|
||||||
|
Donald2013@lavabit.com US
|
||||||
|
hillmanfaris@follower.com US
|
||||||
|
chile@san-sebastian.com US
|
||||||
|
tracethegod@live.com CA
|
||||||
|
webmaster@hosting022.com hosting022 RS
|
||||||
|
cshacksxe@live.com AL
|
||||||
|
santander.seguro@gerenteatendimento.com Fabio Informatica CIA BR
|
||||||
|
nemnon123@googlemail.com DE
|
||||||
|
burim-x@msn.com AL
|
||||||
|
oran@tele2.nl NL
|
||||||
|
zoam@Live.com AL
|
||||||
|
celibataire24@live.fr MA
|
||||||
|
info@mosli.com Abudlli AU
|
||||||
|
iport@idiotreturn.com US
|
||||||
|
ashy152@googlemail.com GB
|
||||||
|
mrubinetti@nsvn.org US
|
||||||
|
vdele.support@ya.ru none US
|
||||||
|
tony_94@gmx.fr FR
|
||||||
|
qwertzblubber@googlemail.com GB
|
||||||
|
aresvie@me.com US
|
||||||
|
blasco007@tiscali.it IT
|
||||||
|
pratik@phybersecurity.net Phyber Security US
|
||||||
|
oconner@gmx.net Eisregen Ltd. CY
|
||||||
|
yassss121@live.com dhsjsk GB
|
||||||
|
pietro.alfieri@email.it Pietrolf Corp IT
|
||||||
|
tsleo@gwi.net Laurie Elliott US
|
||||||
|
remo_demo@ymail.com Iraqi Hoster IQ
|
||||||
|
kevinwood@vfemail.net GB
|
||||||
|
asupasu@ymail.com US
|
||||||
|
drlogin@live.com EG
|
||||||
|
pier@vip-clinique.com.br BRlink BR
|
||||||
|
ludovic.dereeper@wanadoo.fr FR
|
||||||
|
robert.holmes@marriott.com n/a US
|
||||||
|
kumar.sushant@rocketmail.com Darknez IN
|
||||||
|
jgvffjj@hjdh.com DK
|
||||||
|
Gen4601@yandex.ru gennoss RU
|
||||||
|
amy83@beagle.com.au AU
|
||||||
|
zs@zs.com GB
|
||||||
|
Kobrinsky@shiftwh.org US
|
||||||
|
webmaster@youngt.vn Friedman Company US
|
||||||
|
heroturko2010@live.com Heroturko PK
|
||||||
|
kgibson@unr.edu US
|
||||||
|
jonathan.obama@ymail.com US
|
||||||
|
zasekakvapotreba1@live.com US
|
||||||
|
nickn@live.fr FR
|
||||||
|
uzzo_tiziana@libero.it IT
|
||||||
|
admin@terrybackmail.com GB
|
||||||
|
williamflee@fleckens.hu Abtrusive Security Audit US
|
||||||
|
serverplans@live.com ServerPlans Inc EG
|
||||||
|
mccannc@g7world.com US
|
||||||
|
JorgCoort@email.cz n/a CZ
|
||||||
|
dcs@dcarrsmith.com GB
|
||||||
|
m-switzer@admin118.us US
|
||||||
|
962488@8fc.7z.lt US
|
||||||
|
admin@tonngokhong.org MARY ELLEN SEINER US
|
||||||
|
mbarnes2012@live.com GB
|
||||||
|
vperez@mailinator.net US
|
||||||
|
marinewhite0809@live.com guy US
|
||||||
|
fauzi@tago.re Hostia.CO ID
|
||||||
|
neopan@omninet.com.cy CY
|
||||||
|
linzag@e-mail.ua benkanim group US
|
||||||
|
dortmundfan79@googlemail.com DE
|
||||||
|
sheila@videotam.com n/a PR
|
||||||
|
lesley@homeinsteadottawa.ca Home Instead Senior Care CA
|
||||||
|
send2toni@googlemail.com DE
|
||||||
|
shater@live.com.mx Monkihost.com MX
|
||||||
|
jamesluthor@ymail.com n/a US
|
||||||
|
rotten_cabbage@live.com SE
|
||||||
|
air@hushmail.me ES
|
||||||
|
coco-2009@windowslive.com eee SA
|
||||||
|
varbibin@googlemail.com MB media network US
|
||||||
|
dnusax@hushmail.com None US
|
||||||
|
anass.anonyme@hush.ai veo US
|
||||||
|
chuck@tutugon.com US
|
||||||
|
chomenk615@live.com US
|
||||||
|
lautoja@z1p.biz NL
|
||||||
|
ONeal@tete.us US
|
||||||
|
brian.hawley@live.com US
|
||||||
|
cosmo@dot.net US
|
||||||
|
samy@liberman.com.br BR
|
||||||
|
askary@askary.fr FR
|
||||||
|
lo0ves0sa@live.com Sosa US
|
||||||
|
onerouting@ymail.com johndkey TN
|
||||||
|
leviz@live.com US
|
||||||
|
juliankoehn@googlemail.com DE
|
||||||
|
robertwells@screenlay.com US
|
||||||
|
sales@richpixel.co.uk GB
|
||||||
|
dirtball@in.com GB
|
||||||
|
crazygirl25@live.nl US
|
||||||
|
sir.bulldog@ofir.dk DK
|
||||||
|
none@none.com CA
|
||||||
|
cameron@ministryofsound.co.nz NZ
|
||||||
|
lopes.newton@bol.com.br BR
|
||||||
|
romain197300@live.fr FR
|
||||||
|
oops@messengertrick.pl.ua GB
|
||||||
|
ghostee1234@googlemail.com GB
|
||||||
|
arskreo@free.fr US
|
||||||
|
encode@ymail.com IRD US
|
||||||
|
palooo@itmehal.com Student PK
|
||||||
|
slee34@me.com AU
|
||||||
|
kimberly@secretary.net US
|
||||||
|
antoine.marlieu@gmx.com FR
|
||||||
|
mootaz001@live.com MootazBot NZ
|
||||||
|
wrongrules2@live.com US
|
||||||
|
rociogonzales4@msn.com banda S.A PE
|
||||||
|
francois.sartelet@free.fr FR
|
||||||
|
colgate@accountant.com US
|
||||||
|
talk2sebastin@rediffmail.com Dogm IN
|
||||||
|
Dodds-craig@gmx.com US
|
||||||
|
ewfewd@zghdd.de UA
|
||||||
|
fishfan@lilian.hu HU
|
||||||
|
jackichan11@live.com jack US
|
||||||
|
h3ck4r@w.cn carding US
|
||||||
|
jansky@mommy-mommy.biz US
|
||||||
|
gadhafi-balms@postino.net akuwanta concept computers NG
|
||||||
|
tmhl1ghts0ut@aim.com Quantum Booter US
|
||||||
|
pejelagarto_obrador@rocketmail.com partido revolucionario democratico MX
|
||||||
|
idrinkciroc@live.com US
|
||||||
|
Ellensims@zippymail.info US
|
||||||
|
x0fpt3@walla.com BR
|
||||||
|
bladnes@wp.pl PL
|
||||||
|
xavier.place@club-internet.fr xavierplace FR
|
||||||
|
ninguno@tormail.org teamsec ES
|
||||||
|
chefk0ch@Safe-mail.net RO
|
||||||
|
fettiboyx1@live.com BrickSquad Marketers US
|
||||||
|
oiseng@ymail.com GB
|
||||||
|
alex.lyle@bt.com AlMeK GB
|
||||||
|
azza_bouhjar@w.cn FR
|
||||||
|
joyce.milgram@live.com US
|
||||||
|
angieb1958@dozercentral.net GB
|
||||||
|
Snatch@live.fr FR
|
||||||
|
vukutuku@hushmail.com CN
|
||||||
|
unnheresa@msn.com US
|
||||||
|
suporte@planetjogos.com.br planetjogos.com.br BR
|
||||||
|
frederic.seguin@live.fr perso FR
|
||||||
|
h.ljung@telia.com SE
|
||||||
|
contact@ximensions.com Ximensions DE
|
||||||
|
janszuster@gazeta.pl PL
|
||||||
|
larrighetti@downloadzoneforum.net IT
|
||||||
|
deadwalking@hushmail.com US
|
||||||
|
sales@im-hoster.org im-hoster.org US
|
||||||
|
resellervps@netzero.net reseller US
|
||||||
|
sky@essx.net NZ
|
||||||
|
bee.cf@9.cn - TH
|
||||||
|
onlyshop@rocketmail.com US
|
||||||
|
s.evans1@live.com N/A DE
|
||||||
|
adameva10s@live.com US
|
||||||
|
rosenbergrene@ofir.dk Eventours DK
|
||||||
|
sopie22@lovingu.biz US
|
||||||
|
blcksky2@googlemail.com GB
|
||||||
|
tompkins@iname.com US
|
||||||
|
allan@baeklund.org DK
|
||||||
|
nhokcredit@me.com IS
|
||||||
|
ronal-16@live.com Arenaie Wilson GB
|
||||||
|
loucoabreu10@bol.com.br dasilva US
|
||||||
|
admin@speedyvds.com SpeedyVDS Pty Ltd AU
|
||||||
|
anderson004@blumail.org US
|
||||||
|
traor@0-mail.com FR
|
||||||
|
td-nobrega@uol.com.br BR
|
||||||
|
Smoot@warnatar.org US
|
||||||
|
Dsm517@autovip.biz US
|
||||||
|
adamswinberg@mail.com BE
|
||||||
|
cemeteryluv@juno.com US
|
||||||
|
vl@priv8.in BR
|
||||||
|
giant@flash-candy.com US
|
||||||
|
management@stereo-band.net US
|
||||||
|
info2@egypt-deal.com EG
|
||||||
|
saramarso@earthlink.net US
|
||||||
|
dias3535@live.com DE
|
||||||
|
mal4ikoleg@yandex.ru no company RU
|
||||||
|
admin@ctrx-design.com CTRX-Design GB
|
||||||
|
guenouxs@laposte.net FR
|
||||||
|
jacobhasemann@me.com DK
|
||||||
|
scarface_b40@windowslive.com anna_reseller US
|
||||||
|
sexyfast@live.com.mx MX
|
||||||
|
lazycat87@juno.com GB
|
||||||
|
3.141zfnever@googlemail.com GB
|
||||||
|
beto@rentaphone.com DE
|
||||||
|
mpvancu@ilstu.edu US
|
||||||
|
joe_faulkner@joefunerals.co.uk Joe Funerals Ltd GB
|
||||||
|
luigiitaly@alice.it IT
|
||||||
|
laxzor@hmamail.com US
|
||||||
|
ysk3@live.com Home MX
|
||||||
|
decrypt@live.com US
|
||||||
|
Intecteur1@live.fr vpshosting US
|
||||||
|
norbert.vachal@aim.com US
|
||||||
|
stuart@denfield.co.uk Denfield Advertising GB
|
||||||
|
mail@samrelan.com SamRelan IN
|
||||||
|
granierromain@msn.com FR
|
||||||
|
na@void.com IN
|
||||||
|
nock50@live.com Sammy's Record Shack US
|
||||||
|
hendra@consultant.com ID
|
||||||
|
k1ttensarec00l@disposeamail.com US
|
||||||
|
106223482@qq.com CN
|
||||||
|
@@ -40,5 +40,19 @@
|
|||||||
"phone": "+34614821331",
|
"phone": "+34614821331",
|
||||||
"message": "sdksodksdlskdd\u00f6l",
|
"message": "sdksodksdlskdd\u00f6l",
|
||||||
"date": "2026-03-18 17:46:42"
|
"date": "2026-03-18 17:46:42"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "New Assistant",
|
||||||
|
"email": "Haitham@Essam-eldin.com",
|
||||||
|
"phone": "004553523253",
|
||||||
|
"message": "ha aha ajaha",
|
||||||
|
"date": "2026-03-19 23:12:02"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Grace Walker",
|
||||||
|
"email": "grace.walker@healthcoreit.com",
|
||||||
|
"phone": "13025205097",
|
||||||
|
"message": "Hi Team,\n\nWe help businesses connect with companies that match their ICP.\n\nI was going through your website and wanted to see if companies using cloud infrastructure tools, virtualization platforms, and IT management solutions fall within your target market.\n\nHappy to share more details if this is relevant.\n\nBest,\nGrace Walker\nBusiness Development Manager\n302 520 5097\nGTU",
|
||||||
|
"date": "2026-03-26 18:20:02"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
# Restaurant Outreach — Email Template
|
||||||
|
|
||||||
|
## Subject Line Options
|
||||||
|
- "Quick question about [Restaurant Name]"
|
||||||
|
- "[Restaurant Name] — web audit free for 5 min"
|
||||||
|
- "Saw [Restaurant Name]'s site, have an idea"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Email Template
|
||||||
|
|
||||||
|
```
|
||||||
|
Hi [Name],
|
||||||
|
|
||||||
|
I noticed [Restaurant Name]'s website and I have an idea that could
|
||||||
|
bring you more bookings — happy to share for free.
|
||||||
|
|
||||||
|
I run HostPioneers — we build professional websites for restaurants
|
||||||
|
in Benalmádena and the Costa del Sol. Currently offering a complete
|
||||||
|
website setup for €399 (essential) or €699 (professional, includes AI).
|
||||||
|
|
||||||
|
I have templates ready that match your restaurant style.
|
||||||
|
You can preview them here:
|
||||||
|
→ https://hostpioneers.com/demos/ristorante/
|
||||||
|
|
||||||
|
No commitment, no contracts. Just a conversation.
|
||||||
|
|
||||||
|
Would a quick 10-min call this week work?
|
||||||
|
|
||||||
|
Best,
|
||||||
|
Haitham
|
||||||
|
HostPioneers — Benalmádena Costa
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Follow-up (if no reply in 3 days)
|
||||||
|
```
|
||||||
|
Hi [Name],
|
||||||
|
|
||||||
|
Just following up — did you get my last message?
|
||||||
|
|
||||||
|
I put together a quick preview template for [Restaurant Name]
|
||||||
|
based on what I saw on your site:
|
||||||
|
|
||||||
|
→ https://hostpioneers.com/demos/ristorante/
|
||||||
|
|
||||||
|
Worth a look before the summer season hits.
|
||||||
|
|
||||||
|
Happy to jump on a quick call.
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## High Priority Prospects (site-down / no site)
|
||||||
|
| Restaurant | Demo to Send | Notes |
|
||||||
|
|-----------|-------------|-------|
|
||||||
|
| La Sirena | Spanish / Steakhouse | Seafood focus, TripAdvisor 4.5 |
|
||||||
|
| Ai Coppa Ristorante | Italian | Italian cuisine |
|
||||||
|
| Il Boccaccio | Italian | Italian cuisine |
|
||||||
|
| All Grill Burger | Steakhouse/Burger | Burger + grill |
|
||||||
|
| Los Mellizos | Spanish/Seafood | Bot protection on site |
|
||||||
|
| La Nueva | Spanish | NEW - no official website |
|
||||||
|
|
||||||
|
## Medium Priority (has site, poor quality)
|
||||||
|
| Restaurant | Issues | Demo to Send |
|
||||||
|
|-----------|--------|-------------|
|
||||||
|
| Ocampo Cocina Argentina | No menu, no contact, no HTTPS | Steakhouse |
|
||||||
|
| SALU Grill & Wine | No contact | Steakhouse |
|
||||||
|
| Narhal Mahal | No HTTPS | Indian |
|
||||||
|
| Asador El Quebracho | No HTTPS | Steakhouse |
|
||||||
|
| Jacks Smokehouse | Free weeblyte subdomain | Steakhouse/Burger |
|
||||||
|
| Don Marisquito | Directory listing only | Spanish/Seafood |
|
||||||
@@ -0,0 +1,486 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Restaurant Prospects — Benalmádena</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root {
|
||||||
|
--bg: #0f1117; --bg-card: #161922; --bg-row: #1c1f2a; --border: #2a2d3a;
|
||||||
|
--text: #e2e4e9; --text-muted: #8b8fa3; --green: #22c55e; --yellow: #eab308;
|
||||||
|
--red: #ef4444; --blue: #3b82f6; --purple: #a855f7;
|
||||||
|
}
|
||||||
|
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
|
||||||
|
a { color: var(--blue); text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* HEADER */
|
||||||
|
header { border-bottom: 1px solid var(--border); padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--bg-card); }
|
||||||
|
header h1 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
|
||||||
|
.header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* STATS BAR */
|
||||||
|
.stats-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); }
|
||||||
|
.stat { background: var(--bg-card); padding: 0.8rem 1rem; text-align: center; }
|
||||||
|
.stat-value { font-size: 1.5rem; font-weight: 700; }
|
||||||
|
.stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; }
|
||||||
|
.stat.red .stat-value { color: var(--red); }
|
||||||
|
.stat.yellow .stat-value { color: var(--yellow); }
|
||||||
|
.stat.green .stat-value { color: var(--green); }
|
||||||
|
.stat.blue .stat-value { color: var(--blue); }
|
||||||
|
.stat.purple .stat-value { color: var(--purple); }
|
||||||
|
|
||||||
|
/* TOOLBAR */
|
||||||
|
.toolbar { padding: 0.8rem 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); background: var(--bg-card); }
|
||||||
|
.filter-btn { padding: 0.35rem 0.9rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; font-family: inherit; transition: all 0.2s; }
|
||||||
|
.filter-btn:hover { border-color: var(--text-muted); color: var(--text); }
|
||||||
|
.filter-btn.active { background: var(--blue); color: white; border-color: var(--blue); }
|
||||||
|
|
||||||
|
/* BUTTONS */
|
||||||
|
.btn { padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: all 0.2s; text-decoration: none; display: inline-block; }
|
||||||
|
.btn-primary { background: var(--blue); color: white; }
|
||||||
|
.btn-primary:hover { background: #2563eb; text-decoration: none; }
|
||||||
|
.btn-success { background: var(--green); color: white; }
|
||||||
|
.btn-success:hover { background: #16a34a; text-decoration: none; }
|
||||||
|
.btn-outline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
|
||||||
|
.btn-outline:hover { border-color: var(--text-muted); color: var(--text); text-decoration: none; }
|
||||||
|
.btn-danger { background: var(--red); color: white; }
|
||||||
|
.btn-danger:hover { background: #dc2626; text-decoration: none; }
|
||||||
|
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||||
|
|
||||||
|
/* TOAST */
|
||||||
|
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--green); color: #000; padding: 0.6rem 1.2rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 9999; }
|
||||||
|
#toast.show { opacity: 1; }
|
||||||
|
|
||||||
|
/* TABLE */
|
||||||
|
.table-wrap { overflow-x: auto; }
|
||||||
|
table { width: 100%; border-collapse: collapse; min-width: 900px; }
|
||||||
|
thead { background: var(--bg-card); border-bottom: 1px solid var(--border); }
|
||||||
|
th { padding: 0.6rem 0.8rem; text-align: left; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; }
|
||||||
|
td { padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(42,45,58,0.4); vertical-align: middle; font-size: 0.8rem; }
|
||||||
|
tr:hover td { background: rgba(59,130,246,0.03); }
|
||||||
|
tr.selected td { background: rgba(59,130,246,0.08); }
|
||||||
|
|
||||||
|
/* GRADE BADGE */
|
||||||
|
.grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
|
||||||
|
.grade.A { background: rgba(34,197,94,0.15); color: var(--green); }
|
||||||
|
.grade.B { background: rgba(234,179,8,0.15); color: var(--yellow); }
|
||||||
|
.grade.C { background: rgba(234,179,8,0.1); color: #d97706; }
|
||||||
|
.grade.D { background: rgba(234,179,8,0.2); color: #d97706; }
|
||||||
|
.grade.F { background: rgba(239,68,68,0.15); color: var(--red); }
|
||||||
|
|
||||||
|
/* SELECTED CHECKBOX */
|
||||||
|
.row-checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: var(--blue); }
|
||||||
|
|
||||||
|
/* WEBSITE STATUS TOGGLE */
|
||||||
|
.toggle-group { display: flex; align-items: center; gap: 0.4rem; }
|
||||||
|
.toggle { position: relative; width: 36px; height: 20px; cursor: pointer; }
|
||||||
|
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||||
|
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 20px; transition: all 0.2s; }
|
||||||
|
.toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: all 0.2s; }
|
||||||
|
.toggle input:checked + .toggle-slider { background: var(--green); }
|
||||||
|
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
|
||||||
|
.toggle-label { font-size: 0.7rem; color: var(--text-muted); }
|
||||||
|
|
||||||
|
/* WEBSITE LINK */
|
||||||
|
.website { font-size: 0.75rem; color: var(--blue); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
|
||||||
|
|
||||||
|
/* ISSUES */
|
||||||
|
.issues { display: flex; gap: 0.25rem; flex-wrap: wrap; }
|
||||||
|
.issue { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.8); border: 1px solid rgba(239,68,68,0.2); }
|
||||||
|
|
||||||
|
/* PRIORITY */
|
||||||
|
.priority { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; }
|
||||||
|
.priority.high { background: rgba(239,68,68,0.15); color: var(--red); }
|
||||||
|
.priority.med { background: rgba(234,179,8,0.15); color: var(--yellow); }
|
||||||
|
.priority.low { background: rgba(59,130,246,0.1); color: var(--blue); }
|
||||||
|
|
||||||
|
/* ACTIONS */
|
||||||
|
.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
/* NOTES INPUT */
|
||||||
|
.notes-input { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.75rem; padding: 0.3rem 0.5rem; width: 120px; font-family: inherit; }
|
||||||
|
.notes-input:focus { outline: none; border-color: var(--blue); }
|
||||||
|
|
||||||
|
/* TABS */
|
||||||
|
.tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 1.5rem; background: var(--bg-card); }
|
||||||
|
.tab { padding: 0.8rem 1.2rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
|
||||||
|
.tab:hover { color: var(--text); }
|
||||||
|
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
|
||||||
|
|
||||||
|
/* DEMOS SECTION */
|
||||||
|
#demos-view { display: none; padding: 1.5rem; }
|
||||||
|
.demos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||||
|
.demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s; }
|
||||||
|
.demo-card:hover { border-color: var(--blue); }
|
||||||
|
.demo-preview { height: 140px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; }
|
||||||
|
.demo-preview img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.demo-preview .demo-label { font-size: 0.75rem; color: var(--text-muted); }
|
||||||
|
.demo-info { padding: 1rem; }
|
||||||
|
.demo-info .demo-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
|
||||||
|
.demo-info .demo-desc { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.5; }
|
||||||
|
.demo-info .demo-price { font-size: 0.75rem; color: var(--green); font-weight: 600; margin-bottom: 0.6rem; }
|
||||||
|
.demo-info .demo-url { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.6rem; word-break: break-all; }
|
||||||
|
.demo-status { font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 4px; display: inline-block; margin-bottom: 0.6rem; }
|
||||||
|
.demo-status.done { background: rgba(34,197,94,0.15); color: var(--green); }
|
||||||
|
.demo-status.building { background: rgba(234,179,8,0.15); color: var(--yellow); }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.stats-bar { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
header { flex-direction: column; align-items: flex-start; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<h1>🍽️ Benalmádena Restaurant Prospects</h1>
|
||||||
|
<div style="font-size:0.75rem;color:var(--text-muted);margin-top:0.2rem;">
|
||||||
|
<span id="total-count">0</span> restaurants · <span id="selected-count">0</span> selected for contact
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="btn btn-success" onclick="saveAll()">💾 Save Changes</button>
|
||||||
|
<button class="btn btn-primary" onclick="showTab('contact', event)">📋 Contact Selected (<span id="selected-btn-count">0</span>)</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- STATS -->
|
||||||
|
<div class="stats-bar">
|
||||||
|
<div class="stat red"><div class="stat-value" id="stat-f">0</div><div class="stat-label">Site Down</div></div>
|
||||||
|
<div class="stat yellow"><div class="stat-value" id="stat-cd">0</div><div class="stat-label">Needs Work</div></div>
|
||||||
|
<div class="stat green"><div class="stat-value" id="stat-ab">0</div><div class="stat-label">Good Sites</div></div>
|
||||||
|
<div class="stat blue"><div class="stat-value" id="stat-contact">0</div><div class="stat-label">Selected</div></div>
|
||||||
|
<div class="stat purple"><div class="stat-value" id="stat-no-site">0</div><div class="stat-label">No Website</div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TABS -->
|
||||||
|
<div class="tabs">
|
||||||
|
<div class="tab active" onclick="showTab('all')">All</div>
|
||||||
|
<div class="tab" onclick="showTab('hot')">🔥 Site Down</div>
|
||||||
|
<div class="tab" onclick="showTab('warm')">⚠️ Needs Work</div>
|
||||||
|
<div class="tab" onclick="showTab('good')">✅ Good Sites</div>
|
||||||
|
<div class="tab" onclick="showTab('nosite')">❌ No Website</div>
|
||||||
|
<div class="tab" onclick="showTab('contact')">📋 Selected</div>
|
||||||
|
<div class="tab" onclick="showTab('demos')">🎨 Demo Templates</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TABLE -->
|
||||||
|
<div id="table-view">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width:24px;">✓</th>
|
||||||
|
<th>G</th>
|
||||||
|
<th>Restaurant</th>
|
||||||
|
<th>Website</th>
|
||||||
|
<th>Has Site?</th>
|
||||||
|
<th>Grade</th>
|
||||||
|
<th>Priority</th>
|
||||||
|
<th>Issues</th>
|
||||||
|
<th>Notes</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="table-body"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DEMOS SECTION -->
|
||||||
|
<div id="demos-view">
|
||||||
|
<div class="demos-grid" id="demos-grid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="toast">Saved!</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ──────────────────────────────────────────────
|
||||||
|
// RESTAURANT DATA (edit manually here or load from localStorage)
|
||||||
|
// ──────────────────────────────────────────────
|
||||||
|
const STORAGE_KEY = 'autojobs_restaurant_prospects';
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
const saved = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (saved) return JSON.parse(saved);
|
||||||
|
return getDefaultData();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDefaultData() {
|
||||||
|
return [
|
||||||
|
{id:1, name:"La Sirena", url:"http://lasirenarestaurante.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
|
||||||
|
{id:2, name:"Ai Coppa Ristorante", url:"http://www.aicorestaurants.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
|
||||||
|
{id:3, name:"Il Boccaccio", url:"http://www.ilboccaccio.es/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
|
||||||
|
{id:4, name:"All Grill Burger", url:"http://www.allgrillburger.com/", hasSite:false, grade:"F", quality:0, issues:["site unreachable"], priority:"high", notes:"", selected:false},
|
||||||
|
{id:5, name:"Los Mellizos", url:"https://losmellizos.net/", hasSite:true, grade:"D", quality:0, issues:["bot protection"], priority:"high", notes:"", selected:false},
|
||||||
|
{id:6, name:"Ocampo Cocina Argentina", url:"http://www.ocampococinaargentina.com/", hasSite:true, grade:"C", quality:3, issues:["no_menu","no_contact","no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:7, name:"Narhal Mahal", url:"http://www.indianrestaurantnaharmahal.com/", hasSite:true, grade:"B", quality:6, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:8, name:"SALU Grill & Wine", url:"https://salu-restaurant.com/", hasSite:true, grade:"B", quality:6, issues:["no_contact"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:9, name:"Asador El Quebracho", url:"http://asadorelquebracho.es/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:10, name:"Pasta Fresca", url:"http://pastafrescabenalmadena.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:11, name:"The Carvery Company", url:"http://www.thecarverycompany.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:12, name:"Restaurante Los Daltabanes", url:"http://www.restaurantelosdelantales.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:13, name:"1TORO Puerto Marina", url:"http://www.restaurantespuertomarina.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:14, name:"Restaurante La Cala", url:"http://www.lacalabenalmadena.com/", hasSite:true, grade:"B", quality:8, issues:["no_https"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:15, name:"Amigos Torremolinos", url:"https://amigostorrequebrada.com/es/", hasSite:true, grade:"B", quality:8, issues:["no_photos"], priority:"med", notes:"", selected:false},
|
||||||
|
{id:16, name:"Restaurante La Fuente", url:"https://www.restaurantelafuente.es/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:17, name:"Metro Ristorante", url:"https://es.metroristorante.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:18, name:"Restaurante Angostura", url:"https://www.angustorrequebrada.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:19, name:"King of Curries", url:"https://www.indianrestaurantkingofcurries.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:20, name:"Lila CTREE", url:"https://lilactree.net/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:21, name:"Cinnamon Club", url:"https://cinnamonclubpuertomarina.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:22, name:"Bodega Charolais", url:"https://www.bodegacharolais.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:23, name:"Arte y Cocina", url:"https://www.arteycocinarestaurant.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:24, name:"Indian City", url:"https://www.indiancity.es/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:25, name:"Lime and Lemon", url:"https://www.limeandlemonbenalmadena.com/", hasSite:true, grade:"A", quality:9, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:26, name:"La Bodeguita Tapas", url:"https://taperia-la-bodeguita.placejoys.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:27, name:"La Mafia", url:"https://lamafia.es/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:28, name:"The Indian Chef", url:"https://www.theindianchefrestaurant.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:29, name:"Nirvana Indian", url:"https://www.nirvanaindianrestaurantbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:30, name:"Basil Benalmádena", url:"https://www.basilbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:31, name:"La Tapería de Benalmádena", url:"https://benalmercado.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:32, name:"Cantina Mexicana", url:"https://www.cantinapuertomarina.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:33, name:"Gaucho Grill", url:"https://www.gaucho-grill-benalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:34, name:"Cafe Soleil", url:"https://www.cafesoleil.es/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:35, name:"Coast to Coast (C2C)", url:"https://c2cbenalmadena.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:36, name:"South Beach Restobar", url:"https://southbeachrestobar.eatbu.com/", hasSite:true, grade:"A", quality:8, issues:[], priority:"low", notes:"", selected:false},
|
||||||
|
{id:37, name:"La Nueva", url:"https://la-nueva.goto-where.com/", hasSite:false, grade:"F", quality:0, issues:["no official website"], priority:"high", notes:"Las Gaviotas, P.o Maritimo 11, 29630 Benalmadena. TripAdvisor 4.8. Nominated for best new opening.", selected:false},
|
||||||
|
{id:38, name:"Don Marisquito", url:"https://benalmercado.com/listado/don-marisquito/", hasSite:false, grade:"F", quality:0, issues:["directory listing only"], priority:"med", notes:"TripAdvisor 4.7. No official website found.", selected:false},
|
||||||
|
{id:39, name:"Jacks Smokehouse", url:"https://benal.jacks-smokehouse.com/", hasSite:true, grade:"C", quality:5, issues:["free weeblyte domain","no contact form"], priority:"med", notes:"American BBQ. benal.jacks-smokehouse.com - free weeblyte subdomain. No proper brand domain.", selected:false},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
let data = loadData();
|
||||||
|
let currentFilter = 'all';
|
||||||
|
|
||||||
|
function saveData() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveAll() {
|
||||||
|
saveData();
|
||||||
|
const toast = document.getElementById('toast');
|
||||||
|
toast.textContent = '✅ Saved!';
|
||||||
|
toast.classList.add('show');
|
||||||
|
setTimeout(() => { toast.classList.remove('show'); }, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSite(id) {
|
||||||
|
const row = data.find(d => d.id === id);
|
||||||
|
if (row) {
|
||||||
|
row.hasSite = !row.hasSite;
|
||||||
|
if (!row.hasSite) {
|
||||||
|
row.grade = 'F';
|
||||||
|
row.priority = 'high';
|
||||||
|
} else {
|
||||||
|
row.grade = 'B';
|
||||||
|
row.priority = 'med';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
saveData();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSelect(id) {
|
||||||
|
const row = data.find(d => d.id === id);
|
||||||
|
if (row) {
|
||||||
|
row.selected = !row.selected;
|
||||||
|
saveData();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNotes(id, val) {
|
||||||
|
const row = data.find(d => d.id === id);
|
||||||
|
if (row) { row.notes = val; saveData(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAll() {
|
||||||
|
const visible = data.filter(d => matchesFilter(d, currentFilter));
|
||||||
|
const allSelected = visible.every(d => d.selected);
|
||||||
|
visible.forEach(d => d.selected = !allSelected);
|
||||||
|
saveData();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function matchesFilter(row, filter) {
|
||||||
|
if (filter === 'all') return true;
|
||||||
|
if (filter === 'hot') return row.grade === 'F' || row.grade === 'D';
|
||||||
|
if (filter === 'warm') return row.grade === 'B' || row.grade === 'C';
|
||||||
|
if (filter === 'good') return row.grade === 'A';
|
||||||
|
if (filter === 'nosite') return !row.hasSite;
|
||||||
|
if (filter === 'contact') return row.selected;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showTab(tab, event) {
|
||||||
|
currentFilter = tab;
|
||||||
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||||
|
if (event && event.target) event.target.classList.add('active');
|
||||||
|
|
||||||
|
const tableView = document.getElementById('table-view');
|
||||||
|
const demosView = document.getElementById('demos-view');
|
||||||
|
|
||||||
|
if (tab === 'demos') {
|
||||||
|
tableView.style.display = 'none';
|
||||||
|
demosView.style.display = 'block';
|
||||||
|
renderDemos();
|
||||||
|
} else {
|
||||||
|
tableView.style.display = 'block';
|
||||||
|
demosView.style.display = 'none';
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getGradeClass(grade) {
|
||||||
|
return 'grade ' + grade;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPriorityClass(p) {
|
||||||
|
if (p === 'high') return 'priority high';
|
||||||
|
if (p === 'med') return 'priority med';
|
||||||
|
return 'priority low';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPriorityLabel(p) {
|
||||||
|
if (p === 'high') return '🔥 HIGH';
|
||||||
|
if (p === 'med') return 'Medium';
|
||||||
|
return 'Low';
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
const tbody = document.getElementById('table-body');
|
||||||
|
const filtered = data.filter(d => matchesFilter(d, currentFilter));
|
||||||
|
|
||||||
|
tbody.innerHTML = filtered.map(row => `
|
||||||
|
<tr class="${row.selected ? 'selected' : ''}">
|
||||||
|
<td>
|
||||||
|
<input type="checkbox" class="row-checkbox"
|
||||||
|
${row.selected ? 'checked' : ''}
|
||||||
|
onchange="toggleSelect(${row.id})">
|
||||||
|
</td>
|
||||||
|
<td><span class="${getGradeClass(row.grade)}">${row.grade}</span></td>
|
||||||
|
<td><strong>${row.name}</strong></td>
|
||||||
|
<td><a class="website" href="${row.url}" target="_blank">${row.url.replace('https://','').replace('http://','')}</a></td>
|
||||||
|
<td>
|
||||||
|
<div class="toggle-group">
|
||||||
|
<label class="toggle">
|
||||||
|
<input type="checkbox" ${row.hasSite ? 'checked' : ''} onchange="toggleSite(${row.id})">
|
||||||
|
<span class="toggle-slider"></span>
|
||||||
|
</label>
|
||||||
|
<span class="toggle-label">${row.hasSite ? 'Yes' : 'No'}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>${row.quality}/10</td>
|
||||||
|
<td><span class="${getPriorityClass(row.priority)}">${getPriorityLabel(row.priority)}</span></td>
|
||||||
|
<td>
|
||||||
|
<div class="issues">
|
||||||
|
${row.issues.length > 0 ? row.issues.map(i => `<span class="issue">${i}</span>`).join('') : '<span style="color:var(--text-muted);font-size:0.7rem;">—</span>'}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input class="notes-input" type="text" value="${row.notes || ''}"
|
||||||
|
placeholder="Add note..."
|
||||||
|
onchange="updateNotes(${row.id}, this.value)">
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="actions">
|
||||||
|
${row.grade !== 'A' ? `<a href="/demos/ristorante/casaalberto/" class="btn btn-primary" target="_blank">Demo</a>` : ''}
|
||||||
|
${row.grade === 'F' ? `<button class="btn btn-danger btn-sm" onclick="markNoSite(${row.id})">❌ No Site</button>` : ''}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
|
||||||
|
// Update stats
|
||||||
|
const fCount = data.filter(d => d.grade === 'F').length;
|
||||||
|
const cdCount = data.filter(d => d.grade === 'C' || d.grade === 'D').length;
|
||||||
|
const abCount = data.filter(d => d.grade === 'A' || d.grade === 'B').length;
|
||||||
|
const selCount = data.filter(d => d.selected).length;
|
||||||
|
const noSiteCount = data.filter(d => !d.hasSite).length;
|
||||||
|
|
||||||
|
document.getElementById('stat-f').textContent = fCount;
|
||||||
|
document.getElementById('stat-cd').textContent = cdCount;
|
||||||
|
document.getElementById('stat-ab').textContent = abCount;
|
||||||
|
document.getElementById('stat-contact').textContent = selCount;
|
||||||
|
document.getElementById('stat-no-site').textContent = noSiteCount;
|
||||||
|
document.getElementById('selected-count').textContent = selCount;
|
||||||
|
document.getElementById('selected-btn-count').textContent = selCount;
|
||||||
|
document.getElementById('total-count').textContent = data.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function markNoSite(id) {
|
||||||
|
const row = data.find(d => d.id === id);
|
||||||
|
if (row) { row.hasSite = false; row.grade = 'F'; row.priority = 'high'; saveData(); render(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── DEMO TEMPLATES ───
|
||||||
|
const demos = [
|
||||||
|
{
|
||||||
|
name: 'Trattoria Da Marco — Italian',
|
||||||
|
type: 'Italian',
|
||||||
|
desc: 'Wood-fired pizza, pasta, wine list, dark luxury, Fraunces typography',
|
||||||
|
price: 'From €200 · €30/mo AI extras',
|
||||||
|
url: '/demos/ristorante/italian/',
|
||||||
|
status: 'done',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'The Argentine Grill — Steakhouse',
|
||||||
|
type: 'Steakhouse',
|
||||||
|
desc: 'Dark moody, premium cuts, dry-aged beef, Malbec wine list',
|
||||||
|
price: 'From €250 · €30/mo AI extras',
|
||||||
|
url: '/demos/ristorante/steakhouse/',
|
||||||
|
status: 'done',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Maharaja Spice — Indian',
|
||||||
|
type: 'Indian',
|
||||||
|
desc: 'Rich warm tones, tandoor section, thali specials, butter chicken',
|
||||||
|
price: 'From €200 · €30/mo AI extras',
|
||||||
|
url: '/demos/ristorante/indian/',
|
||||||
|
status: 'done',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Kaito Sushi — Japanese',
|
||||||
|
type: 'Japanese / Omakase',
|
||||||
|
desc: 'Minimal Japanese aesthetic, horizontal scrolling menu, omakase feature, dark ink tones',
|
||||||
|
price: 'From €200 · €30/mo AI extras',
|
||||||
|
url: '/demos/ristorante/sushi/',
|
||||||
|
status: 'done',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Pizzeria da Marco — Pizza',
|
||||||
|
type: 'Pizza / Casual',
|
||||||
|
desc: 'Italian flag accent, wood-fired pizza, pasta section, Fraunces typography',
|
||||||
|
price: 'From €150 · €30/mo AI extras',
|
||||||
|
url: '/demos/ristorante/pizza/',
|
||||||
|
status: 'done',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function renderDemos() {
|
||||||
|
const grid = document.getElementById('demos-grid');
|
||||||
|
grid.innerHTML = demos.map(d => `
|
||||||
|
<div class="demo-card">
|
||||||
|
<div class="demo-preview">
|
||||||
|
${d.preview ? `<img src="${d.preview}" alt="${d.name}">` : `<span class="demo-label">${d.type}</span>`}
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<div class="demo-name">${d.name}</div>
|
||||||
|
<span class="demo-status ${d.status === 'done' ? 'done' : 'building'}">${d.status === 'done' ? '✅ Live' : '🚧 Building'}</span>
|
||||||
|
<div class="demo-desc">${d.desc}</div>
|
||||||
|
<div class="demo-price">${d.price}</div>
|
||||||
|
${d.url !== '#' ? `<a href="${d.url}" class="btn btn-primary" target="_blank">View Demo</a>` : `<button class="btn btn-outline" disabled>Coming Soon</button>`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial render
|
||||||
|
render();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,387 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Casa Alberto — Benalmádena</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root { --bg-dark: #0c0a09; --bg-card: #1c1917; --gold: #d4a853; --gold-light: #e8c07d; --cream: #f5f0e8; --text: #e8e0d5; --text-muted: #a09080; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Lato', sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||||
|
|
||||||
|
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(12,10,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,83,0.15); }
|
||||||
|
.nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
|
||||||
|
.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(--gold); color: var(--bg-dark) !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
|
||||||
|
.nav-cta:hover { background: var(--gold-light) !important; }
|
||||||
|
|
||||||
|
.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(12,10,9,0.25) 0%, rgba(12,10,9,0.65) 55%, rgba(12,10,9,1) 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
|
||||||
|
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||||
|
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||||
|
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||||
|
.hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); 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: 500px; 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-dark); 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,83,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,83,0.08); }
|
||||||
|
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0; animation: fadeUp 0.8s 1.2s forwards; }
|
||||||
|
.scroll-indicator span { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); margin: 0 auto; animation: scrollPulse 2s infinite; }
|
||||||
|
|
||||||
|
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: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||||
|
.section-title em { font-style: italic; color: var(--gold); }
|
||||||
|
|
||||||
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||||
|
.about-img { position: relative; border-radius: 4px; overflow: hidden; }
|
||||||
|
.about-img img { width: 100%; height: 500px; object-fit: cover; display: block; }
|
||||||
|
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||||
|
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||||
|
.about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
|
||||||
|
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
|
||||||
|
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
|
||||||
|
.about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(212,168,83,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
|
||||||
|
|
||||||
|
#menu { background: var(--bg-card); }
|
||||||
|
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
|
||||||
|
.menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(212,168,83,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
|
||||||
|
.menu-tab:first-child { border-radius: 2px 0 0 2px; }
|
||||||
|
.menu-tab:last-child { border-radius: 0 2px 2px 0; }
|
||||||
|
.menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg-dark); border-color: var(--gold); }
|
||||||
|
.menu-category { display: none; }
|
||||||
|
.menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
||||||
|
.menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(212,168,83,0.08); }
|
||||||
|
.menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||||
|
.menu-item-info { flex: 1; }
|
||||||
|
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
|
||||||
|
.menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
|
||||||
|
.menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
|
||||||
|
.menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
|
||||||
|
|
||||||
|
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 250px 250px; gap: 0.5rem; }
|
||||||
|
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transition: transform 0.4s, opacity 0.4s; cursor: pointer; }
|
||||||
|
.gallery-grid img:hover { transform: scale(1.03); opacity: 0.85; }
|
||||||
|
.gallery-grid img:first-child { grid-row: span 2; }
|
||||||
|
|
||||||
|
#location { background: var(--bg-card); }
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||||
|
.info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
|
||||||
|
.hours-table { width: 100%; }
|
||||||
|
.hours-table tr { border-bottom: 1px solid rgba(212,168,83,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; }
|
||||||
|
.hours-table tr:last-child { border: none; }
|
||||||
|
.address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
|
||||||
|
.address strong { color: var(--gold); font-weight: 400; }
|
||||||
|
|
||||||
|
footer { background: #080604; padding: 4rem 2rem 2rem; text-align: center; }
|
||||||
|
.footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
|
||||||
|
footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||||
|
|
||||||
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; transform: scaleY(1.2); } }
|
||||||
|
.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; }
|
||||||
|
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
|
||||||
|
.gallery-grid img:first-child { grid-row: span 1; }
|
||||||
|
.about-img::after { display: none; }
|
||||||
|
.about-img img { height: 300px; }
|
||||||
|
.about-features { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
section { padding: 4rem 1.2rem; }
|
||||||
|
.hero-btns { flex-direction: column; align-items: center; }
|
||||||
|
.btn-primary, .btn-ghost { width: 100%; text-align: center; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo">Casa Alberto</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#menu">Menu</a></li>
|
||||||
|
<li><a href="#gallery">Gallery</a></li>
|
||||||
|
<li><a href="#location">Visit</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||||
|
<h1>Casa Alberto</h1>
|
||||||
|
<p class="hero-subtitle">Good food, good company</p>
|
||||||
|
<p class="hero-desc">Traditional Spanish cuisine in the heart of Benalmádena. Fresh ingredients, authentic recipes, and a warm welcome every day.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#menu" class="btn-primary">View Menu</a>
|
||||||
|
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scroll-indicator"><span></span></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-img reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80" alt="Restaurant interior" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="about-text reveal">
|
||||||
|
<p class="section-tag">Our Story</p>
|
||||||
|
<h3>A local favourite for over 20 years</h3>
|
||||||
|
<p>Casa Alberto has been serving the Benalmádena community since 2003. What started as a family kitchen has grown into one of the coast's most trusted spots for authentic Spanish cooking.</p>
|
||||||
|
<p>We use fresh, local ingredients sourced daily from the market. Our paella is made the traditional way — slow-cooked on an open flame, with saffron and love. Whether it's a Sunday roast or a quick tapas lunch, you'll always feel at home here.</p>
|
||||||
|
<p>Drop in anytime. There's always a table waiting for you.</p>
|
||||||
|
<div class="about-features">
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh market ingredients</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Traditional recipes</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Homemade paella</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family atmosphere</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="menu">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Our Menu</p>
|
||||||
|
<h2 class="section-title">Taste <em>Spain</em></h2>
|
||||||
|
|
||||||
|
<div class="menu-tabs">
|
||||||
|
<button class="menu-tab active" onclick="showMenu('tapas')">Tapas</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('carnes')">Carnes</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('pescado')">Pescado</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('paella')">Paella</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('postres')">Postres</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<div class="menu-category active" id="menu-tapas">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1541529086526-db283c563270?w=200&q=70" alt="Patatas Bravas" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Patatas Bravas</span><span class="menu-item-price">€6.00</span></div>
|
||||||
|
<p class="menu-item-desc">Crispy fried potatoes, spicy bravas sauce, aioli</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1601050690597-df0568f70950?w=200&q=70" alt="Jamón Ibérico" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Jamón Ibérico de Bellota</span><span class="menu-item-price">€14.00</span></div>
|
||||||
|
<p class="menu-item-desc">Thinly sliced acorn-fed Iberian ham, picos bread</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Croquetas" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Croquetas de Jamón</span><span class="menu-item-price">€7.50</span></div>
|
||||||
|
<p class="menu-item-desc">Homemade ham croquettes, crispy exterior, creamy interior</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563714948775-8f0b85b9c72f?w=200&q=70" alt="Gambas al Ajillo" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Gambas al Ajillo</span><span class="menu-item-price">€10.00</span></div>
|
||||||
|
<p class="menu-item-desc">Prawns cooked in garlic and chili, olive oil, white wine</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-carnes">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1558030006-450675393462?w=200&q=70" alt="Solomillo" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Solomillo al Whisky</span><span class="menu-item-price">€16.00</span></div>
|
||||||
|
<p class="menu-item-desc">Pork tenderloin in whisky sauce, caramelised onions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Entrecot" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Entrecot a la Parrilla</span><span class="menu-item-price">€19.00</span></div>
|
||||||
|
<p class="menu-item-desc">Grilled ribeye, roasted peppers, chips, garlic butter</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=200&q=70" alt="Pollo" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Pollo al Ajillo</span><span class="menu-item-price">€12.00</span></div>
|
||||||
|
<p class="menu-item-desc">Chicken pieces cooked in garlic, white wine, herbs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-pescado">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?w=200&q=70" alt="Bacalao" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Bacalao a la Miel</span><span class="menu-item-price">€15.00</span></div>
|
||||||
|
<p class="menu-item-desc">Cod loin, honey glaze, baked until golden</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1485921325833-c519f76c4927?w=200&q=70" alt="Fritura" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Fritura Malagueña</span><span class="menu-item-price">€13.00</span></div>
|
||||||
|
<p class="menu-item-desc">Mixed fried fish — sardines, calamari, shrimp, aioli</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Atún" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Atún de Almadraba</span><span class="menu-item-price">€17.00</span></div>
|
||||||
|
<p class="menu-item-desc">Fresh bluefin tuna, grilled with olive oil and herbs</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-paella">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=200&q=70" alt="Paella" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Paella Valenciana</span><span class="menu-item-price">€12.00</span></div>
|
||||||
|
<p class="menu-item-desc">Chicken, rabbit, green beans, butter beans, saffron. For 2 persons minimum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1534482421-64566f976cfa?w=200&q=70" alt="Arroz Negro" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Arroz Negro</span><span class="menu-item-price">€13.00</span></div>
|
||||||
|
<p class="menu-item-desc">Black rice with cuttlefish, squid, ink, aioli. For 2 persons minimum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Arroz delSeñor" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Arroz delSeñor</span><span class="menu-item-price">€14.00</span></div>
|
||||||
|
<p class="menu-item-desc">Seafood paella — prawns, mussels, squid, monkfish. For 2 persons minimum.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-postres">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tarta" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Tarta de Queso Casera</span><span class="menu-item-price">€6.00</span></div>
|
||||||
|
<p class="menu-item-desc">Homemade Basque burnt cheesecake</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Flan" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Flan Casero</span><span class="menu-item-price">€4.50</span></div>
|
||||||
|
<p class="menu-item-desc">Traditional caramel custard, homemade daily</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=200&q=70" alt="Churros" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Churros con Chocolate</span><span class="menu-item-price">€5.00</span></div>
|
||||||
|
<p class="menu-item-desc">Fresh churros, thick hot chocolate for dipping</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="gallery">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Gallery</p>
|
||||||
|
<h2 class="section-title">Our <em>Place</em></h2>
|
||||||
|
<div class="gallery-grid reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600&q=80" alt="Restaurant interior" loading="lazy">
|
||||||
|
<img src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=400&q=80" alt="Paella" loading="lazy">
|
||||||
|
<img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&q=80" alt="Dining" loading="lazy">
|
||||||
|
<img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&q=80" alt="Plated food" loading="lazy">
|
||||||
|
<img src="https://images.unsplash.com/photo-1579684947550-22e945225d9a?w=400&q=80" alt="Wine" loading="lazy">
|
||||||
|
</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>Casa Alberto</em></h2>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-block reveal">
|
||||||
|
<h3>Opening Hours</h3>
|
||||||
|
<table class="hours-table">
|
||||||
|
<tr><td>Monday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Tuesday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Wednesday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Thursday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
|
||||||
|
<tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
</table>
|
||||||
|
<div class="address">
|
||||||
|
<p><strong>📍 Address</strong></p>
|
||||||
|
<p>Av. Antonio Machado, 108<br>29630 Benalmádena, Málaga<br>Spain</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-block reveal">
|
||||||
|
<h3>Find Us on the Map</h3>
|
||||||
|
<div style="border-radius:4px;overflow:hidden;border:1px solid rgba(212,168,83,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="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="footer-logo">Casa Alberto</p>
|
||||||
|
<p>Av. Antonio Machado, 108 · 29630 Benalmádena · Spain</p>
|
||||||
|
<p style="margin-top:1rem; opacity: 0.4;">© 2026 Casa Alberto. Made with ❤️ in Benalmádena.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById('navbar');
|
||||||
|
window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
|
||||||
|
|
||||||
|
function showMenu(category) {
|
||||||
|
document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
|
||||||
|
document.getElementById('menu-' + category).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
const revealEls = document.querySelectorAll('.reveal');
|
||||||
|
const revealObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1 });
|
||||||
|
revealEls.forEach(el => revealObserver.observe(el));
|
||||||
|
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||||
|
a.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(a.getAttribute('href'));
|
||||||
|
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,490 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Restaurant Website Templates — HostPioneers</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root {
|
||||||
|
--bg: #080809;
|
||||||
|
--bg-card: #111114;
|
||||||
|
--border: rgba(255,255,255,0.07);
|
||||||
|
--text: #f0ede8;
|
||||||
|
--muted: #6b6560;
|
||||||
|
--gold: #c9a55a;
|
||||||
|
--gold-dim: rgba(201,165,90,0.15);
|
||||||
|
}
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* ── HEADER ── */
|
||||||
|
header { padding: 2rem 3rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(8,8,9,0.9); backdrop-filter: blur(16px); }
|
||||||
|
.header-logo { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
|
||||||
|
.header-logo span { color: var(--gold); }
|
||||||
|
.header-cta { background: var(--gold); color: #080809; padding: 0.55rem 1.5rem; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.3s; }
|
||||||
|
.header-cta:hover { background: #e0bc72; transform: translateY(-1px); }
|
||||||
|
|
||||||
|
/* ── HERO ── */
|
||||||
|
.hero { padding: 10rem 3rem 6rem; max-width: 860px; margin: 0 auto; text-align: center; }
|
||||||
|
.hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||||
|
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.5rem; }
|
||||||
|
.hero h1 em { font-style: italic; color: var(--gold); }
|
||||||
|
.hero-desc { font-size: 0.95rem; color: var(--muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; font-weight: 300; }
|
||||||
|
.hero-pricing { display: inline-flex; align-items: baseline; gap: 0.5rem; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.2); padding: 0.8rem 2rem; border-radius: 2px; }
|
||||||
|
.hero-pricing .from { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
|
||||||
|
.hero-pricing .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); }
|
||||||
|
.hero-pricing .per { font-size: 0.75rem; color: var(--muted); }
|
||||||
|
|
||||||
|
/* ── DEMOS GRID ── */
|
||||||
|
.demos-section { padding: 4rem 3rem 6rem; max-width: 1280px; margin: 0 auto; }
|
||||||
|
.demos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
||||||
|
.demo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; display: block; }
|
||||||
|
.demo-card:hover { border-color: rgba(201,165,90,0.35); transform: translateY(-6px); }
|
||||||
|
.demo-card:hover .demo-img img { transform: scale(1.04); }
|
||||||
|
.demo-img { height: 200px; overflow: hidden; position: relative; }
|
||||||
|
.demo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
|
||||||
|
.demo-badge { position: absolute; top: 0.8rem; right: 0.8rem; background: rgba(8,8,9,0.75); backdrop-filter: blur(8px); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0.3rem 0.7rem; border-radius: 2px; border: 1px solid rgba(201,165,90,0.2); }
|
||||||
|
.demo-info { padding: 1.4rem; }
|
||||||
|
.demo-type { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
|
||||||
|
.demo-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||||
|
.demo-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
|
||||||
|
.demo-link { font-size: 0.72rem; font-weight: 600; color: var(--gold); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.4rem; }
|
||||||
|
.demo-link::after { content: '→'; transition: transform 0.2s; }
|
||||||
|
.demo-card:hover .demo-link::after { transform: translateX(4px); }
|
||||||
|
|
||||||
|
/* ── WHAT'S INCLUDED ── */
|
||||||
|
.included-section { padding: 5rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||||
|
.included-inner { max-width: 1100px; margin: 0 auto; }
|
||||||
|
.included-header { text-align: center; margin-bottom: 3rem; }
|
||||||
|
.included-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||||
|
.included-header p { font-size: 0.85rem; color: var(--muted); }
|
||||||
|
.included-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
|
||||||
|
.included-item { text-align: center; padding: 1.5rem 1rem; }
|
||||||
|
.included-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
|
||||||
|
.included-icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
|
||||||
|
.included-item h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
|
||||||
|
.included-item p { font-size: 0.75rem; color: var(--muted); line-height: 1.6; }
|
||||||
|
|
||||||
|
/* ── PRICING ── */
|
||||||
|
.pricing-section { padding: 6rem 3rem; max-width: 900px; margin: 0 auto; text-align: center; }
|
||||||
|
.pricing-section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||||
|
.pricing-section > p { font-size: 0.85rem; color: var(--muted); margin-bottom: 3rem; }
|
||||||
|
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
|
||||||
|
.pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; }
|
||||||
|
.pricing-card.featured { border-color: rgba(201,165,90,0.3); position: relative; }
|
||||||
|
.pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -1px; left: 2rem; background: var(--gold); color: #080809; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.3rem 0.8rem; border-radius: 0 0 4px 4px; }
|
||||||
|
.pricing-card h3 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
|
||||||
|
.pricing-card h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||||
|
.pricing-card .price { font-size: 2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.3rem; }
|
||||||
|
.pricing-card .price-note { font-size: 0.72rem; color: var(--muted); margin-bottom: 1.5rem; }
|
||||||
|
.pricing-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
|
||||||
|
.pricing-card li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; }
|
||||||
|
.pricing-card li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
|
||||||
|
|
||||||
|
/* ── MONTHLY RETAINER ── */
|
||||||
|
.retainer-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
|
||||||
|
.retainer-inner { max-width: 1100px; margin: 0 auto; }
|
||||||
|
.retainer-header { text-align: center; margin-bottom: 3.5rem; }
|
||||||
|
.section-eyebrow { font-size: 0.68rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
|
||||||
|
.retainer-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||||
|
.retainer-intro { font-size: 0.88rem; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.8; }
|
||||||
|
.retainer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
|
||||||
|
.retainer-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; text-align: center; transition: border-color 0.3s; position: relative; }
|
||||||
|
.retainer-card.featured { border-color: rgba(201,165,90,0.3); }
|
||||||
|
.retainer-card:hover { border-color: rgba(201,165,90,0.25); }
|
||||||
|
.retainer-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
|
||||||
|
.retainer-hours { font-size: 4rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 0.3rem; }
|
||||||
|
.retainer-unit { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.2rem; }
|
||||||
|
.retainer-price { font-size: 2.2rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
|
||||||
|
.retainer-price span { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
|
||||||
|
.retainer-equivalent { font-size: 0.7rem; color: var(--muted); margin-bottom: 1.5rem; }
|
||||||
|
.retainer-features { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||||
|
.retainer-features li { font-size: 0.8rem; color: var(--muted); padding-left: 1.2rem; position: relative; }
|
||||||
|
.retainer-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; font-size: 0.7rem; }
|
||||||
|
.retainer-btn { background: transparent; border: 1px solid rgba(201,165,90,0.25); color: var(--gold); padding: 0.6rem 1.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; width: 100%; transition: all 0.3s; font-family: 'Inter', sans-serif; }
|
||||||
|
.retainer-btn:hover { background: rgba(201,165,90,0.08); border-color: rgba(201,165,90,0.4); }
|
||||||
|
.retainer-btn.primary { background: var(--gold); color: #080809; border-color: var(--gold); }
|
||||||
|
.retainer-btn.primary:hover { background: #e0bc72; }
|
||||||
|
.retainer-note { text-align: center; font-size: 0.75rem; color: var(--muted); max-width: 500px; margin: 0 auto; line-height: 1.7; }
|
||||||
|
|
||||||
|
/* ── CONTACT FORM ── */
|
||||||
|
.contact-section { padding: 6rem 3rem; background: var(--bg-card); border-top: 1px solid var(--border); }
|
||||||
|
.contact-inner { max-width: 640px; margin: 0 auto; }
|
||||||
|
.contact-header { text-align: center; margin-bottom: 2.5rem; }
|
||||||
|
.contact-header h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin-bottom: 0.8rem; }
|
||||||
|
.contact-header p { font-size: 0.85rem; color: var(--muted); }
|
||||||
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||||
|
.form-full { grid-column: 1 / -1; }
|
||||||
|
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||||
|
.form-group label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
|
||||||
|
.form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.85rem; padding: 0.7rem 0.9rem; width: 100%; transition: border-color 0.2s; }
|
||||||
|
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: rgba(201,165,90,0.4); }
|
||||||
|
.form-group textarea { resize: vertical; min-height: 100px; }
|
||||||
|
.form-submit { background: var(--gold); color: #080809; border: none; padding: 0.9rem 2.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; margin-top: 1rem; transition: all 0.3s; font-family: 'Inter', sans-serif; }
|
||||||
|
.form-submit:hover { background: #e0bc72; transform: translateY(-1px); }
|
||||||
|
.form-note { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.8rem; }
|
||||||
|
|
||||||
|
/* ── FOOTER ── */
|
||||||
|
footer { padding: 2.5rem 3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
footer p { font-size: 0.72rem; color: var(--muted); }
|
||||||
|
footer a { color: var(--gold); }
|
||||||
|
|
||||||
|
/* ── SUCCESS STATE ── */
|
||||||
|
.form-success { display: none; text-align: center; padding: 3rem; }
|
||||||
|
.form-success.show { display: block; }
|
||||||
|
.form-success h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
|
||||||
|
.form-success p { color: var(--muted); font-size: 0.85rem; }
|
||||||
|
|
||||||
|
/* ── RESPONSIVE ── */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.demos-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.included-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.pricing-cards { grid-template-columns: 1fr; }
|
||||||
|
.retainer-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
|
||||||
|
header { padding: 1.2rem 1.5rem; }
|
||||||
|
.hero { padding: 8rem 1.5rem 4rem; }
|
||||||
|
.demos-section, .included-section, .pricing-section, .retainer-section, .contact-section { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||||
|
.form-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.demos-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="header-logo">Host<span>Pioneers</span> — Restaurant Templates</div>
|
||||||
|
<button class="header-cta" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Get Your Website</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<p class="hero-eyebrow">6 Restaurant Templates — Ready Now</p>
|
||||||
|
<h1>Your restaurant.<br><em>Online. Professional.</em><br>Ready to impress.</h1>
|
||||||
|
<p class="hero-desc">Beautiful, mobile-ready websites built for independent restaurants. Custom design, not templates. Includes hosting, domain setup, and AI menu extras.</p>
|
||||||
|
<div class="hero-pricing">
|
||||||
|
<span class="from">From</span>
|
||||||
|
<span class="price">€199</span>
|
||||||
|
<span class="per">one-time setup</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- DEMOS -->
|
||||||
|
<section class="demos-section">
|
||||||
|
<div class="demos-grid">
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/italian/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80" alt="Italian restaurant" loading="lazy">
|
||||||
|
<span class="demo-badge">Italian</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Italian · Pizza · Pasta</p>
|
||||||
|
<h4 class="demo-name">Trattoria Da Marco</h4>
|
||||||
|
<p class="demo-desc">Wood-fired pizza, handmade pasta, wine list. Dark luxury aesthetic with Fraunces typography.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/steakhouse/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=600&q=80" alt="Steakhouse" loading="lazy">
|
||||||
|
<span class="demo-badge">Steakhouse</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Steakhouse · Grill · Wine</p>
|
||||||
|
<h4 class="demo-name">The Argentine Grill</h4>
|
||||||
|
<p class="demo-desc">Premium dry-aged cuts, Malbec wine list, open-fire aesthetic. Bold, moody, sophisticated.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/indian/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&q=80" alt="Indian restaurant" loading="lazy">
|
||||||
|
<span class="demo-badge">Indian</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Indian · Tandoor · Curry</p>
|
||||||
|
<h4 class="demo-name">Maharaja Spice</h4>
|
||||||
|
<p class="demo-desc">Rich warm tones, tandoor section, thali specialties, butter chicken focus. Warm and inviting.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/spanish/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=600&q=80" alt="Spanish restaurant" loading="lazy">
|
||||||
|
<span class="demo-badge">Spanish</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Spanish · Tapas · Mediterranean</p>
|
||||||
|
<h4 class="demo-name">La Bodega del Mar</h4>
|
||||||
|
<p class="demo-desc">Light Mediterranean aesthetic, tapas grid, sherry and wine list, paella specials, beach vibes.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/sushi/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1553621042-f6e147245754?w=600&q=80" alt="Japanese restaurant" loading="lazy">
|
||||||
|
<span class="demo-badge">Japanese</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Japanese · Omakase · Izakaya</p>
|
||||||
|
<h4 class="demo-name">Kaito Sushi</h4>
|
||||||
|
<p class="demo-desc">Editorial minimal design with Japanese typography. Horizontal scrolling menu, omakase feature section.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/demos/ristorante/pizza/" class="demo-card" target="_blank">
|
||||||
|
<div class="demo-img">
|
||||||
|
<img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&q=80" alt="Pizza restaurant" loading="lazy">
|
||||||
|
<span class="demo-badge">Pizza</span>
|
||||||
|
</div>
|
||||||
|
<div class="demo-info">
|
||||||
|
<p class="demo-type">Pizza · Casual · Italian</p>
|
||||||
|
<h4 class="demo-name">Pizzeria da Marco</h4>
|
||||||
|
<p class="demo-desc">Italian flag accent, wood-fired menu, pasta section. Casual but premium, great for delivery.</p>
|
||||||
|
<div class="demo-link">View Template</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- WHAT'S INCLUDED -->
|
||||||
|
<section class="included-section">
|
||||||
|
<div class="included-inner">
|
||||||
|
<div class="included-header">
|
||||||
|
<h2>Everything included</h2>
|
||||||
|
<p>One price. No surprises. Your site live in days.</p>
|
||||||
|
</div>
|
||||||
|
<div class="included-grid">
|
||||||
|
<div class="included-item">
|
||||||
|
<div class="included-icon">
|
||||||
|
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||||||
|
</div>
|
||||||
|
<h4>Custom Design</h4>
|
||||||
|
<p>Built for your restaurant type — not a generic template</p>
|
||||||
|
</div>
|
||||||
|
<div class="included-item">
|
||||||
|
<div class="included-icon">
|
||||||
|
<svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
|
||||||
|
</div>
|
||||||
|
<h4>Mobile Ready</h4>
|
||||||
|
<p>Perfect on every device — phone, tablet, desktop</p>
|
||||||
|
</div>
|
||||||
|
<div class="included-item">
|
||||||
|
<div class="included-icon">
|
||||||
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
</div>
|
||||||
|
<h4>AI Menu Chat</h4>
|
||||||
|
<p>Customers ask the menu in plain language, AI answers</p>
|
||||||
|
</div>
|
||||||
|
<div class="included-item">
|
||||||
|
<div class="included-icon">
|
||||||
|
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
</div>
|
||||||
|
<h4>Email Support</h4>
|
||||||
|
<p>Direct line to us — fast replies, no bots</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PRICING -->
|
||||||
|
<section class="pricing-section">
|
||||||
|
<h2>Website setup — one time</h2>
|
||||||
|
<p>Choose your template tier. All include hosting for year one.</p>
|
||||||
|
<div class="pricing-cards">
|
||||||
|
<div class="pricing-card">
|
||||||
|
<h3>Essential</h3>
|
||||||
|
<h4>Your Restaurant Website</h4>
|
||||||
|
<div class="price">€499</div>
|
||||||
|
<div class="price-note">One-time · then €25/mo hosting</div>
|
||||||
|
<ul>
|
||||||
|
<li>Custom restaurant template</li>
|
||||||
|
<li>Menu + photos + content</li>
|
||||||
|
<li>Google Maps + contact form</li>
|
||||||
|
<li>Mobile optimised</li>
|
||||||
|
<li>Social media links</li>
|
||||||
|
<li>1 year hosting included</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="pricing-card featured">
|
||||||
|
<h3>Professional</h3>
|
||||||
|
<h4>Website + AI Extras</h4>
|
||||||
|
<div class="price">€699</div>
|
||||||
|
<div class="price-note">One-time · then €30/mo all-in</div>
|
||||||
|
<ul>
|
||||||
|
<li>Everything in Essential</li>
|
||||||
|
<li>AI menu chatbot (24/7)</li>
|
||||||
|
<li>AI booking assistant</li>
|
||||||
|
<li>Multi-language menu option</li>
|
||||||
|
<li>Priority support line</li>
|
||||||
|
<li>1 year hosting included</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MONTHLY RETAINER -->
|
||||||
|
<section class="retainer-section">
|
||||||
|
<div class="retainer-inner">
|
||||||
|
<div class="retainer-header">
|
||||||
|
<p class="section-eyebrow">Monthly Support Retainer</p>
|
||||||
|
<h2>Keep your site fresh — prepaid hours</h2>
|
||||||
|
<p class="retainer-intro">Need menu updates, seasonal changes, new photos, or new sections? Prepay hours and use them when you need. Cancel anytime — no lock-in.</p>
|
||||||
|
</div>
|
||||||
|
<div class="retainer-grid">
|
||||||
|
<div class="retainer-card">
|
||||||
|
<div class="retainer-badge">Starter</div>
|
||||||
|
<div class="retainer-hours">2</div>
|
||||||
|
<div class="retainer-unit">hours / month</div>
|
||||||
|
<div class="retainer-price">€69<span>/mo</span></div>
|
||||||
|
<div class="retainer-equivalent">≈ €35/hr</div>
|
||||||
|
<ul class="retainer-features">
|
||||||
|
<li>Menu updates</li>
|
||||||
|
<li>Seasonal changes</li>
|
||||||
|
<li>Photo swaps</li>
|
||||||
|
<li>Email support</li>
|
||||||
|
</ul>
|
||||||
|
<button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Starter</button>
|
||||||
|
</div>
|
||||||
|
<div class="retainer-card featured">
|
||||||
|
<div class="retainer-badge">Standard</div>
|
||||||
|
<div class="retainer-hours">4</div>
|
||||||
|
<div class="retainer-unit">hours / month</div>
|
||||||
|
<div class="retainer-price">€119<span>/mo</span></div>
|
||||||
|
<div class="retainer-equivalent">≈ €30/hr</div>
|
||||||
|
<ul class="retainer-features">
|
||||||
|
<li>Everything in Starter</li>
|
||||||
|
<li>New menu sections</li>
|
||||||
|
<li>Layout adjustments</li>
|
||||||
|
<li>New pages (about, events)</li>
|
||||||
|
<li>Priority response</li>
|
||||||
|
</ul>
|
||||||
|
<button class="retainer-btn primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Standard</button>
|
||||||
|
</div>
|
||||||
|
<div class="retainer-card">
|
||||||
|
<div class="retainer-badge">Pro</div>
|
||||||
|
<div class="retainer-hours">8</div>
|
||||||
|
<div class="retainer-unit">hours / month</div>
|
||||||
|
<div class="retainer-price">€219<span>/mo</span></div>
|
||||||
|
<div class="retainer-equivalent">≈ €27/hr</div>
|
||||||
|
<ul class="retainer-features">
|
||||||
|
<li>Everything in Standard</li>
|
||||||
|
<li>Full page redesigns</li>
|
||||||
|
<li>New features + integrations</li>
|
||||||
|
<li>AI training for your restaurant</li>
|
||||||
|
<li>Dedicated Slack channel</li>
|
||||||
|
</ul>
|
||||||
|
<button class="retainer-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Choose Pro</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="retainer-note">Unused hours roll over to next month. Cancel anytime by sending one email. No contracts, no lock-in.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CONTACT FORM -->
|
||||||
|
<section class="contact-section" id="contact">
|
||||||
|
<div class="contact-inner">
|
||||||
|
<div class="contact-header">
|
||||||
|
<h2>Start your website</h2>
|
||||||
|
<p>Tell us about your restaurant — we'll be in touch within 24 hours.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="contactForm" onsubmit="handleSubmit(event)">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Restaurant Name</label>
|
||||||
|
<input type="text" name="restaurant" placeholder="La Casa Grande" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Contact Name</label>
|
||||||
|
<input type="text" name="name" placeholder="Javier" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Phone</label>
|
||||||
|
<input type="tel" name="phone" placeholder="+34 600 000 000">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="email" name="email" placeholder="javier@lacasa.es" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group form-full">
|
||||||
|
<label>Restaurant Type</label>
|
||||||
|
<select name="type">
|
||||||
|
<option value="">Select type...</option>
|
||||||
|
<option value="spanish">Spanish / Tapas</option>
|
||||||
|
<option value="italian">Italian / Pizza / Pasta</option>
|
||||||
|
<option value="steakhouse">Steakhouse / Grill</option>
|
||||||
|
<option value="indian">Indian / Asian</option>
|
||||||
|
<option value="sushi">Japanese / Sushi</option>
|
||||||
|
<option value="seafood">Seafood</option>
|
||||||
|
<option value="other">Fusion / Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group form-full">
|
||||||
|
<label>Tell us about your restaurant (optional)</label>
|
||||||
|
<textarea name="message" placeholder="What kind of cuisine? Do you have an existing website? Any special features you need?"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="form-submit">Send Enquiry</button>
|
||||||
|
<p class="form-note">No spam. No commitment. Just a real conversation.</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="form-success" id="formSuccess">
|
||||||
|
<h3>Message sent!</h3>
|
||||||
|
<p>We'll be in touch within 24 hours. Check your email.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 HostPioneers.com — HostPioneers, Benalmádena Costa</p>
|
||||||
|
<p><a href="https://hostpioneers.com">hostpioneers.com</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = document.getElementById('contactForm');
|
||||||
|
const success = document.getElementById('formSuccess');
|
||||||
|
const submitBtn = form.querySelector('.form-submit');
|
||||||
|
const data = new FormData(form);
|
||||||
|
|
||||||
|
// Show loading state
|
||||||
|
submitBtn.textContent = 'Sending…';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
|
// Send to Telegram HP Alerts in background
|
||||||
|
fetch('/autojobs/api/contact/telegram', {
|
||||||
|
method: 'POST',
|
||||||
|
body: new URLSearchParams({
|
||||||
|
name: data.get('name'),
|
||||||
|
email: data.get('email'),
|
||||||
|
phone: data.get('phone'),
|
||||||
|
type: data.get('type') || 'other',
|
||||||
|
restaurant: data.get('restaurant'),
|
||||||
|
message: data.get('message')
|
||||||
|
})
|
||||||
|
}).catch(function() {
|
||||||
|
// Telegram failure is non-fatal — user still sees success
|
||||||
|
}).finally(function() {
|
||||||
|
// Always show success regardless of Telegram result
|
||||||
|
form.style.display = 'none';
|
||||||
|
success.classList.add('show');
|
||||||
|
success.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,457 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Trattoria Da Mario — Authentic Italian Kitchen</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root { --bg: #0a0808; --bg-card: #181412; --bg-dark: #1a1510; --cream: #f5efe6; --gold: #c9a55a; --gold-light: #dfc07a; --red: #8b1a1a; --text: #e8e0d5; --text-muted: #9a8f82; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||||
|
|
||||||
|
/* 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(10,8,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,165,90,0.15); }
|
||||||
|
.nav-logo { font-family: 'Dancing Script', cursive; font-size: 1.8rem; color: var(--gold); text-decoration: none; }
|
||||||
|
.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(--red); color: white !important; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700 !important; }
|
||||||
|
.nav-cta:hover { background: #a02020 !important; }
|
||||||
|
|
||||||
|
/* 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(10,8,8,0.3) 0%, rgba(10,8,8,0.7) 55%, rgba(10,8,8,1) 100%), url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1600&q=80') center/cover no-repeat; }
|
||||||
|
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||||
|
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||||
|
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; color: var(--cream); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||||
|
.hero-subtitle { font-family: 'Dancing Script', cursive; font-size: clamp(1.4rem, 4vw, 2.2rem); 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: 500px; 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(201,165,90,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(201,165,90,0.08); }
|
||||||
|
|
||||||
|
/* SECTIONS */
|
||||||
|
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: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||||
|
.section-title em { font-style: italic; color: var(--gold); }
|
||||||
|
|
||||||
|
/* ABOUT */
|
||||||
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||||
|
.about-img { position: relative; border-radius: 4px; overflow: hidden; }
|
||||||
|
.about-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
|
||||||
|
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||||
|
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||||
|
.about-text p { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
|
||||||
|
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 2rem; }
|
||||||
|
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
|
||||||
|
.about-feature .icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(201,165,90,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.about-feature .icon svg { width: 10px; height: 10px; fill: var(--gold); }
|
||||||
|
|
||||||
|
/* MENU */
|
||||||
|
#menu { background: var(--bg-card); }
|
||||||
|
.menu-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 3rem; flex-wrap: wrap; }
|
||||||
|
.menu-tab { padding: 0.6rem 1.8rem; border: 1px solid rgba(201,165,90,0.2); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; font-family: 'Lato', sans-serif; }
|
||||||
|
.menu-tab:first-child { border-radius: 2px 0 0 2px; }
|
||||||
|
.menu-tab:last-child { border-radius: 0 2px 2px 0; }
|
||||||
|
.menu-tab.active, .menu-tab:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
|
||||||
|
.menu-category { display: none; }
|
||||||
|
.menu-category.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
||||||
|
.menu-item { display: flex; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(201,165,90,0.08); }
|
||||||
|
.menu-item-img { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||||
|
.menu-item-info { flex: 1; }
|
||||||
|
.menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 1rem; }
|
||||||
|
.menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--cream); }
|
||||||
|
.menu-item-price { font-size: 0.95rem; color: var(--gold); font-weight: 700; white-space: nowrap; }
|
||||||
|
.menu-item-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
|
||||||
|
|
||||||
|
/* WINE */
|
||||||
|
.wine-section { background: var(--bg-dark); }
|
||||||
|
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
||||||
|
.wine-item { text-align: center; padding: 1.5rem; border: 1px solid rgba(201,165,90,0.1); border-radius: 4px; }
|
||||||
|
.wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||||
|
.wine-item .wine-region { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||||
|
.wine-item .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
|
||||||
|
|
||||||
|
/* REVIEWS */
|
||||||
|
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||||
|
.review-card { background: var(--bg-card); border: 1px solid rgba(201,165,90,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.9rem; 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; }
|
||||||
|
.info-block h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--cream); margin-bottom: 1.5rem; }
|
||||||
|
.hours-table { width: 100%; }
|
||||||
|
.hours-table tr { border-bottom: 1px solid rgba(201,165,90,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; }
|
||||||
|
.hours-table tr:last-child { border: none; }
|
||||||
|
.address { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; margin-top: 1rem; }
|
||||||
|
.address strong { color: var(--gold); font-weight: 400; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { background: #060404; padding: 4rem 2rem 2rem; text-align: center; }
|
||||||
|
.footer-logo { font-family: 'Dancing Script', cursive; font-size: 2.5rem; color: var(--gold); margin-bottom: 0.5rem; }
|
||||||
|
footer p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||||||
|
|
||||||
|
/* ANIMATIONS */
|
||||||
|
@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); }
|
||||||
|
|
||||||
|
/* MOBILE */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.about-img::after { display: none; }
|
||||||
|
.about-img img { height: 280px; }
|
||||||
|
.about-features { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
section { padding: 4rem 1.2rem; }
|
||||||
|
.hero-btns { flex-direction: column; align-items: center; }
|
||||||
|
.btn-primary, .btn-ghost { width: 100%; text-align: center; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo">Trattoria Da Mario</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#menu">Menu</a></li>
|
||||||
|
<li><a href="#wine">Wine List</a></li>
|
||||||
|
<li><a href="#reviews">Reviews</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||||
|
<h1>Trattoria<br>Da Mario</h1>
|
||||||
|
<p class="hero-subtitle">Nonna's kitchen, made with amore</p>
|
||||||
|
<p class="hero-desc">Wood-fired pizza, hand-rolled pasta, and recipes from Naples since 1995. Fresh ingredients flown in from Italy every week.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#menu" class="btn-primary">View Menu</a>
|
||||||
|
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-img reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Italian chef" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="about-text reveal">
|
||||||
|
<p class="section-tag">Our Story</p>
|
||||||
|
<h3>Three generations of Italian cooking</h3>
|
||||||
|
<p>Trattoria Da Mario opened in 1995, founded by Mario Rossi who moved from Naples to the Costa del Sol. What began as a small kitchen serving the local Italian community has become Benalmádena's favourite Italian table.</p>
|
||||||
|
<p>Every morning, our kitchen starts with fresh pasta made by hand — just like Nonna taught Mario. Our pizzas are cooked in a traditional wood-fired oven built from Neapolitan bricks. We source our ingredients from Italy: San Marzano tomatoes, buffalo mozzarella from Campania, DOP olive oil from Liguria.</p>
|
||||||
|
<p>This is not fine dining. This is family cooking, served with warmth.</p>
|
||||||
|
<div class="about-features">
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Wood-fired oven</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Fresh pasta daily</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Italian imports</div>
|
||||||
|
<div class="about-feature"><span class="icon"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>Family recipes</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="menu">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Our Menu</p>
|
||||||
|
<h2 class="section-title">The Taste of <em>Italy</em></h2>
|
||||||
|
|
||||||
|
<div class="menu-tabs">
|
||||||
|
<button class="menu-tab active" onclick="showMenu('antipasti')">Antipasti</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('pasta')">Pasta</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('pizza')">Pizza</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('secondi')">Secondi</button>
|
||||||
|
<button class="menu-tab" onclick="showMenu('dolci')">Dolci</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<div class="menu-category active" id="menu-antipasti">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1541014741259-de529411b96a?w=200&q=70" alt="Bruschetta" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Bruschetta Pomodoro</span><span class="menu-item-price">€7.00</span></div>
|
||||||
|
<p class="menu-item-desc">Grilled ciabatta, vine tomatoes, fresh basil, garlic, extra virgin olive oil</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=200&q=70" alt="Carpaccio" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Carpaccio di Manzo</span><span class="menu-item-price">€12.00</span></div>
|
||||||
|
<p class="menu-item-desc">Thinly sliced beef, arugula, shaved Parmigiano, truffle oil, capers</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1625944525533-473f1a3d54e7?w=200&q=70" alt="Burrata" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Burrata Pugliese</span><span class="menu-item-price">€13.50</span></div>
|
||||||
|
<p class="menu-item-desc">Creamy burrata, San Marzano tomatoes, 25-year balsamic, fresh basil</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=200&q=70" alt="Calamari" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Calamari Fritti</span><span class="menu-item-price">€10.00</span></div>
|
||||||
|
<p class="menu-item-desc">Lightly fried squid rings, lemon aioli, marinara sauce</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-pasta">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=200&q=70" alt="Carbonara" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Spaghetti Carbonara</span><span class="menu-item-price">€14.00</span></div>
|
||||||
|
<p class="menu-item-desc">Guanciale, egg yolk, Pecorino Romano, black pepper — the Roman way</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=200&q=70" alt="Cacio e Pepe" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Tonnarelli Cacio e Pepe</span><span class="menu-item-price">€13.50</span></div>
|
||||||
|
<p class="menu-item-desc">Square spaghetti, Pecorino Romano, Tellicherry black pepper</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=200&q=70" alt="Ragù" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Pappardelle al Ragù</span><span class="menu-item-price">€15.50</span></div>
|
||||||
|
<p class="menu-item-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, Parmigiano</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=200&q=70" alt="Gnocchi" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Gnocchi alla Sorrentina</span><span class="menu-item-price">€13.00</span></div>
|
||||||
|
<p class="menu-item-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in oven</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-pizza">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&q=70" alt="Margherita" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Margherita DOP</span><span class="menu-item-price">€11.00</span></div>
|
||||||
|
<p class="menu-item-desc">San Marzano tomatoes, buffalo mozzarella, fresh basil, olive oil</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=200&q=70" alt="Diavola" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Diavola</span><span class="menu-item-price">€13.50</span></div>
|
||||||
|
<p class="menu-item-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, chili flakes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=200&q=70" alt="Quattro Formaggi" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Quattro Formaggi</span><span class="menu-item-price">€13.00</span></div>
|
||||||
|
<p class="menu-item-desc">Mozzarella, gorgonzola, Parmigiano, taleggio — a cheese lover's dream</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=200&q=70" alt="Tartufo" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Pizza Tartufo</span><span class="menu-item-price">€17.00</span></div>
|
||||||
|
<p class="menu-item-desc">Black truffle cream, mozzarella, fresh mushrooms, truffle oil</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-secondi">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1546833998-877b37c2e5c6?w=200&q=70" alt="Branzino" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Branzino al Forno</span><span class="menu-item-price">€22.00</span></div>
|
||||||
|
<p class="menu-item-desc">Whole roasted sea bass, lemon, capers, olives, cherry tomatoes</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200&q=70" alt="Bistecca" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Bistecca alla Fiorentina</span><span class="menu-item-price">€28.00</span></div>
|
||||||
|
<p class="menu-item-desc">500g T-bone steak, rosemary, garlic, Tuscan olive oil, grilled over oak</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-category" id="menu-dolci">
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&q=70" alt="Tiramisù" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Tiramisù della Casa</span><span class="menu-item-price">€7.00</span></div>
|
||||||
|
<p class="menu-item-desc">Our signature — mascarpone, espresso-soaked savoiardi, cocoa</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1606313564200-e75d5e30476c?w=200&q=70" alt="Cannoli" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Cannoli Siciliani</span><span class="menu-item-price">€6.00</span></div>
|
||||||
|
<p class="menu-item-desc">Crispy shells, sweet ricotta, pistachios, dark chocolate chips</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<img class="menu-item-img" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=200&q=70" alt="Panna Cotta" loading="lazy">
|
||||||
|
<div class="menu-item-info">
|
||||||
|
<div class="menu-item-header"><span class="menu-item-name">Panna Cotta</span><span class="menu-item-price">€6.50</span></div>
|
||||||
|
<p class="menu-item-desc">Vanilla bean cream, wild berry compote, fresh mint</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="wine" class="wine-section">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Wine List</p>
|
||||||
|
<h2 class="section-title">A Glass of <em>Italy</em></h2>
|
||||||
|
<div class="wine-grid">
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Chianti Classico</div>
|
||||||
|
<div class="wine-region">Tuscany</div>
|
||||||
|
<div class="wine-price">from €18/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Barolo DOCG</div>
|
||||||
|
<div class="wine-region">Piedmont</div>
|
||||||
|
<div class="wine-price">from €32/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Prosecco di Valdobbiadene</div>
|
||||||
|
<div class="wine-region">Veneto</div>
|
||||||
|
<div class="wine-price">from €22/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Montepulciano d'Abruzzo</div>
|
||||||
|
<div class="wine-region">Abruzzo</div>
|
||||||
|
<div class="wine-price">from €16/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Vermentino di Sardegna</div>
|
||||||
|
<div class="wine-region">Sardinia</div>
|
||||||
|
<div class="wine-price">from €20/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Amarone della Valpolicella</div>
|
||||||
|
<div class="wine-region">Veneto</div>
|
||||||
|
<div class="wine-price">from €45/bottle</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 best carbonara I've had outside Italy. The pasta is made fresh every day — you can taste the difference. We come here every Sunday with the family."</p>
|
||||||
|
<div class="review-author">— Sarah M., TripAdvisor</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"Found this gem by accident. The wood-fired pizza is incredible — thin crust, perfect char. The tiramisù is homemade and the best I've had in Spain."</p>
|
||||||
|
<div class="review-author">— James K., Google</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"Mario himself came out to greet us. Such warm hospitality. The burrata is heavenly and the wine list has great Italian options. A real neighbourhood trattoria."</p>
|
||||||
|
<div class="review-author">— Elena R., 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>Our Table</em></h2>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-block reveal">
|
||||||
|
<h3>Opening Hours</h3>
|
||||||
|
<table class="hours-table">
|
||||||
|
<tr><td>Monday</td><td>Closed</td></tr>
|
||||||
|
<tr><td>Tuesday — 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>12:00 — 22:00</td></tr>
|
||||||
|
</table>
|
||||||
|
<div class="address">
|
||||||
|
<p><strong>📍 Address</strong></p>
|
||||||
|
<p>Av. Antonio Machado, 108<br>29630 Benalmádena Costa<br>Spain</p>
|
||||||
|
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
|
||||||
|
<p>+34 952 567 890</p>
|
||||||
|
<p>info@trattoriadamario.es</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-block reveal">
|
||||||
|
<h3>Find Us on the Map</h3>
|
||||||
|
<div style="border-radius4px;overflow:hidden;border:1px solid rgba(201,165,90,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="320" style="border:0;display:block;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="footer-logo">Trattoria Da Mario</p>
|
||||||
|
<p>Av. Antonio Machado, 108 · 29630 Benalmádena · +34 952 567 890</p>
|
||||||
|
<p style="margin-top:1rem; opacity: 0.4;">© 2026 Trattoria Da Mario. Made with ❤️ in Benalmádena.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const nav = document.getElementById('navbar');
|
||||||
|
window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); });
|
||||||
|
|
||||||
|
function showMenu(category) {
|
||||||
|
document.querySelectorAll('.menu-category').forEach(el => el.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.menu-tab').forEach(el => el.classList.remove('active'));
|
||||||
|
document.getElementById('menu-' + category).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
const revealEls = document.querySelectorAll('.reveal');
|
||||||
|
const revealObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) { entry.target.classList.add('visible'); revealObserver.unobserve(entry.target); }
|
||||||
|
});
|
||||||
|
}, { threshold: 0.1 });
|
||||||
|
revealEls.forEach(el => revealObserver.observe(el));
|
||||||
|
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||||||
|
a.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(a.getAttribute('href'));
|
||||||
|
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,375 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Pizzeria da Marco — Artisan Pizza & Pasta</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root {
|
||||||
|
--green: #3d8c40;
|
||||||
|
--red: #c0392b;
|
||||||
|
--cream: #faf3e8;
|
||||||
|
--dark: #1a1210;
|
||||||
|
--warm: #2d1f1a;
|
||||||
|
--gold: #d4a843;
|
||||||
|
--text: #e8ddd0;
|
||||||
|
--muted: #9a8a78;
|
||||||
|
}
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||||
|
|
||||||
|
/* ITALIAN FLAG ACCENT */
|
||||||
|
.flag-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--green) 33%, var(--cream) 33%, var(--cream) 66%, var(--red) 66%); }
|
||||||
|
|
||||||
|
/* 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(26,18,16,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,67,0.1); }
|
||||||
|
.nav-logo { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); font-weight: 900; text-decoration: none; font-style: italic; }
|
||||||
|
.nav-logo span { color: var(--green); }
|
||||||
|
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
||||||
|
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; }
|
||||||
|
.nav-links a:hover { color: var(--cream); }
|
||||||
|
.nav-cta { background: var(--red); color: white; padding: 0.5rem 1.2rem; border-radius: 50px; font-weight: 600; font-size: 0.8rem; }
|
||||||
|
.nav-cta:hover { background: #a93226; color: white; text-decoration: none; }
|
||||||
|
|
||||||
|
/* HERO */
|
||||||
|
.hero { height: 100vh; min-height: 580px; position: relative; display: flex; align-items: center; overflow: hidden; }
|
||||||
|
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,18,16,0.3) 0%, rgba(26,18,16,0.9) 65%, var(--dark) 100%), url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=1600&q=80') center/cover no-repeat; }
|
||||||
|
.hero-pizza-badge { position: absolute; bottom: 2rem; right: 2rem; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.6; }
|
||||||
|
.hero-pizza-badge .badge-num { font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
|
||||||
|
.hero-pizza-badge .badge-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
|
||||||
|
.hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 750px; }
|
||||||
|
.hero-tag { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; font-weight: 600; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||||
|
.hero h1 { font-family: 'Fraunces', serif; font-size: clamp(3.5rem, 9vw, 6rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||||
|
.hero h1 em { color: var(--red); font-style: italic; }
|
||||||
|
.hero-subtitle { font-size: 1.1rem; color: var(--gold); margin-bottom: 1.5rem; font-weight: 300; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||||
|
.hero-desc { font-size: 1rem; color: var(--muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||||
|
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||||
|
.btn-primary { background: var(--red); color: white; padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; transition: all 0.3s; display: inline-block; }
|
||||||
|
.btn-primary:hover { background: #a93226; transform: translateY(-2px); }
|
||||||
|
.btn-ghost { border: 1px solid rgba(250,243,232,0.3); color: var(--cream); padding: 0.9rem 2.2rem; border-radius: 50px; text-decoration: none; font-size: 0.85rem; transition: all 0.3s; display: inline-block; }
|
||||||
|
.btn-ghost:hover { border-color: var(--cream); background: rgba(250,243,232,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.25em; text-transform: uppercase; color: var(--green); text-align: center; margin-bottom: 0.5rem; font-weight: 600; }
|
||||||
|
.section-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; font-weight: 900; }
|
||||||
|
.section-title em { font-style: italic; color: var(--red); }
|
||||||
|
|
||||||
|
/* PIZZA GRID */
|
||||||
|
#pizzas { background: var(--warm); }
|
||||||
|
.pizza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }
|
||||||
|
.pizza-card { background: var(--dark); border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,168,67,0.08); transition: transform 0.3s, border-color 0.3s; }
|
||||||
|
.pizza-card:hover { transform: translateY(-6px); border-color: rgba(212,168,67,0.25); }
|
||||||
|
.pizza-card img { width: 100%; height: 180px; object-fit: cover; }
|
||||||
|
.pizza-info { padding: 1.2rem; }
|
||||||
|
.pizza-info .pizza-name { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 0.4rem; font-weight: 600; }
|
||||||
|
.pizza-info .pizza-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; line-height: 1.5; }
|
||||||
|
.pizza-footer { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.pizza-price { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--green); font-weight: 900; }
|
||||||
|
.pizza-tag { font-size: 0.65rem; padding: 0.2rem 0.5rem; border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||||
|
.tag-veg { background: rgba(61,140,64,0.15); color: var(--green); }
|
||||||
|
.tag-spicy { background: rgba(192,57,43,0.15); color: var(--red); }
|
||||||
|
.tag-popular { background: rgba(212,168,67,0.15); color: var(--gold); }
|
||||||
|
|
||||||
|
/* ABOUT */
|
||||||
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||||
|
.about-img img { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; }
|
||||||
|
.about-text h3 { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--cream); margin-bottom: 1rem; font-weight: 600; }
|
||||||
|
.about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||||
|
.about-text p strong { color: var(--cream); }
|
||||||
|
.process-steps { display: flex; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
|
||||||
|
.process-step { display: flex; align-items: center; gap: 0.8rem; }
|
||||||
|
.process-step .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: white; font-family: 'Fraunces', serif; font-weight: 900; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||||
|
.process-step .step-text { font-size: 0.8rem; color: var(--muted); }
|
||||||
|
.process-step .step-text strong { color: var(--cream); }
|
||||||
|
|
||||||
|
/* PASTA */
|
||||||
|
#pasta { background: var(--warm); }
|
||||||
|
.pasta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
|
||||||
|
.pasta-item { background: var(--dark); border-radius: 10px; overflow: hidden; }
|
||||||
|
.pasta-item img { width: 100%; height: 140px; object-fit: cover; }
|
||||||
|
.pasta-item .pasta-info { padding: 1rem; }
|
||||||
|
.pasta-item .pasta-name { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||||
|
.pasta-item .pasta-desc { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.5rem; }
|
||||||
|
.pasta-item .pasta-price { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--green); font-weight: 900; }
|
||||||
|
|
||||||
|
/* REVIEWS */
|
||||||
|
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||||
|
.review-card { background: var(--warm); border: 1px solid rgba(212,168,67,0.08); border-radius: 10px; 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(--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(--warm); }
|
||||||
|
.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(--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(--muted); line-height: 1.9; }
|
||||||
|
.address-block strong { color: var(--green); font-weight: 600; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { background: #0f0a08; padding: 4rem 2rem 2rem; text-align: center; }
|
||||||
|
.footer-logo { font-family: 'Fraunces', serif; font-size: 2.5rem; color: var(--cream); font-weight: 900; font-style: italic; margin-bottom: 0.5rem; }
|
||||||
|
.footer-logo span { color: var(--green); }
|
||||||
|
footer p { font-size: 0.8rem; color: var(--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; }
|
||||||
|
.hero-content { padding: 2rem; }
|
||||||
|
.about-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.hero-pizza-badge { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="flag-stripe"></div>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo"><span>Pizzeria</span> da Marco</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#pizzas">Pizzas</a></li>
|
||||||
|
<li><a href="#about">Our Story</a></li>
|
||||||
|
<li><a href="#pasta">Pasta</a></li>
|
||||||
|
<li><a href="#reviews">Reviews</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Order Now</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-pizza-badge">
|
||||||
|
<div class="badge-num">4.8</div>
|
||||||
|
<div class="badge-label">Rating</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-tag">★ Benalmádena Costa ★</p>
|
||||||
|
<h1>Pizzeria<br><em>da Marco</em></h1>
|
||||||
|
<p class="hero-subtitle">Naples in the Costa del Sol · Wood-Fired Since 2010</p>
|
||||||
|
<p class="hero-desc">Real Neapolitan pizza baked in a wood-fired oven at 450°C. 72-hour fermented dough, San Marzano tomatoes, buffalo mozzarella. Open every evening for dinner — no reservations needed.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#pizzas" class="btn-primary">View Our Pizzas</a>
|
||||||
|
<a href="#location" class="btn-ghost">Find Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pizzas">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">From the Wood-Fired Oven</p>
|
||||||
|
<h2 class="section-title">Our <em>Pizzas</em></h2>
|
||||||
|
<div class="pizza-grid">
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500&q=75" alt="Margherita" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Margherita DOP</div>
|
||||||
|
<div class="pizza-desc">San Marzano tomatoes, buffalo mozzarella di Battipaglia, fresh basil, extra virgin olive oil</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€9.50</div>
|
||||||
|
<span class="pizza-tag tag-veg">🌿 Vegetarian</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=500&q=75" alt="Diavola" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Diavola</div>
|
||||||
|
<div class="pizza-desc">Spicy Italian salami, San Marzano tomatoes, mozzarella, tabasco-infused olive oil, chili flakes</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€12.00</div>
|
||||||
|
<span class="pizza-tag tag-spicy">🔥 Spicy</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=500&q=75" alt="Quattro Formaggi" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Quattro Formaggi</div>
|
||||||
|
<div class="pizza-desc">Mozzarella, gorgonzola piccante, Parmigiano Reggiano, taleggio — four cheese perfection</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€12.50</div>
|
||||||
|
<span class="pizza-tag tag-veg">🌿 Vegetarian</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?w=500&q=75" alt="Tartufo" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Tartufo e Funghi</div>
|
||||||
|
<div class="pizza-desc">Black truffle cream, wild mushrooms, mozzarella, taleggio, fresh truffle oil, rosemary</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€15.00</div>
|
||||||
|
<span class="pizza-tag tag-popular">⭐ Chef's Pick</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1600028068383-4589e2c5fc4e?w=500&q=75" alt="Prosciutto" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Prosciutto e Funghi</div>
|
||||||
|
<div class="pizza-desc">San Daniele prosciutto, wild mushrooms, San Marzano tomatoes, mozzarella, fresh rocket</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€13.00</div>
|
||||||
|
<span class="pizza-tag tag-popular">⭐ Popular</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pizza-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1598679253544-2c97992403ea?w=500&q=75" alt="Capricciosa" loading="lazy">
|
||||||
|
<div class="pizza-info">
|
||||||
|
<div class="pizza-name">Capricciosa</div>
|
||||||
|
<div class="pizza-desc">Cooked ham, artichoke hearts, wild mushrooms, black olives, San Marzano tomatoes, mozzarella</div>
|
||||||
|
<div class="pizza-footer">
|
||||||
|
<div class="pizza-price">€12.00</div>
|
||||||
|
<span class="pizza-tag tag-popular">⭐ Classic</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-img reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1574966740793-953ad37419ca?w=800&q=80" alt="Pizza making" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="about-text reveal">
|
||||||
|
<p class="section-tag">Our Story</p>
|
||||||
|
<h3>Straight from Naples to Benalmádena</h3>
|
||||||
|
<p>Marco Ferretti grew up in the pizzeria his grandfather ran in Naples' Quartieri Spagnoli. In 2010, he brought the family recipe to the Costa del Sol — the same <strong>72-hour fermented dough</strong>, the same <strong>wood-fired oven</strong> built by hand from Neapolitan bricks.</p>
|
||||||
|
<p>Our oven burns at <strong>450°C</strong> — hot enough to bake a pizza in 90 seconds. The dough blisters, the cheese bubbles, the base gets those charred leopard spots that mark a real Neapolitan pizza.</p>
|
||||||
|
<p>We use only <strong>00 flour</strong> from Naples, <strong>San Marzano tomatoes</strong> from the slopes of Vesuvius, and <strong>buffalo mozzarella</strong> from Battipaglia. If it's not from Italy, we don't use it.</p>
|
||||||
|
<div class="process-steps">
|
||||||
|
<div class="process-step"><div class="step-num">1</div><div class="step-text"><strong>72h</strong> Fermented dough</div></div>
|
||||||
|
<div class="process-step"><div class="step-num">2</div><div class="step-text"><strong>450°C</strong> Wood-fired</div></div>
|
||||||
|
<div class="process-step"><div class="step-num">3</div><div class="step-text"><strong>90 sec</strong> Baked to perfection</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pasta">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Fresh Pasta Daily</p>
|
||||||
|
<h2 class="section-title">Handmade <em>Pasta</em></h2>
|
||||||
|
<div class="pasta-grid">
|
||||||
|
<div class="pasta-item reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?w=400&q=75" alt="Carbonara" loading="lazy">
|
||||||
|
<div class="pasta-info">
|
||||||
|
<div class="pasta-name">Spaghetti Carbonara</div>
|
||||||
|
<div class="pasta-desc">Guanciale, egg yolk, Pecorino Romano, Tellicherry pepper — Roman authentic</div>
|
||||||
|
<div class="pasta-price">€11.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pasta-item reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=400&q=75" alt="Cacio e Pepe" loading="lazy">
|
||||||
|
<div class="pasta-info">
|
||||||
|
<div class="pasta-name">Tonnarelli Cacio e Pepe</div>
|
||||||
|
<div class="pasta-desc">Square spaghetti, Pecorino Romano DOP, Tellicherry black pepper</div>
|
||||||
|
<div class="pasta-price">€10.50</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pasta-item reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?w=400&q=75" alt="Ragù" loading="lazy">
|
||||||
|
<div class="pasta-info">
|
||||||
|
<div class="pasta-name">Pappardelle al Ragù</div>
|
||||||
|
<div class="pasta-desc">Wide ribbon pasta, 8-hour slow-cooked Bolognese ragù, aged Parmigiano</div>
|
||||||
|
<div class="pasta-price">€12.50</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pasta-item reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=400&q=75" alt="Gnocchi" loading="lazy">
|
||||||
|
<div class="pasta-info">
|
||||||
|
<div class="pasta-name">Gnocchi alla Sorrentina</div>
|
||||||
|
<div class="pasta-desc">Potato gnocchi, tomato sauce, mozzarella di bufala, baked in the wood oven</div>
|
||||||
|
<div class="pasta-price">€10.50</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">"I've eaten pizza all over Italy and this one is the real deal. The base is perfectly thin, the dough is airy, the char is authentic. The diavola has proper heat. Can't wait to come back."</p>
|
||||||
|
<div class="review-author">— Giulia B., Google</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"No reservations, casual atmosphere, incredible food. The pasta carbonara was creamy and the guanciale was perfectly crispy. Best Italian on the Costa del Sol, hands down."</p>
|
||||||
|
<div class="review-author">— Tom H., TripAdvisor</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"Marco himself made our pizza right in front of us. The quattro formaggi is heaven — proper gorgonzola, not the mild stuff. The tiramisu for dessert was the perfect end. 10/10."</p>
|
||||||
|
<div class="review-author">— Sophie L., TheFork</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="location">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Find Us</p>
|
||||||
|
<h2 class="section-title">Come <em>Visit</em></h2>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="reveal">
|
||||||
|
<h3 style="font-family:'Fraunces',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, 124<br>29630 Benalmádena Costa<br>Spain</p>
|
||||||
|
<p style="margin-top:1rem;"><strong>📞 Order / Info</strong></p>
|
||||||
|
<p>+34 952 571 234<br>hello@pizzeriadamarco.es</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reveal">
|
||||||
|
<div style="border-radius:12px;overflow:hidden;border:1px solid rgba(212,168,67,0.15);">
|
||||||
|
<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"><span>Pizzeria</span> da Marco</p>
|
||||||
|
<p>Av. Antonio Machado, 124 · 29630 Benalmádena Costa · +34 952 571 234</p>
|
||||||
|
<p style="margin-top:1rem;opacity:0.4;">© 2026 Pizzeria da Marco. 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>
|
||||||
@@ -0,0 +1,420 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>La Bodega del Mar — Mediterranean Kitchen</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Cormorant+Garamond:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root { --bg: #f7f4ef; --bg-card: #ffffff; --bg-warm: #fdf8f2; --navy: #1a3557; --terracotta: #c4622d; --sand: #e8d5b7; --gold: #b8943c; --cream: #faf7f2; --text: #2c2825; --text-muted: #7a6f66; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||||
|
|
||||||
|
/* 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; background: transparent; }
|
||||||
|
nav.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(200,98,45,0.1); }
|
||||||
|
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--terracotta); font-weight: 700; text-decoration: none; }
|
||||||
|
.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(--terracotta); }
|
||||||
|
.nav-cta { background: var(--terracotta); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
|
||||||
|
.nav-cta:hover { background: #b3582a; color: white; text-decoration: none; }
|
||||||
|
|
||||||
|
/* HERO */
|
||||||
|
.hero { height: 100vh; min-height: 600px; position: relative; display: flex; align-items: center; overflow: hidden; }
|
||||||
|
.hero-bg { position: absolute; inset: 0; background: linear-gradient(to right, rgba(247,244,239,0.85) 0%, rgba(247,244,239,0.4) 50%, transparent 100%), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600&q=80') center/cover no-repeat; }
|
||||||
|
.hero-content { position: relative; z-index: 2; padding: 2rem 6rem; max-width: 700px; }
|
||||||
|
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||||
|
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.0; color: var(--navy); margin-bottom: 0.5rem; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||||
|
.hero h1 em { font-style: italic; color: var(--terracotta); }
|
||||||
|
.hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--gold); margin-bottom: 1.5rem; font-style: italic; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||||
|
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 480px; margin-bottom 2rem; opacity: 0; animation: fadeUp 0.8s 0.8s forwards; }
|
||||||
|
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 1s forwards; }
|
||||||
|
.btn-primary { background: var(--terracotta); color: white; 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: #b3582a; transform: translateY(-2px); }
|
||||||
|
.btn-ghost { border: 1px solid var(--navy); color: var(--navy); 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 { background: var(--navy); color: white; 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(--terracotta); text-align: center; margin-bottom: 0.5rem; }
|
||||||
|
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--navy); margin-bottom: 3rem; }
|
||||||
|
.section-title em { font-style: italic; color: var(--terracotta); }
|
||||||
|
|
||||||
|
/* ABOUT */
|
||||||
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||||
|
.about-img { border-radius: 8px; overflow: hidden; }
|
||||||
|
.about-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
|
||||||
|
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
|
||||||
|
.about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||||
|
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.5rem; }
|
||||||
|
.about-feature { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text); }
|
||||||
|
.about-feature .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; }
|
||||||
|
|
||||||
|
/* TAPA HIGHLIGHTS */
|
||||||
|
#tapas { background: var(--bg-warm); }
|
||||||
|
.tapas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
||||||
|
.tapa-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
|
||||||
|
.tapa-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
|
||||||
|
.tapa-card img { width: 100%; height: 160px; object-fit: cover; }
|
||||||
|
.tapa-info { padding: 1rem; }
|
||||||
|
.tapa-info .tapa-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.3rem; }
|
||||||
|
.tapa-info .tapa-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
|
||||||
|
.tapa-info .tapa-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; }
|
||||||
|
|
||||||
|
/* MENU CLASSICS */
|
||||||
|
.menu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
|
||||||
|
.menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--navy); margin-bottom: 1.2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--sand); }
|
||||||
|
.menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); gap: 1rem; }
|
||||||
|
.menu-item-name { font-size: 0.95rem; color: var(--text); }
|
||||||
|
.menu-item-desc { font-size: 0.75rem; color: var(--text-muted); }
|
||||||
|
.menu-item-price { font-size: 0.95rem; color: var(--terracotta); font-weight: 700; white-space: nowrap; }
|
||||||
|
|
||||||
|
/* WINE */
|
||||||
|
#wine { background: var(--navy); }
|
||||||
|
#wine .section-tag { color: var(--sand); }
|
||||||
|
#wine .section-title { color: white; }
|
||||||
|
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
|
||||||
|
.wine-item { text-align: center; padding: 1.2rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; }
|
||||||
|
.wine-item .wine-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: white; margin-bottom: 0.3rem; }
|
||||||
|
.wine-item .wine-region { font-size: 0.75rem; color: var(--sand); margin-bottom: 0.5rem; }
|
||||||
|
.wine-item .wine-price { font-size: 0.9rem; color: var(--sand); font-weight: 700; }
|
||||||
|
|
||||||
|
/* REVIEWS */
|
||||||
|
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
|
||||||
|
.review-card { background: white; border: 1px solid var(--sand); border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
|
||||||
|
.review-card .stars { color: var(--terracotta); 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(--navy); font-weight: 600; }
|
||||||
|
|
||||||
|
/* LOCATION */
|
||||||
|
#location { background: var(--bg-warm); }
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
|
||||||
|
.hours-table { width: 100%; }
|
||||||
|
.hours-table tr { border-bottom: 1px solid var(--sand); }
|
||||||
|
.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(--terracotta); font-weight: 600; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { background: var(--navy); padding: 4rem 2rem 2rem; text-align: center; }
|
||||||
|
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: white; font-weight: 700; margin-bottom: 0.5rem; }
|
||||||
|
.footer-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--sand); margin-bottom: 1rem; }
|
||||||
|
footer p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
|
||||||
|
|
||||||
|
@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; }
|
||||||
|
.hero-content { padding: 2rem; }
|
||||||
|
.about-grid, .menu-split, .info-grid, .tapas-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo">La Bodega del Mar</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">Our Story</a></li>
|
||||||
|
<li><a href="#tapas">Tapas</a></li>
|
||||||
|
<li><a href="#menu">Menu</a></li>
|
||||||
|
<li><a href="#wine">Wine</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Reservas</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-tag">✦ Benalmádena Costa ✦</p>
|
||||||
|
<h1>La Bodega<br><em>del Mar</em></h1>
|
||||||
|
<p class="hero-subtitle">Cocina Mediterránea · Productos del Mercado</p>
|
||||||
|
<p class="hero-desc">Fresh fish straight from the daily catch, organic vegetables from local farmers, and wines from small Spanish producers. The Costa del Sol on a plate — honest, generous, and full of flavour.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#tapas" class="btn-primary">Ver Tapas</a>
|
||||||
|
<a href="#location" class="btn-ghost">Reservar Mesa</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-img reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=800&q=80" alt="Spanish kitchen" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="about-text reveal">
|
||||||
|
<p class="section-tag">Our Story</p>
|
||||||
|
<h3>Where the sea meets the table</h3>
|
||||||
|
<p>La Bodega del Mar opened in 2012 in the heart of Benalmádena Costa, founded by chef Javier Moreno who spent 20 years working the coastal kitchens of Málaga, Granada, and Almería.</p>
|
||||||
|
<p>Every morning Javier visits the market himself to choose the day's catch — whatever the fishermen brought in that morning. There's no menu for the specials board; it changes with the tide.</p>
|
||||||
|
<p>We call ourselves a bodega, because that's what we are at heart: a place to eat well, drink well, and feel at home. Come as you are.</p>
|
||||||
|
<div class="about-features">
|
||||||
|
<div class="about-feature"><span class="dot"></span>Daily fish market</div>
|
||||||
|
<div class="about-feature"><span class="dot"></span>Local organic produce</div>
|
||||||
|
<div class="about-feature"><span class="dot"></span>Spanish natural wines</div>
|
||||||
|
<div class="about-feature"><span class="dot"></span>Open 7 days a week</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="tapas">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Para Picar</p>
|
||||||
|
<h2 class="section-title">Our <em>Tapas</em></h2>
|
||||||
|
<div class="tapas-grid">
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Gambas al Ajillo" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Gambas al Ajillo</div>
|
||||||
|
<div class="tapa-desc">Garlic prawns in olive oil, guindilla pepper, white wine. Served with crusty bread to soak up the sauce.</div>
|
||||||
|
<div class="tapa-price">€10.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?w=400&q=75" alt="Patatas Bravas" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Patatas Bravas</div>
|
||||||
|
<div class="tapa-desc">Crispy fried potatoes, bravas sauce (spicy tomato), aioli. The house recipe since day one.</div>
|
||||||
|
<div class="tapa-price">€6.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="Jamón Ibérico" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Jamón Ibérico de Bellota</div>
|
||||||
|
<div class="tapa-desc">Hand-sliced 48-month aged acorn-fed Ibérico ham. Served with picos bread and tomato aliño.</div>
|
||||||
|
<div class="tapa-price">€14.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1565944647579-ed1f2d7a1d22?w=400&q=75" alt="Calamares" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Calamares Fritos</div>
|
||||||
|
<div class="tapa-desc">Lightly fried squid rings and tentacles, lemon wedge, spicy aioli. Like being on the beach in Málaga.</div>
|
||||||
|
<div class="tapa-price">€9.50</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1626200419199-391ae4be7a41?w=400&q=75" alt="Croquetas" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Croquetas de Bacalao</div>
|
||||||
|
<div class="tapa-desc">Hand-rolled salt cod croquettes, crispy outside, creamy bechamel inside. Made fresh every morning.</div>
|
||||||
|
<div class="tapa-price">€7.50</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tapa-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1608897013039-887f21d8c804?w=400&q=75" alt="Pulpo" loading="lazy">
|
||||||
|
<div class="tapa-info">
|
||||||
|
<div class="tapa-name">Pulpo a la Gallega</div>
|
||||||
|
<div class="tapa-desc">Galician-style octopus, boiled then seared, on a bed of boiled potatoes, paprika, olive oil.</div>
|
||||||
|
<div class="tapa-price">€13.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="menu">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Platos Principales</p>
|
||||||
|
<h2 class="section-title">Main <em>Dishes</em></h2>
|
||||||
|
<div class="menu-split">
|
||||||
|
<div class="menu-col">
|
||||||
|
<h3>Fresh from the Sea</h3>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Pescaíto Frito</div>
|
||||||
|
<div class="menu-item-desc">Mixed fried fish — small sardines, calamari, fish of the day. With lemon and alioli</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€16.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Sea Bass a la Plancha</div>
|
||||||
|
<div class="menu-item-desc">Grilled sea bass fillet, sautéed potatoes, green pepper, olive oil</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€19.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Rice Plate — Paella</div>
|
||||||
|
<div class="menu-item-desc">Traditional paella Valenciana. Chicken, rabbit, green beans, saffron. For 2 persons minimum</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€18.00 pp</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Black Rice</div>
|
||||||
|
<div class="menu-item-desc">Squid ink rice, cuttlefish, monkfish. The specialty of the house</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€19.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Grilled Gambas</div>
|
||||||
|
<div class="menu-item-desc">Large prawns on the grill, garlic butter, parsley, white wine</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€22.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-col">
|
||||||
|
<h3>From the Land</h3>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Solomillo al Ajillo</div>
|
||||||
|
<div class="menu-item-desc">Pan-fried pork tenderloin, garlic, white wine, roasted potatoes</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€14.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Pollo al Ajillo</div>
|
||||||
|
<div class="menu-item-desc">Chicken pieces braised in garlic, white wine, thyme, olives</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€12.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Tortilla Española</div>
|
||||||
|
<div class="menu-item-desc">Classic Spanish omelette — eggs, potatoes, onion. Served warm</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€8.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Spinach & Chickpeas</div>
|
||||||
|
<div class="menu-item-desc">Espinacas con garbanzos — Andalusian style stew, cumin, paprika</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€10.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item">
|
||||||
|
<div>
|
||||||
|
<div class="menu-item-name">Salmorejo</div>
|
||||||
|
<div class="menu-item-desc">Cold Andalusian tomato soup, Ibérico ham, hard-boiled egg, olive oil</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item-price">€7.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="wine">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Vino</p>
|
||||||
|
<h2 class="section-title">Spanish <em>Wines</em></h2>
|
||||||
|
<div class="wine-grid">
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Albariño</div>
|
||||||
|
<div class="wine-region">Rías Baixas, Galicia</div>
|
||||||
|
<div class="wine-price">from €18/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Verdejo</div>
|
||||||
|
<div class="wine-region">Rueda, Castilla y León</div>
|
||||||
|
<div class="wine-price">from €16/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Rioja Reserva</div>
|
||||||
|
<div class="wine-region">La Rioja</div>
|
||||||
|
<div class="wine-price">from €22/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Ribera del Duero</div>
|
||||||
|
<div class="wine-region">Castilla y León</div>
|
||||||
|
<div class="wine-price">from €24/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Priorat</div>
|
||||||
|
<div class="wine-region">Catalunya</div>
|
||||||
|
<div class="wine-price">from €28/bottle</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-item">
|
||||||
|
<div class="wine-name">Sherry Fino</div>
|
||||||
|
<div class="wine-region">Jerez, Andalucía</div>
|
||||||
|
<div class="wine-price">from €14/bottle</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="reviews">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Reviews</p>
|
||||||
|
<h2 class="section-title">What <em>Guests</em> Say</h2>
|
||||||
|
<div class="reviews-grid">
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"The best tapas on the Costa del Sol. We tried the gambas al ajillo, croquetas, and pulpo — all exceptional. The rice dishes are incredible. This is real Spanish food."</p>
|
||||||
|
<div class="review-author">— Helen & Peter, Google</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"Found this gem on our second night in Benalmádena. The owner Javier comes out to say hello. Fresh fish, generous portions, reasonable prices. We ate here 4 nights in a row."</p>
|
||||||
|
<div class="review-author">— Brian M., TripAdvisor</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"Authentic, warm, delicious. The espinacas con garbanzos was the best I've had in Spain. The house wine (tempranillo) is superb. This is what Spanish dining should be."</p>
|
||||||
|
<div class="review-author">— Claudia F., TheFork</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="location">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Encuéntranos</p>
|
||||||
|
<h2 class="section-title">Find Your Way to <em>La Bodega</em></h2>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="reveal">
|
||||||
|
<h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--navy);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||||
|
<table class="hours-table">
|
||||||
|
<tr><td>Monday — Thursday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Friday — Saturday</td><td>12:00 — 00:00</td></tr>
|
||||||
|
<tr><td>Sunday</td><td>12:00 — 23:00</td></tr>
|
||||||
|
</table>
|
||||||
|
<div class="address-block">
|
||||||
|
<p><strong>📍 Dirección</strong></p>
|
||||||
|
<p>Av. Antonio Machado, 120<br>29630 Benalmádena Costa<br>Spain</p>
|
||||||
|
<p style="margin-top:1rem;"><strong>📞 Reservas</strong></p>
|
||||||
|
<p>+34 952 570 123<br>info@labodegadelmar.es</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reveal">
|
||||||
|
<div style="border-radius:8px;overflow:hidden;border:1px solid var(--sand);">
|
||||||
|
<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">La Bodega del Mar</p>
|
||||||
|
<p class="footer-tagline">Cocina Mediterránea · Benalmádena Costa</p>
|
||||||
|
<p>Av. Antonio Machado, 120 · 29630 Benalmádena · +34 952 570 123</p>
|
||||||
|
<p style="margin-top:1rem;">© 2026 La Bodega del Mar. 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>
|
||||||
@@ -0,0 +1,340 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Argentine Grill — Premium Steakhouse</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&family=Bebas+Neue&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root { --bg: #0d0b09; --bg-card: #1a1614; --bg-light: #221e1a; --ember: #e85d04; --gold: #c9922a; --cream: #f0e6d3; --text: #ddd0c0; --text-muted: #8a7d6e; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Lato', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
|
||||||
|
|
||||||
|
/* FIRE BG */
|
||||||
|
.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(13,11,9,0.2) 0%, rgba(13,11,9,0.85) 70%, var(--bg) 100%), url('https://images.unsplash.com/photo-1558030006-450675393462?w=1600&q=80') center/cover no-repeat; }
|
||||||
|
.hero-embers { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(232,93,4,0.15) 0%, transparent 60%); pointer-events: none; }
|
||||||
|
|
||||||
|
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(13,11,9,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,146,42,0.15); }
|
||||||
|
.nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--gold); letter-spacing: 0.1em; text-decoration: none; }
|
||||||
|
.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(--ember); color: white; padding: 0.5rem 1.2rem; border-radius: 2px; font-weight: 700; }
|
||||||
|
.nav-cta:hover { background: #ff6b10; color: white; text-decoration: none; }
|
||||||
|
|
||||||
|
.hero-content { position: relative; z-index: 2; text-align: center; padding: 2rem; max-width: 800px; }
|
||||||
|
.hero-tag { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); margin-bottom: 1rem; font-weight: 700; opacity: 0; animation: fadeUp 0.8s 0.2s forwards; }
|
||||||
|
.hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3.5rem, 10vw, 7rem); line-height: 0.95; color: var(--cream); margin-bottom: 0.5rem; font-weight: 900; opacity: 0; animation: fadeUp 0.8s 0.4s forwards; }
|
||||||
|
.hero-subtitle { font-size: 1.1rem; color: var(--gold); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
|
||||||
|
.hero-desc { font-size: 1rem; color: var(--text-muted); max-width: 500px; 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(--ember); color: white; 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: #ff6b10; transform: translateY(-2px); }
|
||||||
|
.btn-ghost { border: 1px solid rgba(201,146,42,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(201,146,42,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(--ember); text-align: center; margin-bottom: 0.5rem; }
|
||||||
|
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--cream); margin-bottom: 3rem; }
|
||||||
|
.section-title em { font-style: italic; color: var(--gold); }
|
||||||
|
|
||||||
|
/* CUTS */
|
||||||
|
#cuts { background: var(--bg-card); }
|
||||||
|
.cuts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
|
||||||
|
.cut-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; overflow: hidden; text-align: center; transition: border-color 0.3s, transform 0.3s; }
|
||||||
|
.cut-card:hover { border-color: var(--ember); transform: translateY(-4px); }
|
||||||
|
.cut-card img { width: 100%; height: 160px; object-fit: cover; }
|
||||||
|
.cut-card .cut-info { padding: 1rem; }
|
||||||
|
.cut-card .cut-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||||
|
.cut-card .cut-desc { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; }
|
||||||
|
.cut-card .cut-price { font-size: 1rem; color: var(--ember); font-weight: 700; }
|
||||||
|
|
||||||
|
/* ABOUT */
|
||||||
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
|
||||||
|
.about-img { position: relative; }
|
||||||
|
.about-img img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; }
|
||||||
|
.about-img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0.3; transform: translate(12px, 12px); border-radius: 4px; pointer-events: none; }
|
||||||
|
.about-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: 1rem; }
|
||||||
|
.about-text p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
|
||||||
|
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; text-align: center; }
|
||||||
|
.about-stat .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--ember); }
|
||||||
|
.about-stat .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
|
||||||
|
|
||||||
|
/* MENU */
|
||||||
|
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
|
||||||
|
.menu-col h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(201,146,42,0.2); }
|
||||||
|
.menu-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 1rem; }
|
||||||
|
.menu-item-name { font-size: 0.95rem; color: var(--text); }
|
||||||
|
.menu-item-desc { font-size: 0.78rem; color: var(--text-muted); }
|
||||||
|
.menu-item-price { font-size: 0.95rem; color: var(--ember); font-weight: 700; white-space: nowrap; }
|
||||||
|
|
||||||
|
/* WINE */
|
||||||
|
#wine { background: var(--bg-card); }
|
||||||
|
.wine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem; }
|
||||||
|
.wine-card { background: var(--bg); border: 1px solid rgba(201,146,42,0.1); border-radius: 4px; padding: 1.2rem; text-align: center; }
|
||||||
|
.wine-card .wine-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--cream); margin-bottom: 0.3rem; }
|
||||||
|
.wine-card .wine-region { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||||
|
.wine-card .wine-price { font-size: 0.9rem; color: var(--gold); font-weight: 700; }
|
||||||
|
.wine-card .wine-glass { font-size: 0.8rem; color: var(--text-muted); }
|
||||||
|
|
||||||
|
/* 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(201,146,42,0.1); border-radius: 8px; padding: 1.5rem; }
|
||||||
|
.review-card .stars { color: var(--ember); 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(201,146,42,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: #070504; padding: 4rem 2rem 2rem; text-align: center; }
|
||||||
|
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
|
||||||
|
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; }
|
||||||
|
.about-grid, .menu-grid, .info-grid { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
|
.about-img::after { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo">THE ARGENTINE GRILL</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#cuts">Cuts</a></li>
|
||||||
|
<li><a href="#about">Our Story</a></li>
|
||||||
|
<li><a href="#wine">Wine & Bar</a></li>
|
||||||
|
<li><a href="#reviews">Reviews</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-embers"></div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-tag">★ Benalmádena Costa ★</p>
|
||||||
|
<h1>The Argentine<br>Grill</h1>
|
||||||
|
<p class="hero-subtitle">Dry-Aged Beef · Open Fire · Argentine Heritage</p>
|
||||||
|
<p class="hero-desc">Premium cuts from Argentina and Uruguay, dry-aged in-house for 45 days. Wood-fired grill, premium wine list, and the warmth of South American hospitality on the Costa del Sol.</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#cuts" class="btn-primary">View Our Cuts</a>
|
||||||
|
<a href="#location" class="btn-ghost">Reserve a Table</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="cuts">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">From the Grill</p>
|
||||||
|
<h2 class="section-title">Premium <em>Cuts</em></h2>
|
||||||
|
<div class="cuts-grid">
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1558030006-450675393462?w=400&q=75" alt="Ribeye" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">Ribeye 400g</div>
|
||||||
|
<div class="cut-desc">45-day dry-aged, wood-fired, rosemary butter</div>
|
||||||
|
<div class="cut-price">€34.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1600891964092-4316c288032e?w=400&q=75" alt="Filet Mignon" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">Filet Mignon 280g</div>
|
||||||
|
<div class="cut-desc">Prime cut, peppercorn crust, red wine jus</div>
|
||||||
|
<div class="cut-price">€38.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=75" alt="T-Bone" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">T-Bone 600g</div>
|
||||||
|
<div class="cut-desc">For two, dry-aged 30 days, chimichurri side</div>
|
||||||
|
<div class="cut-price">€48.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=400&q=75" alt="Tomahawk" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">Tomahawk 1.2kg</div>
|
||||||
|
<div class="cut-desc">Shareable, 60-day dry-aged, bone-in ribeye</div>
|
||||||
|
<div class="cut-price">€65.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1529694157872-4e0c0f3b238b?w=400&q=75" alt="Wagyu" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">Wagyu A5 200g</div>
|
||||||
|
<div class="cut-desc">Japanese Wagyu, truffle mash, red wine reduction</div>
|
||||||
|
<div class="cut-price">€85.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cut-card reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&q=75" alt="Lamb Chops" loading="lazy">
|
||||||
|
<div class="cut-info">
|
||||||
|
<div class="cut-name">Lamb Chops</div>
|
||||||
|
<div class="cut-desc">Patagonian lamb, herb crust, mint sauce</div>
|
||||||
|
<div class="cut-price">€28.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-img reveal">
|
||||||
|
<img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800&q=80" alt="Grill master" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="about-text reveal">
|
||||||
|
<p class="section-tag">Our Story</p>
|
||||||
|
<h3>Fire, tradition, and the perfect steak</h3>
|
||||||
|
<p>The Argentine Grill opened in 2008, bringing the asado culture of Buenos Aires to the Costa del Sol. Our parilla (traditional grill) burns at over 400°C, sealing each cut with a perfect char while keeping the inside tender and juicy.</p>
|
||||||
|
<p>Every week, we receive premium beef from Argentina — grass-fed, free-range — that's dry-aged in our climate-controlled cabinet for up to 60 days. The result is a depth of flavour that modern cooking can't replicate.</p>
|
||||||
|
<p>We are not a steakhouse. We are a temple to the grill.</p>
|
||||||
|
<div class="about-stats">
|
||||||
|
<div class="about-stat"><div class="stat-num">45+</div><div class="stat-label">Days Dry-Aged</div></div>
|
||||||
|
<div class="about-stat"><div class="stat-num">400°</div><div class="stat-label">Grill Temp °C</div></div>
|
||||||
|
<div class="about-stat"><div class="stat-num">17</div><div class="stat-label">Years Open</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="wine">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Wine & Bar</p>
|
||||||
|
<h2 class="section-title">The <em>Wine List</em></h2>
|
||||||
|
<div class="wine-grid">
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Malbec Reserva</div>
|
||||||
|
<div class="wine-region">Mendoza, Argentina</div>
|
||||||
|
<div class="wine-price">from €28</div>
|
||||||
|
<div class="wine-glass">Glass €6</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Cabernet Sauvignon</div>
|
||||||
|
<div class="wine-region">Uco Valley, Argentina</div>
|
||||||
|
<div class="wine-price">from €32</div>
|
||||||
|
<div class="wine-glass">Glass €7</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Bonarda Vieja</div>
|
||||||
|
<div class="wine-region">San Juan, Argentina</div>
|
||||||
|
<div class="wine-price">from €22</div>
|
||||||
|
<div class="wine-glass">Glass €5</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Torrontés</div>
|
||||||
|
<div class="wine-region">Salta, Argentina</div>
|
||||||
|
<div class="wine-price">from €20</div>
|
||||||
|
<div class="wine-glass">Glass €5</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Chardonnay Barrel</div>
|
||||||
|
<div class="wine-region">Patagonia, Argentina</div>
|
||||||
|
<div class="wine-price">from €24</div>
|
||||||
|
<div class="wine-glass">Glass €6</div>
|
||||||
|
</div>
|
||||||
|
<div class="wine-card">
|
||||||
|
<div class="wine-name">Sangiovese Riserva</div>
|
||||||
|
<div class="wine-region">Tuscany, Italy</div>
|
||||||
|
<div class="wine-price">from €30</div>
|
||||||
|
<div class="wine-glass">Glass €7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="reviews">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Guest Reviews</p>
|
||||||
|
<h2 class="section-title">What <em>Guests</em> Say</h2>
|
||||||
|
<div class="reviews-grid">
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"The best steak I've had in Spain. The ribeye was perfectly charred on the outside and melt-in-the-mouth tender inside. The Malbec list is excellent. Will be back every week."</p>
|
||||||
|
<div class="review-author">— Darren T., Google</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"We came for our anniversary and it exceeded all expectations. The T-bone for two is incredible. Service was warm and attentive. A hidden gem in Benalmádena."</p>
|
||||||
|
<div class="review-author">— Louise M., TripAdvisor</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-card reveal">
|
||||||
|
<div class="stars">★★★★★</div>
|
||||||
|
<p class="review-text">"As an Argentine, I'm picky about my asado. This place gets it right. The wood-fired flavour, the quality of the beef — proper authentic parilla. Salud!"</p>
|
||||||
|
<div class="review-author">— Carlos R., TheFork</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="location">
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-tag">Find Us</p>
|
||||||
|
<h2 class="section-title">Reserve Your <em>Table</em></h2>
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="reveal">
|
||||||
|
<h3 style="font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--cream);margin-bottom:1.5rem;">Opening Hours</h3>
|
||||||
|
<table class="hours-table">
|
||||||
|
<tr><td>Monday</td><td>Closed</td></tr>
|
||||||
|
<tr><td>Tuesday — Thursday</td><td>19:00 — 23:00</td></tr>
|
||||||
|
<tr><td>Friday — Saturday</td><td>19: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, 112<br>29630 Benalmádena Costa<br>Spain</p>
|
||||||
|
<p style="margin-top:1rem;"><strong>📞 Reservations</strong></p>
|
||||||
|
<p>+34 952 568 901<br>reservations@theargentinegrill.es</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reveal">
|
||||||
|
<div style="border-radius:4px;overflow:hidden;border:1px solid rgba(201,146,42,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">THE ARGENTINE GRILL</p>
|
||||||
|
<p>Av. Antonio Machado, 112 · 29630 Benalmádena Costa · +34 952 568 901</p>
|
||||||
|
<p style="margin-top:1rem;opacity:0.4;">© 2026 The Argentine Grill. 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>
|
||||||
@@ -0,0 +1,438 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Kaito Sushi — Omakase & Izakaya</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Playfair+Display:ital,wght@1,400&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
:root {
|
||||||
|
--ink: #0a0a0a;
|
||||||
|
--paper: #f5f0e8;
|
||||||
|
--wood: #8b6b4a;
|
||||||
|
--wood-dark: #5c3d2e;
|
||||||
|
--cream: #faf8f4;
|
||||||
|
--text: #1a1a1a;
|
||||||
|
--muted: #7a6a5a;
|
||||||
|
--gold: #c9a055;
|
||||||
|
--red: #b83b3b;
|
||||||
|
}
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
body { font-family: 'Noto Sans JP', sans-serif; background: var(--ink); color: var(--cream); line-height: 1.7; overflow-x: hidden; }
|
||||||
|
|
||||||
|
/* SLIDE-UP REVEAL */
|
||||||
|
.reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||||
|
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||||
|
|
||||||
|
/* NAV */
|
||||||
|
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 3rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.4s; }
|
||||||
|
nav.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); }
|
||||||
|
.nav-logo { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; color: var(--cream); font-weight: 300; letter-spacing: 0.2em; text-decoration: none; }
|
||||||
|
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
|
||||||
|
.nav-links a { color: rgba(250,248,244,0.5); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.3s; }
|
||||||
|
.nav-links a:hover { color: var(--cream); }
|
||||||
|
.nav-cta { border: 1px solid rgba(201,160,85,0.5); color: var(--gold); padding: 0.4rem 1.2rem; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
|
||||||
|
.nav-cta:hover { background: var(--gold); color: var(--ink); }
|
||||||
|
|
||||||
|
/* HERO — Full screen, centered, very minimal */
|
||||||
|
.hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
|
||||||
|
.hero-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1553621042-f6e147245754?w=1600&q=80') center/cover no-repeat; filter: brightness(0.35) saturate(0.6); }
|
||||||
|
.hero-rule { width: 1px; height: 60px; background: var(--gold); margin: 0 auto 2rem; opacity: 0; animation: fadeIn 1s 0.3s forwards; }
|
||||||
|
.hero-eyebrow { font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.4s forwards; }
|
||||||
|
.hero h1 { font-family: 'Noto Serif JP', serif; font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; color: var(--cream); letter-spacing: 0.3em; line-height: 1.1; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 1s 0.6s forwards; }
|
||||||
|
.hero-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.9rem, 2vw, 1.2rem); color: rgba(250,248,244,0.5); letter-spacing: 0.2em; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 1s 0.8s forwards; }
|
||||||
|
.hero-btns { display: flex; gap: 1.2rem; justify-content: center; opacity: 0; animation: fadeUp 1s 1s forwards; }
|
||||||
|
.btn-primary { background: var(--gold); color: var(--ink); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; transition: all 0.3s; }
|
||||||
|
.btn-primary:hover { background: var(--cream); }
|
||||||
|
.btn-ghost { border: 1px solid rgba(250,248,244,0.25); color: var(--cream); padding: 0.8rem 2.5rem; text-decoration: none; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.3s; }
|
||||||
|
.btn-ghost:hover { border-color: var(--cream); }
|
||||||
|
|
||||||
|
/* KANJI DECORATION */
|
||||||
|
.kanji-strip { background: var(--wood-dark); padding: 1.2rem; text-align: center; }
|
||||||
|
.kanji-strip span { font-family: 'Noto Serif JP', serif; font-size: 1.2rem; color: rgba(250,248,244,0.4); letter-spacing: 0.5em; margin: 0 1rem; }
|
||||||
|
|
||||||
|
/* NARRATIVE / ABOUT — very editorial */
|
||||||
|
.editorial { padding: 8rem 3rem; max-width: 860px; margin: 0 auto; }
|
||||||
|
.editorial-eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||||
|
.editorial h2 { font-family: 'Noto Serif JP', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--cream); line-height: 1.3; margin-bottom: 2rem; }
|
||||||
|
.editorial p { color: rgba(250,248,244,0.6); font-size: 0.95rem; line-height: 2; margin-bottom: 1.5rem; font-weight: 300; }
|
||||||
|
.editorial p:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
/* HORIZONTAL MENU — full width horizontal scrolling panels */
|
||||||
|
.menu-scroll { background: var(--paper); color: var(--text); overflow-x: auto; }
|
||||||
|
.menu-scroll-inner { display: flex; min-width: max-content; }
|
||||||
|
.menu-panel { min-width: 320px; max-width: 360px; padding: 3rem 2.5rem; border-right: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
|
||||||
|
.menu-panel:last-child { border-right: none; }
|
||||||
|
.menu-panel-tag { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wood); margin-bottom: 1.5rem; }
|
||||||
|
.menu-panel-title { font-family: 'Noto Serif JP', serif; font-size: 1.8rem; font-weight: 400; color: var(--text); margin-bottom: 0.3rem; }
|
||||||
|
.menu-panel-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 2rem; font-style: italic; }
|
||||||
|
.menu-dish { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||||||
|
.menu-dish:last-child { border-bottom: none; }
|
||||||
|
.menu-dish-name { font-size: 0.9rem; color: var(--text); }
|
||||||
|
.menu-dish-desc { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
|
||||||
|
.menu-dish-price { font-size: 0.9rem; color: var(--wood); font-weight: 600; white-space: nowrap; }
|
||||||
|
|
||||||
|
/* OMAKASE FEATURE — asymmetric layout */
|
||||||
|
.omakase { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
|
||||||
|
.omakase-img { background: url('https://images.unsplash.com/photo-1617196034796-73dfa7b1fd56?w=900&q=80') center/cover no-repeat; min-height: 400px; }
|
||||||
|
.omakase-text { background: var(--wood-dark); padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
|
||||||
|
.omakase-tag { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
|
||||||
|
.omakase-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; line-height: 1.4; }
|
||||||
|
.omakase-desc { color: rgba(250,248,244,0.6); font-size: 0.9rem; line-height: 1.9; margin-bottom: 2rem; font-weight: 300; }
|
||||||
|
.omakase-price { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.3rem; }
|
||||||
|
.omakase-amount { font-family: 'Noto Serif JP', serif; font-size: 2.5rem; color: var(--cream); font-weight: 300; margin-bottom: 2rem; }
|
||||||
|
.omakase-link { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,160,85,0.3); padding-bottom: 0.2rem; transition: border-color 0.3s; }
|
||||||
|
.omakase-link:hover { border-color: var(--gold); }
|
||||||
|
|
||||||
|
/* IZAKAYA / DRINKS — dark section */
|
||||||
|
.izakaya { background: var(--ink); padding: 6rem 3rem; }
|
||||||
|
.izakaya-inner { max-width: 1100px; margin: 0 auto; }
|
||||||
|
.izakaya-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; }
|
||||||
|
.izakaya-title { font-family: 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 300; color: var(--cream); }
|
||||||
|
.izakaya-title span { display: block; font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; font-family: 'Noto Sans JP', sans-serif; }
|
||||||
|
.drinks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
||||||
|
.drink-item { border: 1px solid rgba(201,160,85,0.1); padding: 1.5rem; border-radius: 2px; }
|
||||||
|
.drink-item .drink-name { font-family: 'Noto Serif JP', serif; font-size: 1rem; color: var(--cream); margin-bottom: 0.2rem; }
|
||||||
|
.drink-item .drink-style { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
|
||||||
|
.drink-item .drink-price { font-size: 0.85rem; color: var(--gold); }
|
||||||
|
|
||||||
|
/* REVIEWS — 3 columns, minimal */
|
||||||
|
.reviews-section { background: var(--paper); padding: 6rem 3rem; }
|
||||||
|
.reviews-inner { max-width: 1100px; margin: 0 auto; }
|
||||||
|
.reviews-header { text-align: center; margin-bottom: 3rem; }
|
||||||
|
.reviews-header h2 { font-family: 'Noto Serif JP', serif; font-size: 2rem; font-weight: 300; color: var(--text); margin-bottom: 0.5rem; }
|
||||||
|
.reviews-header p { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
|
||||||
|
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.08); }
|
||||||
|
.review-item { background: var(--paper); padding: 2.5rem 2rem; }
|
||||||
|
.review-stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
|
||||||
|
.review-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; }
|
||||||
|
.review-author { font-size: 0.75rem; color: var(--text); font-weight: 500; letter-spacing: 0.05em; }
|
||||||
|
|
||||||
|
/* LOCATION — very minimal, 2 columns */
|
||||||
|
.location { background: var(--ink); padding: 6rem 3rem; border-top: 1px solid rgba(201,160,85,0.08); }
|
||||||
|
.location-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
|
||||||
|
.location-block h3 { font-family: 'Noto Serif JP', serif; font-size: 1.3rem; font-weight: 300; color: var(--cream); margin-bottom: 1.5rem; }
|
||||||
|
.hours-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.85rem; }
|
||||||
|
.hours-row span:first-child { color: rgba(250,248,244,0.4); }
|
||||||
|
.hours-row span:last-child { color: var(--cream); }
|
||||||
|
.contact-line { font-size: 0.85rem; color: rgba(250,248,244,0.4); margin-bottom: 0.5rem; }
|
||||||
|
.contact-line a { color: var(--gold); text-decoration: none; }
|
||||||
|
.map-placeholder { border: 1px solid rgba(201,160,85,0.15); overflow: hidden; border-radius: 2px; }
|
||||||
|
.map-placeholder iframe { width: 100%; height: 100%; min-height: 300px; border: none; display: block; filter: brightness(0.8) saturate(0.5); }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { background: #050505; padding: 3rem; text-align: center; border-top: 1px solid rgba(201,160,85,0.08); }
|
||||||
|
.footer-logo { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; color: var(--cream); font-weight: 300; letter-spacing: 0.4em; margin-bottom: 1rem; }
|
||||||
|
footer p { font-size: 0.72rem; color: rgba(250,248,244,0.25); letter-spacing: 0.1em; }
|
||||||
|
|
||||||
|
/* ANIMATIONS */
|
||||||
|
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
nav { padding: 1rem 1.5rem; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.hero h1 { letter-spacing: 0.15em; }
|
||||||
|
.omakase { grid-template-columns: 1fr; }
|
||||||
|
.reviews-grid { grid-template-columns: 1fr; }
|
||||||
|
.location-inner { grid-template-columns: 1fr; }
|
||||||
|
.editorial { padding: 5rem 1.5rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id="navbar">
|
||||||
|
<a href="#" class="nav-logo">KAITO</a>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#menu">Menu</a></li>
|
||||||
|
<li><a href="#omakase">Omakase</a></li>
|
||||||
|
<li><a href="#drinks">Izakaya</a></li>
|
||||||
|
<li><a href="#location" class="nav-cta">Reserve</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="hero-rule"></div>
|
||||||
|
<p class="hero-eyebrow">Omakase · Izakaya · Benalmádena Costa</p>
|
||||||
|
<h1>KAITO</h1>
|
||||||
|
<p class="hero-sub">Sushi & Japanese Kitchen</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#menu" class="btn-primary">View Menu</a>
|
||||||
|
<a href="#omakase" class="btn-ghost">Omakase Experience</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- KANJI STRIP -->
|
||||||
|
<div class="kanji-strip">
|
||||||
|
<span>壽司</span>
|
||||||
|
<span>職人の技</span>
|
||||||
|
<span>巻物</span>
|
||||||
|
<span>味</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ABOUT -->
|
||||||
|
<section class="editorial" id="about">
|
||||||
|
<p class="editorial-eyebrow reveal">Our Philosophy</p>
|
||||||
|
<h2 class="reveal">Every piece tells a story of the sea</h2>
|
||||||
|
<p class="reveal">Kaito opened in 2018 with a single mission: to bring the discipline and beauty of Japanese sushi craft to the Costa del Sol. Our head chef, Kenji Tanaka, trained for 12 years in Tokyo's Ginza district before bringing his knife and his philosophy to Spain.</p>
|
||||||
|
<p class="reveal">We buy from the same suppliers as the best sushi bars in Barcelona — bluefin tuna from the Strait of Gibraltar, wild salmon from Norway, otoro from Tsukiji's successor markets. Every morning our fish arrives in ice, every evening it becomes art on your plate.</p>
|
||||||
|
<p class="reveal">Omakase means "I leave it up to you." When you sit at our counter, you surrender to the chef's judgement. This is the highest form of sushi dining — trust, technique, and a meal that changes with the seasons.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HORIZONTAL SCROLLING MENU -->
|
||||||
|
<section class="menu-scroll" id="menu">
|
||||||
|
<div class="menu-scroll-inner">
|
||||||
|
<div class="menu-panel">
|
||||||
|
<p class="menu-panel-tag">前菜 / Starters</p>
|
||||||
|
<h3 class="menu-panel-title">Starters</h3>
|
||||||
|
<p class="menu-panel-sub">Small dishes, big flavour</p>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Edamame</div><div class="menu-dish-desc">Sea salt, yuzu chili</div></div>
|
||||||
|
<div class="menu-dish-price">€5</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Miso Soup</div><div class="menu-dish-desc">Dashi, silken tofu, wakame</div></div>
|
||||||
|
<div class="menu-dish-price">€4</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Gyoza (6pc)</div><div class="menu-dish-desc">Pork & chive, ponzu dip</div></div>
|
||||||
|
<div class="menu-dish-price">€8</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Tako Wasabi</div><div class="menu-dish-desc">Octopus, wasabi mayo, tobiko</div></div>
|
||||||
|
<div class="menu-dish-price">€12</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name"> Agedashi Tofu</div><div class="menu-dish-desc">Fried tofu, dashi broth, katsuobushi</div></div>
|
||||||
|
<div class="menu-dish-price">€7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-panel">
|
||||||
|
<p class="menu-panel-tag">握り / Nigiri</p>
|
||||||
|
<h3 class="menu-panel-title">Nigiri</h3>
|
||||||
|
<p class="menu-panel-sub">Two pieces per order</p>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Salmon</div><div class="menu-dish-desc">Wild Norwegian, sea salt</div></div>
|
||||||
|
<div class="menu-dish-price">€7</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Bluefin Tuna</div><div class="menu-dish-desc">Gibraltar Strait, wasabi</div></div>
|
||||||
|
<div class="menu-dish-price">€9</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Otoro</div><div class="menu-dish-desc">Fatty tuna belly, pickled ginger</div></div>
|
||||||
|
<div class="menu-dish-price">€14</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Sea Bass</div><div class="menu-dish-desc">Yellowtail, ponzu, chive</div></div>
|
||||||
|
<div class="menu-dish-price">€8</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Ebi</div><div class="menu-dish-desc">Tiger prawn, yuzu mayo</div></div>
|
||||||
|
<div class="menu-dish-price">€7</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Ikura</div><div class="menu-dish-desc">Salmon roe, shiso, nori</div></div>
|
||||||
|
<div class="menu-dish-price">€12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-panel">
|
||||||
|
<p class="menu-panel-tag">巻き物 / Rolls</p>
|
||||||
|
<h3 class="menu-panel-title">Rolls</h3>
|
||||||
|
<p class="menu-panel-sub">8 pieces per roll</p>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Rainbow Roll</div><div class="menu-dish-desc">Salmon, tuna, avocado, cucumber</div></div>
|
||||||
|
<div class="menu-dish-price">€16</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Dragon Roll</div><div class="menu-dish-desc">Eel, cucumber, avocado, unagi sauce</div></div>
|
||||||
|
<div class="menu-dish-price">€17</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Spicy Tuna</div><div class="menu-dish-desc">Tuna, sriracha mayo, cucumber, crispy shallot</div></div>
|
||||||
|
<div class="menu-dish-price">€14</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">California Roll</div><div class="menu-dish-desc">Crab stick, avocado, cucumber, tobiko</div></div>
|
||||||
|
<div class="menu-dish-price">€12</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Vegetable Roll</div><div class="menu-dish-desc">Avocado, cucumber, carrot, asparagus</div></div>
|
||||||
|
<div class="menu-dish-price">€9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-panel">
|
||||||
|
<p class="menu-panel-tag">メイン / Mains</p>
|
||||||
|
<h3 class="menu-panel-title">Mains</h3>
|
||||||
|
<p class="menu-panel-sub">Rice bowls & cooked dishes</p>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Salmon Teriyaki</div><div class="menu-dish-desc">Grilled salmon, teriyaki, steamed rice, salad</div></div>
|
||||||
|
<div class="menu-dish-price">€18</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Chicken Katsu</div><div class="menu-dish-desc">Breaded chicken, katsu curry, jasmine rice</div></div>
|
||||||
|
<div class="menu-dish-price">€16</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Tonkotsu Ramen</div><div class="menu-dish-desc">12-hour broth, chashu pork, soft egg, nori, noodles</div></div>
|
||||||
|
<div class="menu-dish-price">€17</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-dish">
|
||||||
|
<div><div class="menu-dish-name">Vegetable Tempura</div><div class="menu-dish-desc">Seasonal vegetables, light batter, tentsuyu dip</div></div>
|
||||||
|
<div class="menu-dish-price">€14</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- OMAKASE FEATURE -->
|
||||||
|
<section class="omakase" id="omakase">
|
||||||
|
<div class="omakase-img reveal"></div>
|
||||||
|
<div class="omakase-text reveal">
|
||||||
|
<p class="omakase-tag">体験 / Omakase Experience</p>
|
||||||
|
<h3 class="omakase-title">Let the chef decide your meal</h3>
|
||||||
|
<p class="omakase-desc">Sit at the counter. Watch the knife. Surrender to the seasons. Our omakase menu changes every week — whatever is freshest, most seasonal, most exceptional. Typically 12–15 courses over 90 minutes.</p>
|
||||||
|
<p class="omakase-desc">The chef will guide you through each piece — its origin, its character, why it was chosen today. This is sushi as meditation.</p>
|
||||||
|
<p class="omakase-price">FROM</p>
|
||||||
|
<p class="omakase-amount">€65 per person</p>
|
||||||
|
<a href="#location" class="omakase-link">Reserve your omakase seat →</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- IZAKAYA / DRINKS -->
|
||||||
|
<section class="izakaya" id="drinks">
|
||||||
|
<div class="izakaya-inner">
|
||||||
|
<div class="izakaya-header">
|
||||||
|
<div>
|
||||||
|
<p style="font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;">居酒屋 / Drinks</p>
|
||||||
|
<h2 class="izakaya-title">Izakaya</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="drinks-grid">
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Sake Toko</div>
|
||||||
|
<div class="drink-style">Junmai, chilled, 300ml</div>
|
||||||
|
<div class="drink-price">from €18</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Sake Daiginjo</div>
|
||||||
|
<div class="drink-style">Premium, floral notes</div>
|
||||||
|
<div class="drink-price">from €28</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Asahi Draft</div>
|
||||||
|
<div class="drink-style">Japanese lager, 330ml</div>
|
||||||
|
<div class="drink-price">€4.50</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Sapporo</div>
|
||||||
|
<div class="drink-style">Japanese lager, 330ml</div>
|
||||||
|
<div class="drink-price">€4.50</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name"> plum wine</div>
|
||||||
|
<div class="drink-style">Umeshu, on the rocks</div>
|
||||||
|
<div class="drink-price">€7</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Yuzu Highball</div>
|
||||||
|
<div class="drink-style">Whiskey, yuzu, soda</div>
|
||||||
|
<div class="drink-price">€9</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Japanese Whisky</div>
|
||||||
|
<div class="drink-style">Suntory Toki, on the rocks</div>
|
||||||
|
<div class="drink-price">€10</div>
|
||||||
|
</div>
|
||||||
|
<div class="drink-item">
|
||||||
|
<div class="drink-name">Green Tea</div>
|
||||||
|
<div class="drink-style">Matcha hot, house blend</div>
|
||||||
|
<div class="drink-price">€4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- REVIEWS -->
|
||||||
|
<section class="reviews-section" id="reviews">
|
||||||
|
<div class="reviews-inner">
|
||||||
|
<div class="reviews-header">
|
||||||
|
<h2 class="reveal">What guests say</h2>
|
||||||
|
<p class="reveal">★★★★★ Google · TripAdvisor · TheFork</p>
|
||||||
|
</div>
|
||||||
|
<div class="reviews-grid">
|
||||||
|
<div class="review-item reveal">
|
||||||
|
<div class="review-stars">★★★★★</div>
|
||||||
|
<p class="review-text">"The omakase experience was the best meal of my life. Chef Kenji's knife work is mesmerising. The otoro melted on my tongue. An absolute must in Benalmádena."</p>
|
||||||
|
<div class="review-author">— Marco T., Google</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-item reveal">
|
||||||
|
<div class="review-stars">★★★★★</div>
|
||||||
|
<p class="review-text">"We did the omakase for our anniversary. The chef explained every piece. The attention to detail, the seasonality, the presentation — this is Michelin-starred quality without the pretension."</p>
|
||||||
|
<div class="review-author">— Laura & David, TripAdvisor</div>
|
||||||
|
</div>
|
||||||
|
<div class="review-item reveal">
|
||||||
|
<div class="review-stars">★★★★★</div>
|
||||||
|
<p class="review-text">"As someone who has eaten sushi in Tokyo, this is the real thing. The fish quality is exceptional, the rice has perfect seasoning, and the sake list is impressive. Kaito is exceptional."</p>
|
||||||
|
<div class="review-author">— Yuki N., TheFork</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- LOCATION -->
|
||||||
|
<section class="location" id="location">
|
||||||
|
<div class="location-inner">
|
||||||
|
<div class="location-block reveal">
|
||||||
|
<h3>Visit Us</h3>
|
||||||
|
<div class="hours-row"><span>Monday</span><span>Closed</span></div>
|
||||||
|
<div class="hours-row"><span>Tuesday — Thursday</span><span>18:00 — 23:00</span></div>
|
||||||
|
<div class="hours-row"><span>Friday — Saturday</span><span>18:00 — 00:00</span></div>
|
||||||
|
<div class="hours-row"><span>Sunday</span><span>13:00 — 22:00</span></div>
|
||||||
|
<div style="margin-top:2rem;">
|
||||||
|
<p class="contact-line">📍 Av. Antonio Machado, 128<br>29630 Benalmádena Costa, Spain</p>
|
||||||
|
<p class="contact-line" style="margin-top:0.8rem;">📞 <a href="tel:+34952572001">+34 952 572 001</a></p>
|
||||||
|
<p class="contact-line">✉️ <a href="mailto:info@kaitosushi.es">info@kaitosushi.es</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="map-placeholder reveal">
|
||||||
|
<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!1=s0xd72fd3a050f50eb%3A0x5233479452a1f903!2sCasa%20Alberto!5e0!3m2!1sen!2ses!4v1" allowfullscreen="" loading="lazy"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="footer-logo">KAITO</p>
|
||||||
|
<p>Av. Antonio Machado, 128 · 29630 Benalmádena Costa · +34 952 572 001</p>
|
||||||
|
<p style="margin-top:0.5rem;opacity:0.3;">© 2026 Kaito Sushi. 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>
|
||||||
@@ -0,0 +1,689 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AutoJobs — UML Activity Diagram</title>
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #0a0e1a;
|
||||||
|
color: #e2e8f0;
|
||||||
|
padding: 40px 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: #475569;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ UML SHAPES ============ */
|
||||||
|
.start-end {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #10b981;
|
||||||
|
border: 3px solid #0f172a;
|
||||||
|
box-shadow: 0 0 0 3px #10b981;
|
||||||
|
}
|
||||||
|
.action {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 2px solid #334155;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px 20px;
|
||||||
|
min-width: 180px;
|
||||||
|
max-width: 260px;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.action-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.action-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.action-detail {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.action-sub {
|
||||||
|
background: #1a2332;
|
||||||
|
border: 1px solid #2d3748;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
min-width: 140px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.action-sub-title {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
background: #1e293b;
|
||||||
|
border: 2px solid #f59e0b;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.decision-inner {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.decision-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f59e0b;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.decision-sublabel {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swimlane-header {
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ LAYOUT ============ */
|
||||||
|
.diagram-wrapper {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Swimlanes */
|
||||||
|
.swimlanes {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.swimlane {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 260px;
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vertical flow */
|
||||||
|
.flow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal row */
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrow connector */
|
||||||
|
.arrow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #3b82f6;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.arrow-label {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #475569;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.arrow-branch {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #64748b;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fork/join bar */
|
||||||
|
.fork-bar {
|
||||||
|
width: 4px;
|
||||||
|
background: linear-gradient(to bottom, #3b82f6, #6366f1);
|
||||||
|
border-radius: 2px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
.join-bar {
|
||||||
|
width: 60px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(to right, #3b82f6, #6366f1);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color coding */
|
||||||
|
.col-input { --lane-color: #8b5cf6; }
|
||||||
|
.col-fetch { --lane-color: #0891b2; }
|
||||||
|
.col-classify { --lane-color: #d97706; }
|
||||||
|
.col-eval { --lane-color: #059669; }
|
||||||
|
.col-gen { --lane-color: #db2777; }
|
||||||
|
.col-pipeline { --lane-color: #4f46e5; }
|
||||||
|
.col-alert { --lane-color: #dc2626; }
|
||||||
|
|
||||||
|
.action.col-input { border-color: var(--lane-color); }
|
||||||
|
.action.col-fetch { border-color: var(--lane-color); }
|
||||||
|
.action.col-classify { border-color: var(--lane-color); }
|
||||||
|
.action.col-eval { border-color: var(--lane-color); }
|
||||||
|
.action.col-gen { border-color: var(--lane-color); }
|
||||||
|
.action.col-pipeline { border-color: var(--lane-color); }
|
||||||
|
.action.col-alert { border-color: var(--lane-color); }
|
||||||
|
|
||||||
|
.swimlane-header.col-input { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-fetch { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-classify { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-eval { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-gen { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-pipeline { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
.swimlane-header.col-alert { background: var(--lane-color); border-color: var(--lane-color); }
|
||||||
|
|
||||||
|
/* Score boxes */
|
||||||
|
.score-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px solid #059669;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
.score-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 90px;
|
||||||
|
}
|
||||||
|
.score-label {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #64748b;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.score-value {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f1f5f9;
|
||||||
|
}
|
||||||
|
.score-weight {
|
||||||
|
font-size: 9px;
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skip/reject box */
|
||||||
|
.skip-box {
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px dashed #475569;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
text-align: center;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.skip-label { color: #dc2626; font-weight: 700; }
|
||||||
|
|
||||||
|
/* Output row */
|
||||||
|
.output-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px solid #db2777;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
.output-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 130px;
|
||||||
|
}
|
||||||
|
.output-icon { font-size: 16px; margin-bottom: 2px; }
|
||||||
|
.output-title { font-size: 11px; font-weight: 700; color: #f1f5f9; }
|
||||||
|
.output-detail { font-size: 10px; color: #64748b; }
|
||||||
|
|
||||||
|
/* Pipeline stages */
|
||||||
|
.pipeline-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.pipeline-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
min-width: 130px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pipeline-item.p-wishlist { border-color: #8b5cf6; }
|
||||||
|
.pipeline-item.p-applied { border-color: #06b6d4; }
|
||||||
|
.pipeline-item.p-interview { border-color: #f59e0b; }
|
||||||
|
.pipeline-item.p-result { border-color: #10b981; }
|
||||||
|
.pipeline-icon { font-size: 16px; }
|
||||||
|
.pipeline-title { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-top: 2px; }
|
||||||
|
.pipeline-detail { font-size: 10px; color: #64748b; }
|
||||||
|
|
||||||
|
/* Horus bot */
|
||||||
|
.horus-box {
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px solid #dc2626;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.horus-title { font-size: 13px; font-weight: 700; color: #dc2626; }
|
||||||
|
.horus-detail { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||||||
|
|
||||||
|
/* Arrows between pipeline items */
|
||||||
|
.pipe-arrow {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Separator */
|
||||||
|
.sep {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px dashed #1e293b;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legend */
|
||||||
|
.legend {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 40px auto 0;
|
||||||
|
}
|
||||||
|
.legend-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #475569;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.legend-items {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
.legend-swatch {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 2px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 24px auto 0;
|
||||||
|
background: #0f172a;
|
||||||
|
border: 1px solid #1e293b;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.note strong { color: #94a3b8; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.swimlanes { flex-direction: column; }
|
||||||
|
.swimlane { max-width: 100%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>AutoJobs — UML Activity Diagram</h1>
|
||||||
|
<p class="subtitle">hostpioneers.com/autojobs · Complete Job Search Pipeline</p>
|
||||||
|
|
||||||
|
<div class="diagram-wrapper">
|
||||||
|
|
||||||
|
<!-- START -->
|
||||||
|
<div class="flow">
|
||||||
|
<div class="start-end"></div>
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 1: INPUT -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="action col-input">
|
||||||
|
<div class="action-icon">📋</div>
|
||||||
|
<div class="action-title">USER INPUT</div>
|
||||||
|
<div class="action-detail">Paste job URL OR description text OR fill manual fields</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">job_posted()</div>
|
||||||
|
|
||||||
|
<!-- STEP 2: FETCH -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="action col-fetch">
|
||||||
|
<div class="action-icon">🔍</div>
|
||||||
|
<div class="action-title">FETCH & PARSE</div>
|
||||||
|
<div class="action-detail">Extract: title, company, description, board type</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">Perplexity API + web scraping</div>
|
||||||
|
|
||||||
|
<div class="row" style="margin-top:8px;">
|
||||||
|
<div class="action-sub">
|
||||||
|
<div class="action-sub-title">📡 Company info (Crunchbase, LinkedIn, website)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 3: CLASSIFY -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="action col-classify">
|
||||||
|
<div class="action-icon">🏷️</div>
|
||||||
|
<div class="action-title">CLASSIFY ROLE</div>
|
||||||
|
<div class="action-detail">Detect archetype, seniority level, location</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- Classify sub-items -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="action-sub" style="border-color:#d97706;">
|
||||||
|
<div class="action-sub-title">🤖 Voice AI / Agentic / Backend / Full-Stack</div>
|
||||||
|
</div>
|
||||||
|
<div class="action-sub" style="border-color:#d97706;">
|
||||||
|
<div class="action-sub-title">📊 Junior / Mid / Senior / Staff</div>
|
||||||
|
</div>
|
||||||
|
<div class="action-sub" style="border-color:#d97706;">
|
||||||
|
<div class="action-sub-title">🌍 Remote / Spain / EU / US</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 4: EVALUATE -->
|
||||||
|
<div class="action col-eval" style="max-width:700px; border-color:#059669;">
|
||||||
|
<div class="action-icon">📐</div>
|
||||||
|
<div class="action-title">EVALUATE — 6 Dimensions</div>
|
||||||
|
<div class="action-detail">Score each 0–100, compute weighted composite score</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SCORING GRID -->
|
||||||
|
<div class="score-grid">
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">CV Match</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.25</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">Comp Fit</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.20</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">Seniority</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">Culture</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">Tech Stack</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-item">
|
||||||
|
<div class="score-label">Interview</div>
|
||||||
|
<div class="score-value">0–100</div>
|
||||||
|
<div class="score-weight">× 0.10</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">composite_score = weighted_average()</div>
|
||||||
|
|
||||||
|
<!-- DECISION -->
|
||||||
|
<div class="decision">
|
||||||
|
<div class="decision-inner">
|
||||||
|
<div class="decision-label">SCORE ≥ 70?</div>
|
||||||
|
<div class="decision-sublabel">decision gate</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:0;">
|
||||||
|
<div class="arrow-label" style="color:#10b981;">YES</div>
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex;flex-direction:column;align-items:center;gap:0;">
|
||||||
|
<div class="arrow-label" style="color:#dc2626;">NO</div>
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- YES branch: Generate -->
|
||||||
|
<div class="action col-gen" style="border-color:#db2777;">
|
||||||
|
<div class="action-icon">✨</div>
|
||||||
|
<div class="action-title">GENERATE CONTENT</div>
|
||||||
|
<div class="action-detail">If score ≥ 70 → CV PDF + Cover Letter + Interview Prep</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NO branch: Skip -->
|
||||||
|
<div class="skip-box" style="margin-top: 8px;">
|
||||||
|
<span class="skip-label">⏭️ SKIP</span> — Not recommended
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Arrows converge back to flow -->
|
||||||
|
<div style="display:flex;gap:120px;justify-content:center;margin:8px 0;">
|
||||||
|
<div class="fork-bar"></div>
|
||||||
|
<div class="fork-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="join-bar" style="margin:0 auto;"></div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- OUTPUT -->
|
||||||
|
<div class="output-row">
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">📄</div>
|
||||||
|
<div class="output-title">CV PDF</div>
|
||||||
|
<div class="output-detail">ATS-optimized, keyword injected</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">✉️</div>
|
||||||
|
<div class="output-title">Cover Letter</div>
|
||||||
|
<div class="output-detail">Personalized, 3 paragraphs</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">🎯</div>
|
||||||
|
<div class="output-title">Interview Prep</div>
|
||||||
|
<div class="output-detail">Questions + STAR stories</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 6: PIPELINE -->
|
||||||
|
<div class="action col-pipeline" style="max-width:700px; border-color:#4f46e5;">
|
||||||
|
<div class="action-icon">📌</div>
|
||||||
|
<div class="action-title">PIPELINE — Kanban Board</div>
|
||||||
|
<div class="action-detail">Job moves through stages as user takes action</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pipeline-row" style="margin-top:8px;">
|
||||||
|
<div class="pipeline-item p-wishlist">
|
||||||
|
<div class="pipeline-icon">📋</div>
|
||||||
|
<div class="pipeline-title">WISHLIST</div>
|
||||||
|
<div class="pipeline-detail">Score ≥ 70, not yet applied</div>
|
||||||
|
</div>
|
||||||
|
<div class="pipe-arrow">→</div>
|
||||||
|
<div class="pipeline-item p-applied">
|
||||||
|
<div class="pipeline-icon">🚀</div>
|
||||||
|
<div class="pipeline-title">APPLIED</div>
|
||||||
|
<div class="pipeline-detail">User submitted application</div>
|
||||||
|
</div>
|
||||||
|
<div class="pipe-arrow">→</div>
|
||||||
|
<div class="pipeline-item p-interview">
|
||||||
|
<div class="pipeline-icon">💬</div>
|
||||||
|
<div class="pipeline-title">INTERVIEW</div>
|
||||||
|
<div class="pipeline-detail">Scheduled or completed</div>
|
||||||
|
</div>
|
||||||
|
<div class="pipe-arrow">→</div>
|
||||||
|
<div class="pipeline-item p-result">
|
||||||
|
<div class="pipeline-icon">✅</div>
|
||||||
|
<div class="pipeline-title">RESULT</div>
|
||||||
|
<div class="pipeline-detail">Offer / Rejected</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">user moves cards · outcome recorded</div>
|
||||||
|
|
||||||
|
<!-- STEP 7: ALERTS -->
|
||||||
|
<div class="action col-alert" style="max-width:700px; border-color:#dc2626;">
|
||||||
|
<div class="action-icon">🔔</div>
|
||||||
|
<div class="action-title">TELEGRAM ALERTS</div>
|
||||||
|
<div class="action-detail">Horus bot notifies at key moments</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row" style="margin-top:8px;">
|
||||||
|
<div class="output-item" style="border-color:#dc2626;">
|
||||||
|
<div class="output-icon">🆕</div>
|
||||||
|
<div class="output-title">Evaluation done</div>
|
||||||
|
<div class="output-detail">Score + content ready</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item" style="border-color:#dc2626;">
|
||||||
|
<div class="output-icon">⏰</div>
|
||||||
|
<div class="output-title">Interview 24h</div>
|
||||||
|
<div class="output-detail">Reminder alert</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item" style="border-color:#dc2626;">
|
||||||
|
<div class="output-icon">🏆</div>
|
||||||
|
<div class="output-title">Offer received</div>
|
||||||
|
<div class="output-detail">Immediate alert</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<div class="horus-box">
|
||||||
|
<div class="horus-title">🤖 Horus Bot</div>
|
||||||
|
<div class="horus-detail">Telegram · @Horus_Da_Bot</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- FEEDBACK LOOP -->
|
||||||
|
<div class="action" style="border-color:#475569; max-width:400px;">
|
||||||
|
<div class="action-icon">🔁</div>
|
||||||
|
<div class="action-title">ICP LEARNING LOOP — Future</div>
|
||||||
|
<div class="action-detail">Track conversions → auto-tune scoring weights</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- END -->
|
||||||
|
<div class="start-end" style="background:#dc2626; box-shadow:0 0 0 3px #dc2626;"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LEGEND -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-title">Color Legend</div>
|
||||||
|
<div class="legend-items">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#8b5cf6;"></div>
|
||||||
|
<span>Input</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#0891b2;"></div>
|
||||||
|
<span>Fetch</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#d97706;"></div>
|
||||||
|
<span>Classify</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#059669;"></div>
|
||||||
|
<span>Evaluate</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#db2777;"></div>
|
||||||
|
<span>Generate</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#4f46e5;"></div>
|
||||||
|
<span>Pipeline</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-swatch" style="background:#1e293b;border-color:#dc2626;"></div>
|
||||||
|
<span>Alert</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="note">
|
||||||
|
<strong>How it works:</strong> User pastes a job URL → AutoJobs fetches & parses the listing → classifies it by role type, seniority & location → evaluates across 6 weighted dimensions (CV match, comp, seniority, culture, tech, interview feasibility) → decision gate at score 70 → if pass, generates ATS CV PDF + personalized cover letter + interview prep → job enters the pipeline board → moves Wishlist → Applied → Interview → Result as user takes action → Horus Telegram bot sends alerts at key moments. Future: ICP learning loop tracks conversions and auto-tunes scoring weights.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,490 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AutoJobs Pipeline — Flowchart</title>
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #0f1117;
|
||||||
|
color: #e2e8f0;
|
||||||
|
padding: 40px 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #f8fafc;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.flowchart {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.step {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 260px;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.step-num {
|
||||||
|
display: inline-block;
|
||||||
|
background: #3b82f6;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.step-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.step-details {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.step-details span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.arrow {
|
||||||
|
color: #3b82f6;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
.arrow-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #475569;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
/* Stage colors */
|
||||||
|
.input { border-color: #8b5cf6; }
|
||||||
|
.input .step-num { background: #8b5cf6; }
|
||||||
|
.fetch { border-color: #06b6d4; }
|
||||||
|
.fetch .step-num { background: #06b6d4; }
|
||||||
|
.classify { border-color: #f59e0b; }
|
||||||
|
.classify .step-num { background: #f59e0b; }
|
||||||
|
.eval { border-color: #10b981; }
|
||||||
|
.eval .step-num { background: #10b981; }
|
||||||
|
.gen { border-color: #ec4899; }
|
||||||
|
.gen .step-num { background: #ec4899; }
|
||||||
|
.pipeline { border-color: #6366f1; }
|
||||||
|
.pipeline .step-num { background: #6366f1; }
|
||||||
|
.alert { border-color: #ef4444; }
|
||||||
|
.alert .step-num { background: #ef4444; }
|
||||||
|
|
||||||
|
/* Sub-steps */
|
||||||
|
.sub-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.sub-step {
|
||||||
|
background: #1a2332;
|
||||||
|
border: 1px solid #1e293b;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
min-width: 150px;
|
||||||
|
max-width: 200px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.sub-step-title {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #cbd5e1;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.sub-step-detail {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scoring-box {
|
||||||
|
background: #0f172a;
|
||||||
|
border: 2px solid #10b981;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin: 16px auto;
|
||||||
|
max-width: 700px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.scoring-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #10b981;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.scoring-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.scoring-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
.scoring-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.scoring-value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f1f5f9;
|
||||||
|
}
|
||||||
|
.scoring-weight {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-box {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 2px solid #f59e0b;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin: 16px auto;
|
||||||
|
max-width: 400px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.decision-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #f59e0b;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.decision-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e2e8f0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.decision-threshold {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.output-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
min-width: 160px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.output-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.output-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #f1f5f9;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.output-detail {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px dashed #1e293b;
|
||||||
|
margin: 24px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 40px auto 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
.legend-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.step { min-width: 160px; }
|
||||||
|
.sub-step { min-width: 130px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>AutoJobs Pipeline — Flowchart</h1>
|
||||||
|
<p class="subtitle">hostpioneers.com/autojobs — AI-Powered Job Search System</p>
|
||||||
|
|
||||||
|
<div class="flowchart">
|
||||||
|
|
||||||
|
<!-- STEP 1: INPUT -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="step input">
|
||||||
|
<div class="step-num">STEP 1</div>
|
||||||
|
<div class="step-title">INPUT</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Job URL pasted</span>
|
||||||
|
<span>OR JD text pasted</span>
|
||||||
|
<span>OR manual fields</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">user pastes URL or description</div>
|
||||||
|
|
||||||
|
<!-- STEP 2: FETCH -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="step fetch">
|
||||||
|
<div class="step-num">STEP 2</div>
|
||||||
|
<div class="step-title">FETCH & PARSE</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Extract: title, company, description</span>
|
||||||
|
<span>Detect board type</span>
|
||||||
|
<span>Fetch company info</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label">Perplexity API + web scraping</div>
|
||||||
|
|
||||||
|
<!-- STEP 3: CLASSIFY -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="step classify">
|
||||||
|
<div class="step-num">STEP 3</div>
|
||||||
|
<div class="step-title">CLASSIFY</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Voice AI / Agentic / Backend / Full-Stack</span>
|
||||||
|
<span>Junior / Mid / Senior / Staff</span>
|
||||||
|
<span>Remote / Spain / EU / US</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 4: EVALUATE -->
|
||||||
|
<div class="step eval" style="max-width:700px;">
|
||||||
|
<div class="step-num">STEP 4</div>
|
||||||
|
<div class="step-title">EVALUATE — 6 Dimensions</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Each dimension scored 0–100, then weighted average = composite score</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SCORING GRID -->
|
||||||
|
<div class="scoring-box">
|
||||||
|
<div class="scoring-title">Scoring Dimensions</div>
|
||||||
|
<div class="scoring-grid">
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">CV Match</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.25</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">Compensation Fit</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.20</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">Seniority Fit</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">Culture & Growth</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">Tech Stack Match</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.15</div>
|
||||||
|
</div>
|
||||||
|
<div class="scoring-item">
|
||||||
|
<div class="scoring-label">Interview Feasibility</div>
|
||||||
|
<div class="scoring-value">0–100</div>
|
||||||
|
<div class="scoring-weight">× 0.10</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- DECISION -->
|
||||||
|
<div class="decision-box">
|
||||||
|
<div class="decision-title">DECISION GATE</div>
|
||||||
|
<div class="decision-text">Composite Score ≥ 70?</div>
|
||||||
|
<div class="decision-threshold">If NO (score < 70) → "Not recommended — skip this role"</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
<div class="arrow-label" style="color:#10b981;">YES → Generate content</div>
|
||||||
|
|
||||||
|
<!-- STEP 5: GENERATE -->
|
||||||
|
<div class="step gen" style="max-width:700px;">
|
||||||
|
<div class="step-num">STEP 5</div>
|
||||||
|
<div class="step-title">GENERATE — If Score ≥ 70</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>ATS-Optimized CV PDF + Personalized Cover Letter</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="output-row">
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">📄</div>
|
||||||
|
<div class="output-title">CV PDF</div>
|
||||||
|
<div class="output-detail">Keyword-injected, ATS-optimized</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">✉️</div>
|
||||||
|
<div class="output-title">Cover Letter</div>
|
||||||
|
<div class="output-detail">Personalized, 3 paragraphs</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">🎯</div>
|
||||||
|
<div class="output-title">Interview Prep</div>
|
||||||
|
<div class="output-detail">Questions + STAR stories</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 6: PIPELINE -->
|
||||||
|
<div class="step pipeline" style="max-width:700px;">
|
||||||
|
<div class="step-num">STEP 6</div>
|
||||||
|
<div class="step-title">PIPELINE — Kanban Board</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="output-row">
|
||||||
|
<div class="output-item" style="border-color:#8b5cf6;">
|
||||||
|
<div class="output-icon">📋</div>
|
||||||
|
<div class="output-title">Wishlist</div>
|
||||||
|
<div class="output-detail">Score ≥ 70, not yet applied</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item" style="border-color:#06b6d4;">
|
||||||
|
<div class="output-icon">🚀</div>
|
||||||
|
<div class="output-title">Applied</div>
|
||||||
|
<div class="output-detail">User submitted application</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item" style="border-color:#f59e0b;">
|
||||||
|
<div class="output-icon">💬</div>
|
||||||
|
<div class="output-title">Interview</div>
|
||||||
|
<div class="output-detail">Scheduled or completed</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item" style="border-color:#10b981;">
|
||||||
|
<div class="output-icon">✅</div>
|
||||||
|
<div class="output-title">Offer / Reject</div>
|
||||||
|
<div class="output-detail">Outcome recorded</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">▼</div>
|
||||||
|
|
||||||
|
<!-- STEP 7: ALERT -->
|
||||||
|
<div class="step alert" style="max-width:700px;">
|
||||||
|
<div class="step-num">STEP 7</div>
|
||||||
|
<div class="step-title">ALERTS & FOLLOW-UP</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Telegram notification via Horus bot</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="output-row">
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">🆕</div>
|
||||||
|
<div class="output-title">New Evaluation</div>
|
||||||
|
<div class="output-detail">Complete notification</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">⏰</div>
|
||||||
|
<div class="output-title">Interview Reminder</div>
|
||||||
|
<div class="output-detail">24h before</div>
|
||||||
|
</div>
|
||||||
|
<div class="output-item">
|
||||||
|
<div class="output-icon">🏆</div>
|
||||||
|
<div class="output-title">Offer Received</div>
|
||||||
|
<div class="output-detail">Immediate alert</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="separator">
|
||||||
|
|
||||||
|
<!-- FEEDBACK LOOP -->
|
||||||
|
<div class="step" style="border-color:#475569; max-width:500px;">
|
||||||
|
<div class="step-title" style="color:#94a3b8;">🔁 ICP LEARNING LOOP (Future)</div>
|
||||||
|
<div class="step-details">
|
||||||
|
<span>Track which jobs actually convert → auto-adjust scoring weights</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LEGEND -->
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#8b5cf6;"></div> Input</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#06b6d4;"></div> Fetch</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#f59e0b;"></div> Classify</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#10b981;"></div> Evaluate</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#ec4899;"></div> Generate</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#6366f1;"></div> Pipeline</div>
|
||||||
|
<div class="legend-item"><div class="legend-dot" style="background:#ef4444;"></div> Alert</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+181
@@ -0,0 +1,181 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Is AI answering calls for your competitors?</title>
|
||||||
|
<style type="text/css">
|
||||||
|
body, table, td, p, a, li, blockquote {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
||||||
|
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
|
||||||
|
|
||||||
|
body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1a1a2e; }
|
||||||
|
|
||||||
|
.email-container { max-width: 600px; margin: 0 auto; background-color: #ffffff; }
|
||||||
|
|
||||||
|
.header { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); padding: 30px 40px; text-align: center; }
|
||||||
|
.header h1 { color: #ffffff; font-size: 28px; font-weight: 700; margin: 0; line-height: 1.3; }
|
||||||
|
.header .subtitle { color: #ffd700; font-size: 16px; margin-top: 10px; }
|
||||||
|
|
||||||
|
.hero-section { padding: 40px 40px 30px; text-align: center; }
|
||||||
|
.hero-section h2 { font-size: 26px; color: #1a1a2e; margin: 0 0 20px; line-height: 1.3; }
|
||||||
|
.hero-section p { font-size: 17px; line-height: 1.6; color: #4a4a5a; margin: 0; }
|
||||||
|
|
||||||
|
.highlight-box { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; padding: 20px 25px; margin: 30px 40px; border-radius: 0 8px 8px 0; }
|
||||||
|
.highlight-box p { margin: 0; font-size: 15px; color: #92400e; font-style: italic; }
|
||||||
|
|
||||||
|
.testimonial { background: #f9fafb; border-radius: 12px; padding: 20px; margin: 0 40px 15px; border: 1px solid #e5e7eb; }
|
||||||
|
.testimonial p { margin: 0 0 10px; font-size: 15px; color: #374151; line-height: 1.5; }
|
||||||
|
.testimonial .author { font-size: 13px; color: #6b7280; font-weight: 600; }
|
||||||
|
.testimonial .stars { color: #f59e0b; margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.features { padding: 30px 40px; background: #fff; }
|
||||||
|
.features h3 { font-size: 18px; color: #1a1a2e; margin: 0 0 20px; text-align: center; }
|
||||||
|
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||||
|
.feature-item { background: #f9fafb; padding: 15px; border-radius: 8px; }
|
||||||
|
.feature-item p { font-size: 14px; color: #374151; margin: 0; line-height: 1.4; }
|
||||||
|
.feature-item .emoji { font-size: 16px; margin-right: 8px; }
|
||||||
|
|
||||||
|
.offer-section { background: linear-gradient(180deg, #1a1a2e 0%, #2d2d44 100%); padding: 40px; text-align: center; }
|
||||||
|
.offer-section h3 { color: #ffffff; font-size: 24px; margin: 0 0 20px; }
|
||||||
|
|
||||||
|
.urgency { background: #dc2626; color: #ffffff; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 15px; font-weight: 700; }
|
||||||
|
.urgency span { color: #ffd700; }
|
||||||
|
|
||||||
|
.offer-item { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; margin-bottom: 15px; text-align: left; }
|
||||||
|
.offer-item h4 { color: #ffd700; font-size: 18px; margin: 0 0 8px; }
|
||||||
|
.offer-item p { color: #e5e7eb; font-size: 14px; margin: 0; line-height: 1.5; }
|
||||||
|
.offer-item .price { font-size: 22px; font-weight: 700; color: #ffffff; margin-top: 10px; }
|
||||||
|
.offer-item .price span { font-size: 14px; color: #9ca3af; font-weight: 400; }
|
||||||
|
|
||||||
|
.cta-button { display: inline-block; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; text-decoration: none; font-weight: 700; font-size: 18px; padding: 16px 40px; border-radius: 8px; margin: 20px 0; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); }
|
||||||
|
.cta-button:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
|
||||||
|
|
||||||
|
.guarantee { background: rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; margin-top: 20px; }
|
||||||
|
.guarantee p { color: #9ca3af; font-size: 13px; margin: 0; }
|
||||||
|
.guarantee strong { color: #4ade80; }
|
||||||
|
|
||||||
|
.closing { padding: 30px 40px; text-align: center; }
|
||||||
|
.closing p { font-size: 16px; color: #4a4a5a; line-height: 1.6; margin: 0 0 15px; }
|
||||||
|
.reply-cta { background: #f3f4f6; border-radius: 8px; padding: 15px 20px; margin: 20px 0; }
|
||||||
|
.reply-cta p { font-size: 14px; color: #6b7280; margin: 0; }
|
||||||
|
|
||||||
|
.footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 25px 40px; text-align: center; }
|
||||||
|
.footer p { font-size: 12px; color: #9ca3af; margin: 0 0 10px; }
|
||||||
|
.footer a { color: #6b7280; text-decoration: underline; }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.email-container { width: 100% !important; }
|
||||||
|
.header, .hero-section, .offer-section, .closing, .features, .footer { padding-left: 20px !important; padding-right: 20px !important; }
|
||||||
|
.testimonial, .highlight-box { margin-left: 20px !important; margin-right: 20px !important; }
|
||||||
|
.header h1 { font-size: 22px !important; }
|
||||||
|
.hero-section h2 { font-size: 20px !important; }
|
||||||
|
.features-grid { grid-template-columns: 1fr; }
|
||||||
|
.cta-button { display: block !important; padding: 14px 20px !important; font-size: 16px !important; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="email-container">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>🤖 Is AI answering calls for your competitors?</h1>
|
||||||
|
<p class="subtitle">Here's what's happening right now...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="hero-section">
|
||||||
|
<h2>Quick question:</h2>
|
||||||
|
<p>When was the last time you checked what your competitors are doing online?</p>
|
||||||
|
<p style="margin-top: 15px;">Here's what's happening <strong>RIGHT NOW</strong> while you're reading this...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Testimonial with real name -->
|
||||||
|
<div class="testimonial">
|
||||||
|
<div class="stars">⭐⭐⭐⭐⭐</div>
|
||||||
|
<p>"We were skeptical at first. But in 60 days, our inbound leads increased 40%. The AI answers in Spanish AND English — our clients love it. It's like having a receptionist who never sleeps."</p>
|
||||||
|
<p class="author">— Carlos M., Owner, Restaurante El Puerto, Málaga</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<div class="features">
|
||||||
|
<h3>What smart businesses discovered:</h3>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-item">
|
||||||
|
<p>🍽️ A restaurant reduced no-shows by 60% with AI call handling</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<p>🦷 A dentist booked 14 new patients in 30 days with an AI receptionist</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<p>🏠 A realtor closed 3 deals/month they were missing before</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item">
|
||||||
|
<p>💊 A clinic automated 80% of appointment scheduling</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Offer Section -->
|
||||||
|
<div class="offer-section">
|
||||||
|
<h3>🎯 Your unfair advantage:</h3>
|
||||||
|
|
||||||
|
<!-- Urgency - Cleopatra's addition -->
|
||||||
|
<div class="urgency">
|
||||||
|
⚠️ Only <span>15 founding spots</span> remaining this month
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="offer-item">
|
||||||
|
<h4>🤖 Hire an AI Worker</h4>
|
||||||
|
<p>One agent that answers calls, qualifies leads, and books appointments — 24/7, never misses a lead</p>
|
||||||
|
<p class="price">$797<span>/month</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="offer-item">
|
||||||
|
<h4>🚀 AI Agent Team</h4>
|
||||||
|
<p>3+ agents: Competitor intel, reputation management, sales + onboarding — the full team</p>
|
||||||
|
<p class="price">$1,797<span>/month</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="color: #e5e7eb; font-size: 14px; margin-top: 20px;">
|
||||||
|
One-time setup: $1,997 (single) / $4,997 (multi-agent)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Cleopatra's CTA change -->
|
||||||
|
<a href="https://hostpioneers.com/?utm_source=brevo&utm_campaign=ai-workers&utm_medium=email#assessment" class="cta-button">
|
||||||
|
Get Your Free AI Readiness Assessment →
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="guarantee">
|
||||||
|
<p><strong>🛡️ 60-Day Guarantee:</strong> If you don't see results, next month is free. No questions asked.</p>
|
||||||
|
<p style="margin-top: 8px;"><strong>⏰ Founding Client Pricing closes April 30, 2026</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Closing -->
|
||||||
|
<div class="closing">
|
||||||
|
<p>If you're curious what this would look like for YOUR business, just hit reply and tell us:</p>
|
||||||
|
<div class="reply-cta">
|
||||||
|
<p>1. What do you do?<br>2. What's your biggest challenge with leads or calls?</p>
|
||||||
|
<p style="margin-top: 10px; font-weight: 600; color: #1a1a2e;">We'll recommend the best setup in plain English. No jargon.</p>
|
||||||
|
</div>
|
||||||
|
<p>Talk soon,<br><strong>The HostPioneers Team</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="footer">
|
||||||
|
<p>You received this because you're a valued contact.</p>
|
||||||
|
<p>
|
||||||
|
<a href="{{ unsubscribe }}">Unsubscribe</a> |
|
||||||
|
<a href="{{ update_profile }}">Update preferences</a>
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 15px;">© 2026 HostPioneers | AI Agent Agency | hostpioneers.com</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
name email company country email_status segment
|
||||||
|
Romain Blade kristinkreuk65@gmail.com MOI FR pending Re-engage
|
||||||
|
DIMOU RODANTHI howardjohn.tucker@yahoo.com GR pending Re-engage
|
||||||
|
Martha Kuzmeski agonqisi@hotmail.com Kuzmeski US pending Re-engage
|
||||||
|
Julie Eckert yahoowalletcom@gmail.com US pending Re-engage
|
||||||
|
Ozwan Janom patrickspongebob1420@yahoo.com MY pending Re-engage
|
||||||
|
malush kadrush riki.minaj@hotmail.com AL pending Re-engage
|
||||||
|
Paul Tingley tingleypaul@msn.com GB pending Re-engage
|
||||||
|
chen xiaodong sx01_f@server.uio.cc CN pending Re-engage
|
||||||
|
dai judo daijudo@hotmail.com seedersunite GB pending Re-engage
|
||||||
|
Alberto J. Ruiz Gutierrez alberto@collinsnetworks.net Collins Networks.NET MX pending Re-engage
|
||||||
|
Ahmed Hussein nonameface@Live.com MV pending Re-engage
|
||||||
|
AKUDO OBUTE AKUDOO@HOTMAIL.COM US pending Re-engage
|
||||||
|
Elizabeth Duval visionermutiu@yahoo.com US pending Re-engage
|
||||||
|
matt edwards zeus.nbt@gmail.com Berlin GB pending Re-engage
|
||||||
|
busuu logs busuulogs@e-mail.ua busuulogs incorp US pending Re-engage
|
||||||
|
Jochen Leidner gu3sti@msn.com US pending Re-engage
|
||||||
|
brad jones info100@skymail.mn jonespharmacyltd US pending Re-engage
|
||||||
|
goopet goopet abdulsalamadam@gmail.com none US pending Re-engage
|
||||||
|
Aca Savanovic vlada.expert@gmail.com RS pending Re-engage
|
||||||
|
Ernestina Huerta huerta@comcast.com US pending Re-engage
|
||||||
|
jay orec father-of-kj@hotmail.com CA pending Re-engage
|
||||||
|
Marc Streckfuss marc@fam-streckfuss.de DE pending Re-engage
|
||||||
|
Julias Cäsar weissewolf@z1p.biz TH pending Re-engage
|
||||||
|
Peggy Howard peggy_howard@ymail.com US pending Re-engage
|
||||||
|
Selena Kortial rinnor.-@live.com US pending Re-engage
|
||||||
|
joao ribeiro lucassfera@hotmail.com mostardas.com BR pending Re-engage
|
||||||
|
Alex Volgov alexsize@gmail.com None RU pending Re-engage
|
||||||
|
Maryjo Petz humsay1@hotmail.com US pending Re-engage
|
||||||
|
Jorgen Kvalvaag jorgenmk@gmail.com NO pending Re-engage
|
||||||
|
Maria Pereira ana_paula1717@hotmail.com BR pending Re-engage
|
||||||
|
Akarat Laoharattanawiboon demoinvest@gmail.com TH pending Re-engage
|
||||||
|
Sonia Tie shicasho claudiopiassifreire@yahoo.com.br BR pending Re-engage
|
||||||
|
iceguest top iceguest@live.com icetop US pending Re-engage
|
||||||
|
Nancy Larue betapyeumusic@gmail.com CA pending Re-engage
|
||||||
|
Patricia Lenahan cvolksdorf@hotmail.com US pending Re-engage
|
||||||
|
Samuel Kaka zizoudu59200@hotmail.fr Kaka FR pending Re-engage
|
||||||
|
Andrew Fiegener just_mywife@yahoo.com US pending Re-engage
|
||||||
|
pikachu pikachu ducanhhp91@gmail.com dfsf VN pending Re-engage
|
||||||
|
Michele Barnes lkj4dkj3mns@mailinator.com US pending Re-engage
|
||||||
|
Nam Huynh Jim.Nightshade2@gmail.com US pending Re-engage
|
||||||
|
Kenneth Benjamin Ordinary@tvstar.com US pending Re-engage
|
||||||
|
Sung Won Lee philong_bo2000@yahoo.com ltt US pending Re-engage
|
||||||
|
Craig Hall harry.t2h@gmail.com host37 US pending Re-engage
|
||||||
|
Fouad Outmani aljazera80@hotmail.fr inter GB pending Re-engage
|
||||||
|
Felipe Weiss spike@debian.cl INODOCHILE CL pending Re-engage
|
||||||
|
Nguyen Viet metvaiqua@gmail.com VN pending Re-engage
|
||||||
|
jeniffer peron golmatolsz@live.com n/l US pending Re-engage
|
||||||
|
KATHLEEN THREADWELL kathleen123threadwel@me.com GB pending Re-engage
|
||||||
|
Gerald Charles jessicab@anonmail.de US pending Re-engage
|
||||||
|
Sebally Queylin squeylin@gmail.com US pending Re-engage
|
||||||
|
bagina dagonda jaredsumel@live.ca US pending Re-engage
|
||||||
|
IZAIAS LIMA RAMOS iks.exe@hotmail.com BR pending Re-engage
|
||||||
|
alpha younes forsan4ever@gmail.com MA pending Re-engage
|
||||||
|
BINH NGUYEN fixbugvn@yahoo.com FPT VN pending Re-engage
|
||||||
|
Alexander Eving pornlove.org@gmail.com Eving SK pending Re-engage
|
||||||
|
Philip Schmidt philip.n.schmidt@gmail.com DK pending Re-engage
|
||||||
|
Jennifer Zelenko jenniferzelenko@AOL.COM Nec US pending Re-engage
|
||||||
|
Sky Leaf ogdox@live.ca Idek CA pending Re-engage
|
||||||
|
Donna Marie Baloy carlosrkr@hotmail.com sport NF pending Re-engage
|
||||||
|
Antonio Rossetti jolulemoas@hotmail.com BR pending Re-engage
|
||||||
|
Roth Olivier olivierroth2@gmail.com CH pending Re-engage
|
||||||
|
Stephen Humber trianh1114@zing.vn US pending Re-engage
|
||||||
|
Hilary Guetersloh HilaryGuetersloh8797@hotmail.com US pending Re-engage
|
||||||
|
Alisa SauraAlisaiol Alisatzd945@hotmail.com FR pending Re-engage
|
||||||
|
Ed Acosta rew@romelhot.info US pending Re-engage
|
||||||
|
michael harvin mharvin70@yahoo.com US pending Re-engage
|
||||||
|
Tahir Ali tammany.harding@yahoo.com US pending Re-engage
|
||||||
|
rajandren kalyani vps1@thegioiaccount.com SG pending Re-engage
|
||||||
|
Lars Svendson lsmalmo@googlemail.com SE pending Re-engage
|
||||||
|
joel moorhead joelmoorheads@hotmail.com joel moorhead US pending Re-engage
|
||||||
|
Mark Huges salesadmin@ghuyan.com US pending Re-engage
|
||||||
|
Joseph Parmelee alalilo@gmail.com NA US pending Re-engage
|
||||||
|
Jack Garcia tinhocblog@gmail.com GB pending Re-engage
|
||||||
|
Heidi Preusz h.preusz@gmx.de DE pending Re-engage
|
||||||
|
Kimluong Bui kcwb0x@live.com US pending Re-engage
|
||||||
|
Trinh Quoc Dat trinhquocdatfx@gmail.com VN pending Re-engage
|
||||||
|
Chrisdopthe Diop obamax3@yahoo.com US pending Re-engage
|
||||||
|
Enrique Palomino richard@fumador.com GB pending Re-engage
|
||||||
|
Stephen Vigebo ssvigebo@gmail.com byroe GB pending Re-engage
|
||||||
|
Jessica Kohl filefactory55@gmail.com DE pending Re-engage
|
||||||
|
Dat Le dat.le79@gmail.com CA pending Re-engage
|
||||||
|
efry ddrg yannickfl@yahoo.fr drg US pending Re-engage
|
||||||
|
Leslie Kikuchi jul10@heaven-vn.com dhp US pending Re-engage
|
||||||
|
Wang Tai secondspaces@gmail.com N/A US pending Re-engage
|
||||||
|
Adam Born lrhostingcom@gmail.com LR Hosting NL pending Re-engage
|
||||||
|
john davies johndavieskgb@gmail.com wallmark inc BS pending Re-engage
|
||||||
|
James Guerra Axisofaj@gmail.com US pending Re-engage
|
||||||
|
Roberto chier roberto.chier@gmail.com BR pending Re-engage
|
||||||
|
deinse kuhn ar_isufi@Live.com Yannic DE pending Re-engage
|
||||||
|
CORY OGLE tuan.ngoc4209@gmail.com US pending Re-engage
|
||||||
|
ayub khan ayubkhanmatta@yahoo.com nil PK pending Re-engage
|
||||||
|
John Burch themadmongo@gmail.com US pending Re-engage
|
||||||
|
Jamie Quilon jamie@nova8x.com US pending Re-engage
|
||||||
|
killed jester jester255@hotmail.com AU pending Re-engage
|
||||||
|
Emma Webb darren_ralph@yahoo.co.uk GB pending Re-engage
|
||||||
|
Jason Bradford boxt13@tormail.org CabbageCabbage&CO GB pending Re-engage
|
||||||
|
blake drew silent_bluekz@hotmail.com Acid Burn CA pending Re-engage
|
||||||
|
thierry marouze bozzo64@orange.fr FR pending Re-engage
|
||||||
|
Reginald Boldon timkhongcan@live.com US pending Re-engage
|
||||||
|
Samuel Yam littlegreen2002@gmail.com - SG pending Re-engage
|
||||||
|
Sebastian Falborg Jørgensen sebastian@kamadon.dk DK pending Re-engage
|
||||||
|
Robin E Scalisi yakusaxd@yahoo.com CA pending Re-engage
|
||||||
|
kenny collins independent.financial.company@gmail.com NG pending Re-engage
|
||||||
|
Silence Silence47 silence4710@gmail.com GSO FR pending Re-engage
|
||||||
|
raul alves pinto neto raulal46@hotmail.com BR pending Re-engage
|
||||||
|
Antonio Bocaccio antoniopetuchelli@yahoo.it IT pending Re-engage
|
||||||
|
Cristina Brust Brust mastercratos2@live.com Brust BR pending Re-engage
|
||||||
|
Bryan Cheek nonprofit@pp-donations.com US pending Re-engage
|
||||||
|
ROLANDO POLANCO newbievip@yahoo.com US pending Re-engage
|
||||||
|
Wilfried Hafner hafner@securstar.com SecurStar DE pending Re-engage
|
||||||
|
Massimo Altamura glaer@hotmail.it IT pending Re-engage
|
||||||
|
John Wynn lno_prokilla30@live.com US pending Re-engage
|
||||||
|
shah ali laurieeverall@yahoo.com PK pending Re-engage
|
||||||
|
CONNIE HOLMAN newbievnx@gmail.com US pending Re-engage
|
||||||
|
Ashley Quijano irving3mann@yahoo.co.uk CP.inc US pending Re-engage
|
||||||
|
Robert Beckel rgbeckel@hotmail.com gbeckel US pending Re-engage
|
||||||
|
Masrina Bakri root@jbsex.org PH pending Re-engage
|
||||||
|
full jmaes ams.smtp2011@gmail.com NG pending Re-engage
|
||||||
|
Thomas Vaccaro thmvacc@aol.com CA pending Re-engage
|
||||||
|
Krystal Shaw renngoz@gmail.com VHC Team US pending Re-engage
|
||||||
|
Jo kauzy duckyjet@gmail.com GB pending Re-engage
|
||||||
|
prash cha prde06@gmail.com IN pending Re-engage
|
||||||
|
Ludovic BAILLY zaby39@gmail.com FR pending Re-engage
|
||||||
|
qwe asd 123@qwe.com shgjf fhejs sdfskdjfjd US pending Re-engage
|
||||||
|
Jim Jones unvrslxprts@gmail.com US pending Re-engage
|
||||||
|
josh markovitz jmarkovitz@hotmail.com US pending Re-engage
|
||||||
|
Javier Sanchez Soto artistamagico2000@hotmail.com c-group MX pending Re-engage
|
||||||
|
henio costadella junior danduzzi@hotmail.com danduzzi BR pending Re-engage
|
||||||
|
Pam DeGroot th3-cr4ck3r@live.com matriX US pending Re-engage
|
||||||
|
gembala malam psycholyzern999@gmail.com g3m US pending Re-engage
|
||||||
|
Nikos Phreaker phreaker@hotmail.gr Hosting1337 US pending Re-engage
|
||||||
|
Marcia Feduk greg_lason04@yahoo.com globalpayment GB pending Re-engage
|
||||||
|
Jessie Lanley technophobic@live.com Generics Inc US pending Re-engage
|
||||||
|
Kasper Noes kasper.noes@hotmail.com DK pending Re-engage
|
||||||
|
hunter matthews thecouponkid86@yahoo.com US pending Re-engage
|
||||||
|
noname nana nana notmeiswear732@hotmail.com nanan US pending Re-engage
|
||||||
|
Phil Mac phil@3rdera.com 3rdEra US pending Re-engage
|
||||||
|
Channa Lynch chana.lynch@yahoo.com.vn US pending Re-engage
|
||||||
|
Phill Jones phill_jones15@yahoo.com GB pending Re-engage
|
||||||
|
Renaldo Montenegro adamsjoys@gmail.com GB pending Re-engage
|
||||||
|
sony ericsson vhcvampire@gmail.com SONY ERICSSON US pending Re-engage
|
||||||
|
eric mitchell justchiln@conwaycorp.net fallen US pending Re-engage
|
||||||
|
sharon smith smith200@internet4now.com US pending Re-engage
|
||||||
|
Bi Don snake1308@hotmail.com FR pending Re-engage
|
||||||
|
Collen Zalewski mig.ghost12@gmail.com US pending Re-engage
|
||||||
|
hakim barada lfoorja11@live.fr SA pending Re-engage
|
||||||
|
First Name Last Name rax2boy@yahoo.com TC pending Re-engage
|
||||||
|
Rogers Mercury ubsbaninvestmentplc@aol.com US pending Re-engage
|
||||||
|
toilatuantk chuaoi toilatuantk@gmail.com chuaoi US pending Re-engage
|
||||||
|
Smith kane smithkane@live.com smith interantional IN pending Re-engage
|
||||||
|
raja gile racun@windowslive.com AU pending Re-engage
|
||||||
|
Clay Bowers theman866abh@yahoo.com US pending Re-engage
|
||||||
|
ricardo filipusis picsandpics@hotmail.com CA pending Re-engage
|
||||||
|
bob Nice upvc000@gmail.com bobnice US pending Re-engage
|
||||||
|
Todd Neal generaltoad@gmail.com US pending Re-engage
|
||||||
|
john shephard spoterhot@gmail.com GB pending Re-engage
|
||||||
|
Paul Vara paul.vara2@gmail.com FR pending Re-engage
|
||||||
|
Herbert Müller bollebach@omail.pro DE pending Re-engage
|
||||||
|
net plus netnet5555@yahoo.com plusinvest US pending Re-engage
|
||||||
|
Dennis j Staley angelique.blain@aol.com Staley inc US pending Re-engage
|
||||||
|
Martin Madden lavitavu@yahoo.com GB pending Re-engage
|
||||||
|
John Leite ReactioNzVPS@live.com IRC US pending Re-engage
|
||||||
|
DUILIO SERRA GONCALVES kimzik@live.com BR pending Re-engage
|
||||||
|
klessio anderson klessio_and@hotmail.com BR pending Re-engage
|
||||||
|
mr x f289452@rmqkr.net barq LY pending Re-engage
|
||||||
|
Hussain ALQattan rockboy2011@gmail.com GB pending Re-engage
|
||||||
|
joseph giordano josephgiordano98@yahoo.com oncode tech US pending Re-engage
|
||||||
|
Rafael Bruxel rafael.bruxel@gmail.com BR pending Re-engage
|
||||||
|
pp pp servers2012@yahoo.com us US pending Re-engage
|
||||||
|
luis escobar pr3bitaslele@hotmail.com n-a CL pending Re-engage
|
||||||
|
kharn galphys kharn_galphys@msn.com CA pending Re-engage
|
||||||
|
Norma Tyler Tyler@thichgi.com US pending Re-engage
|
||||||
|
chad hostetler zacpanelot@hotmail.com US pending Re-engage
|
||||||
|
Paul Wusa szenepate@googlemail.com DE pending Re-engage
|
||||||
|
isabelle lezeune leisa@live.fr GB pending Re-engage
|
||||||
|
Sam Josh tough.boot@yahoo.com Info US pending Re-engage
|
||||||
|
Julio Cezar chkinginfect@gmail.com Windows ltda BR pending Re-engage
|
||||||
|
Stephanie L Ningen stningen@yahoo.com US pending Re-engage
|
||||||
|
zizo zizo zied.ibra@gmail.com streetdown FR pending Re-engage
|
||||||
|
Juan Lopez vigade72@gmail.com MX pending Re-engage
|
||||||
|
Sam Jhones sam_jhones4@yahoo.com US pending Re-engage
|
||||||
|
Audrey Harris jisigd@hotmail.com PL pending Re-engage
|
||||||
|
James Fox james_fox30@yahoo.com DE pending Re-engage
|
||||||
|
Marlena Magdalin ubav4e@gmail.com US pending Re-engage
|
||||||
|
Paula Banks lopaz-horani@hotmail.com US pending Re-engage
|
||||||
|
Darcy Vincent toniliu899@yahoo.com US pending Re-engage
|
||||||
|
pierre-marie chopin pm.chopin@yahoo.fr FR pending Re-engage
|
||||||
|
Ion Dragos Iulian stanrobert82@yahoo.com RO pending Re-engage
|
||||||
|
Derrick Gretna mr.derick69@live.com US pending Re-engage
|
||||||
|
IZABEL CRISTINA mariaamartines@terra.com.br Boutequin company BR pending Re-engage
|
||||||
|
Vikas Saini vikassaini01@gmail.com BadiDuniya.com IN pending Re-engage
|
||||||
|
Angela Sheppard nhokpyvn@gmail.com GB pending Re-engage
|
||||||
|
jacqueline souza gilbertomg52@uol.com.br BR pending Re-engage
|
||||||
|
Roy Smith j RoySmith@angelic.com GB pending Re-engage
|
||||||
|
Alma Flores ianthemellors@yahoo.co.uk US pending Re-engage
|
||||||
|
Jake Brown futureallstar27@yahoo.com US pending Re-engage
|
||||||
|
Terri Milosavljevic soma.saso82@yahoo.com US pending Re-engage
|
||||||
|
Ingrid Juliana Cerveny Passos franciscomilitar@uol.com.br BR pending Re-engage
|
||||||
|
Adam Vough allenj27@gmail.com US pending Re-engage
|
||||||
|
Roxanne Pastore akashsharma74u@gmail.com US pending Re-engage
|
||||||
|
Jack Arnadin newman.hale@yahoo.com US pending Re-engage
|
||||||
|
Joseph Christie ahmedto7eground@yahoo.com US pending Re-engage
|
||||||
|
david smith babafemi78@yahoo.com d&s.co GH pending Re-engage
|
||||||
|
ngo the quan admin@luvideez.com VNUGROUP VN pending Re-engage
|
||||||
|
Tony Thomas anjingsundala@yahoo.com US pending Re-engage
|
||||||
|
Berenguel Sébastien shicogenius@aol.com FR pending Re-engage
|
||||||
|
jumbamba marianosh a@cerebel.net GB pending Re-engage
|
||||||
|
LASUNDRA HARLEY accessrusun2@live.com US pending Re-engage
|
||||||
|
p c shikhargupta@live.in IN pending Re-engage
|
||||||
|
Khalil Awada khalil.awada@live.com LebNetwork.net LB pending Re-engage
|
||||||
|
brianna baucum doug.gardner15@gmail.com US pending Re-engage
|
||||||
|
Ted Kersh sean511x@gmail.com RSElites CA pending Re-engage
|
||||||
|
Janga Benito v.nfrog@yahoo.com US pending Re-engage
|
||||||
|
ELIZABETH SINANAN nto@att.net US pending Re-engage
|
||||||
|
Detlef Hintert dark_snake@hushmail.com DE pending Re-engage
|
||||||
|
Tom Willoughby 464d123sa@dsa.ru US pending Re-engage
|
||||||
|
Sean Ward sean.ward@yahoo.co.uk GB pending Re-engage
|
||||||
|
Bartlomiej Nowicki soseipl@gmail.com - PL pending Re-engage
|
||||||
|
Armando Tolas undervalley@yahoo.com SoftwareEngine SES US pending Re-engage
|
||||||
|
James Beeh beehjames@yahoo.com US pending Re-engage
|
||||||
|
Sergio Fabiani x-anass-93@hotmail.fr L'Aquila IT pending Re-engage
|
||||||
|
Philippe Kamin philippe.kamin@bbox.fr FR pending Re-engage
|
||||||
|
Viktoria Lambertova vikike_sk@pobox.sk SK pending Re-engage
|
||||||
|
Kester Bryan Sy kesterbryansy@yahoo.com PH pending Re-engage
|
||||||
|
Patrick Fushigi fushigi@hotmail.de GE pending Re-engage
|
||||||
|
shane stott shanestott24@yahoo.co.uk Ubeh Productions GB pending Re-engage
|
||||||
|
baba razack baba_yinkus@yahoo.com razackinvestments NG pending Re-engage
|
||||||
|
Johnson Thangasamy johnson.pk@gmail.com US pending Re-engage
|
||||||
|
Adam Palmer adam.palmer3@gmail.com Innovus GB pending Re-engage
|
||||||
|
mousawi mousawiz mousawiz4@hotmail.com AE pending Re-engage
|
||||||
|
john urwin blade68uk@live.co.uk thebox1 GB pending Re-engage
|
||||||
|
bassy ezeugo mr.bassyfamily@yahoo.co.uk nigeria NG pending Re-engage
|
||||||
|
Darryl Parr quocnc1991@gmail.com Parr US pending Re-engage
|
||||||
|
shrief Kamel ganeluca1@yahoo.com pc US pending Re-engage
|
||||||
|
Sean Melton xygenhost@yahoo.com US pending Re-engage
|
||||||
|
ziko baba follylawal2005@yahoo.com NG pending Re-engage
|
||||||
|
Beau Reilly BeauReillyEHT@yahoo.com NexonFail US pending Re-engage
|
||||||
|
aminoos David zecv77@yahoo.fr de US pending Re-engage
|
||||||
|
Mark Trevithick anocasio2788@rocketmail.com US pending Re-engage
|
||||||
|
Willard Morgan s.limitedx@gmail.com US pending Re-engage
|
||||||
|
Elham Timy destimy.1@hotmail.com destimy MK pending Re-engage
|
||||||
|
Gatzen Grant gatzegrant@hotmail.com US pending Re-engage
|
||||||
|
alfred müller cityhacker@hotmail.com GA pending Re-engage
|
||||||
|
cliff Hagan cliff.hagan@aol.com US pending Re-engage
|
||||||
|
Tyler Ostolski Tylerostolski@yahoo.com US pending Re-engage
|
||||||
|
David Sobotta Sobotta pokot@dcemail.com US pending Re-engage
|
||||||
|
beth Huffner b.huffner@comcast.net US pending Re-engage
|
||||||
|
Matt B Matt2012@gmail.com GB pending Re-engage
|
||||||
|
kim butler kim_butler001@yahoo.com US pending Re-engage
|
||||||
|
idjOs dub mridjo@hotmail.com free FR pending Re-engage
|
||||||
|
ervin dada lat.173mantaghe@rogers.com dashervin IR pending Re-engage
|
||||||
|
claire filler claire.filler@nodns.org GB pending Re-engage
|
||||||
|
david smith david244us@gmail.com US pending Re-engage
|
||||||
|
Kevin Bui Kevinbui@politicalfrome.com US pending Re-engage
|
||||||
|
kano silva rocha maquinavps9@live.com BR pending Re-engage
|
||||||
|
Øivind Hellerdal Rasmussen oivindhr@gmail.com Øivind H. Rasmussen NO pending Re-engage
|
||||||
|
Ben Blakeley ben1206@gmail.com Merked GB pending Re-engage
|
||||||
|
Jacquelyn Paul jpaul4208@gmail.com US pending Re-engage
|
||||||
|
Jose Alfredo Jimenez pepeltoroxd@hotmail.com MX pending Re-engage
|
||||||
|
ignacio guzman ignacioaguzman@prodigy.net.mx MX pending Re-engage
|
||||||
|
Allen Epps known@live.ca US pending Re-engage
|
||||||
|
Valentin Nacht nachval@maxodeo.com RO pending Re-engage
|
||||||
|
smith anderson rdpssuport@gmail.com MK pending Re-engage
|
||||||
|
Klaus Andersen ka@streetsurfing.dk Street-surff ApS DK pending Re-engage
|
||||||
|
Able Eval ableeval@live.com Evatech Limited US pending Re-engage
|
||||||
|
Ying Wang yingwang62@aol.com Ying Wang US pending Re-engage
|
||||||
|
TONG XIN tongxin2006@gmail.com TONGSITE CN pending Re-engage
|
||||||
|
freedep lost perviydep@gmail.com US pending Re-engage
|
||||||
|
Williams Garcia nicole.colleen@yahoo.com Bktelectronics US pending Re-engage
|
||||||
|
Kevin Gibson longtran1512@hotmail.com US pending Re-engage
|
||||||
|
Mohamed Arafat catchme@arafath.com BlueSpot Technologies SG pending Re-engage
|
||||||
|
JUDITH A BRADFORD d-davis@ireland.com US pending Re-engage
|
||||||
|
Keith Orr KeithPOrr@rhyta.com AlbaGaming US pending Re-engage
|
||||||
|
Platzner Gheorghe ptzgigi@yahoo.com RO pending Re-engage
|
||||||
|
brian fenn fennbrian@live.com GB pending Re-engage
|
||||||
|
francois azerty francois@hotmail.fr FR pending Re-engage
|
||||||
|
Amy Raymond nemesisfx15@me.com GB pending Re-engage
|
||||||
|
jack Chris bayzi.123@gmail.com mic FR pending Re-engage
|
||||||
|
Ivan Spasikj goltarce@hotmail.com Sheraton AE pending Re-engage
|
||||||
|
shawn perreault boicon88@gmail.com HTC US pending Re-engage
|
||||||
|
thuy pham viagrastim@me.com US pending Re-engage
|
||||||
|
Margaret Mangan readyde@aol.com Mangan Ltd. US pending Re-engage
|
||||||
|
Derek Johns derek.john@live.com Vox GB pending Re-engage
|
||||||
|
Phyl Caretto thocker59@hotmail.com US pending Re-engage
|
||||||
|
Shashikant Patil jaclyneikey@yahoo.com US pending Re-engage
|
||||||
|
Taryn DeMers mc_wardenner01@yahoo.com US pending Re-engage
|
||||||
|
murat sarioglu turkdekorasyon@hotmail.com UA pending Re-engage
|
||||||
|
Scenex Network pdelacruz3@uh.edu SceneX US pending Re-engage
|
||||||
|
lolo bodo linux-sharing@hotmail.fr local FR pending Re-engage
|
||||||
|
Patrick Hicks Hicks@n-mail.biz US pending Re-engage
|
||||||
|
Joy Boyer bluuorchid@hotmail.com US pending Re-engage
|
||||||
|
Anthony Tolder minhloc0011@yahoo.com US pending Re-engage
|
||||||
|
Fernando Hara fernando@webhara.com.br Hara BR pending Re-engage
|
||||||
|
Josef Haider haiderjosef@gmail.com AT pending Re-engage
|
||||||
|
Marcus Crew mark-crew71@hotmail.com Carp Inc US pending Re-engage
|
||||||
|
xxxx xxxx lukasz.godfather@gmail.com xxxx US pending Re-engage
|
||||||
|
Kevin Althaus kevin@kevinaltha.us US pending Re-engage
|
||||||
|
leomancini padilha octaviomendess2@hotmail.com BR pending Re-engage
|
||||||
|
Ha Duong dhh15487@gmail.com VN pending Re-engage
|
||||||
|
acidcia acidcia cia.33@hotmail.fr acidcia FR pending Re-engage
|
||||||
|
@@ -0,0 +1,199 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>📸 Photo Viewer - Horus AI</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.container { max-width: 1000px; margin: 0 auto; }
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: linear-gradient(90deg, #ffd700, #f59e0b);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.upload-area {
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 2px dashed #6366f1;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.upload-area:hover { border-color: #818cf8; background: rgba(255,255,255,0.08); }
|
||||||
|
.upload-icon { font-size: 3rem; margin-bottom: 10px; }
|
||||||
|
.upload-text { color: #94a3b8; }
|
||||||
|
|
||||||
|
.image-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.image-card {
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.image-card:hover { transform: scale(1.03); }
|
||||||
|
.image-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.image-card .caption {
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.9);
|
||||||
|
z-index: 1000;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modal.show { display: flex; }
|
||||||
|
.modal img {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-box {
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.share-box h3 { margin-bottom: 15px; color: #ffd700; }
|
||||||
|
.share-url {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.share-url input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
background: #0f172a;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.share-url button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: #6366f1;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.share-url button:hover { background: #818cf8; }
|
||||||
|
|
||||||
|
input[type="file"] { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>📸 Photo Viewer - Share with Horus</h1>
|
||||||
|
|
||||||
|
<div class="share-box">
|
||||||
|
<h3>🔗 Share via URL</h3>
|
||||||
|
<div class="share-url">
|
||||||
|
<input type="text" id="imageUrl" placeholder="Paste image URL here...">
|
||||||
|
<button onclick="loadFromUrl()">Load Image</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
|
||||||
|
<div class="upload-icon">📁</div>
|
||||||
|
<p class="upload-text">Click to upload image or drag & drop</p>
|
||||||
|
<p style="color:#666; font-size:0.85rem; margin-top:10px;">Supports: JPG, PNG, GIF, WebP</p>
|
||||||
|
</div>
|
||||||
|
<input type="file" id="fileInput" accept="image/*" onchange="handleFile(this.files[0])">
|
||||||
|
|
||||||
|
<div class="image-grid" id="gallery"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal" id="modal" onclick="closeModal()">
|
||||||
|
<button class="modal-close">×</button>
|
||||||
|
<img id="modalImg" src="" alt="Full size">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let images = [];
|
||||||
|
|
||||||
|
function loadFromUrl() {
|
||||||
|
const url = document.getElementById('imageUrl').value.trim();
|
||||||
|
if (url) {
|
||||||
|
addImage(url, 'URL Image');
|
||||||
|
document.getElementById('imageUrl').value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFile(file) {
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
addImage(e.target.result, file.name);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addImage(src, caption) {
|
||||||
|
images.unshift({ src, caption });
|
||||||
|
renderGallery();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGallery() {
|
||||||
|
const gallery = document.getElementById('gallery');
|
||||||
|
gallery.innerHTML = images.map((img, i) => `
|
||||||
|
<div class="image-card" onclick="openModal(${i})">
|
||||||
|
<img src="${img.src}" alt="${img.caption}">
|
||||||
|
<div class="caption">${img.caption}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal(index) {
|
||||||
|
document.getElementById('modalImg').src = images[index].src;
|
||||||
|
document.getElementById('modal').classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
document.getElementById('modal').classList.remove('show');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+682
@@ -0,0 +1,682 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="sv">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mobilkvitto</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #0f172a;
|
||||||
|
--card: #1e293b;
|
||||||
|
--border: #334155;
|
||||||
|
--text: #f1f5f9;
|
||||||
|
--text-dim: #94a3b8;
|
||||||
|
--accent: #3b82f6;
|
||||||
|
--green: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo span { color: var(--accent); }
|
||||||
|
|
||||||
|
.lang-toggle {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-btn {
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-btn.active {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card */
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fields */
|
||||||
|
.field {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 15px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input::placeholder {
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px dashed var(--border);
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Summary */
|
||||||
|
.summary {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-total .summary-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-total .summary-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-input-wrap {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-input-wrap input {
|
||||||
|
padding-right: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 130px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-input-wrap::after {
|
||||||
|
content: 'SEK';
|
||||||
|
position: absolute;
|
||||||
|
right: 14px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Print Button */
|
||||||
|
.print-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
background: #1e293b;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-btn:hover { background: #334155; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #475569;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-field {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-field .field { flex: 1; }
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
body { padding: 12px; }
|
||||||
|
.card { padding: 16px; }
|
||||||
|
.field-row { grid-template-columns: 1fr; }
|
||||||
|
.date-field { flex-direction: column; gap: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =================== */
|
||||||
|
/* RECEIPT PRINT STYLES */
|
||||||
|
/* =================== */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4;
|
||||||
|
margin: 10mm 15mm 15mm 15mm;
|
||||||
|
}
|
||||||
|
@page:not(:first) {
|
||||||
|
margin-top: 10mm;
|
||||||
|
}
|
||||||
|
@page:first {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: white !important;
|
||||||
|
color: #000 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
html { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
|
||||||
|
body::before { content: '' !important; }
|
||||||
|
body::after { content: '' !important; }
|
||||||
|
@page { margin: 10mm 15mm 15mm 15mm !important; }
|
||||||
|
.card-subtitle { font-size: 11px !important; color: #000 !important; }
|
||||||
|
#lblSeller, #lblBuyer, #lblModel, #lblIMEI, #lblCondition, #lblDate, #lblLocation, #lblTotal, #lblNotes { color: #000 !important; font-weight: 600 !important; }
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100% !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-print { display: none !important; }
|
||||||
|
|
||||||
|
.header { display: none !important; }
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: white !important;
|
||||||
|
border: 2px solid #1e293b !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 30px !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
max-width: 170mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0 20px 0 !important;
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
border-bottom: 2px solid #1e293b !important;
|
||||||
|
border-top: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.receipt-icon { display: none !important; }
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 24px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
text-transform: uppercase !important;
|
||||||
|
margin-bottom: 4px !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-subtitle {
|
||||||
|
font-size: 12px !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 1fr 1fr !important;
|
||||||
|
gap: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
margin-bottom: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
font-size: 10px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
color: #000 !important;
|
||||||
|
text-transform: uppercase !important;
|
||||||
|
letter-spacing: 0.5px !important;
|
||||||
|
margin-bottom: 6px !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #ccc !important;
|
||||||
|
padding: 6px 0 !important;
|
||||||
|
color: #000 !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
font-family: inherit !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border: none !important;
|
||||||
|
border-top: 1px solid #e5e7eb !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
background: #f8fafc !important;
|
||||||
|
border: 1px solid #e2e8f0 !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 20px !important;
|
||||||
|
margin: 20px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: space-between !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
font-size: 13px !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-total .summary-label {
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-total .summary-value {
|
||||||
|
font-size: 28px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
color: #16a34a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-input-wrap::after {
|
||||||
|
content: 'SEK' !important;
|
||||||
|
right: 0 !important;
|
||||||
|
position: static !important;
|
||||||
|
margin-left: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-input-wrap input {
|
||||||
|
width: 120px !important;
|
||||||
|
text-align: right !important;
|
||||||
|
padding: 4px 8px 4px 4px !important;
|
||||||
|
font-size: 20px !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Receipt footer */
|
||||||
|
.receipt-footer {
|
||||||
|
display: block !important;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-top: 1px dashed #000;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.receipt-footer { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Screen Header -->
|
||||||
|
<div class="header no-print">
|
||||||
|
<div class="logo">Host<span>Pioneers</span></div>
|
||||||
|
<div class="lang-toggle">
|
||||||
|
<button class="lang-btn active" onclick="setLang('sv')" id="btnSv">SV</button>
|
||||||
|
<button class="lang-btn" onclick="setLang('en')" id="btnEn">EN</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Receipt Card (shown on screen + print) -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="receipt-icon" style="display:none">📱</div>
|
||||||
|
<h1 class="card-title" id="title">Mobilkvitto</h1>
|
||||||
|
<p class="card-subtitle" id="subtitle">Kvitto för försäljning av begagnad mobiltelefon</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Parties -->
|
||||||
|
<div class="field-row">
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblSeller">Säljare</label>
|
||||||
|
<input type="text" id="seller" placeholder="Namn">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblBuyer">Köpare</label>
|
||||||
|
<input type="text" id="buyer" placeholder="Namn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- Phone Details -->
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblModel">Mobilmodell</label>
|
||||||
|
<input type="text" id="model" placeholder="t.ex. iPhone 15 Pro">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-row">
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblIMEI">IMEI-nummer</label>
|
||||||
|
<input type="text" id="imei" placeholder="15 siffror">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblCondition">Skick</label>
|
||||||
|
<input type="text" id="condition" placeholder="Bra/God">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- Date & Location -->
|
||||||
|
<div class="date-field">
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblDate">Datum</label>
|
||||||
|
<input type="date" id="date">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblLocation">Plats</label>
|
||||||
|
<input type="text" id="location" placeholder="Stad">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- Price -->
|
||||||
|
<div class="summary">
|
||||||
|
<div class="summary-row summary-total">
|
||||||
|
<span class="summary-label" id="lblTotal">Att betala</span>
|
||||||
|
<div class="price-input-wrap">
|
||||||
|
<input type="number" id="price" placeholder="0" oninput="updatePrice()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notes -->
|
||||||
|
<div class="field">
|
||||||
|
<label id="lblNotes">Anteckningar</label>
|
||||||
|
<input type="text" id="notes" style="color:#94a3b8;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Print Button -->
|
||||||
|
<button class="print-btn no-print" onclick="window.print()" style="background:#1e293b;">
|
||||||
|
<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
|
||||||
|
<span id="btnPrint">Spara som PDF / Skriv ut</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Receipt Footer (only visible when printing) -->
|
||||||
|
<div class="receipt-footer">
|
||||||
|
Detta kvitto är en privat överenskommelse mellan säljare och köpare. Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Signature -->
|
||||||
|
<div class="sig-section" style="margin-top: 20px;">
|
||||||
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:30px;">
|
||||||
|
<!-- Säljare - Haitham's signature -->
|
||||||
|
<div>
|
||||||
|
<label style="font-size:10px;color:#000;font-weight:600;">Säljare</label>
|
||||||
|
<div style="padding-bottom:6px;">
|
||||||
|
<svg viewBox="0 0 280 55" style="width:100%;height:50px;overflow:visible;">
|
||||||
|
<text x="5" y="42" font-family="'Caveat', cursive" font-size="34" font-style="italic" fill="#1e3a5f" font-weight="400">Haitham Khalifa</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:11px;color:#000;">Haitham Khalifa</div>
|
||||||
|
</div>
|
||||||
|
<!-- Köpare - Empty for buyer -->
|
||||||
|
<div>
|
||||||
|
<label style="font-size:10px;color:#000;font-weight:600;">Köpare</label>
|
||||||
|
<div style="border-bottom:1px solid #334155;height:50px;"></div>
|
||||||
|
<div style="font-size:10px;color:#94a3b8;margin-top:4px;"> </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer no-print">
|
||||||
|
<p>Fyll i uppgifterna och spara som PDF eller skriv ut direkt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Auto-fill date
|
||||||
|
document.getElementById('date').valueAsDate = new Date();
|
||||||
|
|
||||||
|
const texts = {
|
||||||
|
sv: {
|
||||||
|
title: "Mobilkvitto",
|
||||||
|
subtitle: "Kvitto för försäljning av begagnad mobiltelefon",
|
||||||
|
lblSeller: "Säljare",
|
||||||
|
lblBuyer: "Köpare",
|
||||||
|
lblModel: "Mobilmodell",
|
||||||
|
lblIMEI: "IMEI-nummer",
|
||||||
|
lblCondition: "Skick",
|
||||||
|
lblDate: "Datum",
|
||||||
|
lblLocation: "Plats",
|
||||||
|
lblTotal: "Att betala",
|
||||||
|
lblNotes: "Anteckningar",
|
||||||
|
btnPrint: "Spara som PDF / Skriv ut",
|
||||||
|
sellerPlaceholder: "Namn",
|
||||||
|
buyerPlaceholder: "Namn",
|
||||||
|
modelPlaceholder: "t.ex. iPhone 15 Pro",
|
||||||
|
imeiPlaceholder: "15 siffror",
|
||||||
|
conditionPlaceholder: "Bra/God",
|
||||||
|
locationPlaceholder: "Stad",
|
||||||
|
notesPlaceholder: "Valfritt",
|
||||||
|
footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
|
||||||
|
footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
title: "Mobile Receipt",
|
||||||
|
subtitle: "Receipt for sale of used mobile phone",
|
||||||
|
lblSeller: "Seller",
|
||||||
|
lblBuyer: "Buyer",
|
||||||
|
lblModel: "Phone Model",
|
||||||
|
lblIMEI: "IMEI Number",
|
||||||
|
lblCondition: "Condition",
|
||||||
|
lblDate: "Date",
|
||||||
|
lblLocation: "Location",
|
||||||
|
lblTotal: "Total",
|
||||||
|
lblNotes: "Notes",
|
||||||
|
btnPrint: "Save as PDF / Print",
|
||||||
|
sellerPlaceholder: "Full Name",
|
||||||
|
buyerPlaceholder: "Full Name",
|
||||||
|
modelPlaceholder: "e.g. iPhone 15 Pro",
|
||||||
|
imeiPlaceholder: "15 digits",
|
||||||
|
conditionPlaceholder: "Good/Fair",
|
||||||
|
locationPlaceholder: "City",
|
||||||
|
notesPlaceholder: "Optional",
|
||||||
|
footerLine1: "Detta kvitto är en privat överenskommelse mellan säljare och köpare.",
|
||||||
|
footerLine2: "Säljare och köpare bekräftar härmed att varan överlämnas och betalning mottagits."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function setLang(lang) {
|
||||||
|
const t = texts[lang];
|
||||||
|
|
||||||
|
document.getElementById('title').innerText = t.title;
|
||||||
|
document.getElementById('subtitle').innerText = t.subtitle;
|
||||||
|
document.getElementById('lblSeller').innerText = t.lblSeller;
|
||||||
|
document.getElementById('lblBuyer').innerText = t.lblBuyer;
|
||||||
|
document.getElementById('lblModel').innerText = t.lblModel;
|
||||||
|
document.getElementById('lblIMEI').innerText = t.lblIMEI;
|
||||||
|
document.getElementById('lblCondition').innerText = t.lblCondition;
|
||||||
|
document.getElementById('lblDate').innerText = t.lblDate;
|
||||||
|
document.getElementById('lblLocation').innerText = t.lblLocation;
|
||||||
|
document.getElementById('lblTotal').innerText = t.lblTotal;
|
||||||
|
document.getElementById('lblNotes').innerText = t.lblNotes;
|
||||||
|
document.getElementById('btnPrint').innerText = t.btnPrint;
|
||||||
|
|
||||||
|
document.getElementById('seller').placeholder = t.sellerPlaceholder;
|
||||||
|
document.getElementById('buyer').placeholder = t.buyerPlaceholder;
|
||||||
|
document.getElementById('model').placeholder = t.modelPlaceholder;
|
||||||
|
document.getElementById('imei').placeholder = t.imeiPlaceholder;
|
||||||
|
document.getElementById('condition').placeholder = t.conditionPlaceholder;
|
||||||
|
document.getElementById('location').placeholder = t.locationPlaceholder;
|
||||||
|
document.getElementById('notes').placeholder = t.notesPlaceholder;
|
||||||
|
|
||||||
|
document.getElementById('btnSv').classList.toggle('active', lang === 'sv');
|
||||||
|
document.getElementById('btnEn').classList.toggle('active', lang === 'en');
|
||||||
|
|
||||||
|
document.documentElement.lang = lang;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save/Load from localStorage
|
||||||
|
const FIELDS = ['seller', 'buyer', 'model', 'imei', 'condition', 'date', 'location', 'price', 'notes'];
|
||||||
|
|
||||||
|
function saveData() {
|
||||||
|
FIELDS.forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) localStorage.setItem('receipt_' + id, el.value);
|
||||||
|
});
|
||||||
|
// Update signature seller display
|
||||||
|
const sellerEl = document.getElementById('seller');
|
||||||
|
const display = document.getElementById('sigSellerDisplay');
|
||||||
|
if (sellerEl && display) display.textContent = sellerEl.value || '—';
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData() {
|
||||||
|
FIELDS.forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
const val = localStorage.getItem('receipt_' + id);
|
||||||
|
if (val) el.value = val;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Update signature seller display
|
||||||
|
const sellerVal = localStorage.getItem('receipt_seller');
|
||||||
|
if (sellerVal) {
|
||||||
|
const display = document.getElementById('sigSellerDisplay');
|
||||||
|
if (display) display.textContent = sellerVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', loadData);
|
||||||
|
|
||||||
|
// Save on input
|
||||||
|
FIELDS.forEach(id => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) el.addEventListener('input', saveData);
|
||||||
|
});
|
||||||
|
|
||||||
|
function updatePrice() {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user