134 lines
6.5 KiB
HTML
134 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Traduttore AI</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<header class="app-header">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M2 12h20"/>
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
|
</svg>
|
|
<h1>Traduttore AI</h1>
|
|
</div>
|
|
<button class="settings-btn" id="settingsBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l-.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="language-indicator">
|
|
<span id="detectedLang">Rilevamento automatico...</span>
|
|
</div>
|
|
|
|
<main class="translation-area">
|
|
<div class="input-section">
|
|
<div class="textarea-container">
|
|
<textarea
|
|
id="inputText"
|
|
placeholder="Inserisci il testo da tradurre..."
|
|
spellcheck="false"
|
|
></textarea>
|
|
<div class="textarea-actions">
|
|
<button class="action-btn" id="clearBtn" title="Cancella">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 6h18"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
|
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
</button>
|
|
<span class="char-count" id="charCount">0 caratteri</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="output-section">
|
|
<div class="textarea-container">
|
|
<textarea
|
|
id="outputText"
|
|
placeholder="La traduzione apparirà qui..."
|
|
readonly
|
|
spellcheck="false"
|
|
></textarea>
|
|
<div class="textarea-actions">
|
|
<button class="action-btn" id="copyBtn" title="Copia">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
|
</svg>
|
|
</button>
|
|
<div class="status-indicator" id="statusIndicator"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="translate-section">
|
|
<button class="translate-btn" id="translateBtn">
|
|
<span class="btn-text">Traduci</span>
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14"/>
|
|
<path d="M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Impostazioni -->
|
|
<div class="modal" id="settingsModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Impostazioni</h2>
|
|
<button class="close-btn" id="closeModal">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="setting-item">
|
|
<label for="baseUrl">Ollama Base URL</label>
|
|
<input type="text" id="baseUrl" value="http://localhost:11434" placeholder="http://localhost:11434">
|
|
<span class="help-text">Lascia vuoto per usare localhost:11434</span>
|
|
</div>
|
|
<div class="setting-item">
|
|
<label for="modelSelect">Modello</label>
|
|
<select id="modelSelect">
|
|
<option value="">Carica modelli...</option>
|
|
</select>
|
|
<button class="refresh-btn" id="refreshModels">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 17 10"/>
|
|
<polyline points="1 20 1 14 7 14"/>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
|
|
</svg>
|
|
Aggiorna
|
|
</button>
|
|
<span class="help-text">Seleziona il modello per la traduzione</span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="save-btn" id="saveSettings">Salva</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="renderer.js"></script>
|
|
</body>
|
|
</html>
|