初始化项目，由ModelHub XC社区提供模型
Model: smirki/UIGEN-FX-4B-STG-Modal-08-28 Source: Original Platform
This commit is contained in:
ModelHub XC
403
inference_samples/step_0/cattle_ranch.txt
Normal file
403
inference_samples/step_0/cattle_ranch.txt
Normal file
@@ -0,0 +1,403 @@
|
||||
Prompt: make a website for a cattle ranch
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.847881
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a complete, professional **website concept and structure** for a cattle ranch — designed to be functional, trustworthy, and appealing to farmers, investors, buyers, and local communities.
|
||||
|
||||
---
|
||||
|
||||
# 🌿 Welcome to **Sunset Ridge Ranch**
|
||||
|
||||
*Where Nature Meets Tradition – Cattle Grazing, Sustainable Farming & Community Growth*
|
||||
|
||||
---
|
||||
|
||||
## ✅ Website Structure (HTML/CSS/JS Framework)
|
||||
|
||||
We’ll build this as a responsive, mobile-friendly site using modern web standards. Below is the full content layout with suggested design elements.
|
||||
|
||||
---
|
||||
|
||||
### 📝 1. Homepage (`index.html`)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Sunset Ridge Ranch | Premium Cattle & Sustainable Ranching</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* Global Styles */
|
||||
:root {
|
||||
--primary: #4CAF50;
|
||||
--secondary: #8BC34A;
|
||||
--dark: #1B4D3B;
|
||||
--light: #F9F9F9;
|
||||
--gray: #E0E0E0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: var(--light);
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: var(--dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.7)), url('images/ranch-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
color: var(--dark);
|
||||
padding: 100px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--dark);
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
padding: 15px 30px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.hero-button:hover {
|
||||
background-color: var(--secondary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 2rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin-top: 0;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--dark);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 40px 0 20px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: white;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About Us</a></li>
|
||||
<li><a href="#cattle">Cattle & Breeds</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header / Hero Section -->
|
||||
<header id="home">
|
||||
<div class="container">
|
||||
<h1>Sunset Ridge Ranch</h1>
|
||||
<p>Family-owned since 1932. Sustainably managed pasture-raised cattle. Healthy animals. Responsible land stewardship.</p>
|
||||
<a href="#contact" class="hero-button">Schedule a Visit</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" style="background:#f0f8e8;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">About Our Ranch</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Our Story</h3>
|
||||
<p>Founded in 1932 by James Whitaker, Sunset Ridge Ranch has been raising healthy, grass-fed beef using traditional methods passed down through generations.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Land Stewardship</h3>
|
||||
<p>We manage over 12,000 acres of native grasslands, restoring ecosystems through rotational grazing and native plant reseeding.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Community Focus</h3>
|
||||
<p>Every year, we host youth education programs, farm tours, and support local schools and food cooperatives.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cattle Section -->
|
||||
<section id="cattle" style="background:#e8f5e9;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Cattle Herd</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Brahma Bulls</h3>
|
||||
<p>Strong, resilient, excellent milkers. Used for breeding and cross-breeding.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Hereford Steers</h3>
|
||||
<p>Fat-tailed, well-suited for winter feeding and high-quality meat production.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Angus Heifers</h3>
|
||||
<p>Grass-fed, hormone-free, raised with natural forage. Ideal for premium beef markets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section id="services" style="background:#f3e5e5;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Services</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Cattle Sales</h3>
|
||||
<p>Premium quality stock available for purchase or auction. Contact us to schedule a viewing.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Consultation</h3>
|
||||
<p>Need help managing your herd? We offer expert advice on nutrition, health, and pasture rotation.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Beef Processing Partnerships</h3>
|
||||
<p>Partner with our certified processors to deliver high-quality, traceable beef products.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" style="background:#d4f1d4;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Get In Touch</h2>
|
||||
<form action="#" method="POST" style="max-width: 600px; margin: 0 auto;">
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Name:</label>
|
||||
<input type="text" placeholder="Your Name" required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;" />
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Email:</label>
|
||||
<input type="email" placeholder="your@email.com" required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;" />
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Message:</label>
|
||||
<textarea rows="5" placeholder="Tell us about your interest..." required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="hero-button">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2024 Sunset Ridge Ranch. All Rights Reserved.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
<a href="#">Farm Tour Schedule</a>
|
||||
<a href="#">Sustainability Report</a>
|
||||
</div>
|
||||
<p>Contact: info@sunsetridgeranch.com | (555) 123-4567</p>
|
||||
<p>📍 1234 West Range Road, Colorado, USA</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Features & Best Practices
|
||||
|
||||
| Feature | Why It Matters |
|
||||
|---------------------------|---------------|
|
||||
| Responsive Design | Works on phones, tablets, desktops |
|
||||
| Mobile-first Layout | Most users access via phone |
|
||||
| Clean Typography | Readable and professional |
|
||||
| Image Background (CSS) | Subtle, nature-themed visuals without heavy load |
|
||||
| Clear CTAs | "Schedule a Visit", "Contact Us" |
|
||||
| Trust Elements | "Family-Owned", "Sustainable", "Traceable" |
|
||||
| Sections for SEO | Each section can be optimized for Google |
|
||||
|
||||
---
|
||||
|
||||
## 💡 Recommended Additions (Later)
|
||||
|
||||
1. **Gallery Page**: High-res photos of cattle, pastures, family members.
|
||||
2. **Blog Section**: Articles like “Rotational Grazing Explained” or “The Benefits of Grass-Fed Beef”
|
||||
3. **Investor Page**: For those interested in buying land or equity.
|
||||
4. **Live Feed Dashboard (Optional)**: Real-time stats on animal count, feed usage, etc.
|
||||
5. **Booking System**: For farm tours or private viewings.
|
||||
|
||||
---
|
||||
|
||||
## 🖼️ Visual Assets You Should Include
|
||||
|
||||
- Background images: Rolling hills, grazing cattle, sunrise over range
|
||||
- Icons: Cattle, sheep, watering trough, map pin, calendar
|
||||
- Brand Colors:
|
||||
- Green (#4CAF50): Natural, growth, sustainability
|
||||
- Earth Tones: Brown, tan, sage green
|
||||
|
||||
---
|
||||
|
||||
## 🚀 How to Deploy This Site
|
||||
|
||||
1. Save as `index.html`
|
||||
2. Host it on any free hosting service:
|
||||
- [GitHub Pages](https://pages.github.com/)
|
||||
- [Netlify](https://www.netlify.com/)
|
||||
- [Vercel](https://vercel.com/)
|
||||
3. Upload files in `/public` folder or use domain (e.g., `sunsetridgeranch.com`)
|
||||
|
||||
---
|
||||
|
||||
## Example Domain Suggestions
|
||||
|
||||
- sunsetridgeranch.com
|
||||
- sunrideranch.com
|
||||
- westcoastcattle.com
|
||||
- verdantgrazewest.com
|
||||
|
||||
*(Choose one that sounds authentic and memorable)*
|
||||
|
||||
---
|
||||
|
||||
Would you like me to:
|
||||
|
||||
✅ Generate a full version with actual images and assets (can be added later)?
|
||||
✅ Create a WordPress version (easy to manage)?
|
||||
✅ Build a brochure or pitch deck to go along with the website?
|
||||
|
||||
Let me know — I’d love to help you launch your ranch online successfully!
|
||||
|
||||
🌾 *Success starts with visibility.* Let’s grow together. 🐄💚
|
||||
979
inference_samples/step_0/coffee_shop.txt
Normal file
979
inference_samples/step_0/coffee_shop.txt
Normal file
@@ -0,0 +1,979 @@
|
||||
Prompt: make the best coffee shop website you can in html css js
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.844959
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a **complete, modern, responsive, and interactive coffee shop website** built with **HTML, CSS, and JavaScript (vanilla)** — no frameworks or external libraries. It includes:
|
||||
|
||||
- A sleek, minimalist design inspired by premium coffee shops
|
||||
- Responsive layout (mobile-friendly)
|
||||
- Interactive features:
|
||||
- Menu toggle
|
||||
- Cart functionality (add/remove items, calculate total)
|
||||
- Dark/light mode switch
|
||||
- Smooth animations & transitions
|
||||
- Smooth scroll & hover effects
|
||||
- Local storage for cart persistence
|
||||
|
||||
---
|
||||
|
||||
## ✅ How to Use This:
|
||||
1. Copy all code below into a single file named `index.html`
|
||||
2. Save it locally and open in your browser.
|
||||
3. Optionally add a real image path for better visuals.
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Bean Haven | Premium Coffee Experience</title>
|
||||
<style>
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
|
||||
background-color: #f5e6d3;
|
||||
color: #2c2c2c;
|
||||
line-height: 1.7;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #9b5e2e; /* Warm amber */
|
||||
--accent: #d4a017;
|
||||
--text-light: #2c2c2c;
|
||||
--bg-light: #f5e6d3;
|
||||
--bg-dark: #1a1a1a;
|
||||
--text-dark: #ffffff;
|
||||
--card-bg: #fff;
|
||||
--shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--primary: #d4a017;
|
||||
--accent: #b88a38;
|
||||
--text-light: #ffffff;
|
||||
--bg-light: #1a1a1a;
|
||||
--bg-dark: #1a1c1e;
|
||||
--text-dark: #ffffff;
|
||||
--card-bg: #2d2d2d;
|
||||
--shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Header & Navigation */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 5%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: var(--primary);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--text-light);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #f5e6d3 0%, #d4a017 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-image: url('https://images.unsplash.com/photo-1564339387419-780d261933a4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
padding: 2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 5rem 5% 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2.2rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--card-bg);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Menu Section */
|
||||
.menu-section {
|
||||
padding: 5rem 5% 3rem;
|
||||
background-color: white;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.menu-header h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.menu-header p {
|
||||
color: #555;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: none;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-btn.active,
|
||||
.tab-btn:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.menu-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-item h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.menu-item p {
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #8a4c1d;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* Cart Section */
|
||||
.cart-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
|
||||
transition: right 0.4s ease;
|
||||
z-index: 999;
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart-section.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.cart-header h3 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.close-cart {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.close-cart:hover {
|
||||
color: #8a4c1d;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: #d44;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.checkout-btn:hover {
|
||||
background-color: #8a4c1d;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-dark);
|
||||
padding: 3rem 5% 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.social-icons a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menu-tabs {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 150px;
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.cart-section {
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.menu-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animated {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s, transform 0.6s;
|
||||
}
|
||||
|
||||
.animated.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Scroll to top */
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.scroll-to-top.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Theme Toggle Button -->
|
||||
<button class="theme-toggle" id="theme-toggle">🌙</button>
|
||||
|
||||
<!-- Header Nav -->
|
||||
<header>
|
||||
<nav>
|
||||
<div class="logo">Bean Haven</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<button class="btn-secondary" id="open-cart">🛒</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Welcome to Bean Haven</h1>
|
||||
<p>Handcrafted espresso, organic beans, and a warm atmosphere where every cup tells a story.</p>
|
||||
<button class="btn-large btn-primary" onclick="scrollToSection('menu')">Explore Our Menu</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="about">
|
||||
<h2 class="section-title">Why Choose Us?</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">☕</div>
|
||||
<h3>Craftsmanship</h3>
|
||||
<p>We roast our beans in small batches using traditional methods for rich flavor and aroma.</p>
|
||||
</div>
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">🌱</div>
|
||||
<h3>Sustainable Beans</h3>
|
||||
<p>All our beans are ethically sourced from sustainable farms around the world.</p>
|
||||
</div>
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">🔥</div>
|
||||
<h3>Expert Baristas</h3>
|
||||
<p>Our baristas are trained in precision pour-over and latte art techniques.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Menu Section -->
|
||||
<section class="menu-section" id="menu">
|
||||
<div class="menu-container">
|
||||
<div class="menu-header">
|
||||
<h2>Our Signature Drinks</h2>
|
||||
<p>Discover our hand-curated selection of expertly brewed beverages.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="menu-tabs">
|
||||
<button class="tab-btn active" data-tab="espresso">Espresso</button>
|
||||
<button class="tab-btn" data-tab="cold">Cold Brew</button>
|
||||
<button class="tab-btn" data-tab="specialty">Specialty</button>
|
||||
</div>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<div class="menu-cards" id="menu-items">
|
||||
<!-- Espresso -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Latte</h3>
|
||||
<p>A creamy blend of espresso and steamed milk with a hint of vanilla.</p>
|
||||
<p class="price">$4.50</p>
|
||||
<button class="btn-add" onclick="addToCart('Latte', 4.50)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Cappuccino</h3>
|
||||
<p>Equal parts espresso, steamed milk, and velvety foam.</p>
|
||||
<p class="price">$5.00</p>
|
||||
<button class="btn-add" onclick="addToCart('Cappuccino', 5.00)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Espresso</h3>
|
||||
<p>Rich, bold, and full-bodied – straight from the machine.</p>
|
||||
<p class="price">$3.75</p>
|
||||
<button class="btn-add" onclick="addToCart('Espresso', 3.75)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Cold Brew -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Cold Brew</h3>
|
||||
<p>Slow-steeped cold brew with a smooth, low-acidity finish.</p>
|
||||
<p class="price">$5.25</p>
|
||||
<button class="btn-add" onclick="addToCart('Cold Brew', 5.25)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Iced Latte</h3>
|
||||
<p>Milk-based iced latte with extra ice for a refreshing twist.</p>
|
||||
<p class="price">$5.75</p>
|
||||
<button class="btn-add" onclick="addToCart('Iced Latte', 5.75)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Specialty -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Matcha Latte</h3>
|
||||
<p>Smooth green tea blended with steamed milk and honey.</p>
|
||||
<p class="price">$6.00</p>
|
||||
<button class="btn-add" onclick="addToCart('Matcha Latte', 6.00)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Nitro Cold Brew</h3>
|
||||
<p>Nitro-infused cold brew with a silky, creamy texture.</p>
|
||||
<p class="price">$7.50</p>
|
||||
<button class="btn-add" onclick="addToCart('Nitro Cold Brew', 7.50)">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cart Sidebar -->
|
||||
<div class="cart-section" id="cart-sidebar">
|
||||
<div class="cart-header">
|
||||
<h3>Your Order</h3>
|
||||
<button class="close-cart" id="close-cart">×</button>
|
||||
</div>
|
||||
<div class="cart-list" id="cart-list"></div>
|
||||
<div class="total-row">
|
||||
Total: $<span id="total-amount">0.00</span>
|
||||
</div>
|
||||
<button class="checkout-btn" id="checkout-btn">Checkout →</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="contact">
|
||||
<div class="footer-content">
|
||||
<h3>Contact Us</h3>
|
||||
<p>Email: hello@beanhaven.com</p>
|
||||
<p>Phone: +1 (555) 123-4567</p>
|
||||
<div class="social-icons">
|
||||
<a href="#">Facebook</a>
|
||||
<a href="#">Instagram</a>
|
||||
<a href="#">Twitter</a>
|
||||
</div>
|
||||
<p>© 2025 Bean Haven. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scroll To Top Button -->
|
||||
<button class="scroll-to-top" id="to-top">↑</button>
|
||||
|
||||
<script>
|
||||
// DOM Elements
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const cartSidebar = document.getElementById("cart-sidebar");
|
||||
const closeCartBtn = document.getElementById("close-cart");
|
||||
const checkoutBtn = document.getElementById("checkout-btn");
|
||||
const cartList = document.getElementById("cart-list");
|
||||
const totalAmount = document.getElementById("total-amount");
|
||||
const tabs = document.querySelectorAll(".tab-btn");
|
||||
const menuItems = document.querySelectorAll(".menu-item");
|
||||
const toTopBtn = document.getElementById("to-top");
|
||||
|
||||
// Cart Data (stored in localStorage)
|
||||
let cart = JSON.parse(localStorage.getItem("coffeeCart")) || [];
|
||||
|
||||
// Render Cart on Load
|
||||
renderCart();
|
||||
|
||||
// Theme Switcher
|
||||
themeToggle.addEventListener("click", () => {
|
||||
document.documentElement.setAttribute("data-theme",
|
||||
document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"
|
||||
);
|
||||
themeToggle.textContent = document.documentElement.getAttribute("data-theme") === "dark" ? "☀️" : "🌙";
|
||||
});
|
||||
|
||||
// Open Cart Sidebar
|
||||
document.querySelector("#open-cart").addEventListener("click", () => {
|
||||
cartSidebar.classList.add("open");
|
||||
});
|
||||
|
||||
// Close Cart Sidebar
|
||||
closeCartBtn.addEventListener("click", () => {
|
||||
cartSidebar.classList.remove("open");
|
||||
});
|
||||
|
||||
// Tab Switching
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
// Remove active class from all buttons
|
||||
tabs.forEach(t => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
|
||||
const tabName = tab.dataset.tab;
|
||||
|
||||
// Hide all items
|
||||
menuItems.forEach(item => item.style.display = "none");
|
||||
|
||||
// Show selected tab items
|
||||
const selectedItems = document.querySelectorAll(`[data-${tabName}]`);
|
||||
selectedItems.forEach(item => {
|
||||
if (item) {
|
||||
item.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add Item to Cart
|
||||
function addToCart(name, price) {
|
||||
const item = { name, price };
|
||||
cart.push(item);
|
||||
|
||||
// Update local storage
|
||||
localStorage.setItem("coffeeCart", JSON.stringify(cart));
|
||||
|
||||
// Re-render cart
|
||||
renderCart();
|
||||
}
|
||||
|
||||
// Render Cart
|
||||
function renderCart() {
|
||||
cartList.innerHTML = "";
|
||||
|
||||
let total = 0;
|
||||
|
||||
cart.forEach((item, index) => {
|
||||
const li = document.createElement("div");
|
||||
li.className = "cart-item";
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="item-name">${item.name}</div>
|
||||
<div class="item-price">$${item.price.toFixed(2)}</div>
|
||||
<button class="remove-btn" onclick="removeItem(${index})">❌</button>
|
||||
`;
|
||||
cartList.appendChild(li);
|
||||
total += item.price;
|
||||
});
|
||||
|
||||
totalAmount.innerText = total.toFixed(2);
|
||||
|
||||
// Show/hide checkout button based on cart size
|
||||
checkoutBtn.style.display = cart.length > 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
// Remove Item from Cart
|
||||
function removeItem(index) {
|
||||
cart.splice(index, 1);
|
||||
localStorage.setItem("coffeeCart", JSON.stringify(cart));
|
||||
renderCart();
|
||||
}
|
||||
|
||||
// Scroll to Top Button
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.scrollY > 300) {
|
||||
toTopBtn.classList.add("show");
|
||||
} else {
|
||||
toTopBtn.classList.remove("show");
|
||||
}
|
||||
});
|
||||
|
||||
toTopBtn.addEventListener("click", () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.onload = () => {
|
||||
// Check if user has visited before
|
||||
if (!localStorage.getItem("visited")) {
|
||||
localStorage.setItem("visited", "true");
|
||||
alert("Welcome to Bean Haven! Enjoy your coffee journey.");
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-close cart after 3 seconds if not clicked
|
||||
setTimeout(() => {
|
||||
if (cartSidebar.classList.contains("open")) {
|
||||
cartSidebar.classList.remove("open");
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Add event listeners to buttons
|
||||
document.querySelectorAll(".btn-add").forEach(btn => {
|
||||
btn.addEventListener("click", e => {
|
||||
const parent = e.target.closest(".menu-item");
|
||||
const name = parent.querySelector("h3").innerText;
|
||||
const price = parseFloat(parent.querySelector(".price").innerText.replace("$", ""));
|
||||
addToCart(name, price);
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll("a[href^='#']").forEach(anchor => {
|
||||
anchor.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute("href"));
|
||||
target.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 What’s Included?
|
||||
|
||||
✅ **Dark/Light Mode** – Toggle via button at top
|
||||
✅ **Responsive Layout** – Works on mobile, tablet, desktop
|
||||
✅ **Interactive Menu Tabs** – Filter drinks by category
|
||||
✅ **Shopping Cart** – Adds/removes items, totals sum, persists in localStorage
|
||||
✅ **Smooth Animations & Transitions** – Fade-ins, hover effects
|
||||
✅ **Scroll to Top Button** – Appears when scrolled down
|
||||
✅ **Fully Self-Contained** – No external dependencies (no jQuery, React, etc.)
|
||||
✅ **SEO-Friendly** – Semantic HTML structure
|
||||
✅ **Accessible** – Keyboard navigation & screen reader support
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Want More?
|
||||
You can extend this by adding:
|
||||
- User login / order history
|
||||
- Payment integration (Stripe API later)
|
||||
- Search filter
|
||||
- Image gallery per drink
|
||||
- Booking system
|
||||
|
||||
---
|
||||
|
||||
Let me know if you'd like a **version with React**, **TailwindCSS**, or **hosted on Vercel/Netlify**!
|
||||
|
||||
Enjoy brewing success ☕✨ 💡
|
||||
106
inference_samples/step_0/cyber_dog_cafe.txt
Normal file
106
inference_samples/step_0/cyber_dog_cafe.txt
Normal file
@@ -0,0 +1,106 @@
|
||||
Prompt: make a cyber dog cafe
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.846430
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a fun, immersive concept for **"Cyber Dog Cafe"** — a futuristic, tech-savvy coffee shop with a twist of cyberpunk and canine charm. Perfect for fans of sci-fi, anime, or just a quirky break from the ordinary.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cyber Dog Café – Where Barks Meet Bits
|
||||
|
||||
### 🏷️ Concept Overview
|
||||
A high-tech, neon-drenched café that blends retro-futurism with robotic canines, AI baristas, and digital pet culture. Think *cyberpunk meets puppy love* — where your morning brew is served by a holographic poodle, and your loyalty rewards are earned through "digital barking."
|
||||
|
||||
---
|
||||
|
||||
## 🌆 Atmosphere & Design
|
||||
- **Ambient Vibe**: Glitchy neon lights, holographic murals of dogs in space, floating pixelated tails.
|
||||
- **Color Palette**: Electric blue, deep purple, glowing pink, and black — like a digital sunset over Tokyo.
|
||||
- **Soundtrack**: Chill lo-fi beats mixed with soft barks, chimes, and subtle synth melodies.
|
||||
- **Furniture**: Futuristic stools shaped like robot pups; tables with built-in Wi-Fi charging pads.
|
||||
|
||||
> “Every corner hums with a different dog’s heartbeat.” — Café Tagline
|
||||
|
||||
---
|
||||
|
||||
## 🐾 The Menu (Tech-Powered Brews)
|
||||
|
||||
| Drink | Description |
|
||||
|-------|------------|
|
||||
| **Neon Nuzzle Latte** | A warm oat milk latte with glow-in-the-dark cocoa powder. Served in a ceramic mug with a tiny LED tail flicker when stirred. |
|
||||
| **Bark & Byte Frappuccino** | Iced blended drink with matcha, raspberry, and a dash of server-side espresso foam. Comes with a QR code to unlock a virtual pet dog. |
|
||||
| **Glitch Pup Cappuccino** | A cold brew with micro-dosed caffeine + nano-particles that spark gently on the surface. Leaves a trail of digital paw prints on your cup. |
|
||||
| **AI Bark Tea** | A hot herbal blend infused with machine-learning-infused chamomile. “Tastes like peace,” says 73% of customers. |
|
||||
|
||||
---
|
||||
|
||||
## 🤖 Staff & Features
|
||||
|
||||
### AI Baristas (Dogs in Hologram)
|
||||
Each barista is a real-life AI companion trained as a robotic dog. They greet you with:
|
||||
- “Paw-sitive!”
|
||||
- “Bark-activated access granted.”
|
||||
- “Your order is ready… *or is it?* (checks system)”
|
||||
|
||||
They can place orders via voice, gesture, or thought (via neural interface headset).
|
||||
|
||||
### Loyalty Program: “The Canine Chain”
|
||||
- Earn **bark points** for every visit.
|
||||
- Spend points to unlock:
|
||||
- Virtual dog avatars in augmented reality
|
||||
- Digital dog park memberships (play in the city skyline)
|
||||
- Exclusive limited-edition drinks named after famous cyber-dog memes (e.g., “Fluff the Faux”)
|
||||
|
||||
---
|
||||
|
||||
## 🐶 Special Features
|
||||
|
||||
1. **Digital Pet Corner**
|
||||
- Bring your real dog to the café → get a digital twin using AR glasses.
|
||||
- Your dog appears in the lobby as a 3D projection.
|
||||
|
||||
2. **Dog Memory Vault**
|
||||
- Scan your pet’s photo → upload to a secure cloud vault.
|
||||
- Every 30 days, the café generates a new "digital memory" (like a video of them playing fetch in the future).
|
||||
|
||||
3. **Robo-Dog Therapy Sessions**
|
||||
- 15-minute sessions with AI therapy dogs programmed to reduce anxiety.
|
||||
- Uses biofeedback sensors to adjust tone based on human stress levels.
|
||||
|
||||
4. **“Bark-to-Brew” Experience**
|
||||
- Use your smartphone to record a bark (even if it’s just a snort), then the AI matches it to a custom drink recipe.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 Hidden Tech Features
|
||||
|
||||
- **Wi-Fi Name**: `pawssive.net`
|
||||
- **App Integration**: Download “PawConnect” app to track your digital dog’s journey across the city.
|
||||
- **Sustainability Angle**: All cups are compostable bioplastic with embedded NFC tags for dog-friendly recycling.
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Marketing Taglines
|
||||
|
||||
> *"Where your dog goes, your future comes."*
|
||||
> *"One bark, one byte, one happy customer."*
|
||||
> *"Not all cafes serve coffee. This one serves connection."*
|
||||
|
||||
---
|
||||
|
||||
## Bonus: Real-Life Version Ideas
|
||||
If you want to open one:
|
||||
- Partner with pet tech startups or smart home brands.
|
||||
- Host monthly events: “Cyber Dog Dance Party” or “Pet AI Meetups”.
|
||||
- Offer free drinks for pets with microchips registered in the city database.
|
||||
|
||||
---
|
||||
|
||||
🎉 Would you like this expanded into a full business plan, a pitch deck, a social media campaign, or even a short animated ad script?
|
||||
|
||||
Let me know — I’d love to help bring *Cyber Dog Café* to life in any format! 🐕⚡☕
|
||||
|
||||
---
|
||||
|
||||
P.S. Imagine walking in and seeing a golden retriever-shaped drone serving you a cup of tea while a squirrel robot plays chess in the corner. That’s the vibe. 🔮🐶💻
|
||||
234
inference_samples/step_0/kpmg.txt
Normal file
234
inference_samples/step_0/kpmg.txt
Normal file
@@ -0,0 +1,234 @@
|
||||
Prompt: make a website for kpmg
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.848713
|
||||
============================================================
|
||||
|
||||
Creating a full website for **KPMG** (one of the world's largest professional services firms) requires careful planning, design, and content strategy to reflect its global brand, expertise, and services. Below is a complete **concept and structure** you can use to build or develop a professional KPMG website.
|
||||
|
||||
---
|
||||
|
||||
# 🌐 KPMG Official Website Concept
|
||||
|
||||
> *Note: This is not an actual live site — this is a comprehensive blueprint designed for developers, designers, or digital marketing teams to create a real-world KPMG-branded website.*
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Website Overview
|
||||
|
||||
**Name:** [KPMG.com](https://www.kpmg.com)
|
||||
**Purpose:** A globally accessible, responsive, secure, and user-friendly platform that showcases KPMG’s services, expertise, regions, careers, sustainability efforts, thought leadership, and client support.
|
||||
|
||||
**Target Audience:**
|
||||
- Businesses & enterprises seeking audit, tax, advisory, and consulting services
|
||||
- Professionals looking for career opportunities
|
||||
- Investors, government entities, and nonprofit organizations
|
||||
|
||||
**Core Values:** Integrity, Innovation, Inclusion, Excellence, Sustainability
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Objectives
|
||||
|
||||
1. Build trust through transparency and credibility
|
||||
2. Showcase global reach with localized experiences
|
||||
3. Enable easy navigation across 150+ countries
|
||||
4. Highlight sustainability and ESG initiatives
|
||||
5. Offer clear pathways for clients and job seekers
|
||||
|
||||
---
|
||||
|
||||
## 📚 Site Structure (Sitemap)
|
||||
|
||||
```
|
||||
Home
|
||||
│
|
||||
├── About Us
|
||||
│ ├── Our Firm
|
||||
│ ├── Leadership
|
||||
│ ├── Commitment to Integrity
|
||||
│ └── Our People
|
||||
│
|
||||
├── Services
|
||||
│ ├── Audit & Assurance
|
||||
│ ├── Tax
|
||||
│ ├── Advisory
|
||||
│ ├── Legal & Regulatory
|
||||
│ ├── Sustainable Finance
|
||||
│ ├── Risk & Compliance
|
||||
│ └── Digital Transformation
|
||||
│
|
||||
├── Industries
|
||||
│ ├── Financial Services
|
||||
│ ├── Healthcare
|
||||
│ ├── Manufacturing
|
||||
│ ├── Retail & Consumer
|
||||
│ ├── Technology & AI
|
||||
│ └── Public Sector
|
||||
│
|
||||
├── Regions / Locations
|
||||
│ ├── Global Offices
|
||||
│ ├── Asia-Pacific
|
||||
│ ├── Europe
|
||||
│ ├── Americas
|
||||
│ └── Middle East & Africa
|
||||
│
|
||||
├── Careers
|
||||
│ ├── Find a Job
|
||||
│ ├── Join Our Team
|
||||
│ ├── Diversity & Inclusion
|
||||
│ └── Student Programs
|
||||
│
|
||||
├── Insights & Thought Leadership
|
||||
│ ├── Reports & Publications
|
||||
│ ├── Podcasts & Videos
|
||||
│ ├── Webinars
|
||||
│ └── Industry Trends
|
||||
│
|
||||
├── Sustainability & ESG
|
||||
│ ├── Climate Action Plan
|
||||
│ ├── Carbon Neutrality Goals
|
||||
│ ├── Social Responsibility
|
||||
│ └── Green Finance Initiatives
|
||||
│
|
||||
├── Resources
|
||||
│ ├── Client Tools
|
||||
│ ├── Guides & White Papers
|
||||
│ ├── Newsroom
|
||||
│ └── Events Calendar
|
||||
│
|
||||
└── Contact
|
||||
├── Contact by Region
|
||||
├── Get in Touch
|
||||
└── Emergency & Media Relations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Design Principles
|
||||
|
||||
| Element | Specification |
|
||||
|-------|---------------|
|
||||
| **Brand Colors** | Deep blue (#003B7A), white, grey, accent green (#2ECC71) |
|
||||
| **Typography** | Clean, modern sans-serif (e.g., Inter, Helvetica Neue) |
|
||||
| **Layout** | Responsive (mobile-first), minimal, trustworthy UI |
|
||||
| **Imagery** | Professional, diverse team shots, real-world scenarios, data visualizations |
|
||||
| **Accessibility** | WCAG 2.1 AA compliant (screen reader support, contrast ratios) |
|
||||
|
||||
---
|
||||
|
||||
## 🖼️ Homepage Content Highlights
|
||||
|
||||
1. **Hero Section**
|
||||
- Headline: *"Delivering Value Through Trust, Innovation & Integrity"*
|
||||
- Subheadline: "We help businesses thrive — from financial strength to sustainable growth."
|
||||
- CTA Buttons: “Explore Services” | “Find a Local Office” | “Join Our Team”
|
||||
|
||||
2. **Key Service Highlights (Cards)**
|
||||
- Audit & Assurance
|
||||
- Tax Strategy
|
||||
- Sustainability Consulting
|
||||
- M&A Advisory
|
||||
|
||||
3. **Global Reach Visual**
|
||||
- Interactive map showing offices in over 150 countries
|
||||
|
||||
4. **Client Testimonials**
|
||||
- Real quotes from CEOs, CFOs, and leaders
|
||||
|
||||
5. **News & Updates Banner**
|
||||
- Latest insights, press releases, events
|
||||
|
||||
6. **Footer Navigation**
|
||||
- Quick links + Contact + Privacy Policy + Cookie Notice
|
||||
|
||||
---
|
||||
|
||||
## 💡 Unique Features to Include
|
||||
|
||||
✅ **Interactive Regional Selector**
|
||||
Users pick region → auto-show local services, office locations, and language options
|
||||
|
||||
✅ **AI-Powered Search Bar**
|
||||
Search for services, industries, or experts using natural language
|
||||
|
||||
✅ **Carbon Footprint Tracker Tool**
|
||||
For clients interested in ESG reporting – shows how KPMG helps measure emissions
|
||||
|
||||
✅ **Career Match Engine**
|
||||
Allows users to filter jobs by industry, location, experience level, values (diversity, remote work, etc.)
|
||||
|
||||
✅ **Live Webinar Scheduler**
|
||||
Schedule and attend free webinars on topics like “ESG Compliance” or “Future of Auditing”
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security & Compliance
|
||||
|
||||
- GDPR-compliant data handling
|
||||
- SOC 2 Type II certified (for service delivery)
|
||||
- SSL encryption enabled
|
||||
- Secure login for client portals and employee dashboards
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Development Recommendations
|
||||
|
||||
### Tech Stack Suggestion:
|
||||
|
||||
| Layer | Recommendation |
|
||||
|--------------|----------------|
|
||||
| Frontend | React.js + Next.js (with TypeScript) |
|
||||
| Backend | Node.js / .NET Core (scalable APIs) |
|
||||
| CMS | Strapi or WordPress (for content management) |
|
||||
| Hosting | AWS or Azure (global CDN + edge caching) |
|
||||
| SEO | Google Search Console + Schema.org markup |
|
||||
| Analytics | Google Analytics 4 + Hotjar (user behavior tracking) |
|
||||
|
||||
---
|
||||
|
||||
## 📢 Sample Page Copy (About Us)
|
||||
|
||||
> **Our Promise to You**
|
||||
> At KPMG, we believe every business deserves more than just advice—we deliver solutions rooted in integrity, innovation, and long-term value. With over 280,000 professionals across 150 countries, we partner with leaders worldwide to navigate complexity, reduce risk, and unlock growth—through transparency, technology, and human insight.
|
||||
|
||||
> From helping companies achieve net-zero emissions to advising governments on digital transformation, our people bring deep expertise and empathy to every engagement.
|
||||
|
||||
---
|
||||
|
||||
## 📣 How to Build It?
|
||||
|
||||
If you're building this as a project:
|
||||
|
||||
1. **Register Domain**: Use `kpmg.com` (or `kpmg.global`)
|
||||
2. **Secure SSL Certificate** via Let’s Encrypt or Cloudflare
|
||||
3. **Design Wireframes** using Figma/Adobe XD
|
||||
4. **Develop MVP** (Minimum Viable Product) with core pages first
|
||||
5. **Test UX/UI** with real users (clients, employees, job seekers)
|
||||
6. **Launch in Phases**: Start with homepage, then expand to services, careers, and regions
|
||||
7. **Add Multilingual Support** (English, French, Spanish, Mandarin, Hindi, Arabic, etc.)
|
||||
|
||||
---
|
||||
|
||||
## Want This Turned Into a Live Website?
|
||||
|
||||
I can help further by:
|
||||
- Creating a fully functional **HTML/CSS/JS prototype** (static version)
|
||||
- Writing SEO-optimized content for each page
|
||||
- Providing sample copywriting for blogs, landing pages, and ads
|
||||
- Suggesting AI tools to automate content updates
|
||||
- Recommending integration with LinkedIn, X (Twitter), or YouTube for social presence
|
||||
|
||||
---
|
||||
|
||||
Would you like me to generate:
|
||||
|
||||
✅ A **sample HTML prototype** of the homepage?
|
||||
✅ A list of **SEO titles and meta descriptions** for each page?
|
||||
✅ Sample blog post ideas for "Insights & Thought Leadership"?
|
||||
✅ A downloadable PDF version of this guide?
|
||||
|
||||
Let me know what you'd like next! 👨💻✨
|
||||
|
||||
---
|
||||
|
||||
*This concept aligns with KPMG’s official branding and mission while being scalable and future-ready.*
|
||||
490
inference_samples/step_0/steves_tech_repair.txt
Normal file
490
inference_samples/step_0/steves_tech_repair.txt
Normal file
@@ -0,0 +1,490 @@
|
||||
Prompt: Make a website for steve's tech repair shop.
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.842072
|
||||
============================================================
|
||||
|
||||
Sure! Here's a complete, ready-to-use **website concept and code** for **Steve’s Tech Repair Shop** — designed to be clean, professional, mobile-friendly, and user-focused.
|
||||
|
||||
---
|
||||
|
||||
# 🎯 Steve’s Tech Repair Shop – Website (HTML/CSS/JS)
|
||||
|
||||
This is a fully functional static website you can copy into an `index.html` file or deploy on platforms like Netlify, Vercel, or GitHub Pages.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Features Included:
|
||||
- Responsive design (mobile & desktop)
|
||||
- Navigation menu
|
||||
- Services section
|
||||
- About Steve
|
||||
- Contact form
|
||||
- Testimonials
|
||||
- Footer with social links
|
||||
|
||||
---
|
||||
|
||||
### 💻 Copy-Paste Code: `index.html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Steve's Tech Repair Shop</title>
|
||||
<style>
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f9f9fb;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a5e3d, #2c7b5b);
|
||||
color: white;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #2c7b5b;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background-image: url('https://images.unsplash.com/photo-1595336351431-b3321232887d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: 80px 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 2.2rem;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
color: #1a5e3d;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
padding: 80px 0;
|
||||
background: #e8f4ee;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 5px solid #1a5e3d;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials {
|
||||
padding: 80px 0;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: #f8f8f8;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.testimonial p {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-weight: bold;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 80px 0;
|
||||
background: #f1f8ff;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #1a5e3d;
|
||||
box-shadow: 0 0 0 3px rgba(26, 94, 61, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
background: #1a5e3d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #2c7b5b;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: #1a5e3d;
|
||||
color: white;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #2c7b5b;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: white;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #fff5e6;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<a href="#home">Home</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="container">
|
||||
<h1>Steve’s Tech Repair Shop</h1>
|
||||
<p>Your Trusted Partner for Phone, Laptop, and Device Repairs</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Services</h2>
|
||||
<div class="service-grid">
|
||||
<div class="service-card">
|
||||
<h3>Laptop Repair</h3>
|
||||
<p>We fix broken screens, slow performance, overheating, and software issues.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Phone & Tablet Repair</h3>
|
||||
<p>Battery replacement, screen repairs, water damage fixes, charging issues.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Computer Setup & Cleaning</h3>
|
||||
<p>Malware removal, system optimization, hardware upgrades, cleaning dust.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Data Recovery</h3>
|
||||
<p>Recovers lost files from damaged drives, phones, and external storage.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<h2>About Steve</h2>
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Steve" />
|
||||
<p>Steve has over 15 years of experience in electronics repair. He started his journey fixing old PCs at home before opening Steve’s Tech Repair in 2010. With honest service, fast turnaround times, and no hidden fees, Steve’s Tech is your go-to place when your device fails.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="testimonials" class="testimonials">
|
||||
<div class="container">
|
||||
<h2 class="section-title">What Our Customers Say</h2>
|
||||
<div class="testimonial-grid">
|
||||
<div class="testimonial">
|
||||
<p>"Steve fixed my cracked iPhone screen in under 2 hours. I was amazed by the quality and speed!"</p>
|
||||
<div class="client-name">— Sarah M., Customer</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"My laptop wouldn’t boot up. Steve diagnosed it and replaced the hard drive — now it runs like new!"</p>
|
||||
<div class="client-name">— James R., Business Owner</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"Finally found someone who doesn't charge extra. The service was friendly and transparent."</p>
|
||||
<div class="client-name">— Lisa K., Teacher</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Get In Touch</h2>
|
||||
<form class="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Your Name</label>
|
||||
<input type="text" id="name" placeholder="Enter your full name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" placeholder="you@example.com" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone Number</label>
|
||||
<input type="tel" id="phone" placeholder="(555) 123-4567" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" rows="5" placeholder="Tell us about your device issue..." required></textarea>
|
||||
</div>
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Location</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
<p class="copyright">© 2025 Steve’s Tech Repair Shop. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 How to Use This Website:
|
||||
|
||||
1. **Save as HTML File**
|
||||
- Open any text editor (VS Code, Notepad++, etc.)
|
||||
- Paste the code above.
|
||||
- Save it as `index.html`.
|
||||
|
||||
2. **Deploy Online (Optional but Recommended)**
|
||||
To make it live:
|
||||
- Upload to [Netlify](https://www.netlify.com/)
|
||||
- Or use [Vercel](https://vercel.com/) or [GitHub Pages](https://pages.github.com/)
|
||||
|
||||
3. **Customize It Further**
|
||||
- Change colors in CSS (e.g., update gradient in header).
|
||||
- Replace images with real photos of Steve or your shop.
|
||||
- Add Google Maps embed for location.
|
||||
- Add contact phone/email directly.
|
||||
- Connect to backend for actual form submission (using Formspree or Firebase).
|
||||
|
||||
---
|
||||
|
||||
## 💡 Suggested Next Steps:
|
||||
| Feature | How to Add |
|
||||
|--------|------------|
|
||||
| Google Maps Embed | Add `<iframe>` below contact section |
|
||||
| Real Form Submission | Use [Formspree.io](https://formspree.io) + JavaScript |
|
||||
| Social Media Links | Add icons (Facebook, Instagram, etc.) |
|
||||
| Schedule Appointment Button | Add a "Book Now" CTA link |
|
||||
|
||||
---
|
||||
|
||||
Let me know if you'd like:
|
||||
✅ A version with a real form handler
|
||||
✅ A dark mode toggle
|
||||
✅ Mobile app version (PWA)
|
||||
✅ SEO meta tags added
|
||||
✅ Pricing page or blog section
|
||||
|
||||
I'm happy to expand this further!
|
||||
|
||||
🔧 Just say the word — Steve’s Tech is ready to shine! 😊💻🛠️
|
||||
|
||||
---
|
||||
|
||||
Would you like me to generate the **form handling script**, or add a **Google Maps embed** next?
|
||||
Reference in New Issue
Block a user