Spaces:

Phoe2004
/

USP

Runtime error

App Files Files Community

Phoe2004 commited on Jun 14

Commit

7017726

verified ·

1 Parent(s): 8f9cea6

Upload 10 files

Browse files

Files changed (8) hide show

README.md +28 -7
about.html +99 -0
app.js +131 -0
app.py +29 -4
index.html +224 -465
privacy.html +121 -0
style.css +448 -0
terms.html +111 -0

README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: Myanmar Voice TTS Studio
 emoji: 🔊
 colorFrom: yellow
 colorTo: green
@@ -8,14 +8,25 @@ app_port: 7860
 pinned: false
 ---
-# Myanmar Voice TTS Studio
-Edge TTS အသုံးပြု၍ မြန်မာစာသားများကို အသံဖိုင် (mp3) အဖြစ် ပြောင်းလဲပေးသော web app။
 ## Voices
 - `my-MM-NilarNeural` — Nilar (Female)
 - `my-MM-ThihaNeural` — Thiha (Male)
 ## Local run
 ```bash
 pip install -r requirements.txt
@@ -24,8 +35,18 @@ python app.py
 ## Deploy on Hugging Face Spaces
 1. Create a new Space → SDK: **Docker**.
-2. Upload `Dockerfile`, `requirements.txt`, `app.py`, `templates/index.html`, and this `README.md`.
-3. Space will build and serve on port `7860` automatically.
-## AdSense
-`templates/index.html` ထဲမှာ `ca-pub-XXXXXXXXXXXXXXXX` နှင့် `data-ad-slot` placeholder များကို သင့် AdSense client ID / slot ID များဖြင့် အစားထိုးပါ။

 ---
+title: Myanmar Voice Studio
 emoji: 🔊
 colorFrom: yellow
 colorTo: green
 pinned: false
 ---
+# Myanmar Voice Studio
+A free Myanmar (Burmese) text-to-speech web app built on Edge TTS, with an
+English-language marketing site (Home, About, Privacy, Terms) designed to be
+AdSense-friendly.
 ## Voices
 - `my-MM-NilarNeural` — Nilar (Female)
 - `my-MM-ThihaNeural` — Thiha (Male)
+## Pages
+- `/` — Home: hero, TTS tool, How It Works, Features, Use Cases, FAQ
+- `/about` — About the project
+- `/privacy` — Privacy Policy (AdSense / cookies disclosure)
+- `/terms` — Terms of Use
+## Limits
+- Maximum text length: **10,000 characters** per request.
 ## Local run
 ```bash
 pip install -r requirements.txt
 ## Deploy on Hugging Face Spaces
 1. Create a new Space → SDK: **Docker**.
+2. Upload all files (`Dockerfile`, `requirements.txt`, `app.py`, `index.html`,
+   `about.html`, `privacy.html`, `terms.html`, `style.css`, `app.js`,
+   `README.md`) at the **root** of the repo — no subfolders.
+3. Space builds and serves on port `7860` automatically.
+## Before going live — replace these placeholders
+- `ca-pub-XXXXXXXXXXXXXXXX` in `index.html`, `about.html`, `privacy.html`,
+  `terms.html` → your real AdSense publisher ID.
+- `data-ad-slot="1111111111"` / `"2222222222"` in `index.html` → your real ad
+  unit slot IDs.
+- `contact@example.com` in `privacy.html` / `terms.html` → a real contact
+  email.
+- Add your Space's domain (`yourname-spacename.hf.space`) under AdSense → Sites
+  and wait for review/approval.

about.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>About — Myanmar Voice Studio</title>
+<meta name="description" content="Learn about Myanmar Voice Studio, a free tool for converting Myanmar text into natural-sounding speech.">
+<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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/style.css">
+<script async src="https://pagead2.googleadsense.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
+</head>
+<body>
+<nav class="nav">
+  <div class="wrap">
+    <a href="/" class="brand"><span class="dot"></span>Myanmar Voice Studio</a>
+    <div class="nav-links">
+      <a href="/">Home</a>
+      <a href="/#tool">Try It</a>
+      <a href="/#how-it-works">How It Works</a>
+      <a href="/#faq">FAQ</a>
+      <a href="/about" class="active">About</a>
+    </div>
+  </div>
+</nav>
+<div class="wrap prose">
+  <h1>About Myanmar Voice Studio</h1>
+  <p class="updated">Last updated: June 2026</p>
+  <p>Myanmar Voice Studio is a free online text-to-speech tool built for the
+     Myanmar-speaking community and for anyone working with the Burmese
+     language. It converts written Myanmar text into natural-sounding spoken
+     audio that can be downloaded and used right away.</p>
+  <h2>Why we built this</h2>
+  <p>High-quality voice technology for the Myanmar language has historically
+     been hard to find and often locked behind expensive software or
+     subscriptions. We wanted to make it simple: paste your text, choose a
+     voice, and get an audio file — no account, no installation, and no cost.</p>
+  <h2>What you can do here</h2>
+  <ul>
+    <li>Convert up to 10,000 characters of Myanmar text into speech.</li>
+    <li>Choose between a female voice (Nilar) and a male voice (Thiha).</li>
+    <li>Adjust speaking speed and pitch to match your project.</li>
+    <li>Download the result as an MP3 file for use in videos, lessons,
+        presentations, or apps.</li>
+  </ul>
+  <h2>The technology behind it</h2>
+  <p>Audio is generated using neural text-to-speech voices, the same family of
+     voice models used in modern screen readers and voice assistants. These
+     models are trained to produce natural intonation and pacing for Myanmar
+     script, including correct handling of tone marks and word boundaries.</p>
+  <h2>Who maintains this site</h2>
+  <p>Myanmar Voice Studio is built and maintained by an independent developer
+     focused on Myanmar-language content tools. If you have feedback, found a
+     bug, or have a feature request, feel free to reach out through the
+     contact details on our <a href="/privacy">Privacy Policy</a> page.</p>
+  <h2>Advertising</h2>
+  <p>This site is supported by advertising so that it can remain free to use.
+     Ads are served through Google AdSense. You can read more about how this
+     affects your data in our <a href="/privacy">Privacy Policy</a>.</p>
+</div>
+<footer>
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-col">
+        <h4>Myanmar Voice Studio</h4>
+        <a href="/">Home</a>
+        <a href="/#tool">Text to Speech Tool</a>
+        <a href="/#how-it-works">How It Works</a>
+      </div>
+      <div class="footer-col">
+        <h4>Resources</h4>
+        <a href="/#faq">FAQ</a>
+        <a href="/about">About</a>
+      </div>
+      <div class="footer-col">
+        <h4>Legal</h4>
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/terms">Terms of Use</a>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      &copy; 2026 Myanmar Voice Studio. Voices powered by neural text-to-speech technology.
+    </div>
+  </div>
+</footer>
+</body>
+</html>

app.js ADDED Viewed

	@@ -0,0 +1,131 @@

