smirki/UIGEN-FX-4B-STG-Modal-08-28
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Files
main
UIGEN-FX-4B-STG-Modal-08-28/inference_samples/step_0/steves_tech_repair.txt

490 lines
12 KiB
Plaintext
Raw Permalink Normal View History

初始化项目，由ModelHub XC社区提供模型 Model: smirki/UIGEN-FX-4B-STG-Modal-08-28 Source: Original Platform
2026-05-26 22:11:12 +08:00
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">&copy; 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 Copy Permalink