commit 1a2b3c4d5e6f7g8h9i0jklmnopqrstuvwx

Author: orcadevstack

requirements.txt

@@ -9,4 +9,20 @@ SQLAlchemy
 pytest
 beautifulsoup4
 lxml
-pytest-cov
+pytest-cov
+gunicorn
+Flask-Login
+Flask-WTF
+Flask-Migrate
+Flask-Bcrypt
+Flask-Babel
+Flask-Cors
+python-dotenv
+openai
+alembic
+marshmallow
+python-magic
+# Dev / linting tools
+black
+isort
+flake8

static/css/style.css

@@ -14,6 +14,19 @@
     --radius:10px;
 }
 
+/* Light theme overrides */
+body.theme-light{
+    --bg:#f7fafc;
+    --panel:#ffffff;
+    --muted:#475569;
+    --accent:#5b21b6;
+    --accent-2:#059669;
+    --surface:#ffffff;
+    --card:#ffffff;
+    --text:#0f1724;
+    --glass: rgba(15,23,36,0.04);
+}
+
 *{box-sizing:border-box}
 html,body{height:100%}
 body{
@@ -33,23 +46,50 @@ body{
     padding:0 1rem;
 }
 
+/* Full-width sections that ignore the page max width */
+.container.full-width{max-width:100%;padding:0 2rem}
+
 /* Header */
 .site-header{
     background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
     border-bottom: 1px solid rgba(255,255,255,0.04);
+    position: sticky;
+    top: 0;
+    z-index: 1100;
+    backdrop-filter: blur(6px);
 }
 .header-inner{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:1rem;
-    padding:1.125rem 0;
+    padding:1.125rem 1rem; /* horizontal padding matches .container */
 }
 .logo{
+    display:inline-flex;
+    align-items:center;
+    gap:0.5rem;
+    margin-left:1rem;
     font-weight:800;
     letter-spacing:0.6px;
-    font-size:1.125rem;
+    font-size:0.95rem;
     color:var(--text);
+    text-decoration:none;
+}
+
+.logo img{width:40px;height:40px;border-radius:8px;display:block}
+.logo .brand{font-weight:800;color:var(--text)}
+
+/* Header layout - logo sits left and nav fills remaining space */
+.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
+.header-inner > .logo{margin-left:0}
+.logo{order:0;margin-right:1rem}
+
+/* Mobile: hide brand text to keep header compact */
+@media (max-width:900px){
+    .logo .brand{display:none}
+    .logo img{width:36px;height:36px}
+    .logo{margin-right:0}
 }
 
 .nav-toggle{
@@ -59,7 +99,10 @@ body{
     color:var(--text);
 }
 
-.primary-nav{display:flex;align-items:center;gap:1.25rem}
+.theme-toggle{background:transparent;border:0;color:var(--text);padding:0.4rem;border-radius:6px;cursor:pointer}
+.theme-toggle:focus{outline:2px solid rgba(124,92,255,0.14);outline-offset:2px}
+
+.primary-nav{display:flex;align-items:center;gap:1.25rem;flex:1}
 .nav-list{display:flex;gap:1.5rem;margin:0;padding:0;list-style:none}
 .nav-list a{color:var(--muted);text-decoration:none;font-weight:600;padding:0.35rem 0;display:inline-block;border-radius:6px}
 .nav-list a:hover{color:var(--text);background:var(--glass)}
@@ -80,7 +123,7 @@ body{
 .nav-search input::placeholder{color:var(--muted)}
 
 /* Main */
-.site-main{padding:3rem 0}
+.site-main{padding:3.5rem 0}
 .site-main .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,255,255,0.03)}
 
 /* Hero */
@@ -128,6 +171,14 @@ body{
 .ai-chat-form input{flex:1;padding:0.5rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
 .ai-chat-form button{padding:0.45rem 0.7rem;border-radius:8px;border:0;background:var(--accent);color:white}
 
+/* Chat pop animation */
+.ai-chat.pop .ai-chat-toggle{animation:chat-pop 380ms cubic-bezier(.2,1,.2,1)}
+@keyframes chat-pop{
+    0%{transform:scale(0.85)}
+    60%{transform:scale(1.08)}
+    100%{transform:scale(1)}
+}
+
 /* Form styles */
 .form-stacked label{display:block;margin-top:0.75rem;font-weight:600;color:var(--text)}
 .form-stacked input, .form-stacked textarea, .form-stacked select{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);margin-top:0.25rem}

static/img/logo.svg

@@ -12,6 +12,73 @@ document.addEventListener('DOMContentLoaded', function(){
     });
   }
 
+  // Theme toggle
+  const themeBtn = document.querySelector('.theme-toggle');
+  const root = document.documentElement;
+  function setTheme(t){
+    if(t === 'light'){
+      document.body.classList.add('theme-light');
+      themeBtn && (themeBtn.textContent = '☀️');
+      themeBtn && themeBtn.setAttribute('aria-pressed','true');
+    } else {
+      document.body.classList.remove('theme-light');
+      themeBtn && (themeBtn.textContent = '🌙');
+      themeBtn && themeBtn.setAttribute('aria-pressed','false');
+    }
+    try{ localStorage.setItem('theme', t); }catch(e){}
+  }
+
+  // initialize
+  try{
+    const stored = localStorage.getItem('theme');
+    setTheme(stored === 'light' ? 'light' : 'dark');
+  }catch(e){ setTheme('dark') }
+
+  if(themeBtn){
+    themeBtn.addEventListener('click', function(){
+      const isLight = document.body.classList.contains('theme-light');
+      setTheme(isLight ? 'dark' : 'light');
+    });
+  }
+
+  // Translation loader
+  const langSelect = document.querySelector('.lang-select');
+  async function loadLocale(lang){
+    try{
+      const res = await fetch('/static/locales/' + lang + '.json');
+      const data = await res.json();
+      applyTranslations(data);
+      try{ localStorage.setItem('lang', lang); }catch(e){}
+    }catch(e){ console.warn('Failed to load locale', e) }
+  }
+
+  function applyTranslations(dict){
+    document.querySelectorAll('[data-i18n]').forEach(function(el){
+      const key = el.getAttribute('data-i18n');
+      if(dict[key]) el.textContent = dict[key];
+    });
+    // buttons/links by class
+    const btnPrimary = document.querySelector('.btn-primary');
+    const btnSecondary = document.querySelector('.btn-secondary');
+    const uploadBtn = document.querySelector('.cta-group .btn');
+    if(btnPrimary && dict['get_started']) btnPrimary.textContent = dict['get_started'];
+    if(btnSecondary && dict['learn_more']) btnSecondary.textContent = dict['learn_more'];
+    if(uploadBtn && dict['upload_data']) uploadBtn.textContent = dict['upload_data'];
+  }
+
+  // Initialize language
+  try{
+    const storedLang = localStorage.getItem('lang') || 'en';
+    if(langSelect) langSelect.value = storedLang;
+    loadLocale(storedLang);
+  }catch(e){ loadLocale('en') }
+
+  if(langSelect){
+    langSelect.addEventListener('change', function(e){
+      loadLocale(e.target.value);
+    });
+  }
+
   // Chat widget
   const chat = document.getElementById('ai-chat');
   const chatToggle = document.querySelector('.ai-chat-toggle');
@@ -30,8 +97,13 @@ document.addEventListener('DOMContentLoaded', function(){
 
   if(chatToggle && chat){
     chatToggle.addEventListener('click', function(){
+      const opening = !chat.classList.contains('open');
       chat.classList.toggle('open');
       chat.setAttribute('aria-hidden', chat.classList.contains('open') ? 'false' : 'true');
+      if(opening){
+        chat.classList.add('pop');
+        setTimeout(()=>chat.classList.remove('pop'), 800);
+      }
     });
   }
 

static/js/main.js

@@ -0,0 +1,9 @@
+{
+  "kicker": "Enterprise",
+  "hero_title": "Welcome to Zclonic by AtonixCorp",
+  "hero_lead": "AI-Powered Infrastructure for the Enterprise Frontier",
+  "get_started": "Get Started — It's free",
+  "learn_more": "Learn more",
+  "upload_data": "Upload data",
+  "contact_us": "Contact Us"
+}

static/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "kicker": "Empresa",
+  "hero_title": "Bienvenido a Zclonic por AtonixCorp",
+  "hero_lead": "Infraestructura impulsada por IA para la frontera empresarial",
+  "get_started": "Comenzar — Es gratis",
+  "learn_more": "Más información",
+  "upload_data": "Subir datos",
+  "contact_us": "Contáctanos"
+}

static/locales/es.json

@@ -1,8 +1,11 @@
 <!-- templates/base.html -->
 <!DOCTYPE html>
 <html lang="en">
-<head>
+    <head>
     <meta charset="UTF-8">
+    <!-- favicon -->
+    <link rel="icon" href="{{ url_for('static', filename='img/logo.svg') }}" type="image/svg+xml">
+    <!-- Management: From ingestion to insight, Zclonic helps enterprises -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Research AI Portal</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -12,15 +15,20 @@
 </head>
 <body>
     <header class="site-header" role="banner">
-        <div class="container header-inner">
-            <div class="logo">xclony</div>
+
+    <div class="container full-width header-inner">
 
             <button class="nav-toggle" aria-controls="primary-navigation" aria-expanded="false" aria-label="Toggle navigation">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                     <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
             </button>
 
+            <a class="logo" href="{{ url_for('main.dashboard') }}" aria-label="Zclonic home">
+                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="Zclonic logo">
+                <span class="brand">Zclonic</span>
+            </a>
+
             <nav id="primary-navigation" class="primary-nav" role="navigation" aria-label="Primary">
                 <ul class="nav-list">
                     <li><a href="/">Home</a></li>
@@ -37,6 +45,15 @@
                 </form>
 
                 <ul class="nav-actions">
+                    <li>
+                        <button class="theme-toggle" aria-pressed="false" title="Toggle theme">🌙</button>
+                    </li>
+                    <li>
+                        <select class="lang-select" aria-label="Select language">
+                            <option value="en">EN</option>
+                            <option value="es">ES</option>
+                        </select>
+                    </li>
                     {% if session.get('user_id') %}
                         <li class="muted">{{ session.get('user_email') }}</li>
                         <li><a href="{{ url_for('main.dashboard') }}" class="link-muted">Dashboard</a></li>
@@ -47,15 +64,16 @@
                     {% endif %}
                 </ul>
             </nav>
+            <!-- logo moved to the left side -->
         </div>
     </header>
 
         <!-- Hero -->
         <section class="hero">
-            <div class="container">
-                <span class="kicker">Enterprise</span>
-                <h1>Welcome to Zclonic by AtonixCorp</h1>
-                <p class="lead">AI-Powered Infrastructure for the Enterprise Frontier</p>
+            <div class="container full-width">
+                <span class="kicker" data-i18n="kicker">Enterprise</span>
+                <h1 data-i18n="hero_title">Welcome to Zclonic by AtonixCorp</h1>
+                <p class="lead" data-i18n="hero_lead">AI-Powered Infrastructure for the Enterprise Frontier</p>
                 <p>Zclonic is your multi-purpose command center—built for enterprises that demand autonomy, resilience, and scale. Whether you're managing sensitive data, deploying secure APIs, or orchestrating IT operations across borders, our platform delivers uncompromising performance and control.</p>
 
                 <div class="hero-grid">
@@ -85,8 +103,8 @@ <h3>Autonomous Data Management</h3>
             </div>
         </section>
 
-        <main class="site-main">
-                <div class="container">
+    <main class="site-main">
+        <div class="container full-width">
                         {% block content %}{% endblock %}
                 </div>
         </main>

templates/base.html

@@ -1,7 +1,6 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="site-main">
   <div class="container">
     <div class="card">
       <h1>Complete your profile</h1>
@@ -22,5 +21,4 @@ <h1>Complete your profile</h1>
       </form>
     </div>
   </div>
-</div>
 {% endblock %}

templates/complete_profile.html

@@ -1,7 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="site-main">
     <div class="container">
         <section class="card">
             <h2>Contact Us</h2>
@@ -17,5 +16,4 @@ <h2>Contact Us</h2>
             </form>
         </section>
     </div>
-</div>
 {% endblock %}

templates/contact.html

@@ -1,15 +1,15 @@
 {% extends 'base.html' %}
 {% block content %}
-<h2>Upload a Document</h2>
-<form action="/upload" method="post" enctype="multipart/form-data">
-    <input type="file" name="document">
-    <button type="submit">Process</button>
-</form>
+  <h2>Upload a Document</h2>
+  <form action="/upload" method="post" enctype="multipart/form-data">
+      <input type="file" name="document">
+      <button type="submit">Process</button>
+  </form>
 
-{% if result %}
-    <div class="result">
-        <h3>AI Output:</h3>
-        <p>{{ result }}</p>
-    </div>
-{% endif %}
+  {% if result %}
+      <div class="result">
+          <h3>AI Output:</h3>
+          <p>{{ result }}</p>
+      </div>
+  {% endif %}
 {% endblock %}