+// ---- Build signature waveform ----
+const wave = document.getElementById('wave');
+if (wave) {
+  const BAR_COUNT = 24;
+  for (let i = 0; i < BAR_COUNT; i++) {
+    const bar = document.createElement('div');
+    bar.className = 'bar';
+    bar.style.animationDelay = (i * 0.06) + 's';
+    wave.appendChild(bar);
+  }
+}
+const bars = wave ? wave.querySelectorAll('.bar') : [];
+function setWaveActive(active) {
+  if (!wave) return;
+  wave.classList.toggle('is-active', active);
+  if (!active) bars.forEach(b => b.style.height = '');
+}
+let waveInterval = null;
+function startWaveAnimation() {
+  setWaveActive(true);
+  waveInterval = setInterval(() => {
+    bars.forEach(b => b.style.height = (6 + Math.random() * 28) + 'px');
+  }, 110);
+}
+function stopWaveAnimation() {
+  if (waveInterval) clearInterval(waveInterval);
+  waveInterval = null;
+  setWaveActive(false);
+}
+// ---- Voice card selection ----
+const voiceCards = document.querySelectorAll('.voice-card');
+voiceCards.forEach(card => {
+  card.addEventListener('click', () => {
+    voiceCards.forEach(c => c.classList.remove('selected'));
+    card.classList.add('selected');
+  });
+});
+// ---- Sliders ----
+const rate = document.getElementById('rate');
+const pitch = document.getElementById('pitch');
+const rateVal = document.getElementById('rateVal');
+const pitchVal = document.getElementById('pitchVal');
+function fmt(v, unit) {
+  const n = Number(v);
+  return (n >= 0 ? '+' : '') + n + unit;
+}
+if (rate) rate.addEventListener('input', () => rateVal.textContent = fmt(rate.value, '%'));
+if (pitch) pitch.addEventListener('input', () => pitchVal.textContent = fmt(pitch.value, 'Hz'));
+// ---- Character counter ----
+const MAX_CHARS = 10000;
+const text = document.getElementById('text');
+const charCount = document.getElementById('charCount');
+if (text) {
+  text.addEventListener('input', () => {
+    const len = text.value.length;
+    charCount.textContent = `${len} / ${MAX_CHARS}`;
+    charCount.classList.toggle('over', len > MAX_CHARS);
+  });
+}
+// ---- Generate ----
+const generateBtn = document.getElementById('generateBtn');
+const status = document.getElementById('status');
+const output = document.getElementById('output');
+const player = document.getElementById('player');
+const downloadLink = document.getElementById('downloadLink');
+let currentObjectUrl = null;
+if (generateBtn) {
+  generateBtn.addEventListener('click', async () => {
+    const value = text.value.trim();
+    if (!value) {
+      status.textContent = 'Please enter some text first.';
+      status.classList.add('error');
+      return;
+    }
+    if (value.length > MAX_CHARS) {
+      status.textContent = `Text is too long. Maximum is ${MAX_CHARS} characters.`;
+      status.classList.add('error');
+      return;
+    }
+    const voice = document.querySelector('input[name="voice"]:checked').value;
+    status.classList.remove('error');
+    status.textContent = 'Generating audio...';
+    generateBtn.disabled = true;
+    startWaveAnimation();
+    try {
+      const res = await fetch('/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          text: value,
+          voice: voice,
+          rate: Number(rate.value),
+          pitch: Number(pitch.value)
+        })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || 'Failed to generate audio.');
+      }
+      const blob = await res.blob();
+      if (currentObjectUrl) URL.revokeObjectURL(currentObjectUrl);
+      currentObjectUrl = URL.createObjectURL(blob);
+      player.src = currentObjectUrl;
+      downloadLink.href = currentObjectUrl;
+      output.classList.add('visible');
+      status.textContent = 'Done! Your audio is ready below.';
+      player.play().catch(() => {});
+    } catch (e) {
+      status.textContent = e.message;
+      status.classList.add('error');
+    } finally {
+      generateBtn.disabled = false;
+      stopWaveAnimation();
+    }
+  });
+}

app.py CHANGED Viewed

@@ -19,7 +19,7 @@ DEFAULT_VOICE = "my-MM-NilarNeural"
 TMP_DIR = os.path.join(tempfile.gettempdir(), "mm_tts_outputs")
 os.makedirs(TMP_DIR, exist_ok=True)
-MAX_CHARS = 3000
 def clamp_pct(value, lo=-50, hi=50):
@@ -35,6 +35,31 @@ def index():
     return send_file(os.path.join(BASE_DIR, "index.html"))
 @app.route("/api/voices")
 def get_voices():
     return jsonify(VOICES)
@@ -50,10 +75,10 @@ def tts():
     pitch = clamp_pct(data.get("pitch", 0))
     if not text:
-        return jsonify({"error": "စာသား ထည့်ပေးပါ (text is required)"}), 400
     if len(text) > MAX_CHARS:
-        return jsonify({"error": f"စာသား {MAX_CHARS} လုံးအထိသာ ထည့်နိုင်ပါသည်"}), 400
     if voice not in VOICES:
         voice = DEFAULT_VOICE
@@ -74,7 +99,7 @@ def tts():
         return jsonify({"error": str(e)}), 500
     if not os.path.exists(filepath) or os.path.getsize(filepath) == 0:
-        return jsonify({"error": "အသံဖိုင် ထုတ်ယူခြင်း မအောင်မြင်ပါ"}), 500
     @after_this_request
     def cleanup(response):

 TMP_DIR = os.path.join(tempfile.gettempdir(), "mm_tts_outputs")
 os.makedirs(TMP_DIR, exist_ok=True)
+MAX_CHARS = 10000
 def clamp_pct(value, lo=-50, hi=50):
     return send_file(os.path.join(BASE_DIR, "index.html"))
+@app.route("/about")
+def about():
+    return send_file(os.path.join(BASE_DIR, "about.html"))
+@app.route("/privacy")
+def privacy():
+    return send_file(os.path.join(BASE_DIR, "privacy.html"))
+@app.route("/terms")
+def terms():
+    return send_file(os.path.join(BASE_DIR, "terms.html"))
+@app.route("/style.css")
+def style_css():
+    return send_file(os.path.join(BASE_DIR, "style.css"), mimetype="text/css")
+@app.route("/app.js")
+def app_js():
+    return send_file(os.path.join(BASE_DIR, "app.js"), mimetype="application/javascript")
 @app.route("/api/voices")
 def get_voices():
     return jsonify(VOICES)
     pitch = clamp_pct(data.get("pitch", 0))
     if not text:
+        return jsonify({"error": "Please enter some text."}), 400
     if len(text) > MAX_CHARS:
+        return jsonify({"error": f"Text must be {MAX_CHARS} characters or fewer."}), 400
     if voice not in VOICES:
         voice = DEFAULT_VOICE
         return jsonify({"error": str(e)}), 500
     if not os.path.exists(filepath) or os.path.getsize(filepath) == 0:
+        return jsonify({"error": "Audio generation failed. Please try again."}), 500
     @after_this_request
     def cleanup(response):

index.html CHANGED Viewed

@@ -1,348 +1,75 @@
 <!DOCTYPE html>
-<html lang="my">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>အသံစာပေ — Myanmar Voice Studio</title>
-<!-- Fonts: Noto Sans Myanmar for Burmese script, Fraunces for English accents -->
 <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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
 <!-- ===================== Google AdSense ===================== -->
 <!-- Replace ca-pub-XXXXXXXXXXXXXXXX with your own AdSense publisher ID -->
 <script async src="https://pagead2.googleadsense.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
