OPEN STACK

OpenStack Visual Builder & Code Engine

0% Lock-in (Fully Sovereign)
http://localhost:8080/ [Docker Container] 1200 × 720
Super generates helpful tools and automates fact-checking across the internet proactively. If you enjoyed this tool, build your own with Super and share it with a friend.
`; } function generateCSS() { return `/* OpenStack Sovereign CSS - Zero Runtime Bloat */ :root { --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --color-primary: #238636; --color-dark: #0d1117; --color-light: #f6f8fa; --color-border: #e1e4e8; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-base); color: #24292e; line-height: 1.5; background: #ffffff; } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; border-bottom: 1px solid var(--color-border); } .brand { font-weight: 700; font-size: 1.2rem; } .nav-links a { margin-left: 1.25rem; color: #586069; text-decoration: none; } .hero-section { text-align: center; padding: 4rem 1.5rem; background: linear-gradient(180deg, var(--color-light) 0%, #ffffff 100%); border-bottom: 1px solid var(--color-border); } .hero-section h1 { font-size: 2.25rem; margin-bottom: 0.75rem; color: var(--color-dark); } .hero-section p { font-size: 1.15rem; color: #586069; max-width: 600px; margin: 0 auto 1.5rem; } .cta-button { display: inline-block; background: var(--color-primary); color: #fff; padding: 0.75rem 1.75rem; border-radius: 6px; text-decoration: none; font-weight: 600; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; padding: 3rem 2rem; max-width: 1100px; margin: 0 auto; } .feature-card { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fafbfc; } .feature-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; } .data-feed-section { padding: 2rem; background: var(--color-light); border-top: 1px solid var(--color-border); } .api-output { background: var(--color-dark); color: #7ee787; padding: 1rem; border-radius: 6px; font-family: monospace; overflow-x: auto; }`; } function generateDockerfile() { return `# Production Nginx Container - 100% Self-Hosted FROM nginx:alpine # Copy clean static output COPY index.html /usr/share/nginx/html/index.html COPY styles.css /usr/share/nginx/html/styles.css COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]`; } function generateNginxConf() { return `server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; add_header X-Frame-Options "SAMEORIGIN"; add_header X-Content-Type-Options "nosniff"; } # Cache static assets location ~* \\.(css|js|png|jpg|jpeg|gif|ico|svg)$ { root /usr/share/nginx/html; expires 30d; add_header Cache-Control "public, no-transform"; } }`; } function generateDockerCompose() { return `version: '3.8' services: web: build: . container_name: ${state.project_name}-web ports: - "8080:80" restart: unless-stopped environment: - VENDOR_LOCKIN=0 - STACK_MODE=sovereign`; } function switchCodeTab(tab) { activeCodeTab = tab; document.querySelectorAll(".code-tab").forEach(t => t.classList.remove("active")); const targetBtn = document.getElementById(`tab-${tab}`); if (targetBtn) targetBtn.classList.add("active"); updateCodeInspector(); } function updateCodeInspector() { const codePre = document.getElementById("code-display-pre"); let content = ""; if (activeCodeTab === "html") content = generateHTML(); else if (activeCodeTab === "css") content = generateCSS(); else if (activeCodeTab === "docker") content = generateDockerfile(); else if (activeCodeTab === "nginx") content = generateNginxConf(); else if (activeCodeTab === "compose") content = generateDockerCompose(); codePre.textContent = content; } // Export Functionality function exportFullZipBundle() { const htmlContent = generateHTML(); const cssContent = generateCSS(); const dockerContent = generateDockerfile(); const nginxContent = generateNginxConf(); const composeContent = generateDockerCompose(); const manifest = { name: state.project_name, target: state.deployment_target, lock_in_score: "0% Lock-in (Fully Sovereign)", deployment_command: "docker compose up -d --build", generated_files: ["index.html", "styles.css", "Dockerfile", "nginx.conf", "docker-compose.yml"], html_content: htmlContent, css_content: cssContent, docker_content: dockerContent, nginx_content: nginxContent, compose_content: composeContent, readme: `# ${state.project_name} - Sovereign Open Stack\n\nGenerated with OpenStack Builder.\n\n## Run with Docker\n\`\`\`bash\ndocker compose up -d --build\n\`\`\`\nVisit http://localhost:8080/` }; const blob = new Blob([JSON.stringify(manifest, null, 2)], { type: "application/json" }); const filename = `${state.project_name}-scaffolding.json`; // QA hook preservation globalThis.__codexQaLastDownload = { filename, blob }; const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); const statusLine = document.getElementById("status-line-deploy"); statusLine.innerHTML = `✓ Bundle Downloaded (${filename})`; setTimeout(() => { statusLine.innerHTML = ` 100% Free of Platform Lock-in `; }, 3500); } // Initial boot window.addEventListener("DOMContentLoaded", () => { renderBlocksList(); renderInspector(); renderCanvas(); updateCodeInspector(); });