|
|
|
|
|
import random |
|
|
from transformers import pipeline |
|
|
import re |
|
|
|
|
|
|
|
|
|
|
|
try: |
|
|
generator = pipeline('text-generation', model='gpt2') |
|
|
except: |
|
|
|
|
|
print("Warning: Using mock generator as fallback. Install transformers for full functionality.") |
|
|
class MockGenerator: |
|
|
def __call__(self, prompt, max_length=100, num_return_sequences=1): |
|
|
return [{"generated_text": prompt + " (This is a mock generation)"}] |
|
|
generator = MockGenerator() |
|
|
|
|
|
|
|
|
def get_base_template(title, content, theme="light"): |
|
|
"""Basic HTML template with proper structure and responsive meta tags""" |
|
|
css_theme = get_theme_css(theme) |
|
|
|
|
|
return f"""<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>{title}</title> |
|
|
<style> |
|
|
/* Reset and base styles */ |
|
|
* {{ |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
}} |
|
|
body {{ |
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
|
line-height: 1.6; |
|
|
}} |
|
|
|
|
|
/* Theme styles */ |
|
|
{css_theme} |
|
|
|
|
|
/* Responsive styles */ |
|
|
.container {{ |
|
|
width: 90%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
}} |
|
|
|
|
|
/* Navigation */ |
|
|
header {{ |
|
|
padding: 20px 0; |
|
|
}} |
|
|
.navbar {{ |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
}} |
|
|
.logo {{ |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
}} |
|
|
.nav-links {{ |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
}} |
|
|
.nav-links a {{ |
|
|
text-decoration: none; |
|
|
transition: opacity 0.2s; |
|
|
}} |
|
|
.nav-links a:hover {{ |
|
|
opacity: 0.8; |
|
|
}} |
|
|
|
|
|
/* Responsive design */ |
|
|
@media (max-width: 768px) {{ |
|
|
.hero-content {{ |
|
|
flex-direction: column; |
|
|
}} |
|
|
.hero-text, .hero-image {{ |
|
|
width: 100%; |
|
|
}} |
|
|
.feature-grid {{ |
|
|
grid-template-columns: 1fr; |
|
|
}} |
|
|
.nav-links {{ |
|
|
display: none; |
|
|
}} |
|
|
.mobile-menu-btn {{ |
|
|
display: block; |
|
|
}} |
|
|
}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
{content} |
|
|
</body> |
|
|
</html>""" |
|
|
|
|
|
def get_theme_css(theme): |
|
|
"""Generate CSS based on the selected theme""" |
|
|
themes = { |
|
|
"light": """ |
|
|
body { |
|
|
background-color: #ffffff; |
|
|
color: #333333; |
|
|
} |
|
|
a { |
|
|
color: #3b82f6; |
|
|
} |
|
|
.btn-primary { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background-color: #2563eb; |
|
|
} |
|
|
.section { |
|
|
padding: 60px 0; |
|
|
} |
|
|
.hero { |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
.card { |
|
|
background-color: #ffffff; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05); |
|
|
} |
|
|
""", |
|
|
"dark": """ |
|
|
body { |
|
|
background-color: #121212; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
a { |
|
|
color: #90caf9; |
|
|
} |
|
|
.btn-primary { |
|
|
background-color: #90caf9; |
|
|
color: #121212; |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background-color: #64b5f6; |
|
|
} |
|
|
.section { |
|
|
padding: 60px 0; |
|
|
} |
|
|
.hero { |
|
|
background-color: #1e1e1e; |
|
|
} |
|
|
.card { |
|
|
background-color: #1e1e1e; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.2); |
|
|
} |
|
|
""", |
|
|
"colorful": """ |
|
|
body { |
|
|
background-color: #ffffff; |
|
|
color: #333333; |
|
|
} |
|
|
a { |
|
|
color: #8b5cf6; |
|
|
} |
|
|
.btn-primary { |
|
|
background-color: #8b5cf6; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background-color: #7c3aed; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.section { |
|
|
padding: 60px 0; |
|
|
} |
|
|
.hero { |
|
|
background: linear-gradient(135deg, #c084fc, #8b5cf6); |
|
|
color: white; |
|
|
} |
|
|
.card { |
|
|
background-color: #ffffff; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 10px 15px rgba(0,0,0,0.1); |
|
|
border-top: 4px solid #8b5cf6; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
.accent { |
|
|
color: #f472b6; |
|
|
} |
|
|
""" |
|
|
} |
|
|
return themes.get(theme.lower(), themes["light"]) |
|
|
|
|
|
|
|
|
def generate_navbar(site_name, pages=None): |
|
|
"""Generate a navigation bar for the website""" |
|
|
if pages is None: |
|
|
pages = ["Home", "Features", "Pricing", "Contact"] |
|
|
|
|
|
links = "".join([f'<a href="#{page.lower()}">{page}</a>' for page in pages]) |
|
|
|
|
|
return f""" |
|
|
<header> |
|
|
<div class="container"> |
|
|
<nav class="navbar"> |
|
|
<div class="logo">{site_name}</div> |
|
|
<div class="nav-links"> |
|
|
{links} |
|
|
</div> |
|
|
<div class="mobile-menu-btn" style="display: none; cursor: pointer;"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<line x1="3" y1="12" x2="21" y2="12"></line> |
|
|
<line x1="3" y1="6" x2="21" y2="6"></line> |
|
|
<line x1="3" y1="18" x2="21" y2="18"></line> |
|
|
</svg> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
""" |
|
|
|
|
|
def generate_hero_section(title, subtitle, cta="Get Started"): |
|
|
"""Generate a hero section with a call to action""" |
|
|
return f""" |
|
|
<section class="hero" id="home"> |
|
|
<div class="container"> |
|
|
<div class="hero-content" style="display: flex; align-items: center; gap: 40px; padding: 60px 0;"> |
|
|
<div class="hero-text" style="flex: 1;"> |
|
|
<h1 style="font-size: 3rem; font-weight: 800; margin-bottom: 20px;">{title}</h1> |
|
|
<p style="font-size: 1.2rem; margin-bottom: 30px;">{subtitle}</p> |
|
|
<a href="#contact" class="btn-primary" style="display: inline-block; text-decoration: none;">{cta}</a> |
|
|
</div> |
|
|
<div class="hero-image" style="flex: 1;"> |
|
|
<div style="background-color: #e5e7eb; height: 300px; border-radius: 8px; display: flex; align-items: center; justify-content: center;"> |
|
|
<span style="color: #9ca3af;">Hero Image Placeholder</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
""" |
|
|
|
|
|
def generate_features_section(features=None): |
|
|
"""Generate a features section with cards""" |
|
|
if features is None: |
|
|
features = [ |
|
|
{"title": "Feature 1", "description": "Description of feature 1 and its benefits."}, |
|
|
{"title": "Feature 2", "description": "Description of feature 2 and its benefits."}, |
|
|
{"title": "Feature 3", "description": "Description of feature 3 and its benefits."} |
|
|
] |
|
|
|
|
|
feature_cards = "" |
|
|
for feature in features: |
|
|
feature_cards += f""" |
|
|
<div class="feature-card card" style="padding: 30px; margin-bottom: 20px;"> |
|
|
<h3 style="font-size: 1.5rem; margin-bottom: 15px;">{feature['title']}</h3> |
|
|
<p>{feature['description']}</p> |
|
|
</div> |
|
|
""" |
|
|
|
|
|
return f""" |
|
|
<section class="section" id="features"> |
|
|
<div class="container"> |
|
|
<h2 style="font-size: 2rem; text-align: center; margin-bottom: 40px;">Features</h2> |
|
|
<div class="feature-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;"> |
|
|
{feature_cards} |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
""" |
|
|
|
|
|
def generate_pricing_section(plans=None): |
|
|
"""Generate a pricing section with different plans""" |
|
|
if plans is None: |
|
|
plans = [ |
|
|
{ |
|
|
"name": "Basic", |
|
|
"price": "$9.99", |
|
|
"period": "month", |
|
|
"features": ["Feature 1", "Feature 2", "Email Support"], |
|
|
"highlighted": False |
|
|
}, |
|
|
{ |
|
|
"name": "Pro", |
|
|
"price": "$19.99", |
|
|
"period": "month", |
|
|
"features": ["All Basic features", "Feature 3", "Feature 4", "Priority Support"], |
|
|
"highlighted": True |
|
|
}, |
|
|
{ |
|
|
"name": "Enterprise", |
|
|
"price": "$49.99", |
|
|
"period": "month", |
|
|
"features": ["All Pro features", "Feature 5", "Feature 6", "24/7 Support", "Custom Integration"], |
|
|
"highlighted": False |
|
|
} |
|
|
] |
|
|
|
|
|
pricing_cards = "" |
|
|
for plan in plans: |
|
|
highlight_style = "transform: scale(1.05);" if plan["highlighted"] else "" |
|
|
highlight_badge = '<div style="position: absolute; top: -10px; right: -10px; background-color: #f97316; color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem;">Popular</div>' if plan["highlighted"] else "" |
|
|
|
|
|
features_list = "".join([f'<li style="margin-bottom: 10px;">{feature}</li>' for feature in plan["features"]]) |
|
|
|
|
|
pricing_cards += f""" |
|
|
<div class="pricing-card card" style="padding: 30px; position: relative; {highlight_style}"> |
|
|
{highlight_badge} |
|
|
<h3 style="font-size: 1.5rem; margin-bottom: 10px;">{plan['name']}</h3> |
|
|
<div style="font-size: 2.5rem; font-weight: 700; margin-bottom: 20px;"> |
|
|
{plan['price']} |
|
|
<span style="font-size: 1rem; font-weight: 400; color: #6b7280;">/{plan['period']}</span> |
|
|
</div> |
|
|
<ul style="list-style-type: none; margin-bottom: 30px;"> |
|
|
{features_list} |
|
|
</ul> |
|
|
<a href="#contact" class="btn-primary" style="display: block; text-align: center; text-decoration: none;">Choose Plan</a> |
|
|
</div> |
|
|
""" |
|
|
|
|
|
return f""" |
|
|
<section class="section" id="pricing" style="background-color: #f9fafb;"> |
|
|
<div class="container"> |
|
|
<h2 style="font-size: 2rem; text-align: center; margin-bottom: 20px;">Pricing</h2> |
|
|
<p style="text-align: center; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto;">Choose the perfect plan for your needs. All plans include our core features with different levels of support and additional functionalities.</p> |
|
|
<div class="pricing-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;"> |
|
|
{pricing_cards} |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
""" |
|
|
|
|
|
def generate_testimonials_section(testimonials=None): |
|
|
"""Generate a testimonials section""" |
|
|
if testimonials is None: |
|
|
testimonials = [ |
|
|
{"name": "John Doe", "position": "CEO, Company A", "text": "This product has completely transformed how we operate our business. Highly recommended!"}, |
|
|
{"name": "Jane Smith", "position": "Marketing Director, Company B", "text": "The features and ease of use have made this an essential tool in our daily operations."}, |
|
|
{"name": "Mike Johnson", "position": "Freelancer", "text": "As someone who works independently, this tool has saved me countless hours of work."} |
|
|
] |
|
|
|
|
|
testimonial_cards = "" |
|
|
for testimonial in testimonials: |
|
|
testimonial_cards += f""" |
|
|
<div class="testimonial-card card" style="padding: 30px; text-align: center;"> |
|
|
<div style="font-size: 2rem; color: #d1d5db; margin-bottom: 20px;">"</div> |
|
|
<p style="margin-bottom: 20px;">{testimonial['text']}</p> |
|
|
<div style="font-weight: 600;">{testimonial['name']}</div> |
|
|
<div style="font-size: 0.9rem; color: #6b7280;">{testimonial['position']}</div> |
|
|
</div> |
|
|
""" |
|
|
|
|
|
return f""" |
|
|
<section class="section" id="testimonials"> |
|
|
<div class="container"> |
|
|
<h2 style="font-size: 2rem; text-align: center; margin-bottom: 40px;">What Our Customers Say</h2> |
|
|
<div class="testimonials-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;"> |
|
|
{testimonial_cards} |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
""" |
|
|
|
|
|
def generate_contact_section(): |
|
|
"""Generate a contact section with a form""" |
|
|
return f""" |
|
|
<section class="section" id="contact" style="background-color: #f9fafb;"> |
|
|
<div class="container"> |
|
|
<h2 style="font-size: 2rem; text-align: center; margin-bottom: 40px;">Contact Us</h2> |
|
|
<form style="max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;"> |
|
|
<input type="text" placeholder="Your Name" style="padding: 10px; border: 1px solid #d1d5db; border-radius: 4px;"> |
|
|
<input type="email" placeholder="Your Email" style="padding: 10px; border: 1px solid #d1d5db; border-radius: 4px;"> |
|
|
<textarea placeholder="Your Message" style="padding: 10px; border: 1px solid #d1d5db; border-radius: 4px; height: 150px;"></textarea> |
|
|
<button type="submit" class="btn-primary" style="align-self: center;">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
""" |