-<style>
-  :root{
-    --bg:#FAF6EE;
-    --surface:#FFFDF7;
-    --surface-2:#F3ECDE;
-    --ink:#2B2521;
-    --ink-soft:#8A7C6C;
-    --jade:#2F6F5E;
-    --jade-soft:#DCEAE5;
-    --amber:#D98C3D;
-    --amber-soft:#F6E3CC;
-    --line:#E8DFD2;
-    --radius:14px;
-    --serif:'Fraunces', serif;
-    --mm:'Noto Sans Myanmar', sans-serif;
-  }
-  *{ box-sizing:border-box; }
-  body{
-    margin:0;
-    background:var(--bg);
-    color:var(--ink);
-    font-family:var(--mm);
-    line-height:1.6;
-    -webkit-font-smoothing:antialiased;
-  }
-  a{ color:var(--jade); }
-  .wrap{
-    max-width:760px;
-    margin:0 auto;
-    padding:0 20px 64px;
-  }
-  /* ---------- Ad slots ---------- */
-  .ad-slot{
-    margin:0 auto;
-    padding:14px 0;
-    text-align:center;
-    max-width:760px;
-  }
-  .ad-slot .ad-label{
-    font-family:var(--serif);
-    font-style:italic;
-    font-size:11px;
-    letter-spacing:.12em;
-    text-transform:uppercase;
-    color:var(--ink-soft);
-    margin-bottom:6px;
-  }
-  /* ---------- Header ---------- */
-  header{
-    padding:48px 0 28px;
-    text-align:center;
-  }
-  .eyebrow{
-    font-family:var(--serif);
-    font-style:italic;
-    font-weight:500;
-    font-size:13px;
-    letter-spacing:.22em;
-    text-transform:uppercase;
-    color:var(--jade);
-    margin:0 0 10px;
-  }
-  h1{
-    font-family:var(--mm);
-    font-weight:700;
-    font-size:clamp(28px,7vw,42px);
-    margin:0 0 10px;
-    letter-spacing:.01em;
-  }
-  .tagline{
-    color:var(--ink-soft);
-    font-size:15px;
-    margin:0;
-  }
-  /* ---------- Signature waveform ---------- */
-  .wave{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    gap:4px;
-    height:34px;
-    margin:22px auto 0;
-  }
-  .wave .bar{
-    width:4px;
-    border-radius:3px;
-    background:linear-gradient(180deg, var(--jade), var(--amber));
-    height:10px;
-    animation:breathe 2.6s ease-in-out infinite;
-    transition:height .12s ease;
-  }
-  @keyframes breathe{
-    0%, 100% { height:8px; opacity:.55; }
-    50% { height:28px; opacity:1; }
-  }
-  .wave.is-active .bar{ animation:none; }
-  /* ---------- Card / manuscript panel ---------- */
-  .panel{
-    background:var(--surface);
-    border:1px solid var(--line);
-    border-radius:var(--radius);
-    padding:22px;
-    margin-top:22px;
-    box-shadow:0 1px 2px rgba(43,37,33,.03);
-  }
-  .panel h2{
-    font-family:var(--serif);
-    font-style:italic;
-    font-weight:500;
-    font-size:13px;
-    letter-spacing:.16em;
-    text-transform:uppercase;
-    color:var(--ink-soft);
-    margin:0 0 14px;
-  }
-  textarea{
-    width:100%;
-    min-height:160px;
-    resize:vertical;
-    border:1px solid var(--line);
-    border-radius:10px;
-    background:
-      repeating-linear-gradient(
-        to bottom,
-        transparent,
-        transparent 35px,
-        var(--surface-2) 35px,
-        var(--surface-2) 36px
-      ),
-      var(--surface);
-    padding:14px 16px;
-    font-family:var(--mm);
-    font-size:16px;
-    line-height:36px;
-    color:var(--ink);
-    outline:none;
-  }
-  textarea:focus{ border-color:var(--jade); }
-  textarea::placeholder{ color:var(--ink-soft); }
-  .char-count{
-    text-align:right;
-    font-size:12px;
-    color:var(--ink-soft);
-    margin-top:6px;
-    font-family:var(--serif);
-  }
-  .char-count.over{ color:#C0492B; }
-  /* ---------- Voice cards ---------- */
-  .voices{
-    display:grid;
-    grid-template-columns:1fr 1fr;
-    gap:12px;
-    margin-top:8px;
-  }
-  .voice-card{
-    border:1px solid var(--line);
-    border-radius:10px;
-    padding:14px;
-    cursor:pointer;
-    background:var(--surface);
-    transition:border-color .15s ease, background .15s ease;
-    position:relative;
-  }
-  .voice-card input{
-    position:absolute;
-    opacity:0;
-    inset:0;
-    cursor:pointer;
-    margin:0;
-  }
-  .voice-card .name{
-    font-weight:600;
-    font-size:15px;
-  }
-  .voice-card .role{
-    font-family:var(--serif);
-    font-style:italic;
-    font-size:12px;
-    letter-spacing:.08em;
-    color:var(--ink-soft);
-    text-transform:uppercase;
-    margin-top:4px;
-  }
-  .voice-card.selected{
-    border-color:var(--jade);
-    background:var(--jade-soft);
-  }
-  .voice-card.selected .role{ color:var(--jade); }
-  /* ---------- Sliders ---------- */
-  .controls{
-    display:grid;
-    grid-template-columns:1fr 1fr;
-    gap:16px;
-    margin-top:18px;
-  }
-  .control label{
-    display:flex;
-    justify-content:space-between;
-    font-size:13px;
-    color:var(--ink-soft);
-    margin-bottom:6px;
-    font-family:var(--serif);
-    font-style:italic;
-    letter-spacing:.04em;
-  }
-  .control label span.val{
-    font-family:var(--mm);
-    font-style:normal;
-    color:var(--ink);
-    font-weight:600;
-  }
-  input[type="range"]{
-    width:100%;
-    accent-color:var(--jade);
-  }
-  @media (max-width:480px){
-    .controls{ grid-template-columns:1fr; }
-  }
-  /* ---------- Generate button ---------- */
-  .actions{
-    margin-top:22px;
-    display:flex;
-    gap:12px;
-    flex-wrap:wrap;
-  }
-  button{
-    font-family:var(--mm);
-    font-size:15px;
-    font-weight:600;
-    border:none;
-    border-radius:10px;
-    padding:13px 24px;
-    cursor:pointer;
-    transition:opacity .15s ease, transform .05s ease;
-  }
-  button:active{ transform:scale(.98); }
-  button:disabled{ opacity:.55; cursor:wait; }
-  .btn-primary{
-    background:var(--amber);
-    color:#fff;
-    flex:1;
-  }
-  .btn-primary:hover:not(:disabled){ opacity:.92; }
-  .btn-secondary{
-    background:var(--surface-2);
-    color:var(--ink);
-    border:1px solid var(--line);
-  }
-  /* ---------- Output ---------- */
-  .output{
-    margin-top:18px;
-    display:none;
-  }
-  .output.visible{ display:block; }
-  .output audio{
-    width:100%;
-    margin-top:14px;
-  }
-  .status{
-    font-size:13px;
-    color:var(--ink-soft);
-    margin-top:10px;
-    min-height:18px;
-  }
-  .status.error{ color:#C0492B; }
-  /* ---------- Footer ---------- */
-  footer{
-    text-align:center;
-    margin-top:40px;
-    font-size:12px;
-    color:var(--ink-soft);
-    font-family:var(--serif);
-    font-style:italic;
-  }
-</style>
 </head>
 <body>
-  <!-- Top ad slot (leaderboard) -->
-  <div class="ad-slot">
-    <div class="ad-label">Advertisement</div>
-    <ins class="adsbygoogle"
-         style="display:block"
-         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
-         data-ad-slot="1111111111"
-         data-ad-format="auto"
-         data-full-width-responsive="true"></ins>
-    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
-  </div>
   <div class="wrap">
-    <header>
-      <p class="eyebrow">Voice Studio · Edge TTS</p>
-      <h1>မြန်မာအသံ Studio</h1>
-      <p class="tagline">စာသားကို မြန်မာအသံအဖြစ် စက္ကန့်ပိုင်းအတွင်း ပြောင်းလဲပါ</p>
-      <div class="wave" id="wave"></div>
-    </header>
-    <!-- Text input -->
-    <section class="panel">
-      <h2>Script</h2>
-      <textarea id="text" placeholder="မြန်မာစာသား ဒီနေရာတွင် ရိုက်ထည့်ပါ..." maxlength="3000"></textarea>
-      <div class="char-count" id="charCount">0 / 3000</div>
-    </section>
-    <!-- Voice + settings -->
-    <section class="panel">
-      <h2>Voice</h2>
       <div class="voices" id="voices">
         <label class="voice-card selected" data-voice="my-MM-NilarNeural">
           <input type="radio" name="voice" value="my-MM-NilarNeural" checked>
@@ -358,17 +85,17 @@
       <div class="controls">
         <div class="control">
-          <label>အသံနှုန်း (Speed) <span class="val" id="rateVal">+0%</span></label>
           <input type="range" id="rate" min="-50" max="50" value="0" step="5">
         </div>
         <div class="control">
-          <label>အသံအနိမ့်အမြင့် (Pitch) <span class="val" id="pitchVal">+0Hz</span></label>
           <input type="range" id="pitch" min="-50" max="50" value="0" step="5">
         </div>
       </div>
       <div class="actions">
-        <button class="btn-primary" id="generateBtn">အသံ ထုတ်မည်</button>
       </div>
       <div class="status" id="status"></div>
@@ -376,11 +103,106 @@
       <div class="output" id="output">
         <audio id="player" controls></audio>
         <div class="actions">
-          <a class="btn-secondary" id="downloadLink" download="myanmar_voice.mp3" style="text-decoration:none; display:inline-block; text-align:center;">ဒေါင်းလုဒ် (mp3)</a>
         </div>
       </div>
-    </section>
-  </div>
   <!-- In-content ad slot -->
   <div class="ad-slot">
@@ -394,135 +216,72 @@
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
   </div>
-  <footer>
-    Powered by Edge TTS · Myanmar Voice Studio
-  </footer>
-<script>
-  // ---- Build signature waveform ----
-  const wave = document.getElementById('wave');
-  const BAR_COUNT = 24;
-  for (let i = 0; i < BAR_COUNT; i++) {
-    const bar = document.createElement('div');
-    bar.className = 'bar';
-    bar.style.animationDelay = (i * 0.06) + 's';
-    wave.appendChild(bar);
-  }
-  const bars = wave.querySelectorAll('.bar');
-  function setWaveActive(active) {
-    wave.classList.toggle('is-active', active);
-    if (!active) {
-      bars.forEach(b => b.style.height = '');
-      return;
-    }
-  }
-  let waveInterval = null;
-  function startWaveAnimation() {
-    setWaveActive(true);
-    waveInterval = setInterval(() => {
-      bars.forEach(b => {
-        const h = 6 + Math.random() * 26;
-        b.style.height = h + 'px';
-      });
-    }, 110);
-  }
-  function stopWaveAnimation() {
-    if (waveInterval) clearInterval(waveInterval);
-    waveInterval = null;
-    setWaveActive(false);
-  }
-  // ---- Voice card selection ----
-  const voiceCards = document.querySelectorAll('.voice-card');
-  voiceCards.forEach(card => {
-    card.addEventListener('click', () => {
-      voiceCards.forEach(c => c.classList.remove('selected'));
-      card.classList.add('selected');
-    });
-  });
-  // ---- Sliders ----
-  const rate = document.getElementById('rate');
-  const pitch = document.getElementById('pitch');
-  const rateVal = document.getElementById('rateVal');
-  const pitchVal = document.getElementById('pitchVal');
-  function fmt(v, unit) {
-    const n = Number(v);
-    return (n >= 0 ? '+' : '') + n + unit;
-  }
-  rate.addEventListener('input', () => rateVal.textContent = fmt(rate.value, '%'));
-  pitch.addEventListener('input', () => pitchVal.textContent = fmt(pitch.value, 'Hz'));
-  // ---- Character counter ----
-  const text = document.getElementById('text');
-  const charCount = document.getElementById('charCount');
-  text.addEventListener('input', () => {
-    const len = text.value.length;
-    charCount.textContent = `${len} / 3000`;
-    charCount.classList.toggle('over', len > 3000);
-  });
-  // ---- Generate ----
-  const generateBtn = document.getElementById('generateBtn');
-  const status = document.getElementById('status');
-  const output = document.getElementById('output');
-  const player = document.getElementById('player');
-  const downloadLink = document.getElementById('downloadLink');
-  let currentObjectUrl = null;
-  generateBtn.addEventListener('click', async () => {
-    const value = text.value.trim();
-    if (!value) {
-      status.textContent = 'စာသား ထည့်ပေးပါ။';
-      status.classList.add('error');
-      return;
-    }
-    const voice = document.querySelector('input[name="voice"]:checked').value;
-    status.classList.remove('error');
-    status.textContent = 'အသံထုတ်နေပါသည်...';
-    generateBtn.disabled = true;
-    startWaveAnimation();
-    try {
-      const res = await fetch('/api/tts', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          text: value,
-          voice: voice,
-          rate: Number(rate.value),
-          pitch: Number(pitch.value)
-        })
-      });
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({}));
-        throw new Error(err.error || 'အသံထုတ်ခြင်း မအောင်မြင်ပါ');
-      }
-      const blob = await res.blob();
-      if (currentObjectUrl) URL.revokeObjectURL(currentObjectUrl);
-      currentObjectUrl = URL.createObjectURL(blob);
-      player.src = currentObjectUrl;
-      downloadLink.href = currentObjectUrl;
-      output.classList.add('visible');
-      status.textContent = 'အသံ အောင်မြင်စွာ ထုတ်ပြီးပါပြီ။';
-      player.play().catch(() => {});
-    } catch (e) {
-      status.textContent = e.message;
-      status.classList.add('error');
-    } finally {
-      generateBtn.disabled = false;
-      stopWaveAnimation();
-    }
-  });
-</script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Myanmar Voice Studio — Free Myanmar Text to Speech (TTS)</title>
+<meta name="description" content="Convert Myanmar (Burmese) text into natural-sounding speech for free. Choose from neural voices, adjust speed and pitch, and download MP3 audio instantly — no sign-up required.">
 <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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/style.css">
 <!-- ===================== Google AdSense ===================== -->
 <!-- Replace ca-pub-XXXXXXXXXXXXXXXX with your own AdSense publisher ID -->
 <script async src="https://pagead2.googleadsense.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
 </head>
 <body>
