Code → Photo Showcase
Run ID: 69b472b6183466b44edaf7bd•2026-03-29Development
PantheraHive BOS
BOS Dashboard

Generate code from description, create project structure, and take a photo of the result


{
  "title": "React Calculator",
  "language": "html",
  "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>React Calculator</title>\n    <!-- React CDN -->\n    <script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n    <script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n    <!-- Babel CDN for JSX transformation -->\n    <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n    <style>\n        body {\n            font-family: 'Arial', sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #f0f2f5;\n            margin: 0;\n        }\n        .calculator {\n            border: 1px solid #ccc;\n            border-radius: 10px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            width: 300px;\n            background-color: #fff;\n            padding: 20px;\n        }\n        .calculator-display {\n            background-color: #222;\n            color: #fff;\n            font-size: 2.5em;\n            padding: 15px;\n            text-align: right;\n            border-radius: 5px;\n            margin-bottom: 15px;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n        }\n        .calculator-buttons {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 10px;\n        }\n        .calculator-button {\n            background-color: #e0e0e0;\n            border: none;\n            border-radius: 5px;\n            padding: 20px;\n            font-size: 1.5em;\n            cursor: pointer;\n            transition: background-color 0.2s ease;\n        }\n        .calculator-button:hover {\n            background-color: #d0d0d0;\n        }\n        .calculator-button.operator {\n            background-color: #f7923b;\n            color: #fff;\n        }\n        .calculator-button.operator:hover {\n            background-color: #e6812a;\n        }\n        .calculator-button.clear {\n            background-color: #dc3545;\n            color: #fff;\n        }\n        .calculator-button.clear:hover {\n            background-color: #c82333;\n        }\n        .calculator-button.equals {\n            background-color: #28a745;\n            color: #fff;\n            grid-column: span 2;\n        }\n        .calculator-button.equals:hover {\n            background-color: #218838;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n\n    <script type=\"text/babel\">\n        const { useState } = React;\n\n        function Calculator() {\n            const [displayValue, setDisplayValue] = useState('0');\n            const [currentValue, setCurrentValue] = useState(null);\n
Step 2

{
  "title": "React Calculator",
  "language": "html",
  "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>React Calculator</title>\n    <!-- React CDN -->\n    <script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n    <script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n    <!-- Babel CDN for JSX transformation in the browser -->\n    <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n    <style>\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #e0e0e0;\n            margin: 0;\n        }\n        .calculator {\n            border: 1px solid #b0b0b0;\n            border-radius: 12px;\n            box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n            width: 320px;\n            background-color: #f5f5f5;\n            padding: 20px;\n        }\n        .calculator-display {\n            background-color: #222;\n            color: #fff;\n            font-size: 2.8em;\n            padding: 15px 20px;\n            text-align: right;\n            border-radius: 8px;\n            margin-bottom: 20px;\n            min-height: 60px;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n            overflow-x: auto;\n            white-space: nowrap;\n        }\n        .calculator-buttons {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 12px;\n        }\n        .calculator-buttons button {\n            width: 100%;\n            padding: 20px;\n            font-size: 1.6em;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            background-color: #e8e8e8;\n            transition: background-color 0.2s, transform 0.1s;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .calculator-buttons button:hover {\n            background-color: #dcdcdc;\n            transform: translateY(-1px);\n        }\n        .calculator-buttons button:active {\n            transform: translateY(0);\n            box-shadow: 0 1px 2px rgba(0,0,0,0.1);\n        }\n        .calculator-buttons button.operator {\n            background-color: #ff9500;\n            color: #fff;\n        }\n        .calculator-buttons button.operator:hover {\n            background-color: #e08000;\n        }\n        .calculator-buttons button.equals {\n            background-color: #007aff;\n            color: #fff;\n        }\n        .calculator-buttons button.equals:hover {\n            background-color: #006ee6;\n        }\n        .calculator-buttons button.clear {\n            background-color: #
code___photo_showcase.md
Download as Markdown
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\\n \\n \\n \\n \\n\\n\\n
\\n\\n \\n \\n \\n \\n "+vc.innerHTML+"":"

No content

";}fr.dataset.loaded="1";}}}function phCopyCode(){navigator.clipboard.writeText(_phCode).then(function(){var b=document.getElementById("tab-code");if(b){var o=b.innerHTML;b.innerHTML=' Copied!';setTimeout(function(){b.innerHTML=o;},2000);}});}function phCopyAll(){navigator.clipboard.writeText(_phAll).then(function(){alert("Content copied to clipboard!");});}function phDownload(){var content=_phCode||_phAll;if(!content){alert("No content to download.");return;}var fn=_phFname;if(!_phCode&&fn.endsWith(".txt"))fn=fn.replace(/\.txt$/,".md");var a=document.createElement("a");a.href="data:text/plain;charset=utf-8,"+encodeURIComponent(content);a.download=fn;a.click();}function phDownloadZip(){ var lbl=document.getElementById("ph-zip-lbl"); if(lbl)lbl.textContent="Preparing\u2026"; /* ===== HELPERS ===== */ function cc(s){ return s.replace(/[_\-\s]+([a-z])/g,function(m,c){return c.toUpperCase();}) .replace(/^[a-z]/,function(m){return m.toUpperCase();}); } function pkgName(app){ return app.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; } function slugTitle(app){ return app.replace(/_/g," "); } /* Generic code block extractor. Finds marker comments like: // lib/main.dart or # lib/main.dart or ## lib/main.dart and collects lines until the next marker. Also strips markdown fences (\`\`\`lang ... \`\`\`) from each block. */ function extractFiles(txt, pathRe){ var files={}, cur=null, buf=[]; function flush(){ if(cur&&buf.length){ files[cur]=buf.join("\n").trim(); } } txt.split("\n").forEach(function(line){ var m=line.trim().match(pathRe); if(m){ flush(); cur=m[1]; buf=[]; return; } if(cur) buf.push(line); }); flush(); // Strip \`\`\`...\`\`\` fences from each file Object.keys(files).forEach(function(k){ files[k]=files[k].replace(/^\`\`\`[a-z]*\n?/,"").replace(/\n?\`\`\`$/,"").trim(); }); return files; } /* General path extractor that covers most languages */ function extractCode(txt){ var re=/^(?:\/\/|#|##)\s*((?:lib|src|test|tests|Sources?|app|components?|screens?|views?|hooks?|routes?|store|services?|models?|pages?)\/[\w\/\-\.]+\.\w+|pubspec\.yaml|Package\.swift|angular\.json|babel\.config\.(?:js|ts)|vite\.config\.(?:js|ts)|tsconfig\.(?:json|app\.json)|app\.json|App\.(?:tsx|jsx|vue|kt|swift)|MainActivity(?:\.kt)?|ContentView\.swift)/i; return extractFiles(txt, re); } /* Detect language from combined code+panel text */ function detectLang(code, panel){ var t=(code+" "+panel).toLowerCase(); if(t.indexOf("import 'package:flutter")>=0||t.indexOf('import "package:flutter')>=0) return "flutter"; if(t.indexOf("statelesswidget")>=0||t.indexOf("statefulwidget")>=0) return "flutter"; if((t.indexOf(".dart")>=0)&&(t.indexOf("pubspec")>=0||t.indexOf("flutter:")>=0)) return "flutter"; if(t.indexOf("react-native")>=0||t.indexOf("react_native")>=0) return "react-native"; if(t.indexOf("stylesheet.create")>=0||t.indexOf("view, text, touchableopacity")>=0) return "react-native"; if(t.indexOf("expo(")>=0||t.indexOf("\"expo\":")>=0||t.indexOf("from 'expo")>=0) return "react-native"; if(t.indexOf("import swiftui")>=0||t.indexOf("import uikit")>=0) return "swift"; if(t.indexOf(".swift")>=0&&(t.indexOf("func body")>=0||t.indexOf("@main")>=0||t.indexOf("var body: some view")>=0)) return "swift"; if(t.indexOf("import android.")>=0||t.indexOf("package com.example")>=0) return "kotlin"; if(t.indexOf("@composable")>=0||t.indexOf("fun mainactivity")>=0||(t.indexOf(".kt")>=0&&t.indexOf("androidx")>=0)) return "kotlin"; if(t.indexOf("@ngmodule")>=0||t.indexOf("@component")>=0) return "angular"; if(t.indexOf("angular.json")>=0||t.indexOf("from '@angular")>=0) return "angular"; if(t.indexOf(".vue")>=0||t.indexOf("