BoobyBoobs/quick-bot-627
0
1=== index.html ===2<!DOCTYPE html>3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>AnyCoder - AI Code Generation IDE</title>8 <link rel="stylesheet" href="assets/css/codemirror.css">9 <link rel="stylesheet" href="assets/css/monokai.css">10 <link rel="stylesheet" href="assets/css/styles.css">11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">12</head>13<body>14 <div class="app-container">15 <header class="header">16 <div class="header-content">17 <h1><i class="fas fa-rocket"></i> AnyCoder</h1>18 <p>Uncensored AI Code Generation IDE with Conversational Assistant</p>19 <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>20 </div>21 </header>22 23 <main class="main-content">24 <div class="tabs">25 <button class="tab-button active" data-tab="editor">26 <i class="fas fa-code"></i> Code Editor27 </button>28 <button class="tab-button" data-tab="assistant">29 <i class="fas fa-robot"></i> AI Assistant30 </button>31 <button class="tab-button" data-tab="files">32 <i class="fas fa-folder"></i> Project Files33 </button>34 <button class="tab-button" data-tab="settings">35 <i class="fas fa-cog"></i> Settings36 </button>37 </div>38 39 <div class="tab-content">40 <!-- Code Editor Tab -->41 <div id="editor" class="tab-panel active">42 <div class="editor-layout">43 <aside class="sidebar">44 <div class="file-manager">45 <h3><i class="fas fa-folder-open"></i> File Manager</h3>46 <div class="file-controls">47 <input type="text" id="newFileName" placeholder="filename.py">48 <button id="createFileBtn"><i class="fas fa-plus"></i> New</button>49 <button id="saveFileBtn"><i class="fas fa-save"></i> Save</button>50 <button id="deleteFileBtn"><i class="fas fa-trash"></i> Delete</button>51 </div>52 <select id="fileList" class="file-select">53 <option value="">Select a file...</option>54 </select>55 </div>56 57 <div class="settings-panel">58 <h3><i class="fas fa-sliders-h"></i> Settings</h3>59 <div class="control-group">60 <label for="languageSelect">Language:</label>61 <select id="languageSelect">62 <option value="python">Python</option>63 <option value="javascript">JavaScript</option>64 <option value="html">HTML</option>65 <option value="css">CSS</option>66 <option value="xml">XML</option>67 </select>68 </div>69 <div class="control-group">70 <button id="runCodeBtn" class="run-btn">71 <i class="fas fa-play"></i> Run Code72 </button>73 <button id="clearEditorBtn" class="clear-btn">74 <i class="fas fa-eraser"></i> Clear75 </button>76 </div>77 </div>78 </aside>79 80 <section class="editor-section">81 <div class="editor-header">82 <h3><i class="fas fa-edit"></i> Code Editor</h3>83 </div>84 <div class="editor-container">85 <textarea id="codeEditor"></textarea>86 </div>87 88 <div class="output-section">89 <div class="output-header">90 <h3><i class="fas fa-terminal"></i> Output</h3>91 <button id="clearOutputBtn" class="clear-btn">92 <i class="fas fa-eraser"></i> Clear93 </button>94 </div>95 <div id="outputDisplay" class="output-display"></div>96 </div>97 </section>98 </div>99 </div>100 101 <!-- AI Assistant Tab -->102 <div id="assistant" class="tab-panel">103 <div class="assistant-layout">104 <div class="chat-section">105 <div class="chat-header">106 <h3><i class="fas fa-comments"></i> Chat with AI</h3>107 <button id="clearChatBtn" class="clear-btn">108 <i class="fas fa-trash"></i> Clear Chat109 </button>110 </div>111 <div id="chatMessages" class="chat-messages"></div>112 <div class="chat-input-section">113 <textarea id="chatInput" placeholder="Ask for code help..."></textarea>114 <button id="sendChatBtn" class="send-btn">115 <i class="fas fa-paper-plane"></i> Send116 </button>117 </div>118 </div>119 120 <div class="tools-section">121 <div class="quick-actions">122 <h3><i class="fas fa-magic"></i> Quick Actions</h3>123 <div class="template-controls">124 <select id="templateSelect">125 <option value="react">React Component</option>126 <option value="fastapi">FastAPI</option>127 <option value="python">Python Function</option>128 <option value="express">Express Server</option>129 <option value="gradio">Gradio App</option>130 </select>131 <button id="useTemplateBtn" class="template-btn">132 <i class="fas fa-file-code"></i> Use Template133 </button>134 </div>135 </div>136 137 <div class="ai-tools">138 <h3><i class="fas fa-tools"></i> AI Tools</h3>139 <div class="tool-buttons">140 <button id="explainBtn" class="tool-btn">141 <i class="fas fa-book"></i> Explain Code142 </button>143 <button id="debugBtn" class="tool-btn">144 <i class="fas fa-bug"></i> Debug Code145 </button>146 <button id="optimizeBtn" class="tool-btn">147 <i class="fas fa-tachometer-alt"></i> Optimize Code148 </button>149 </div>150 </div>151 152 <div class="history-section">153 <h3><i class="fas fa-history"></i> Recent History</h3>154 <div id="historyDisplay" class="history-display"></div>155 </div>156 </div>157 </div>158 </div>159 160 <!-- Project Files Tab -->161 <div id="files" class="tab-panel">162 <div class="files-layout">163 <div class="files-section">164 <div class="files-header">165 <h3><i class="fas fa-folder-tree"></i> All Files</h3>166 <button id="refreshFilesBtn" class="refresh-btn">167 <i class="fas fa-sync"></i> Refresh168 </button>169 </div>170 <div class="files-table-container">171 <table id="filesTable" class="files-table">172 <thead>173 <tr>174 <th>Filename</th>175 <th>Size</th>176 <th>Type</th>177 <th>Modified</th>178 <th>Actions</th>179 </tr>180 </thead>181 <tbody id="filesTableBody">182 </tbody>183 </table>184 </div>185 </div>186 187 <div class="stats-section">188 <div class="stats-card">189 <h3><i class="fas fa-chart-bar"></i> Project Statistics</h3>190 <div id="statsDisplay" class="stats-display"></div>191 </div>192 193 <div class="export-section">194 <h3><i class="fas fa-download"></i> Export Project</h3>195 <div class="export-controls">196 <select id="exportFormat">197 <option value="json">JSON</option>198 <option value="zip">ZIP (Simulated)</option>199 </select>200 <button id="exportBtn" class="export-btn">201 <i class="fas fa-file-export"></i> Export202 </button>203 </div>204 </div>205 206 <div class="execution-history">207 <h3><i class="fas fa-terminal"></i> Execution History</h3>208 <div id="execHistory" class="exec-history"></div>209 </div>210 </div>211 </div>212 </div>213 214 <!-- Settings Tab -->215 <div id="settings" class="tab-panel">216 <div class="settings-layout">217 <div class="settings-section">218 <h3><i class="fas fa-palette"></i> Theme Settings</h3>219 <div class="setting-group">220 <label for="themeSelect">Theme:</label>221 <select id="themeSelect">222 <option value="dark">Dark</option>223 <option value="light">Light</option>224 <option value="monokai">Monokai</option>225 </select>226 </div>227 </div>228 229 <div class="settings-section">230 <h3><i class="fas fa-text-height"></i> Editor Settings</h3>231 <div class="setting-group">232 <label for="fontSize">Font Size:</label>233 <input type="range" id="fontSize" min="10" max="24" value="14">234 <span id="fontSizeValue">14px</span>235 </div>236 <div class="setting-group">237 <label for="tabSize">Tab Size:</label>238 <input type="range" id="tabSize" min="2" max="8" value="4">239 <span id="tabSizeValue">4</span>240 </div>241 <div class="setting-group">242 <label>243 <input type="checkbox" id="lineNumbers" checked> Show Line Numbers244 </label>245 </div>246 <div class="setting-group">247 <label>248 <input type="checkbox" id="wordWrap"> Word Wrap249 </label>250 </div>251 </div>252 253 <div class="settings-section">254 <h3><i class="fas fa-robot"></i> AI Settings</h3>255 <div class="setting-group">256 <label for="aiCreativity">AI Creativity:</label>257 <input type="range" id="aiCreativity" min="0.1" max="1.0" step="0.1" value="0.7">258 <span id="aiCreativityValue">0.7</span>259 </div>260 <div class="setting-group">261 <label for="maxTokens">Max Response Length:</label>262 <input type="range" id="maxTokens" min="100" max="2000" step="100" value="1000">263 <span id="maxTokensValue">1000</span>264 </div>265 </div>266 267 <div class="settings-section">268 <h3><i class="fas fa-undo"></i> Reset Options</h3>269 <div class="reset-buttons">270 <button id="resetSettingsBtn" class="reset-btn">271 <i class="fas fa-undo"></i> Reset Settings272 </button>273 <button id="clearAllBtn" class="clear-all-btn">274 <i class="fas fa-trash-alt"></i> Clear All Data275 </button>276 </div>277 </div>278 </div>279 </div>280 </div>281 </main>282 </div>283 284 <script src="assets/js/codemirror.js"></script>285 <script src="assets/js/mode/python/python.js"></script>286 <script src="assets/js/mode/javascript/javascript.js"></script>287 <script src="assets/js/mode/xml/xml.js"></script>288 <script src="assets/js/mode/css/css.js"></script>289 <script src="assets/js/mode/htmlmixed/htmlmixed.js"></script>290 <script src="assets/js/app.js"></script>291</body>292</html>293 294=== assets/css/styles.css ===295* {296 margin: 0;297 padding: 0;298 box-sizing: border-box;299}300 301:root {302 --primary-color: #667eea;303 --secondary-color: #764ba2;304 --success-color: #48bb78;305 --error-color: #f56565;306 --warning-color: #ed8936;307 --dark-bg: #1a202c;308 --light-bg: #f7fafc;309 --card-bg: #2d3748;310 --text-primary: #ffffff;311 --text-secondary: #a0aec0;312 --border-color: #4a5568;313 --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);314 --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);315}316 317body {318 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;319 background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);320 color: var(--text-primary);321 min-height: 100vh;322 line-height: 1.6;323}324 325.app-container {326 display: flex;327 flex-direction: column;328 min-height: 100vh;329}330 331.header {332 background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);333 padding: 2rem;334 text-align: center;335 box-shadow: var(--shadow-lg);336}337 338.header h1 {339 font-size: 2.5rem;340 margin-bottom: 0.5rem;341 color: white;342}343 344.header p {345 font-size: 1.1rem;346 color: rgba(255, 255, 255, 0.9);347 margin: 0.25rem 0;348}349 350.header a {351 color: white;352 text-decoration: underline;353 transition: opacity 0.3s;354}355 356.header a:hover {357 opacity: 0.8;358}359 360.main-content {361 flex: 1;362 padding: 1rem;363 max-width: 1400px;364 margin: 0 auto;365 width: 100%;366}367 368.tabs {369 display: flex;370 gap: 0.5rem;371 margin-bottom: 1rem;372 border-bottom: 2px solid var(--border-color);373 padding-bottom: 0;374}375 376.tab-button {377 background: transparent;378 border: none;379 color: var(--text-secondary);380 padding: 1rem 1.5rem;381 cursor: pointer;382 font-size: 1rem;383 transition: all 0.3s;384 border-bottom: 3px solid transparent;385 margin-bottom: -2px;386}387 388.tab-button:hover {389 color: var(--text-primary);390 background: rgba(255, 255, 255, 0.1);391}392 393.tab-button.active {394 color: var(--text-primary);395 border-bottom-color: var(--primary-color);396 background: rgba(102, 126, 234, 0.1);397}398 399.tab-panel {400 display: none;401 animation: fadeIn 0.3s;402}403 404.tab-panel.active {405 display: block;406}407 408@keyframes fadeIn {409 from { opacity: 0; transform: translateY(10px); }410 to { opacity: 1; transform: translateY(0); }411}412 413/* Editor Layout */414.editor-layout {415 display: grid;416 grid-template-columns: 300px 1fr;417 gap: 1rem;418 height: calc(100vh - 250px);419}420 421.sidebar {422 background: var(--card-bg);423 padding: 1.5rem;424 border-radius: 0.5rem;425 box-shadow: var(--shadow);426 overflow-y: auto;427}428 429.file-manager h3,430.settings-panel h3 {431 margin-bottom: 1rem;432 color: var(--text-primary);433 display: flex;434 align-items: center;435 gap: 0.5rem;436}437 438.file-controls {439 display: flex;440 flex-direction: column;441 gap: 0.5rem;442 margin-bottom: 1rem;443}444 445.file-controls input {446 padding: 0.5rem;447 border: 1px solid var(--border-color);448 border-radius: 0.25rem;449 background: var(--dark-bg);450 color: var(--text-primary);451}452 453.file-controls button,454.control-group button {455 padding: 0.5rem 1rem;456 border: none;457 border-radius: 0.25rem;458 cursor: pointer;459 font-size: 0.9rem;460 transition: all 0.3s;461 display: flex;462 align-items: center;463 gap: 0.5rem;464 justify-content: center;465}466 467.create-btn { background: var(--success-color); color: white; }468.save-btn { background: var(--primary-color); color: white; }469.delete-btn { background: var(--error-color); color: white; }470.run-btn { background: var(--success-color); color: white; }471.clear-btn { background: var(--warning-color); color: white; }472 473.file-select {474 width: 100%;475 padding: 0.5rem;476 border: 1px solid var(--border-color);477 border-radius: 0.25rem;478 background: var(--dark-bg);479 color: var(--text-primary);480}481 482.control-group {483 margin-bottom: 1rem;484}485 486.control-group label {487 display: block;488 margin-bottom: 0.5rem;489 color: var(--text-secondary);490}491 492.control-group select {493 width: 100%;494 padding: 0.5rem;495 border: 1px solid var(--border-color);496 border-radius: 0.25rem;497 background: var(--dark-bg);498 color: var(--text-primary);499}500 501.editor-section {502 background: var(--card-bg);503 padding: 1.5rem;504 border-radius: 0.5rem;505 box-shadow: var(--shadow);506 display: flex;507 flex-direction: column;508 gap: 1rem;509}510 511.editor-header,512.output-header {513 display: flex;514 justify-content: space-between;515 align-items: center;516}517 518.editor-header h3,519.output-header h3 {520 color: var(--text-primary);521 display: flex;522 align-items: center;523 gap: 0.5rem;524}525 526.editor-container {527 flex: 1;528 border: 1px solid var(--border-color);529 border-radius: 0.25rem;530 overflow: hidden;531}532 533.CodeMirror {534 height: 100%;535 font-size: 14px;536}537 538.output-section {539 background: var(--dark-bg);540 border-radius: 0.25rem;541}542 543.output-display {544 background: #000;545 color: #00ff00;546 padding: 1rem;547 border-radius: 0.25rem;548 font-family: 'Courier New', monospace;549 min-height: 150px;550 max-height: 200px;551 overflow-y: auto;552 white-space: pre-wrap;553}554 555/* Assistant Layout */556.assistant-layout {557 display: grid;558 grid-template-columns: 1fr 350px;559 gap: 1rem;560 height: calc(100vh - 250px);561}562 563.chat-section {564 background: var(--card-bg);565 padding: 1.5rem;566 border-radius: 0.5rem;567 box-shadow: var(--shadow);568 display: flex;569 flex-direction: column;570}571 572.chat-header {573 display: flex;574 justify-content: space-between;575 align-items: center;576 margin-bottom: 1rem;577}578 579.chat-header h3 {580 color: var(--text-primary);581 display: flex;582 align-items: center;583 gap: 0.5rem;584}585 586.chat-messages {587 flex: 1;588 overflow-y: auto;589 padding: 1rem;590 background: var(--dark-bg);591 border-radius: 0.25rem;592 margin-bottom: 1rem;593}594 595.message {596 margin-bottom: 1rem;597 padding: 0.75rem;598 border-radius: 0.5rem;599 animation: slideIn 0.3s;600}601 602@keyframes slideIn {603 from { opacity: 0; transform: translateX(-20px); }604 to { opacity: 1; transform: translateX(0); }605}606 607.message.user {608 background: var(--primary-color);609 margin-left: 2rem;610}611 612.message.assistant {613 background: var(--dark-bg);614 margin-right: 2rem;615 border: 1px solid var(--border-color);616}617 618.message strong {619 display: block;620 margin-bottom: 0.25rem;621 color: var(--text-secondary);622}623 624.chat-input-section {625 display: flex;626 gap: 0.5rem;627}628 629.chat-input-section textarea {630 flex: 1;631 padding: 0.75rem;632 border: 1px solid var(--border-color);633 border-radius: 0.25rem;634 background: var(--dark-bg);635 color: var(--text-primary);636 resize: vertical;637 min-height: 60px;638}639 640.send-btn {641 background: var(--primary-color);642 color: white;643 border: none;644 padding: 0.75rem 1.5rem;645 border-radius: 0.25rem;646 cursor: pointer;647 transition: all 0.3s;648}649 650.send-btn:hover {651 background: var(--secondary-color);652}653 654.tools-section {655 display: flex;656 flex-direction: column;657 gap: 1rem;658}659 660.quick-actions,661.ai-tools,662.history-section {663 background: var(--card-bg);664 padding: 1rem;665 border-radius: 0.5rem;666 box-shadow: var(--shadow);667}668 669.quick-actions h3,670.ai-tools h3,671.history-section h3 {672 margin-bottom: 1rem;673 color: var(--text-primary);674 display: flex;675 align-items: center;676 gap: 0.5rem;677}678 679.template-controls {680 display: flex;681 flex-direction: column;682 gap: 0.5rem;683}684 685.template-controls select {686 padding: 0.5rem;687 border: 1px solid var(--border-color);688 border-radius: 0.25rem;689 background: var(--dark-bg);690 color: var(--text-primary);691}692 693.template-btn,694.tool-btn {695 width: 100%;696 padding: 0.5rem;697 border: none;698 border-radius: 0.25rem;699 cursor: pointer;700 transition: all 0.3s;701 display: flex;702 align-items: center;703 justify-content: center;704 gap: 0.5rem;705}706 707.template-btn {708 background: var(--primary-color);709 color: white;710}711 712.tool-btn {713 background: var(--dark-bg);714 color: var(--text-primary);715 border: 1px solid var(--border-color);716 margin-bottom: 0.5rem;717}718 719.tool-btn:hover {720 background: var(--primary-color);721 color: white;722}723 724.history-display {725 max-height: 200px;726 overflow-y: auto;727 background: var(--dark-bg);728 padding: 0.5rem;729 border-radius: 0.25rem;730 font-size: 0.9rem;731}732 733.history-item {734 padding: 0.5rem;735 border-bottom: 1px solid var(--border-color);736 cursor: pointer;737 transition: background 0.3s;738}739 740.history-item:hover {741 background: rgba(255, 255, 255, 0.1);742}743 744/* Files Layout */745.files-layout {746 display: grid;747 grid-template-columns: 1fr 350px;748 gap: 1rem;749 height: calc(100vh - 250px);750}751 752.files-section {753 background: var(--card-bg);754 padding: 1.5rem;755 border-radius: 0.5rem;756 box-shadow: var(--shadow);757}758 759.files-header {760 display: flex;761 justify-content: space-between;762 align-items: center;763 margin-bottom: 1rem;764}765 766.files-header h3 {767 color: var(--text-primary);768 display: flex;769 align-items: center;770 gap: 0.5rem;771}772 773.refresh-btn {774 background: var(--primary-color);775 color: white;776 border: none;777 padding: 0.5rem 1rem;778 border-radius: 0.25rem;779 cursor: pointer;780 transition: all 0.3s;781}782 783.files-table-container {784 overflow-y: auto;785 max-height: calc(100% - 60px);786}787 788.files-table {789 width: 100%;790 border-collapse: collapse;791}792 793.files-table th,794.files-table td {795 padding: 0.75rem;796 text-align: left;797 border-bottom: 1px solid var(--border-color);798}799 800.files-table th {801 background: var(--dark-bg);802 color: var(--text-primary);803 position: sticky;804 top: 0;805}806 807.files-table tr:hover {808 background: rgba(255, 255, 255, 0.05);809}810 811.file-action-btn {812 background: transparent;813 border: 1px solid var(--border-color);814 color: var(--text-primary);815 padding: 0.25rem 0.5rem;816 border-radius: 0.25rem;817 cursor: pointer;818 margin-right: 0.25rem;819 transition: all 0.3s;820}821 822.file-action-btn:hover {823 background: var(--primary-color);824 border-color: var(--primary-color);825}826 827.stats-section {828 display: flex;829 flex-direction: column;830 gap: 1rem;831}832 833.stats-card,834.export-section,835.execution-history {836 background: var(--card-bg);837 padding: 1rem;838 border-radius: 0.5rem;839 box-shadow: var(--shadow);840}841 842.stats-card h3,843.export-section h3,844.execution-history h3 {845 margin-bottom: 1rem;846 color: var(--text-primary);847 display: flex;848 align-items: center;849 gap: 0.5rem;850}851 852.stats-display {853 display: grid;854 gap: 0.5rem;855}856 857.stat-item {858 display: flex;859 justify-content: space-between;860 padding: 0.5rem;861 background: var(--dark-bg);862 border-radius: 0.25rem;863}864 865.export-controls {866 display: flex;867 flex-direction: column;868 gap: 0.5rem;869}870 871.export-controls select {872 padding: 0.5rem;873 border: 1px solid var(--border-color);874 border-radius: 0.25rem;875 background: var(--dark-bg);876 color: var(--text-primary);877}878 879.export-btn {880 background: var(--success-color);881 color: white;882 border: none;883 padding: 0.5rem;884 border-radius: 0.25rem;885 cursor: pointer;886 transition: all 0.3s;887}888 889.exec-history {890 max-height: 300px;891 overflow-y: auto;892}893 894.exec-item {895 padding: 0.5rem;896 background: var(--dark-bg);897 border-radius: 0.25rem;898 margin-bottom: 0.5rem;899 font-size: 0.9rem;900}901 902.exec-item.success {903 border-left: 3px solid var(--success-color);904}905 906.exec-item.error {907 border-left: 3px solid var(--error-color);908}909 910/* Settings Layout */911.settings-layout {912 display: grid;913 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));914 gap: 1rem;915}916 917.settings-section {918 background: var(--card-bg);919 padding: 1.5rem;920 border-radius: 0.5rem;921 box-shadow: var(--shadow);922}923 924.settings-section h3 {925 margin-bottom: 1rem;926 color: var(--text-primary);927 display: flex;928 align-items: center;929 gap: 0.5rem;930}931 932.setting-group {933 margin-bottom: 1rem;934}935 936.setting-group label {937 display: block;938 margin-bottom: 0.5rem;939 color: var(--text-secondary);940}941 942.setting-group select,943.setting-group input[type="range"] {944 width: 100%;945 padding: 0.5rem;946 border: 1px solid var(--border-color);947 border-radius: 0.25rem;948 background: var(--dark-bg);949 color: var(--text-primary);950}951 952.setting-group input[type="checkbox"] {953 margin-right: 0.5rem;954}955 956.setting-group span {957 margin-left: 0.5rem;958 color: var(--text-secondary);959}960 961.reset-buttons {962 display: flex;963 gap: 0.5rem;964}965 966.reset-btn,967.clear-all-btn {968 flex: 1;969 padding: 0.75rem;970 border: none;971 border-radius: 0.25rem;972 cursor: pointer;973 transition: all 0.3s;974}975 976.reset-btn {977 background: var(--warning-color);978 color: white;979}980 981.clear-all-btn {982 background: var(--error-color);983 color: white;984}985 986/* Responsive Design */987@media (max-width: 768px) {988 .editor-layout,989 .assistant-layout,990 .files-layout {991 grid-template-columns: 1fr;992 height: auto;993 }994 995 .tabs {996 flex-wrap: wrap;997 }998 999 .tab-button {1000 flex: 1;1001 min-width: 120px;1002 }1003 1004 .header h1 {1005 font-size: 1.8rem;1006 }1007 1008 .main-content {1009 padding: 0.5rem;1010 }1011}1012 1013/* Scrollbar Styling */1014::-webkit-scrollbar {1015 width: 8px;1016}1017 1018::-webkit-scrollbar-track {1019 background: var(--dark-bg);1020}1021 1022::-webkit-scrollbar-thumb {1023 background: var(--border-color);1024 border-radius: 4px;1025}1026 1027::-webkit-scrollbar-thumb:hover {1028 background: var(--primary-color);1029}1030 1031=== assets/js/app.js ===1032// Main Application Logic1033class AnyCoderIDE {1034 constructor() {1035 this.files = JSON.parse(localStorage.getItem('anycoder_files')) || {};1036 this.currentFile = null;1037 this.chatHistory = JSON.parse(localStorage.getItem('anycoder_chat')) || [];1038 this.executionHistory = JSON.parse(localStorage.getItem('anycoder_exec')) || [];1039 this.settings = JSON.parse(localStorage.getItem('anycoder_settings')) || {1040 theme: 'dark',1041 fontSize: 14,1042 tabSize: 4,1043 lineNumbers: true,1044 wordWrap: false,1045 aiCreativity: 0.7,1046 maxTokens: 10001047 };1048 1049 this.editor = null;1050 this.init();1051 }1052 1053 init() {1054 this.initEditor();1055 this.initEventListeners();1056 this.initTabs();1057 this.loadFiles();1058 this.loadChatHistory();1059 this.applySettings();1060 }1061 1062 initEditor() {1063 const textarea = document.getElementById('codeEditor');1064 this.editor = CodeMirror.fromTextArea(textarea, {1065 lineNumbers: this.settings.lineNumbers,1066 mode: 'python',1067 theme: 'monokai',1068 indentUnit: this.settings.tabSize,1069 tabSize: this.settings.tabSize,1070 lineWrapping: this.settings.wordWrap,1071 autofocus: true1072 });1073 1074 this.editor.on('change', () => {1075 if (this.currentFile) {1076 this.files[this.currentFile] = this.editor.getValue();1077 this.saveFiles();1078 }1079 });1080 }1081 1082 initTabs() {1083 const tabButtons = document.querySelectorAll('.tab-button');1084 const tabPanels = document.querySelectorAll('.tab-panel');1085 1086 tabButtons.forEach(button => {1087 button.addEventListener('click', () => {1088 const tabName = button.dataset.tab;1089 1090 tabButtons.forEach(btn => btn.classList.remove('active'));1091 tabPanels.forEach(panel => panel.classList.remove('active'));1092 1093 button.classList.add('active');1094 document.getElementById(tabName).classList.add('active');1095 });1096 });1097 }1098 1099 initEventListeners() {1100 // File Management1101 document.getElementById('createFileBtn').addEventListener('click', () => this.createFile());1102 document.getElementById('saveFileBtn').addEventListener('click', () => this.saveCurrentFile());1103 document.getElementById('deleteFileBtn').addEventListener('click', () => this.deleteCurrentFile());1104 document.getElementById('fileList').addEventListener('change', (e) => this.loadFile(e.target.value));1105 1106 // Code Execution1107 document.getElementById('runCodeBtn').addEventListener('click', () => this.runCode());1108 document.getElementById('clearEditorBtn').addEventListener('click', () => this.clearEditor());1109 document.getElementById('clearOutputBtn').addEventListener('click', () => this.clearOutput());1110 1111 // Language Selection1112 document.getElementById('languageSelect').addEventListener('change', (e) => this.changeLanguage(e.target.value));1113 1114 // AI Assistant1115 document.getElementById('sendChatBtn').addEventListener('click', () => this.sendChatMessage());1116 document.getElementById('chatInput').addEventListener('keypress', (e) => {1117 if (e.key === 'Enter' && !e.shiftKey) {1118 e.preventDefault();1119 this.sendChatMessage();1120 }1121 });1122 document.getElementById('clearChatBtn').addEventListener('click', () => this.clearChat());1123 document.getElementById('explainBtn').addEventListener('click', () => this.explainCode());1124 document.getElementById('debugBtn').addEventListener('click', () => this.debugCode());1125 document.getElementById('optimizeBtn').addEventListener('click', () => this.optimizeCode());1126 1127 // Templates1128 document.getElementById('useTemplateBtn').addEventListener('click', () => this.useTemplate());1129 1130 // Project Files1131 document.getElementById('refreshFilesBtn').addEventListener('click', () => this.refreshFiles());1132 document.getElementById('exportBtn').addEventListener('click', () => this.exportProject());1133 1134 // Settings1135 document.getElementById('themeSelect').addEventListener('change', (e) => this.changeTheme(e.target.value));1136 document.getElementById('fontSize').addEventListener('input', (e) => this.updateFontSize(e.target.value));1137 document.getElementById('tabSize').addEventListener('input', (e) => this.updateTabSize(e.target.value));1138 document.getElementById('lineNumbers').addEventListener('change', (e) => this.toggleLineNumbers(e.target.checked));1139 document.getElementById('wordWrap').addEventListener('change', (e) => this.toggleWordWrap(e.target.checked));1140 document.getElementById('aiCreativity').addEventListener('input', (e) => this.updateAICreativity(e.target.value));1141 document.getElementById('maxTokens').addEventListener('input', (e) => this.updateMaxTokens(e.target.value));1142 document.getElementById('resetSettingsBtn').addEventListener('click', () => this.resetSettings());1143 document.getElementById('clearAllBtn').addEventListener('click', () => this.clearAllData());1144 }1145 1146 // File Management Methods1147 createFile() {1148 const filename = document.getElementById('newFileName').value.trim();1149 if (!filename) {1150 this.showOutput('Error: Please enter a filename', 'error');1151 return;1152 }1153 1154 if (this.files[filename]) {1155 this.showOutput(`Error: File ${filename} already exists`, 'error');1156 return;1157 }1158 1159 this.files[filename] = '';1160 this.currentFile = filename;1161 this.editor.setValue('');1162 this.saveFiles();1163 this.updateFileList();1164 this.showOutput(`Created file: ${filename}`, 'success');1165 document.getElementById('newFileName').value = '';1166 }1167 1168 saveCurrentFile() {1169 if (!this.currentFile) {1170 this.showOutput('No file selected', 'error');1171 return;1172 }1173 1174 this.files[this.currentFile] = this.editor.getValue();1175 this.saveFiles();1176 this.showOutput(`Saved: ${this.currentFile}`, 'success');1177 }1178 1179 deleteCurrentFile() {1180 if (!this.currentFile) {1181 this.showOutput('No file selected', 'error');1182 return;1183 }1184 1185 delete this.files[this.currentFile];1186 this.saveFiles();1187 this.updateFileList();1188 this.showOutput(`Deleted: ${this.currentFile}`, 'success');1189 this.currentFile = null;1190 this.editor.setValue('');1191 }1192 1193 loadFile(filename) {1194 if (!filename) return;1195 1196 this.currentFile = filename;1197 this.editor.setValue(this.files[filename] || '');1198 this.showOutput(`Loaded: ${filename}`, 'success');1199 }1200