+<nav class="nav">
   <div class="wrap">
+    <a href="/" class="brand"><span class="dot"></span>Myanmar Voice Studio</a>
+    <div class="nav-links">
+      <a href="/" class="active">Home</a>
+      <a href="#tool">Try It</a>
+      <a href="#how-it-works">How It Works</a>
+      <a href="#faq">FAQ</a>
+      <a href="/about">About</a>
+    </div>
+  </div>
+</nav>
+<div class="wrap">
+  <header class="hero">
+    <p class="eyebrow">Free Online Tool</p>
+    <h1>Turn Myanmar Text Into<br>Natural Sounding Speech</h1>
+    <p class="lead">Myanmar Voice Studio uses high-quality neural voices to read your
+       Burmese text aloud. Paste up to 10,000 characters, fine-tune the speed and
+       pitch, and download a ready-to-use MP3 — completely free, no account needed.</p>
+    <div class="wave" id="wave"></div>
+  </header>
+</div>
+<!-- Top ad slot -->
+<div class="ad-slot">
+  <div class="ad-label">Advertisement</div>
+  <ins class="adsbygoogle"
+       style="display:block"
+       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
+       data-ad-slot="1111111111"
+       data-ad-format="auto"
+       data-full-width-responsive="true"></ins>
+  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+</div>
+<div class="wrap" id="tool">
+  <!-- Text input -->
+  <section class="tight">
+    <div class="panel">
+      <h3>Your Script</h3>
+      <textarea id="text" placeholder="Type or paste Myanmar text here..." maxlength="10000"></textarea>
+      <div class="char-count" id="charCount">0 / 10000</div>
+    </div>
+  </section>
+  <!-- Voice + settings -->
+  <section class="tight">
+    <div class="panel">
+      <h3>Voice</h3>
       <div class="voices" id="voices">
         <label class="voice-card selected" data-voice="my-MM-NilarNeural">
           <input type="radio" name="voice" value="my-MM-NilarNeural" checked>
       <div class="controls">
         <div class="control">
