|
<!DOCTYPE html> |
|
<html lang="en" class="h-full"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Code2APK Pro - Advanced Code to APK Converter</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet"> |
|
<script> |
|
tailwind.config = { |
|
darkMode: 'class', |
|
theme: { |
|
extend: { |
|
colors: { |
|
primary: { |
|
50: '#f0f9ff', |
|
100: '#e0f2fe', |
|
200: '#bae6fd', |
|
300: '#7dd3fc', |
|
400: '#38bdf8', |
|
500: '#0ea5e9', |
|
600: '#0284c7', |
|
700: '#0369a1', |
|
800: '#075985', |
|
900: '#0c4a6e', |
|
}, |
|
secondary: { |
|
50: '#f5f3ff', |
|
100: '#ede9fe', |
|
200: '#ddd6fe', |
|
300: '#c4b5fd', |
|
400: '#a78bfa', |
|
500: '#8b5cf6', |
|
600: '#7c3aed', |
|
700: '#6d28d9', |
|
800: '#5b21b6', |
|
900: '#4c1d95', |
|
}, |
|
accent: { |
|
50: '#f0fdf4', |
|
100: '#dcfce7', |
|
200: '#bbf7d0', |
|
300: '#86efac', |
|
400: '#4ade80', |
|
500: '#22c55e', |
|
600: '#16a34a', |
|
700: '#15803d', |
|
800: '#166534', |
|
900: '#14532d', |
|
} |
|
}, |
|
fontFamily: { |
|
'code': ['Fira Code', 'monospace'] |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
.code-editor { |
|
font-family: 'Fira Code', 'Courier New', monospace; |
|
min-height: 300px; |
|
tab-size: 2; |
|
} |
|
.dropdown:hover .dropdown-menu { |
|
display: block; |
|
} |
|
.slide-fade-enter-active { |
|
transition: all 0.3s ease-out; |
|
} |
|
.slide-fade-leave-active { |
|
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); |
|
} |
|
.slide-fade-enter-from, |
|
.slide-fade-leave-to { |
|
transform: translateX(20px); |
|
opacity: 0; |
|
} |
|
.progress-bar { |
|
transition: width 0.5s ease-in-out; |
|
} |
|
.toast { |
|
animation: fadeIn 0.3s, fadeOut 0.5s 2.5s; |
|
} |
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(10px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
@keyframes fadeOut { |
|
from { opacity: 1; transform: translateY(0); } |
|
to { opacity: 0; transform: translateY(-10px); } |
|
} |
|
.floating-btn { |
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
transition: all 0.3s ease; |
|
} |
|
.floating-btn:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
} |
|
.app-preview { |
|
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), |
|
linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), |
|
linear-gradient(45deg, transparent 75%, #f5f5f5 75%), |
|
linear-gradient(-45deg, transparent 75%, #f5f5f5 75%); |
|
background-size: 20px 20px; |
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; |
|
} |
|
.dark .app-preview { |
|
background-image: linear-gradient(45deg, #1f2937 25%, transparent 25%), |
|
linear-gradient(-45deg, #1f2937 25%, transparent 25%), |
|
linear-gradient(45deg, transparent 75%, #1f2937 75%), |
|
linear-gradient(-45deg, transparent 75%, #1f2937 75%); |
|
} |
|
.code-line-numbers { |
|
counter-reset: line; |
|
} |
|
.code-line-numbers > div:before { |
|
counter-increment: line; |
|
content: counter(line); |
|
display: inline-block; |
|
width: 2em; |
|
margin-right: 1em; |
|
text-align: right; |
|
color: #6b7280; |
|
} |
|
.syntax-highlight { |
|
background-color: rgba(255, 230, 0, 0.2); |
|
border-radius: 2px; |
|
} |
|
.token-line.highlight-line { |
|
background-color: rgba(59, 130, 246, 0.1); |
|
} |
|
.editor-toolbar { |
|
scrollbar-width: thin; |
|
scrollbar-color: #9ca3af #f3f4f6; |
|
} |
|
.dark .editor-toolbar { |
|
scrollbar-color: #4b5563 #1f2937; |
|
} |
|
.editor-toolbar::-webkit-scrollbar { |
|
height: 6px; |
|
} |
|
.editor-toolbar::-webkit-scrollbar-track { |
|
background: #f3f4f6; |
|
} |
|
.dark .editor-toolbar::-webkit-scrollbar-track { |
|
background: #1f2937; |
|
} |
|
.editor-toolbar::-webkit-scrollbar-thumb { |
|
background-color: #9ca3af; |
|
border-radius: 3px; |
|
} |
|
.dark .editor-toolbar::-webkit-scrollbar-thumb { |
|
background-color: #4b5563; |
|
} |
|
.animate-pulse { |
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
} |
|
@keyframes pulse { |
|
0%, 100% { opacity: 1; } |
|
50% { opacity: 0.5; } |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 h-full"> |
|
<div class="min-h-full flex flex-col"> |
|
|
|
<header class="bg-gradient-to-r from-primary-600 to-primary-800 dark:from-primary-800 dark:to-primary-900 text-white shadow-lg"> |
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
<div class="flex items-center space-x-3"> |
|
<div class="w-8 h-8 bg-white rounded-md flex items-center justify-center"> |
|
<i class="fas fa-code text-primary-600 text-lg"></i> |
|
</div> |
|
<h1 class="text-xl font-bold">Code2APK <span class="text-xs bg-accent-500 text-white px-2 py-1 rounded-full ml-1">PRO</span></h1> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-primary-500 dark:hover:bg-primary-700 transition-colors"> |
|
<i class="fas fa-moon dark:hidden"></i> |
|
<i class="fas fa-sun hidden dark:block"></i> |
|
</button> |
|
<div class="dropdown relative"> |
|
<button class="p-2 rounded-full hover:bg-primary-500 dark:hover:bg-primary-700 transition-colors"> |
|
<i class="fas fa-language text-xl"></i> |
|
</button> |
|
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden border border-gray-200 dark:border-gray-700"> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="en"> |
|
<span class="w-5 mr-2">🇬🇧</span> English |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="es"> |
|
<span class="w-5 mr-2">🇪🇸</span> Español |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="fr"> |
|
<span class="w-5 mr-2">🇫🇷</span> Français |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="ar"> |
|
<span class="w-5 mr-2">🇸🇦</span> العربية |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="zh"> |
|
<span class="w-5 mr-2">🇨🇳</span> 中文 |
|
</a> |
|
</div> |
|
</div> |
|
<button id="settings-btn" class="p-2 rounded-full hover:bg-primary-500 dark:hover:bg-primary-700 transition-colors"> |
|
<i class="fas fa-cog text-xl"></i> |
|
</button> |
|
<button id="user-btn" class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center"> |
|
<i class="fas fa-user text-white"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="flex-1 container mx-auto px-4 py-6"> |
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700"> |
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
<i class="fas fa-info-circle mr-2 text-primary-500"></i> |
|
Project Information |
|
</h2> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="app-name" class="block text-sm font-medium mb-1">App Name</label> |
|
<input type="text" id="app-name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="My Awesome App" value="MyApp"> |
|
</div> |
|
<div class="grid grid-cols-2 gap-4"> |
|
<div> |
|
<label for="app-version" class="block text-sm font-medium mb-1">Version</label> |
|
<input type="text" id="app-version" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="1.0.0" value="1.0.0"> |
|
</div> |
|
<div> |
|
<label for="app-version-code" class="block text-sm font-medium mb-1">Version Code</label> |
|
<input type="number" id="app-version-code" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="1" value="1"> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="app-package" class="block text-sm font-medium mb-1">Package Name</label> |
|
<input type="text" id="app-package" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="com.example.myapp" value="com.example.myapp"> |
|
</div> |
|
<div> |
|
<label class="block text-sm font-medium mb-1">App Icon</label> |
|
<div class="flex items-center space-x-4"> |
|
<div class="w-16 h-16 rounded-lg bg-gray-200 dark:bg-gray-600 flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-500"> |
|
<img id="app-icon-preview" src="https://via.placeholder.com/64" alt="App Icon" class="w-full h-full object-cover hidden"> |
|
<i class="fas fa-mobile-alt text-gray-400 text-2xl" id="app-icon-placeholder"></i> |
|
</div> |
|
<div class="flex-1"> |
|
<input type="file" id="app-icon" class="hidden" accept="image/*"> |
|
<button id="upload-icon-btn" class="px-3 py-1 bg-primary-500 hover:bg-primary-600 text-white rounded-md text-sm transition-colors"> |
|
<i class="fas fa-upload mr-1"></i> |
|
Upload Icon |
|
</button> |
|
<button id="generate-icon-btn" class="mt-2 px-3 py-1 bg-secondary-500 hover:bg-secondary-600 text-white rounded-md text-sm transition-colors w-full"> |
|
<i class="fas fa-magic mr-1"></i> |
|
Generate with AI |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="app-splash-color" class="block text-sm font-medium mb-1">Splash Screen Color</label> |
|
<div class="flex items-center"> |
|
<input type="color" id="app-splash-color" class="w-8 h-8 rounded border border-gray-300 dark:border-gray-600 cursor-pointer" value="#0ea5e9"> |
|
<span id="splash-color-value" class="ml-2 text-sm">#0ea5e9</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700"> |
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
<i class="fas fa-robot mr-2 text-secondary-500"></i> |
|
AI Code Generation |
|
</h2> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="ai-model" class="block text-sm font-medium mb-1">AI Model</label> |
|
<select id="ai-model" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="deepseek">DeepSeek-V3</option> |
|
<option value="chatgpt">ChatGPT-4</option> |
|
<option value="gemini">Gemini Pro</option> |
|
<option value="qwen">Qwen-72B</option> |
|
<option value="claude">Claude 3</option> |
|
<option value="llama">Llama 3</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="ai-prompt" class="block text-sm font-medium mb-1">Describe Your App</label> |
|
<textarea id="ai-prompt" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="Describe the app you want to create..."></textarea> |
|
</div> |
|
<div class="grid grid-cols-2 gap-2"> |
|
<button id="generate-code-btn" class="px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-md flex items-center justify-center transition-colors"> |
|
<i class="fas fa-magic mr-2"></i> |
|
Generate Code |
|
</button> |
|
<button id="optimize-code-btn" class="px-4 py-2 bg-accent-500 hover:bg-accent-600 text-white rounded-md flex items-center justify-center transition-colors"> |
|
<i class="fas fa-bolt mr-2"></i> |
|
Optimize |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h2 class="text-lg font-semibold flex items-center"> |
|
<i class="fas fa-layer-group mr-2 text-primary-500"></i> |
|
Templates & Snippets |
|
</h2> |
|
<button id="save-template-btn" class="px-2 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-save mr-1"></i> |
|
Save |
|
</button> |
|
</div> |
|
<div class="editor-toolbar flex overflow-x-auto pb-2 space-x-2"> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="calculator"> |
|
<i class="fas fa-calculator text-primary-500 text-lg mb-1"></i> |
|
Calculator |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="todo"> |
|
<i class="fas fa-tasks text-primary-500 text-lg mb-1"></i> |
|
To-Do List |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="weather"> |
|
<i class="fas fa-cloud-sun text-primary-500 text-lg mb-1"></i> |
|
Weather App |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="news"> |
|
<i class="fas fa-newspaper text-primary-500 text-lg mb-1"></i> |
|
News Reader |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="chat"> |
|
<i class="fas fa-comments text-primary-500 text-lg mb-1"></i> |
|
Chat App |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="ecommerce"> |
|
<i class="fas fa-shopping-cart text-primary-500 text-lg mb-1"></i> |
|
E-commerce |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="login"> |
|
<i class="fas fa-sign-in-alt text-primary-500 text-lg mb-1"></i> |
|
Login Screen |
|
</button> |
|
<button class="template-btn p-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-sm flex flex-col items-center min-w-[70px] transition-colors" data-template="settings"> |
|
<i class="fas fa-cog text-primary-500 text-lg mb-1"></i> |
|
Settings |
|
</button> |
|
</div> |
|
<div class="mt-4"> |
|
<label for="code-snippets" class="block text-sm font-medium mb-1">Code Snippets</label> |
|
<select id="code-snippets" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="">Select a snippet...</option> |
|
<option value="http-request">HTTP Request</option> |
|
<option value="local-storage">Local Storage</option> |
|
<option value="navigation">Navigation</option> |
|
<option value="database">Database</option> |
|
<option value="camera">Camera Access</option> |
|
<option value="location">Location</option> |
|
<option value="notifications">Notifications</option> |
|
<option value="animation">Animation</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700"> |
|
<div class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex justify-between items-center"> |
|
<h2 class="text-lg font-semibold flex items-center"> |
|
<i class="fas fa-code mr-2 text-primary-500"></i> |
|
<span id="editor-title">Code Editor</span> |
|
<span id="file-name" class="ml-2 text-sm text-gray-500 dark:text-gray-400">(untitled.js)</span> |
|
</h2> |
|
<div class="flex items-center space-x-2"> |
|
<div class="dropdown relative"> |
|
<button id="language-selector" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm flex items-center transition-colors"> |
|
<span id="selected-language">JavaScript</span> |
|
<i class="fas fa-chevron-down ml-2 text-xs"></i> |
|
</button> |
|
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 hidden border border-gray-200 dark:border-gray-700"> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="javascript"> |
|
<i class="fab fa-js-square text-yellow-500 mr-2"></i> JavaScript |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="typescript"> |
|
<i class="fas fa-code text-blue-500 mr-2"></i> TypeScript |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="python"> |
|
<i class="fab fa-python text-blue-400 mr-2"></i> Python |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="java"> |
|
<i class="fab fa-java text-red-500 mr-2"></i> Java |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="kotlin"> |
|
<i class="fas fa-mobile-alt text-purple-500 mr-2"></i> Kotlin |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="swift"> |
|
<i class="fab fa-swift text-orange-500 mr-2"></i> Swift |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="dart"> |
|
<i class="fas fa-bolt text-blue-300 mr-2"></i> Dart |
|
</a> |
|
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center" data-lang="html"> |
|
<i class="fab fa-html5 text-orange-500 mr-2"></i> HTML |
|
</a> |
|
</div> |
|
</div> |
|
<button id="validate-code-btn" class="px-3 py-1 bg-yellow-500 hover:bg-yellow-600 text-white rounded-md text-sm transition-colors"> |
|
<i class="fas fa-check-circle mr-1"></i> |
|
Validate |
|
</button> |
|
<button id="reset-code-btn" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-redo mr-1"></i> |
|
Reset |
|
</button> |
|
<button id="new-file-btn" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-file mr-1"></i> |
|
New |
|
</button> |
|
</div> |
|
</div> |
|
<div class="p-1"> |
|
<div id="code-editor" class="code-editor w-full h-96 p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 overflow-auto font-code" contenteditable="true" spellcheck="false" data-gramm="false">// Enter your code here |
|
// Example JavaScript code |
|
function greet(name) { |
|
return `Hello, ${name}!`; |
|
} |
|
|
|
console.log(greet("World"));</div> |
|
</div> |
|
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-3 flex justify-between items-center"> |
|
<div class="text-sm text-gray-500 dark:text-gray-400"> |
|
<span id="line-count">1</span> lines | |
|
<span id="char-count">0</span> characters | |
|
<span id="file-size">0 KB</span> |
|
</div> |
|
<div class="flex items-center space-x-2"> |
|
<button id="format-code-btn" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-indent mr-1"></i> |
|
Format |
|
</button> |
|
<button id="analyze-code-btn" class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm transition-colors"> |
|
<i class="fas fa-search mr-1"></i> |
|
Analyze |
|
</button> |
|
<button id="debug-code-btn" class="px-3 py-1 bg-purple-500 hover:bg-purple-600 text-white rounded-md text-sm transition-colors"> |
|
<i class="fas fa-bug mr-1"></i> |
|
Debug |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700"> |
|
<h2 class="text-lg font-semibold mb-4 flex items-center"> |
|
<i class="fas fa-exchange-alt mr-2 text-primary-500"></i> |
|
Conversion & Build Options |
|
</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div> |
|
<label for="target-platform" class="block text-sm font-medium mb-1">Target Platform</label> |
|
<select id="target-platform" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="android">Android (APK)</option> |
|
<option value="ios">iOS (IPA)</option> |
|
<option value="web">Web App (PWA)</option> |
|
<option value="windows">Windows</option> |
|
<option value="macos">macOS</option> |
|
<option value="linux">Linux</option> |
|
<option value="cross-platform">Cross-Platform</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="target-language" class="block text-sm font-medium mb-1">Convert To Language</label> |
|
<select id="target-language" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="original">Keep Original</option> |
|
<option value="javascript">JavaScript</option> |
|
<option value="typescript">TypeScript</option> |
|
<option value="python">Python</option> |
|
<option value="java">Java</option> |
|
<option value="kotlin">Kotlin</option> |
|
<option value="swift">Swift</option> |
|
<option value="dart">Dart</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="build-mode" class="block text-sm font-medium mb-1">Build Mode</label> |
|
<select id="build-mode" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="debug">Debug</option> |
|
<option value="release">Release</option> |
|
<option value="optimized">Optimized</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="build-architecture" class="block text-sm font-medium mb-1">Architecture</label> |
|
<select id="build-architecture" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="universal">Universal</option> |
|
<option value="arm64">ARM64</option> |
|
<option value="x86">x86</option> |
|
<option value="x86_64">x86_64</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div class="mt-4 flex flex-wrap gap-3"> |
|
<button id="convert-code-btn" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-md flex items-center transition-colors"> |
|
<i class="fas fa-code mr-2"></i> |
|
Convert Code |
|
</button> |
|
<div class="relative"> |
|
<button id="convert-zip-btn" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md flex items-center transition-colors"> |
|
<i class="fas fa-file-archive mr-2"></i> |
|
Convert Project |
|
</button> |
|
<input type="file" id="zip-file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".zip,.tar.gz,.rar,.7z"> |
|
</div> |
|
<button id="build-apk-btn" class="px-4 py-2 bg-secondary-500 hover:bg-secondary-600 text-white rounded-md flex items-center transition-colors"> |
|
<i class="fas fa-android mr-2"></i> |
|
Build APK |
|
</button> |
|
<button id="preview-app-btn" class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-md flex items-center transition-colors"> |
|
<i class="fas fa-eye mr-2"></i> |
|
Preview App |
|
</button> |
|
<button id="export-project-btn" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-md flex items-center transition-colors"> |
|
<i class="fas fa-file-export mr-2"></i> |
|
Export Project |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700"> |
|
<div class="flex items-center justify-between mb-4"> |
|
<h2 class="text-lg font-semibold flex items-center"> |
|
<i class="fas fa-tasks mr-2 text-primary-500"></i> |
|
Conversion Status |
|
</h2> |
|
<div class="flex items-center space-x-2"> |
|
<button id="clear-status-btn" class="px-2 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-trash-alt mr-1"></i> |
|
Clear |
|
</button> |
|
<button id="expand-output-btn" class="px-2 py-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md text-sm transition-colors"> |
|
<i class="fas fa-expand mr-1"></i> |
|
Expand |
|
</button> |
|
</div> |
|
</div> |
|
<div id="status-container" class="space-y-4"> |
|
<div id="progress-container" class="hidden"> |
|
<div class="flex justify-between text-sm mb-1"> |
|
<span id="progress-status">Processing...</span> |
|
<span id="progress-percent">0%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> |
|
<div id="progress-bar" class="progress-bar bg-primary-500 h-2.5 rounded-full" style="width: 0%"></div> |
|
</div> |
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
<span id="progress-time">00:00:00</span> |
|
<span id="progress-speed">0 KB/s</span> |
|
</div> |
|
</div> |
|
<div id="status-message" class="p-3 bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md text-sm hidden"> |
|
<i class="fas fa-info-circle mr-2"></i> |
|
<span id="status-text">Ready to convert your code</span> |
|
</div> |
|
<div id="error-message" class="p-3 bg-red-50 dark:bg-red-900 text-red-800 dark:text-red-200 rounded-md text-sm hidden"> |
|
<i class="fas fa-exclamation-circle mr-2"></i> |
|
<span id="error-text">An error occurred during conversion</span> |
|
<button id="show-error-details" class="ml-2 text-sm underline">Show details</button> |
|
<div id="error-details" class="mt-2 hidden p-2 bg-red-100 dark:bg-red-800 rounded text-xs overflow-auto max-h-32 font-mono"></div> |
|
</div> |
|
<div id="success-message" class="p-3 bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-md text-sm hidden"> |
|
<i class="fas fa-check-circle mr-2"></i> |
|
<span id="success-text">Conversion successful!</span> |
|
<button id="download-apk-btn" class="ml-2 px-2 py-1 bg-green-500 hover:bg-green-600 text-white rounded text-sm transition-colors"> |
|
<i class="fas fa-download mr-1"></i> |
|
Download APK |
|
</button> |
|
<button id="share-app-btn" class="ml-2 px-2 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"> |
|
<i class="fas fa-share-alt mr-1"></i> |
|
Share |
|
</button> |
|
</div> |
|
<div id="output-container" class="hidden"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h3 class="font-medium">Output Log</h3> |
|
<button id="clear-output-btn" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
<i class="fas fa-trash-alt mr-1"></i> |
|
Clear |
|
</button> |
|
</div> |
|
<div id="output-log" class="bg-gray-50 dark:bg-gray-700 p-3 rounded-md text-xs font-mono overflow-auto max-h-32"></div> |
|
</div> |
|
<div id="analysis-container" class="hidden"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h3 class="font-medium">Code Analysis</h3> |
|
<button id="clear-analysis-btn" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
<i class="fas fa-trash-alt mr-1"></i> |
|
Clear |
|
</button> |
|
</div> |
|
<div id="analysis-results" class="bg-gray-50 dark:bg-gray-700 p-3 rounded-md text-xs overflow-auto max-h-32"> |
|
<div class="grid grid-cols-1 gap-2"> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 h-5 w-5 text-green-500"> |
|
<i class="fas fa-check-circle"></i> |
|
</div> |
|
<div class="ml-2"> |
|
<p class="text-sm font-medium">No syntax errors found</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 h-5 w-5 text-yellow-500"> |
|
<i class="fas fa-exclamation-triangle"></i> |
|
</div> |
|
<div class="ml-2"> |
|
<p class="text-sm font-medium">2 potential optimizations available</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="flex-shrink-0 h-5 w-5 text-blue-500"> |
|
<i class="fas fa-info-circle"></i> |
|
</div> |
|
<div class="ml-2"> |
|
<p class="text-sm font-medium">Code complexity: Medium (score: 15/100)</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<div class="fixed bottom-6 right-6 space-y-3"> |
|
<button id="history-btn" class="floating-btn w-12 h-12 bg-primary-500 hover:bg-primary-600 text-white rounded-full flex items-center justify-center shadow-lg transition-colors"> |
|
<i class="fas fa-history text-xl"></i> |
|
</button> |
|
<button id="git-push-btn" class="floating-btn w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white rounded-full flex items-center justify-center shadow-lg transition-colors"> |
|
<i class="fab fa-git-alt text-xl"></i> |
|
</button> |
|
<button id="terminal-btn" class="floating-btn w-12 h-12 bg-gray-800 hover:bg-gray-900 text-white rounded-full flex items-center justify-center shadow-lg transition-colors"> |
|
<i class="fas fa-terminal text-xl"></i> |
|
</button> |
|
<button id="help-btn" class="floating-btn w-12 h-12 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg transition-colors"> |
|
<i class="fas fa-question text-xl"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div id="terminal-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl h-[70vh] flex flex-col border border-gray-200 dark:border-gray-700"> |
|
<div class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex justify-between items-center"> |
|
<h3 class="text-lg font-semibold flex items-center"> |
|
<i class="fas fa-terminal mr-2 text-primary-500"></i> |
|
Terminal |
|
</h3> |
|
<button id="close-terminal-btn" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<div id="terminal-content" class="flex-1 p-4 bg-black text-green-400 font-mono text-sm overflow-auto"> |
|
<div class="mb-2">Code2APK Terminal v1.0.0</div> |
|
<div class="mb-2">Type 'help' for available commands</div> |
|
<div class="flex items-center"> |
|
<span class="text-green-500 mr-2">$</span> |
|
<input id="terminal-input" class="bg-transparent border-none outline-none flex-1 text-green-400" autofocus> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto border border-gray-200 dark:border-gray-700"> |
|
<div class="border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center"> |
|
<h3 class="text-lg font-semibold">Settings</h3> |
|
<button id="close-settings-btn" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<div class="p-6"> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
<div class="md:col-span-1"> |
|
<div class="space-y-1"> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-200 font-medium" data-tab="appearance"> |
|
<i class="fas fa-palette mr-2"></i> Appearance |
|
</button> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" data-tab="editor"> |
|
<i class="fas fa-code mr-2"></i> Editor |
|
</button> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" data-tab="build"> |
|
<i class="fas fa-cogs mr-2"></i> Build Settings |
|
</button> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" data-tab="ai"> |
|
<i class="fas fa-robot mr-2"></i> AI Configuration |
|
</button> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" data-tab="git"> |
|
<i class="fab fa-git-alt mr-2"></i> Git Integration |
|
</button> |
|
<button class="settings-tab-btn w-full px-4 py-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-700" data-tab="advanced"> |
|
<i class="fas fa-sliders-h mr-2"></i> Advanced |
|
</button> |
|
</div> |
|
</div> |
|
<div class="md:col-span-2"> |
|
<div id="appearance-tab" class="settings-tab-content space-y-6"> |
|
<h4 class="font-medium text-lg">Appearance</h4> |
|
<div class="space-y-4"> |
|
<div class="flex items-center justify-between"> |
|
<span>Dark Mode</span> |
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
<input type="checkbox" id="dark-mode-toggle" class="sr-only peer"> |
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600"></div> |
|
</label> |
|
</div> |
|
<div> |
|
<label for="app-theme" class="block mb-2">Application Theme</label> |
|
<select id="app-theme" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="default">Default</option> |
|
<option value="blue">Blue</option> |
|
<option value="indigo">Indigo</option> |
|
<option value="purple">Purple</option> |
|
<option value="teal">Teal</option> |
|
<option value="orange">Orange</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="ui-density" class="block mb-2">UI Density</label> |
|
<select id="ui-density" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="compact">Compact</option> |
|
<option value="normal" selected>Normal</option> |
|
<option value="spacious">Spacious</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="font-family" class="block mb-2">Font Family</label> |
|
<select id="font-family" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="system">System Default</option> |
|
<option value="inter">Inter</option> |
|
<option value="roboto">Roboto</option> |
|
<option value="open-sans">Open Sans</option> |
|
<option value="fira-sans">Fira Sans</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="editor-tab" class="settings-tab-content space-y-6 hidden"> |
|
<h4 class="font-medium text-lg">Editor Settings</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="editor-font-size" class="block mb-2">Font Size</label> |
|
<select id="editor-font-size" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="12">12px</option> |
|
<option value="14" selected>14px</option> |
|
<option value="16">16px</option> |
|
<option value="18">18px</option> |
|
<option value="20">20px</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="editor-theme" class="block mb-2">Editor Theme</label> |
|
<select id="editor-theme" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="light">Light</option> |
|
<option value="dark">Dark</option> |
|
<option value="solarized">Solarized</option> |
|
<option value="monokai">Monokai</option> |
|
<option value="dracula">Dracula</option> |
|
<option value="github">GitHub</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="tab-size" class="block mb-2">Tab Size</label> |
|
<select id="tab-size" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="2">2 spaces</option> |
|
<option value="4" selected>4 spaces</option> |
|
<option value="8">8 spaces</option> |
|
<option value="tab">Tab character</option> |
|
</select> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="line-numbers" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="line-numbers" class="ml-2 text-sm">Show line numbers</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="auto-close-brackets" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="auto-close-brackets" class="ml-2 text-sm">Auto-close brackets</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="auto-format" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="auto-format" class="ml-2 text-sm">Auto-format on save</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="build-tab" class="settings-tab-content space-y-6 hidden"> |
|
<h4 class="font-medium text-lg">Build Settings</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="min-sdk" class="block mb-2">Minimum SDK Version</label> |
|
<select id="min-sdk" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="21">Android 5.0 (Lollipop)</option> |
|
<option value="23" selected>Android 6.0 (Marshmallow)</option> |
|
<option value="26">Android 8.0 (Oreo)</option> |
|
<option value="28">Android 9.0 (Pie)</option> |
|
<option value="30">Android 11</option> |
|
<option value="31">Android 12</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="target-sdk" class="block mb-2">Target SDK Version</label> |
|
<select id="target-sdk" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="30">Android 11</option> |
|
<option value="31">Android 12</option> |
|
<option value="32">Android 12L</option> |
|
<option value="33" selected>Android 13</option> |
|
<option value="34">Android 14</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label class="block mb-2">Permissions</label> |
|
<div class="grid grid-cols-2 gap-2"> |
|
<div class="flex items-center"> |
|
<input id="perm-internet" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="perm-internet" class="ml-2 text-sm">Internet</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="perm-storage" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="perm-storage" class="ml-2 text-sm">Storage</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="perm-location" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="perm-location" class="ml-2 text-sm">Location</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="perm-camera" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="perm-camera" class="ml-2 text-sm">Camera</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="perm-microphone" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="perm-microphone" class="ml-2 text-sm">Microphone</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="perm-notifications" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="perm-notifications" class="ml-2 text-sm">Notifications</label> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="build-optimization" class="block mb-2">Optimization Level</label> |
|
<select id="build-optimization" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="none">None</option> |
|
<option value="basic">Basic</option> |
|
<option value="advanced" selected>Advanced</option> |
|
<option value="maximum">Maximum</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="build-timeout" class="block mb-2">Build Timeout (minutes)</label> |
|
<input type="number" id="build-timeout" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" min="1" max="60" value="10"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="ai-tab" class="settings-tab-content space-y-6 hidden"> |
|
<h4 class="font-medium text-lg">AI Configuration</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="api-key" class="block mb-2">API Key</label> |
|
<div class="flex"> |
|
<input type="password" id="api-key" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="Enter your API key"> |
|
<button id="toggle-api-key" class="px-3 py-2 bg-gray-200 dark:bg-gray-600 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md"> |
|
<i class="fas fa-eye"></i> |
|
</button> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="ai-provider" class="block mb-2">Default AI Provider</label> |
|
<select id="ai-provider" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="openai">OpenAI</option> |
|
<option value="anthropic">Anthropic</option> |
|
<option value="google">Google</option> |
|
<option value="deepseek">DeepSeek</option> |
|
<option value="custom">Custom Endpoint</option> |
|
</select> |
|
</div> |
|
<div id="custom-endpoint-container" class="hidden"> |
|
<label for="custom-endpoint" class="block mb-2">Custom Endpoint</label> |
|
<input type="text" id="custom-endpoint" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="https://api.example.com/v1/chat"> |
|
</div> |
|
<div> |
|
<label for="ai-model-default" class="block mb-2">Default Model</label> |
|
<select id="ai-model-default" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="gpt-4">GPT-4</option> |
|
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option> |
|
<option value="claude-3">Claude 3</option> |
|
<option value="gemini-pro">Gemini Pro</option> |
|
</select> |
|
</div> |
|
<div> |
|
<label for="ai-temperature" class="block mb-2">Creativity (Temperature)</label> |
|
<input type="range" id="ai-temperature" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400"> |
|
<span>Precise</span> |
|
<span>Balanced</span> |
|
<span>Creative</span> |
|
</div> |
|
</div> |
|
<div> |
|
<label for="ai-max-tokens" class="block mb-2">Max Tokens</label> |
|
<input type="number" id="ai-max-tokens" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" min="100" max="8000" value="2000"> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="ai-code-completion" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="ai-code-completion" class="ml-2 text-sm">Enable AI Code Completion</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="git-tab" class="settings-tab-content space-y-6 hidden"> |
|
<h4 class="font-medium text-lg">Git Integration</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="git-username" class="block mb-2">Username</label> |
|
<input type="text" id="git-username" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="Your Git username"> |
|
</div> |
|
<div> |
|
<label for="git-email" class="block mb-2">Email</label> |
|
<input type="email" id="git-email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="Your Git email"> |
|
</div> |
|
<div> |
|
<label for="git-repo" class="block mb-2">Default Repository</label> |
|
<input type="text" id="git-repo" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="https://github.com/username/repo.git"> |
|
</div> |
|
<div> |
|
<label for="git-branch" class="block mb-2">Default Branch</label> |
|
<input type="text" id="git-branch" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="main" value="main"> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="git-auto-commit" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="git-auto-commit" class="ml-2 text-sm">Auto-commit changes</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="git-auto-push" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> |
|
<label for="git-auto-push" class="ml-2 text-sm">Auto-push to remote</label> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="advanced-tab" class="settings-tab-content space-y-6 hidden"> |
|
<h4 class="font-medium text-lg">Advanced Settings</h4> |
|
<div class="space-y-4"> |
|
<div> |
|
<label for="compiler-path" class="block mb-2">Compiler Path</label> |
|
<input type="text" id="compiler-path" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="/usr/local/bin/compiler"> |
|
</div> |
|
<div> |
|
<label for="build-cache" class="block mb-2">Build Cache Directory</label> |
|
<input type="text" id="build-cache" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" placeholder="/tmp/code2apk_cache"> |
|
</div> |
|
<div> |
|
<label for="max-memory" class="block mb-2">Max Memory (MB)</label> |
|
<input type="number" id="max-memory" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" min="512" max="8192" value="2048"> |
|
</div> |
|
<div> |
|
<label for="concurrency" class="block mb-2">Concurrency Level</label> |
|
<input type="number" id="concurrency" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700" min="1" max="16" value="4"> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="enable-analytics" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="enable-analytics" class="ml-2 text-sm">Send anonymous usage data</label> |
|
</div> |
|
<div class="flex items-center"> |
|
<input id="enable-error-reports" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked> |
|
<label for="enable-error-reports" class="ml-2 text-sm">Send error reports</label> |
|
</div> |
|
<div> |
|
<label for="log-level" class="block mb-2">Log Level</label> |
|
<select id="log-level" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700"> |
|
<option value="error">Error</option> |
|
<option value="warn">Warning</option> |
|
<option value="info" selected>Info</option> |
|
<option value="debug">Debug</option> |
|
<option value="trace">Trace</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end"> |
|
<button id="cancel-settings-btn" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors mr-2"> |
|
Cancel |
|
</button> |
|
<button id="save-settings-btn" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-md transition-colors"> |
|
Save Settings |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="preview-modal" class="fixed inset-0 bg-black bg |
|
</html> |
