138 lines
6.0 KiB
HTML
138 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Stüdyo Teleprompter — Numex Studio</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%2333ff9c'/%3E%3Crect x='5' y='7' width='2.4' height='10' fill='%2333ff9c' rx='1'/%3E%3Crect x='16.6' y='7' width='2.4' height='10' fill='%2322e0ff' rx='1'/%3E%3C/svg%3E" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<!-- ============ TELEPROMPTER EKRANI (metnin aktığı asıl alan) ============ -->
|
||
<main id="teleprompter" class="teleprompter">
|
||
<div id="scrollContent" class="content" aria-live="off">
|
||
<h1 id="speechTitle" class="speech-title"></h1>
|
||
<div id="speechText" class="speech-text"></div>
|
||
</div>
|
||
<div class="screen-vignette"></div>
|
||
<!-- Konum / görünüm göstergesi -->
|
||
<div id="statusBadge" class="status-badge scr">HAZIR</div>
|
||
</main>
|
||
|
||
<!-- Devasa neon geri sayım (3-2-1) overlay -->
|
||
<div id="countdown" class="countdown-overlay" aria-hidden="true">
|
||
<span id="countdownNumber">3</span>
|
||
</div>
|
||
|
||
<!-- ============ KONTROL PANELİ (altyazı çubuğu) ============ -->
|
||
<aside id="panel" class="control-panel" aria-label="Denetim paneli">
|
||
<header class="panel-header">
|
||
<span class="brand-mark">🎙</span>
|
||
<div class="brand-text">
|
||
<span class="brand-name">STÜDYO TELEPROMPTER</span>
|
||
<span class="brand-sub">Numex Studio · Canlı</span>
|
||
</div>
|
||
<button id="btnFullscreen" class="icon-btn" title="Tam ekran (F)" aria-label="Tam ekran">⛶</button>
|
||
</header>
|
||
|
||
<!-- Oynatma denetimleri -->
|
||
<section class="control-row transport" aria-label="Oynatma">
|
||
<div class="main-buttons">
|
||
<button id="btnCountdown" class="rec-btn" title="Geri sayımlı başlat (A)">
|
||
<span class="rec-dot"></span> A · Geri Sayım
|
||
</button>
|
||
<button id="btnPlay" class="primary-btn" title="Başlat / Duraklat (Boşluk)">
|
||
<span id="playIcon">▶</span> <span id="playLabel">Başlat</span>
|
||
</button>
|
||
<button id="btnHome" class="ghost-btn" title="Başa dön (HOME)">⟲ En Baş</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- İlerleme çubuğu -->
|
||
<section class="control-row progress-row" aria-label="İlerleme">
|
||
<div class="time-display"><span id="elapsed">00:00</span></div>
|
||
<div class="ruler-wrap">
|
||
<input id="seekSlider" class="ruler" type="range" min="0" max="1000" value="0" title="Konum" />
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Hız + Boyut + Ayna + dikey kaydırma -->
|
||
<section class="control-row sliders" aria-label="Metin ayarları">
|
||
<div class="slider-field">
|
||
<label for="speedSlider">
|
||
<span class="slider-icon">⚡</span>
|
||
<span class="slider-label">Hız</span>
|
||
</label>
|
||
<input id="speedSlider" class="range-val" type="range" min="10" max="500" value="180" step="5" />
|
||
<span id="speedValue" class="slider-value">180 px/s</span>
|
||
</div>
|
||
|
||
<div class="slider-field">
|
||
<label for="sizeSlider">
|
||
<span class="slider-icon">🔤</span>
|
||
<span class="slider-label">Yazı Boyutu</span>
|
||
</label>
|
||
<input id="sizeSlider" class="range-val" type="range" min="20" max="120" value="48" step="2" />
|
||
<span id="sizeValue" class="slider-value">48 px</span>
|
||
<div class="mini-actions">
|
||
<button id="btnSizeMinus" class="mini-btn" title="Küçült (-)">A−</button>
|
||
<button id="btnSizePlus" class="mini-btn" title="Büyüt (+)">A+</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-field toggles">
|
||
<button id="btnMirror" class="toggle-btn" title="Ayna (M)" aria-pressed="false">
|
||
<span class="tg-ico">⇋</span> Ayna
|
||
</button>
|
||
<button id="btnVScroll" class="toggle-btn" title="Dikey kaymayı aç/kapat (V)" aria-pressed="true">
|
||
<span class="tg-ico">↕</span> Dikey Kayma
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Metin düzenleme -->
|
||
<section class="panel-section" aria-label="Konuşma metni">
|
||
<div class="section-head">
|
||
<span class="section-title">📝 Konuşma Metni</span>
|
||
<div class="preset-group">
|
||
<label class="title-field">
|
||
<input id="speechTitleInput" type="text" placeholder="Konuşma başlığı (opsiyonel)" class="title-input" />
|
||
</label>
|
||
<select id="presetSelect" class="preset-select" title="Hazır örnek metin seç">
|
||
<option value="yeni">➕ Yeni Boş Metin</option>
|
||
<option value="cumhuriyet">🇹🇷 Cumhuriyet Bayramı Konuşması</option>
|
||
<option value="lansman">🚀 Ürün Lansman Sunumu</option>
|
||
</select>
|
||
<button id="btnApplyText" class="ghost-btn sm">Metni Aktar</button>
|
||
</div>
|
||
</div>
|
||
<textarea id="textEditor" class="text-editor" spellcheck="false"
|
||
placeholder="Konuşma metnini buraya yapıştırın veya düzenleyin, sonra 'Metni Aktar'a basın."></textarea>
|
||
<div class="editor-foot">
|
||
<span id="wordCount">0 kelime · 0 karakter</span>
|
||
<button id="btnLiveEdit" class="ghost-btn sm toggle-state" title="Aktarımda metni canlı güncelle" aria-pressed="true">
|
||
⚡ Canlı Yansı AÇIK
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Klavye kısayolları -->
|
||
<footer class="shortcuts" aria-label="Kısayollar">
|
||
<span><b>SPACE</b> Oynat/Pause</span>
|
||
<span><b>A</b> Geri sayımlı başlat</span>
|
||
<span><b>F</b> Tam ekran</span>
|
||
<span><b>M</b> Ayna</span>
|
||
<span><b>V</b> Dikey kayma</span>
|
||
<span><b>↑↓</b> Hız</span>
|
||
<span><b>+/−</b> Boyut</span>
|
||
<span><b>HOME</b> Başa dön</span>
|
||
</footer>
|
||
</aside>
|
||
|
||
<!-- Alt sağ görünürlük göstergesi (toast) -->
|
||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|