+          <label>Speed <span class="val" id="rateVal">+0%</span></label>
           <input type="range" id="rate" min="-50" max="50" value="0" step="5">
         </div>
         <div class="control">
+          <label>Pitch <span class="val" id="pitchVal">+0Hz</span></label>
           <input type="range" id="pitch" min="-50" max="50" value="0" step="5">
         </div>
       </div>
       <div class="actions">
+        <button class="btn-primary" id="generateBtn">Generate Voice</button>
       </div>
       <div class="status" id="status"></div>
       <div class="output" id="output">
         <audio id="player" controls></audio>
         <div class="actions">
+          <a class="btn-secondary" id="downloadLink" download="myanmar_voice.mp3">Download MP3</a>
         </div>
       </div>
+    </div>
+  </section>
+  <!-- How it works -->
+  <section id="how-it-works">
+    <div class="section-head">
+      <p class="eyebrow">How It Works</p>
+      <h2>From text to voice in three steps</h2>
+      <p>No installation, no registration. Everything runs directly in your browser.</p>
+    </div>
+    <div class="grid">
+      <div class="card">
+        <div class="index">01</div>
+        <h3>Write or paste your text</h3>
+        <p>Add up to 10,000 characters of Myanmar text — scripts, articles, captions, or study notes.</p>
+      </div>
+      <div class="card">
+        <div class="index">02</div>
+        <h3>Pick a voice &amp; tune it</h3>
+        <p>Choose between Nilar (female) and Thiha (male), then adjust the speaking speed and pitch.</p>
+      </div>
+      <div class="card">
+        <div class="index">03</div>
+        <h3>Generate &amp; download</h3>
+        <p>Click Generate, preview the audio instantly, and download it as an MP3 file.</p>
+      </div>
+    </div>
+  </section>
+  <!-- Features -->
+  <section>
+    <div class="section-head">
+      <p class="eyebrow">Features</p>
+      <h2>Built for creators &amp; learners</h2>
+      <p>Everything you need for quick, natural Myanmar voiceovers.</p>
+    </div>
+    <div class="grid">
+      <div class="card">
+        <h3>Natural Neural Voices</h3>
+        <p>Powered by Microsoft's neural text-to-speech engine for clear, lifelike Myanmar pronunciation.</p>
+      </div>
+      <div class="card">
+        <h3>Adjustable Speed &amp; Pitch</h3>
+        <p>Slow it down for learning material, or speed it up for short-form video narration.</p>
+      </div>
+      <div class="card">
+        <h3>Up to 10,000 Characters</h3>
+        <p>Convert long articles, scripts, or chapters in a single request.</p>
+      </div>
+      <div class="card">
+        <h3>Instant MP3 Download</h3>
+        <p>Your audio file is ready to download and use the moment it's generated.</p>
+      </div>
+      <div class="card">
+        <h3>No Sign-up Required</h3>
+        <p>Start using the tool immediately — there are no accounts, passwords, or limits to unlock.</p>
+      </div>
+      <div class="card">
+        <h3>Free to Use</h3>
+        <p>Myanmar Voice Studio is free for personal, educational, and commercial projects.</p>
+      </div>
+    </div>
+  </section>
+  <!-- Use cases -->
+  <section>
+    <div class="section-head">
+      <p class="eyebrow">Use Cases</p>
+      <h2>Who is this for?</h2>
+    </div>
+    <div class="grid">
+      <div class="card">
+        <h3>Content Creators</h3>
+        <p>Generate voiceovers for YouTube videos, TikToks, and Reels in Myanmar language.</p>
+      </div>
+      <div class="card">
+        <h3>Educators &amp; Students</h3>
+        <p>Turn lesson notes and reading material into audio for revision and accessibility.</p>
+      </div>
+      <div class="card">
+        <h3>Developers</h3>
+        <p>Prototype Myanmar-language apps, games, and IVR systems with quick sample audio.</p>
+      </div>
+      <div class="card">
+        <h3>Podcasters &amp; Writers</h3>
+        <p>Preview how your written Myanmar content sounds when read aloud.</p>
+      </div>
+      <div class="card">
+        <h3>Accessibility</h3>
+        <p>Help readers who are visually impaired or prefer listening over reading.</p>
+      </div>
+      <div class="card">
+        <h3>Translators</h3>
+        <p>Check pronunciation and pacing of translated Myanmar scripts before recording.</p>
+      </div>
+    </div>
+  </section>
   <!-- In-content ad slot -->
   <div class="ad-slot">
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
   </div>
