<!DOCTYPE html>
<html lang="my">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TNV Shorts</title>
<style>
:root { --tk-black: #010101; --tk-cyan: #69C9D0; --tk-pink: #EE1D52; }
body, html { margin: 0; padding: 0; background: var(--tk-black); color: white; font-family: sans-serif; height: 100%; overflow: hidden; }
.video-feed { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; }
.sidebar { position: absolute; right: 10px; bottom: 80px; display: flex; flex-direction: column; gap: 20px; }
.icon-btn { background: none; border: none; color: white; text-align: center; font-size: 12px; cursor: pointer; }
.icon-btn img { width: 35px; margin-bottom: 5px; }
#news-dashboard { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #121212; display: none; z-index: 1000; overflow-y: auto; padding: 20px; box-sizing: border-box; }
.tnv-input { width: 100%; background: #222; border: 1px solid #444; color: white; padding: 12px; border-radius: 8px; margin-bottom: 15px; font-size: 16px; box-sizing: border-box; }
.btn-ai { background: linear-gradient(90deg, var(--tk-cyan), var(--tk-pink)); border: none; padding: 15px; width: 100%; color: white; border-radius: 8px; font-weight: bold; cursor: pointer; }
#result-area { margin-top: 20px; white-space: pre-wrap; font-size: 15px; color: #ddd; line-height: 1.6; border-top: 1px solid #333; padding-top: 15px; }
</style>
</head>
<body>
<div class="video-feed">
<p style="color: #444;">Video Content Here</p>
<div class="sidebar">
<div class="icon-btn"><img src="https://img.icons8.com/ios-filled/50/ffffff/like.png"><br>124K</div>
<div class="icon-btn" onclick="openDashboard()"><img src="https://img.icons8.com/ios-filled/50/ffffff/share.png"><br>Share</div>
</div>
</div>
<div id="news-dashboard">
<div style="display:flex; justify-content: space-between; align-items: center;">
<h2 style="color: var(--tk-cyan);">TNV Editor AI</h2>
<button onclick="closeDashboard()" style="background:none; border:none; color:#888;">Close</button>
</div>
<textarea class="tnv-input" id="draft-text" rows="8" placeholder="သတင်းစာသား ရိုက်ထည့်ပါ..."></textarea>
<button class="btn-ai" onclick="analyzeNews()">AI စစ်ဆေးမည်</button>
<div id="result-area"></div>
</div>
<script>
function openDashboard() { document.getElementById('news-dashboard').style.display = 'block'; }
function closeDashboard() { document.getElementById('news-dashboard').style.display = 'none'; }
async function analyzeNews() {
const text = document.getElementById('draft-text').value;
const resultArea = document.getElementById('result-area');
if (!text) return alert("စာသား အရင်ရိုက်ပါ ဆရာ။");
resultArea.innerText = "စစ်ဆေးနေပါသည်... ခဏစောင့်ပါ ဆရာ။";
try {
const response = await fetch('https://square-credit-f142.nayaung-nv.workers.dev', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: text })
});
const data = await response.json();
resultArea.innerText = data.output;
} catch (error) {
resultArea.innerText = "Error: " + error.message;
}
}
</script>
</body>
</html>