diff --git a/core/templates/core/index.html b/core/templates/core/index.html index faec813..7e1c174 100644 --- a/core/templates/core/index.html +++ b/core/templates/core/index.html @@ -1,145 +1,73 @@ -{% extends "base.html" %} +{% load static %} + + + + + + + + ComplianceShield Pro - Construction Compliance Made Simple + + + + + + + -{% block title %}{{ project_name }}{% endblock %} + -{% block head %} - - - - -{% endblock %} - -{% block content %} -
-
-

Analyzing your requirements and generating your app…

-
- Loading… -
-

AppWizzy AI is collecting your requirements and applying the first changes.

-

This page will refresh automatically as the plan is implemented.

-

- Runtime: Django {{ django_version }} · Python {{ python_version }} - — UTC {{ current_time|date:"Y-m-d H:i:s" }} -

-
-
- -{% endblock %} \ No newline at end of file + + \ No newline at end of file diff --git a/static/css/custom.css b/static/css/custom.css index 925f6ed..fe08c2d 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1,4 +1,257 @@ -/* Custom styles for the application */ -body { - font-family: system-ui, -apple-system, sans-serif; -} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + :root { + --gold-light: #f0d68c; + --gold-dark: #c9a55a; + --bg-dark: #0a0a0a; + --bg-card: #141414; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --text-muted: #606060; + --border-light: rgba(255, 255, 255, 0.1); + --border-lighter: rgba(255, 255, 255, 0.05); + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: var(--bg-dark); + color: var(--text-primary); + overflow-x: hidden; + line-height: 1.6; + } + + /* Navigation */ + nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 60px; + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 1px solid var(--border-light); + transition: all 0.3s ease; + } + + nav.scrolled { + padding: 15px 60px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + } + + .logo { + display: flex; + align-items: center; + gap: 12px; + font-size: 22px; + font-weight: 600; + color: var(--text-primary); + text-decoration: none; + } + + .logo-icon { + width: 32px; + height: 32px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + } + + .nav-links { + display: flex; + gap: 40px; + list-style: none; + } + + .nav-links a { + color: var(--text-secondary); + text-decoration: none; + font-size: 15px; + font-weight: 500; + transition: color 0.3s; + position: relative; + } + + .nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + transition: width 0.3s; + } + + .nav-links a:hover { + color: var(--text-primary); + } + + .nav-links a:hover::after { + width: 100%; + } + + .nav-cta { + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + color: var(--bg-dark); + padding: 10px 24px; + border-radius: 8px; + text-decoration: none; + font-weight: 600; + font-size: 15px; + transition: all 0.3s; + box-shadow: 0 4px 12px rgba(201, 165, 90, 0.3); + } + + .nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(201, 165, 90, 0.4); + } + + /* Mobile Menu Toggle */ + .mobile-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + } + + .mobile-menu-toggle span { + width: 25px; + height: 2px; + background: var(--text-primary); + transition: all 0.3s; + } + + /* Hero Section */ + .hero { + padding: 180px 60px 100px; + text-align: center; + position: relative; + } + + .hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-light); + padding: 8px 16px; + border-radius: 20px; + font-size: 14px; + color: var(--text-secondary); + margin-bottom: 30px; + animation: fadeInDown 0.6s ease; + } + + .hero-badge-icon { + width: 20px; + height: 20px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + + h1 { + font-size: 72px; + line-height: 1.1; + margin-bottom: 24px; + background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: fadeInUp 0.8s ease; + } + + .hero-description { + font-size: 20px; + color: #808080; + max-width: 700px; + margin: 0 auto 40px; + line-height: 1.6; + animation: fadeInUp 1s ease; + } + + .hero-ctas { + display: flex; + gap: 20px; + justify-content: center; + margin-bottom: 16px; + animation: fadeInUp 1.2s ease; + } + + .btn-primary { + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + color: var(--bg-dark); + padding: 16px 32px; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + font-size: 16px; + transition: all 0.3s; + border: none; + cursor: pointer; + box-shadow: 0 4px 12px rgba(201, 165, 90, 0.3); + } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(201, 165, 90, 0.4); + } + + .btn-secondary { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-light); + color: var(--text-primary); + padding: 16px 32px; + border-radius: 10px; + text-decoration: none; + font-weight: 500; + font-size: 16px; + display: inline-flex; + align-items: center; + gap: 8px; + transition: all 0.3s; + } + + .btn-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--border-light); + } + + .play-icon { + width: 20px; + height: 20px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + padding-left: 2px; + } + + .hero-note { + color: var(--text-muted); + font-size: 14px; + animation: fadeInUp 1.4s ease; + } + + /* Product Preview */ + .product-preview { + max-width: 1200px; + margin: 80px auto 0; + } \ No newline at end of file diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css index 108056f..fe08c2d 100644 --- a/staticfiles/css/custom.css +++ b/staticfiles/css/custom.css @@ -1,21 +1,257 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } -:root { - --bg-color-start: #6a11cb; - --bg-color-end: #2575fc; - --text-color: #ffffff; - --card-bg-color: rgba(255, 255, 255, 0.01); - --card-border-color: rgba(255, 255, 255, 0.1); -} -body { - margin: 0; - font-family: 'Inter', sans-serif; - background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end)); - color: var(--text-color); - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - text-align: center; - overflow: hidden; - position: relative; -} + :root { + --gold-light: #f0d68c; + --gold-dark: #c9a55a; + --bg-dark: #0a0a0a; + --bg-card: #141414; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --text-muted: #606060; + --border-light: rgba(255, 255, 255, 0.1); + --border-lighter: rgba(255, 255, 255, 0.05); + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: var(--bg-dark); + color: var(--text-primary); + overflow-x: hidden; + line-height: 1.6; + } + + /* Navigation */ + nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 60px; + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 1px solid var(--border-light); + transition: all 0.3s ease; + } + + nav.scrolled { + padding: 15px 60px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); + } + + .logo { + display: flex; + align-items: center; + gap: 12px; + font-size: 22px; + font-weight: 600; + color: var(--text-primary); + text-decoration: none; + } + + .logo-icon { + width: 32px; + height: 32px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + } + + .nav-links { + display: flex; + gap: 40px; + list-style: none; + } + + .nav-links a { + color: var(--text-secondary); + text-decoration: none; + font-size: 15px; + font-weight: 500; + transition: color 0.3s; + position: relative; + } + + .nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + transition: width 0.3s; + } + + .nav-links a:hover { + color: var(--text-primary); + } + + .nav-links a:hover::after { + width: 100%; + } + + .nav-cta { + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + color: var(--bg-dark); + padding: 10px 24px; + border-radius: 8px; + text-decoration: none; + font-weight: 600; + font-size: 15px; + transition: all 0.3s; + box-shadow: 0 4px 12px rgba(201, 165, 90, 0.3); + } + + .nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(201, 165, 90, 0.4); + } + + /* Mobile Menu Toggle */ + .mobile-menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + } + + .mobile-menu-toggle span { + width: 25px; + height: 2px; + background: var(--text-primary); + transition: all 0.3s; + } + + /* Hero Section */ + .hero { + padding: 180px 60px 100px; + text-align: center; + position: relative; + } + + .hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-light); + padding: 8px 16px; + border-radius: 20px; + font-size: 14px; + color: var(--text-secondary); + margin-bottom: 30px; + animation: fadeInDown 0.6s ease; + } + + .hero-badge-icon { + width: 20px; + height: 20px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + } + + h1 { + font-size: 72px; + line-height: 1.1; + margin-bottom: 24px; + background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: fadeInUp 0.8s ease; + } + + .hero-description { + font-size: 20px; + color: #808080; + max-width: 700px; + margin: 0 auto 40px; + line-height: 1.6; + animation: fadeInUp 1s ease; + } + + .hero-ctas { + display: flex; + gap: 20px; + justify-content: center; + margin-bottom: 16px; + animation: fadeInUp 1.2s ease; + } + + .btn-primary { + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + color: var(--bg-dark); + padding: 16px 32px; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + font-size: 16px; + transition: all 0.3s; + border: none; + cursor: pointer; + box-shadow: 0 4px 12px rgba(201, 165, 90, 0.3); + } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(201, 165, 90, 0.4); + } + + .btn-secondary { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-light); + color: var(--text-primary); + padding: 16px 32px; + border-radius: 10px; + text-decoration: none; + font-weight: 500; + font-size: 16px; + display: inline-flex; + align-items: center; + gap: 8px; + transition: all 0.3s; + } + + .btn-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--border-light); + } + + .play-icon { + width: 20px; + height: 20px; + background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + padding-left: 2px; + } + + .hero-note { + color: var(--text-muted); + font-size: 14px; + animation: fadeInUp 1.4s ease; + } + + /* Product Preview */ + .product-preview { + max-width: 1200px; + margin: 80px auto 0; + } \ No newline at end of file