+  <!-- FAQ -->
+  <section id="faq">
+    <div class="section-head">
+      <p class="eyebrow">FAQ</p>
+      <h2>Frequently asked questions</h2>
+    </div>
+    <details class="faq-item" open>
+      <summary>Is Myanmar Voice Studio free to use?</summary>
+      <p>Yes. The tool is completely free for personal, educational, and commercial use. There are no hidden fees or subscriptions.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Which Myanmar voices are available?</summary>
+      <p>You can choose between two neural voices: Nilar, a female voice, and Thiha, a male voice. Both are tuned for natural Burmese pronunciation.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Can I change the speaking speed and pitch?</summary>
+      <p>Yes. Use the Speed and Pitch sliders before generating audio to make the voice sound slower, faster, deeper, or lighter.</p>
+    </details>
+    <details class="faq-item">
+      <summary>What is the maximum text length?</summary>
+      <p>You can convert up to 10,000 characters of Myanmar text in a single request.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Can I use the audio in my videos or projects?</summary>
+      <p>Yes, generated audio files can be downloaded and used in your own videos, presentations, apps, and other projects.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Is my text stored or shared with anyone?</summary>
+      <p>No. Text you submit is sent only to generate the audio file and is not stored on our servers afterwards. See our <a href="/privacy">Privacy Policy</a> for details.</p>
+    </details>
+  </section>
+</div>
+<footer>
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-col">
+        <h4>Myanmar Voice Studio</h4>
+        <a href="/">Home</a>
+        <a href="#tool">Text to Speech Tool</a>
+        <a href="#how-it-works">How It Works</a>
+      </div>
+      <div class="footer-col">
+        <h4>Resources</h4>
+        <a href="#faq">FAQ</a>
+        <a href="/about">About</a>
+      </div>
+      <div class="footer-col">
+        <h4>Legal</h4>
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/terms">Terms of Use</a>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      &copy; 2026 Myanmar Voice Studio. Voices powered by neural text-to-speech technology.
+    </div>
+  </div>
+</footer>
+<script src="/app.js"></script>
 </body>
 </html>

privacy.html ADDED Viewed

	@@ -0,0 +1,121 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Privacy Policy — Myanmar Voice Studio</title>
