Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code Builder</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| width: 100%; | |
| max-width: 900px; | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 25px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .header p { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #333; | |
| font-size: 14px; | |
| } | |
| .filename-container { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .filename-container input { | |
| flex: 1; | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| transition: all 0.3s; | |
| } | |
| input[type="text"]:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| .code-editor { | |
| width: 100%; | |
| min-height: 350px; | |
| padding: 15px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 8px; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 14px; | |
| resize: vertical; | |
| transition: all 0.3s; | |
| background: #f8f9fa; | |
| } | |
| .code-editor:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| background: white; | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| button { | |
| flex: 1; | |
| padding: 14px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .btn-save { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .btn-save:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); | |
| } | |
| .btn-clear { | |
| background: #e0e0e0; | |
| color: #333; | |
| } | |
| .btn-clear:hover { | |
| background: #d0d0d0; | |
| } | |
| .stats { | |
| display: flex; | |
| gap: 20px; | |
| margin-top: 20px; | |
| padding: 15px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| } | |
| .stat-item { | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: #666; | |
| margin-bottom: 5px; | |
| } | |
| .stat-value { | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: #667eea; | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| padding: 15px 25px; | |
| background: #4caf50; | |
| color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| transform: translateX(400px); | |
| transition: transform 0.3s; | |
| z-index: 1000; | |
| } | |
| .notification.show { | |
| transform: translateX(0); | |
| } | |
| .examples { | |
| margin-top: 15px; | |
| padding: 12px; | |
| background: #e8eaf6; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| color: #555; | |
| } | |
| .examples strong { | |
| color: #667eea; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>💻 Code Builder</h1> | |
| <p>Write, paste, and save your code with any extension</p> | |
| </div> | |
| <div class="content"> | |
| <div class="input-group"> | |
| <label for="filename">Filename with Extension</label> | |
| <div class="filename-container"> | |
| <input type="text" id="filename" placeholder="e.g., app.py, index.html, script.js, styles.css" value="app.py"> | |
| </div> | |
| <div class="examples"> | |
| <strong>Examples:</strong> app.py, index.html, script.js, styles.css, data.json, README.md, config.yaml, main.cpp | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label for="code">Your Code</label> | |
| <textarea id="code" class="code-editor" placeholder="Paste or write your code here..."></textarea> | |
| </div> | |
| <div class="stats"> | |
| <div class="stat-item"> | |
| <div class="stat-label">Lines</div> | |
| <div class="stat-value" id="lineCount">0</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Characters</div> | |
| <div class="stat-value" id="charCount">0</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Words</div> | |
| <div class="stat-value" id="wordCount">0</div> | |
| </div> | |
| </div> | |
| <div class="button-group"> | |
| <button class="btn-save" onclick="saveCode()">💾 Save File</button> | |
| <button class="btn-clear" onclick="clearAll()">🗑️ Clear All</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification" id="notification"></div> | |
| <script> | |
| const codeEditor = document.getElementById('code'); | |
| const filenameInput = document.getElementById('filename'); | |
| const lineCount = document.getElementById('lineCount'); | |
| const charCount = document.getElementById('charCount'); | |
| const wordCount = document.getElementById('wordCount'); | |
| // Update statistics | |
| codeEditor.addEventListener('input', updateStats); | |
| function updateStats() { | |
| const text = codeEditor.value; | |
| const lines = text.split('\n').length; | |
| const chars = text.length; | |
| const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; | |
| lineCount.textContent = lines; | |
| charCount.textContent = chars; | |
| wordCount.textContent = words; | |
| } | |
| function saveCode() { | |
| const code = codeEditor.value; | |
| const filename = filenameInput.value.trim(); | |
| if (!filename) { | |
| showNotification('Please enter a filename!', 'error'); | |
| return; | |
| } | |
| if (!code) { | |
| showNotification('Please enter some code to save!', 'error'); | |
| return; | |
| } | |
| // Create blob and download | |
| const blob = new Blob([code], { type: 'text/plain' }); | |
| 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); | |
| showNotification(`File "${filename}" saved successfully!`, 'success'); | |
| } | |
| function clearAll() { | |
| if (codeEditor.value && !confirm('Are you sure you want to clear all code?')) { | |
| return; | |
| } | |
| codeEditor.value = ''; | |
| updateStats(); | |
| showNotification('Editor cleared!', 'success'); | |
| } | |
| function showNotification(message, type) { | |
| const notification = document.getElementById('notification'); | |
| notification.textContent = message; | |
| notification.style.background = type === 'error' ? '#f44336' : '#4caf50'; | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Initialize stats | |
| updateStats(); | |
| </script> | |
| </body> | |
| </html> |