+<meta name="description" content="Privacy Policy for Myanmar Voice Studio, including information on data handling, cookies, and third-party advertising.">
+<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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/style.css">
+<script async src="https://pagead2.googleadsense.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
+</head>
+<body>
+<nav class="nav">
+  <div class="wrap">
+    <a href="/" class="brand"><span class="dot"></span>Myanmar Voice Studio</a>
+    <div class="nav-links">
+      <a href="/">Home</a>
+      <a href="/#tool">Try It</a>
+      <a href="/#how-it-works">How It Works</a>
+      <a href="/#faq">FAQ</a>
+      <a href="/about">About</a>
+    </div>
+  </div>
+</nav>
+<div class="wrap prose">
+  <h1>Privacy Policy</h1>
+  <p class="updated">Last updated: June 2026</p>
+  <p>This Privacy Policy explains how Myanmar Voice Studio ("we", "our", "the
+     site") handles information when you use our website and text-to-speech
+     tool.</p>
+  <h2>Information you provide</h2>
+  <p>The text you enter into the tool is sent to our server only to generate
+     the corresponding audio file. We do not require you to create an account,
+     and we do not knowingly collect names, email addresses, or other personal
+     identifiers through the tool itself.</p>
+  <h2>How generated audio is handled</h2>
+  <p>Audio files are generated on demand and streamed back to your browser for
+     playback and download. We do not permanently store the text you submit or
+     the audio files that are generated from it on our servers.</p>
+  <h2>Cookies and similar technologies</h2>
+  <p>Our website does not set its own tracking cookies for the core
+     text-to-speech tool. However, third-party services embedded on this site
+     — including advertising providers — may set cookies or use similar
+     technologies in your browser, as described below.</p>
+  <h2>Advertising (Google AdSense)</h2>
+  <p>We use Google AdSense to display advertisements on this site. Google and
+     its partners may use cookies, device identifiers, and similar
+     technologies to serve ads based on your visits to this and other
+     websites.</p>
+  <ul>
+    <li>You can learn more about how Google uses information from sites that
+        use its services at
+        <a href="https://policies.google.com/technologies/partner-sites" target="_blank" rel="noopener">policies.google.com/technologies/partner-sites</a>.</li>
+    <li>You can opt out of personalized advertising by visiting
+        <a href="https://adssettings.google.com" target="_blank" rel="noopener">Google Ads Settings</a>.</li>
+    <li>Third-party vendors, including Google, may use cookies to serve ads
+        based on a user's prior visits to this website or other websites.</li>
+  </ul>
+  <h2>Analytics</h2>
+  <p>We may use basic, privacy-respecting analytics to understand overall site
+     usage (for example, page views and approximate traffic sources). This
+     information is aggregated and is not used to identify individual
+     visitors.</p>
+  <h2>Children's privacy</h2>
+  <p>This site is not directed at children under the age of 13, and we do not
+     knowingly collect personal information from children.</p>
+  <h2>Third-party links</h2>
+  <p>Our site may contain links to other websites, including advertisers. We
+     are not responsible for the privacy practices or content of those
+     external sites.</p>
+  <h2>Changes to this policy</h2>
+  <p>We may update this Privacy Policy from time to time. Any changes will be
+     posted on this page with an updated "Last updated" date.</p>
+  <h2>Contact</h2>
+  <p>If you have questions about this Privacy Policy, please contact us at
+     <a href="mailto:contact@example.com">contact@example.com</a>.</p>
+</div>
+<footer>
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-col">
+        <h4>Myanmar Voice Studio</h4>
+        <a href="/">Home</a>
+        <a href="/#tool">Text to Speech Tool</a>
+        <a href="/#how-it-works">How It Works</a>
+      </div>
+      <div class="footer-col">
+        <h4>Resources</h4>
+        <a href="/#faq">FAQ</a>
+        <a href="/about">About</a>
+      </div>
+      <div class="footer-col">
+        <h4>Legal</h4>
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/terms">Terms of Use</a>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      &copy; 2026 Myanmar Voice Studio. Voices powered by neural text-to-speech technology.
+    </div>
+  </div>
+</footer>
+</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,448 @@

+:root{
+  --bg:#F7F4ED;
+  --surface:#FFFFFF;
+  --surface-2:#F1EAD9;
+  --ink:#221F1C;
+  --ink-soft:#7A6E5F;
+  --jade:#2F6F5E;
+  --jade-soft:#E1EDE9;
+  --amber:#D98C3D;
+  --amber-soft:#FAEBD8;
+  --line:#E7E0D3;
+  --radius:14px;
+  --serif:'Fraunces', serif;
+  --sans:'Inter', sans-serif;
+  --mm:'Noto Sans Myanmar', sans-serif;
+  --maxw:920px;
+}
+*{ box-sizing:border-box; }
+html{ scroll-behavior:smooth; }
+body{
+  margin:0;
+  background:var(--bg);
+  color:var(--ink);
+  font-family:var(--sans);
+  line-height:1.65;
+  -webkit-font-smoothing:antialiased;
+}
+a{ color:var(--jade); text-decoration:none; }
+a:hover{ text-decoration:underline; }
+img{ max-width:100%; }
+.wrap{
+  max-width:var(--maxw);
+  margin:0 auto;
+  padding:0 20px;
+}
+/* ---------- Ad slots ---------- */
+.ad-slot{
+  margin:36px auto;
+  padding:14px 0;
+  text-align:center;
+  max-width:var(--maxw);
+}
+.ad-label{
+  font-family:var(--serif);
+  font-style:italic;
+  font-size:11px;
+  letter-spacing:.14em;
+  text-transform:uppercase;
+  color:var(--ink-soft);
+  margin-bottom:8px;
+}
+/* ---------- Nav ---------- */
+.nav{
+  border-bottom:1px solid var(--line);
+  background:var(--surface);
+}
+.nav .wrap{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  padding:16px 20px;
+  flex-wrap:wrap;
+  gap:10px;
+}
+.brand{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  font-family:var(--serif);
+  font-weight:700;
+  font-size:18px;
+  color:var(--ink);
+}
+.brand .dot{
+  width:10px; height:10px;
+  border-radius:50%;
+  background:linear-gradient(135deg, var(--jade), var(--amber));
+  display:inline-block;
+}
+.nav-links{
+  display:flex;
+  gap:18px;
+  flex-wrap:wrap;
+  font-size:14px;
+}
+.nav-links a{ color:var(--ink-soft); }
+.nav-links a:hover{ color:var(--jade); }
+.nav-links a.active{ color:var(--jade); font-weight:600; }
+/* ---------- Hero ---------- */
+.hero{
+  padding:52px 0 28px;
+  text-align:center;
+}
+.eyebrow{
+  font-family:var(--serif);
+  font-style:italic;
+  font-weight:500;
+  font-size:13px;
+  letter-spacing:.22em;
+  text-transform:uppercase;
+  color:var(--jade);
+  margin:0 0 12px;
+}
+h1{
+  font-family:var(--serif);
+  font-weight:700;
+  font-size:clamp(30px,7vw,46px);
+  margin:0 0 14px;
+  letter-spacing:-.01em;
+}
+.hero p.lead{
+  color:var(--ink-soft);
+  font-size:16px;
+  max-width:560px;
+  margin:0 auto;
+}
+/* ---------- Signature waveform ---------- */
+.wave{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  gap:4px;
+  height:36px;
+  margin:26px auto 0;
+}
+.wave .bar{
+  width:4px;
+  border-radius:3px;
+  background:linear-gradient(180deg, var(--jade), var(--amber));
+  height:10px;
+  animation:breathe 2.6s ease-in-out infinite;
+  transition:height .12s ease;
+}
+@keyframes breathe{
+  0%, 100% { height:8px; opacity:.55; }
+  50% { height:30px; opacity:1; }
+}
+.wave.is-active .bar{ animation:none; }
+/* ---------- Sections ---------- */
+section{ padding:36px 0; }
+section.tight{ padding:18px 0; }
+.section-head{
+  text-align:center;
+  margin-bottom:28px;
+}
+.section-head .eyebrow{ margin-bottom:8px; }
+h2{
+  font-family:var(--serif);
+  font-weight:700;
+  font-size:clamp(24px,5vw,32px);
+  margin:0 0 8px;
+}
+.section-head p{
+  color:var(--ink-soft);
+  font-size:15px;
+  max-width:520px;
+  margin:0 auto;
+}
+/* ---------- Tool panel ---------- */
+.panel{
+  background:var(--surface);
+  border:1px solid var(--line);
+  border-radius:var(--radius);
+  padding:22px;
+  margin-top:18px;
+  box-shadow:0 1px 2px rgba(34,31,28,.03);
+}
+.panel h3{
+  font-family:var(--serif);
+  font-style:italic;
+  font-weight:500;
+  font-size:13px;
+  letter-spacing:.16em;
+  text-transform:uppercase;
+  color:var(--ink-soft);
+  margin:0 0 14px;
+}
+textarea{
+  width:100%;
+  min-height:170px;
+  resize:vertical;
+  border:1px solid var(--line);
+  border-radius:10px;
+  background:
+    repeating-linear-gradient(
+      to bottom, transparent, transparent 35px,
+      var(--surface-2) 35px, var(--surface-2) 36px
+    ),
+    var(--surface);
+  padding:14px 16px;
+  font-family:var(--mm);
+  font-size:16px;
+  line-height:36px;
+  color:var(--ink);
+  outline:none;
+}
+textarea:focus{ border-color:var(--jade); }
+textarea::placeholder{ color:var(--ink-soft); font-family:var(--sans); }
+.char-count{
+  text-align:right;
+  font-size:12px;
+  color:var(--ink-soft);
+  margin-top:6px;
+  font-family:var(--serif);
+}
+.char-count.over{ color:#C0492B; }
+/* ---------- Voice cards ---------- */
+.voices{
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:12px;
+  margin-top:8px;
+}
+.voice-card{
+  border:1px solid var(--line);
+  border-radius:10px;
+  padding:14px;
+  cursor:pointer;
+  background:var(--surface);
+  transition:border-color .15s ease, background .15s ease;
+  position:relative;
+}
+.voice-card input{
+  position:absolute; opacity:0; inset:0; cursor:pointer; margin:0;
+}
+.voice-card .name{ font-family:var(--mm); font-weight:600; font-size:15px; }
+.voice-card .role{
+  font-family:var(--serif);
+  font-style:italic;
+  font-size:12px;
+  letter-spacing:.08em;
+  color:var(--ink-soft);
+  text-transform:uppercase;
+  margin-top:4px;
+}
+.voice-card.selected{ border-color:var(--jade); background:var(--jade-soft); }
+.voice-card.selected .role{ color:var(--jade); }
+/* ---------- Sliders ---------- */
+.controls{
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:16px;
+  margin-top:18px;
+}
+.control label{
+  display:flex;
+  justify-content:space-between;
+  font-size:13px;
+  color:var(--ink-soft);
+  margin-bottom:6px;
+  font-family:var(--serif);
+  font-style:italic;
+  letter-spacing:.04em;
+}
+.control label span.val{
+  font-family:var(--sans);
+  font-style:normal;
+  color:var(--ink);
+  font-weight:600;
+}
+input[type="range"]{ width:100%; accent-color:var(--jade); }
+@media (max-width:480px){
+  .controls{ grid-template-columns:1fr; }
+  .voices{ grid-template-columns:1fr; }
+}
+/* ---------- Buttons ---------- */
+.actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
+button, .btn{
+  font-family:var(--sans);
+  font-size:15px;
+  font-weight:600;
+  border:none;
+  border-radius:10px;
+  padding:13px 24px;
+  cursor:pointer;
+  transition:opacity .15s ease, transform .05s ease;
+}
+button:active{ transform:scale(.98); }
+button:disabled{ opacity:.55; cursor:wait; }
+.btn-primary{ background:var(--amber); color:#fff; flex:1; }
+.btn-primary:hover:not(:disabled){ opacity:.92; }
+.btn-secondary{
+  background:var(--surface-2);
+  color:var(--ink);
+  border:1px solid var(--line);
+  text-decoration:none;
+  display:inline-block;
+  text-align:center;
+}
+/* ---------- Output ---------- */
+.output{ margin-top:18px; display:none; }
+.output.visible{ display:block; }
+.output audio{ width:100%; margin-top:14px; }
+.status{ font-size:13px; color:var(--ink-soft); margin-top:10px; min-height:18px; }
+.status.error{ color:#C0492B; }
+/* ---------- Feature / step grids ---------- */
+.grid{
+  display:grid;
+  grid-template-columns:repeat(3, 1fr);
+  gap:16px;
+}
+@media (max-width:720px){
+  .grid{ grid-template-columns:1fr 1fr; }
+}
+@media (max-width:480px){
+  .grid{ grid-template-columns:1fr; }
+}
+.card{
+  background:var(--surface);
+  border:1px solid var(--line);
+  border-radius:var(--radius);
+  padding:20px;
+}
+.card .index{
+  font-family:var(--serif);
+  font-style:italic;
+  font-size:13px;
+  color:var(--jade);
+  margin-bottom:6px;
+}
+.card h3{
+  font-family:var(--serif);
+  font-weight:600;
+  font-size:17px;
+  margin:0 0 6px;
+  text-transform:none;
+  letter-spacing:0;
+  color:var(--ink);
+}
+.card p{
+  font-size:14px;
+  color:var(--ink-soft);
+  margin:0;
+}
+/* ---------- FAQ ---------- */
+.faq-item{
+  border-bottom:1px solid var(--line);
+  padding:16px 0;
+}
+.faq-item summary{
+  font-family:var(--serif);
+  font-weight:600;
+  font-size:16px;
+  cursor:pointer;
+  list-style:none;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:12px;
+}
+.faq-item summary::-webkit-details-marker{ display:none; }
+.faq-item summary::after{
+  content:"+";
+  font-size:20px;
+  color:var(--jade);
+  flex-shrink:0;
+}
+.faq-item[open] summary::after{ content:"\2212"; }
+.faq-item p{
+  color:var(--ink-soft);
+  font-size:14px;
+  margin:10px 0 0;
+}
+/* ---------- Prose pages (about / privacy / terms) ---------- */
+.prose{ padding:44px 0 60px; }
+.prose h1{ text-align:left; margin-bottom:6px; }
+.prose .updated{
+  font-family:var(--serif);
+  font-style:italic;
+  font-size:13px;
+  color:var(--ink-soft);
+  margin-bottom:28px;
+}
+.prose h2{
+  font-size:20px;
+  margin-top:32px;
+}
+.prose p, .prose li{
+  color:var(--ink-soft);
+  font-size:15px;
+}
+.prose ul{ padding-left:20px; }
+.prose a{ color:var(--jade); }
+/* ---------- Footer ---------- */
+footer{
+  border-top:1px solid var(--line);
+  margin-top:40px;
+  padding:32px 0;
+  background:var(--surface);
+}
+.footer-grid{
+  display:flex;
+  justify-content:space-between;
+  flex-wrap:wrap;
+  gap:24px;
+}
+.footer-col h4{
+  font-family:var(--serif);
+  font-style:italic;
+  font-weight:500;
+  font-size:12px;
+  letter-spacing:.14em;
+  text-transform:uppercase;
+  color:var(--ink-soft);
+  margin:0 0 10px;
+}
+.footer-col a{
+  display:block;
+  font-size:14px;
+  color:var(--ink);
+  margin-bottom:6px;
+}
+.footer-col a:hover{ color:var(--jade); }
+.footer-bottom{
+  margin-top:24px;
+  padding-top:16px;
+  border-top:1px solid var(--line);
+  font-size:12px;
+  color:var(--ink-soft);
+  text-align:center;
+}

terms.html ADDED Viewed

	@@ -0,0 +1,111 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Terms of Use — Myanmar Voice Studio</title>
+<meta name="description" content="Terms of Use for Myanmar Voice Studio, a free Myanmar text-to-speech tool.">
+<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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/style.css">
+<script async src="https://pagead2.googleadsense.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
+</head>
+<body>
+<nav class="nav">
+  <div class="wrap">
+    <a href="/" class="brand"><span class="dot"></span>Myanmar Voice Studio</a>
+    <div class="nav-links">
+      <a href="/">Home</a>
+      <a href="/#tool">Try It</a>
+      <a href="/#how-it-works">How It Works</a>
+      <a href="/#faq">FAQ</a>
+      <a href="/about">About</a>
+    </div>
+  </div>
+</nav>
+<div class="wrap prose">
+  <h1>Terms of Use</h1>
+  <p class="updated">Last updated: June 2026</p>
+  <p>By using Myanmar Voice Studio (the "Service"), you agree to the following
+     terms. If you do not agree, please do not use the Service.</p>
+  <h2>Use of the Service</h2>
+  <p>The Service converts text you submit into spoken audio using
+     text-to-speech technology. You may use the Service for personal,
+     educational, and commercial purposes, subject to these terms.</p>
+  <h2>Acceptable use</h2>
+  <p>You agree not to use the Service to generate audio that is:</p>
+  <ul>
+    <li>Illegal, harmful, threatening, or abusive.</li>
+    <li>Defamatory, hateful, or discriminatory.</li>
+    <li>Used to impersonate a real person without consent, or to mislead
+        others about the source of the audio.</li>
+    <li>In violation of any applicable law or the rights of any third party.</li>
+  </ul>
+  <p>We reserve the right to restrict access to the Service for anyone who
+     misuses it.</p>
+  <h2>Generated audio</h2>
+  <p>You are responsible for the text you submit and for how you use the
+     resulting audio files. We make no claim of ownership over the text you
+     provide or the audio generated from it.</p>
+  <h2>Availability and accuracy</h2>
+  <p>The Service is provided on an "as is" and "as available" basis. We do not
+     guarantee that the Service will be uninterrupted, error-free, or that the
+     generated pronunciation will always be perfectly accurate.</p>
+  <h2>Limitation of liability</h2>
+  <p>To the fullest extent permitted by law, Myanmar Voice Studio and its
+     operator shall not be liable for any indirect, incidental, or
+     consequential damages arising from your use of the Service.</p>
+  <h2>Advertising</h2>
+  <p>The Service is supported by advertising served through Google AdSense.
+     See our <a href="/privacy">Privacy Policy</a> for details on how
+     advertising partners may use cookies and similar technologies.</p>
+  <h2>Changes to these terms</h2>
+  <p>We may update these Terms of Use from time to time. Continued use of the
+     Service after changes are posted constitutes acceptance of the updated
+     terms.</p>
+  <h2>Contact</h2>
+  <p>Questions about these terms can be sent to
+     <a href="mailto:contact@example.com">contact@example.com</a>.</p>
+</div>
+<footer>
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-col">
+        <h4>Myanmar Voice Studio</h4>
+        <a href="/">Home</a>
+        <a href="/#tool">Text to Speech Tool</a>
+        <a href="/#how-it-works">How It Works</a>
+      </div>
+      <div class="footer-col">
+        <h4>Resources</h4>
+        <a href="/#faq">FAQ</a>
+        <a href="/about">About</a>
+      </div>
+      <div class="footer-col">
+        <h4>Legal</h4>
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/terms">Terms of Use</a>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      &copy; 2026 Myanmar Voice Studio. Voices powered by neural text-to-speech technology.
+    </div>
+  </div>
+</footer>
+</body>
+</html>