Spaces:

Phoe2004
/

USP

Runtime error

App Files Files Community

Phoe2004 commited on Jun 17

Commit

266e145

verified ·

1 Parent(s): 6c87de8

Upload index.html

Browse files

Files changed (1) hide show

index.html +346 -22

index.html CHANGED Viewed

@@ -1,32 +1,330 @@
 <!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>
@@ -46,13 +344,15 @@
 <!-- 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">
@@ -205,15 +505,17 @@
   </section>
   <!-- In-content 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="2222222222"
-         data-ad-format="auto"
-         data-full-width-responsive="true"></ins>
-    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
   </div>
   <!-- FAQ -->
@@ -283,5 +585,27 @@
 </footer>
 <script src="/app.js"></script>
 </body>
 </html>

 <!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 — 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.">
+<!-- Google AdSense Verification -->
+<meta name="google-adsense-account" content="ca-pub-1188893611988786">
 <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@300;400;500;600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
+<!-- Google AdSense -->
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1188893611988786" crossorigin="anonymous"></script>
+<style>
+/* ===== NAVBAR REDESIGN ===== */
+:root {
+  --nav-h: 64px;
+  --brand-color: #7C3AED;
+  --brand-light: #EDE9FE;
+  --brand-mid: #A78BFA;
+  --accent: #F59E0B;
+  --surface: rgba(255,255,255,0.85);
+  --text-main: #1E1B4B;
+  --text-muted: #6B7280;
+  --radius: 12px;
+  --shadow-nav: 0 1px 0 rgba(0,0,0,.06), 0 4px 24px rgba(124,58,237,.08);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* ── Navbar shell ── */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: var(--nav-h);
+  background: var(--surface);
+  backdrop-filter: blur(18px) saturate(180%);
+  -webkit-backdrop-filter: blur(18px) saturate(180%);
+  border-bottom: 1px solid rgba(124,58,237,.12);
+  box-shadow: var(--shadow-nav);
+}
+.nav .wrap {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 24px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+/* ── Brand / Logo ── */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.brand-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(124,58,237,.35);
+  flex-shrink: 0;
+}
+.brand-icon svg {
+  width: 20px;
+  height: 20px;
+  fill: white;
+}
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+.brand-name {
+  font-family: 'Fraunces', serif;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-main);
+  letter-spacing: -0.01em;
+}
+.brand-tagline {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: var(--brand-color);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+/* ── Nav links ── */
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.nav-links a {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-decoration: none;
+  padding: 6px 14px;
+  border-radius: 8px;
+  transition: color .18s ease, background .18s ease;
+  white-space: nowrap;
+}
+.nav-links a:hover {
+  color: var(--brand-color);
+  background: var(--brand-light);
+}
+.nav-links a.active {
+  color: var(--brand-color);
+  background: var(--brand-light);
+  font-weight: 600;
+}
+/* ── CTA button in nav ── */
+.nav-cta {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fff !important;
+  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%) !important;
+  padding: 8px 18px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 2px 8px rgba(124,58,237,.3);
+  transition: transform .15s ease, box-shadow .15s ease !important;
+  margin-left: 6px;
+}
+.nav-cta:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(124,58,237,.4) !important;
+  background: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%) !important;
+  color: #fff !important;
+}
+/* ── Badge chip ── */
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #059669;
+  background: #D1FAE5;
+  padding: 2px 7px;
+  border-radius: 99px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin-left: 4px;
+}
+.nav-badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  background: #10B981;
+  border-radius: 50%;
+  animation: pulse-dot 2s infinite;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .6; transform: scale(.85); }
+}
+/* ── Hamburger (mobile) ── */
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  transition: background .15s;
+}
+.nav-toggle:hover { background: var(--brand-light); }
+.nav-toggle span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--text-main);
+  border-radius: 2px;
+  transition: transform .25s ease, opacity .25s ease;
+  transform-origin: center;
+}
+.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
+.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+/* ── Mobile menu ── */
+@media (max-width: 720px) {
+  .nav-toggle { display: flex; }
+  .brand-tagline { display: none; }
+  .nav-links {
+    display: none;
+    position: absolute;
+    top: var(--nav-h);
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: stretch;
+    background: rgba(255,255,255,0.97);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(124,58,237,.12);
+    padding: 12px 16px 20px;
+    gap: 4px;
+    box-shadow: 0 8px 32px rgba(0,0,0,.1);
+  }
+  .nav-links.open { display: flex; }
+  .nav-links a {
+    font-size: 0.95rem;
+    padding: 10px 16px;
+    border-radius: 10px;
+  }
+  .nav-cta {
+    margin-left: 0 !important;
+    text-align: center;
+    margin-top: 4px;
+  }
+  .nav-badge { display: none; }
+}
+/* ===== AD SLOT POLISH ===== */
+.ad-slot {
+  max-width: 1120px;
+  margin: 32px auto;
+  padding: 0 24px;
+}
+.ad-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: #9CA3AF;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-align: center;
+  margin-bottom: 8px;
+}
+.ad-inner {
+  background: #F9FAFB;
+  border: 1px solid #E5E7EB;
+  border-radius: var(--radius);
+  overflow: hidden;
+  min-height: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
 </head>
 <body>
+<!-- ===================== NAVBAR ===================== -->
 <nav class="nav">
   <div class="wrap">
+    <!-- Brand -->
+    <a href="/" class="brand">
+      <div class="brand-icon">
+        <!-- Waveform / speaker SVG icon -->
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+        </svg>
+      </div>
+      <div class="brand-text">
+        <span class="brand-name">Myanmar Voice Studio</span>
+        <span class="brand-tagline">Free TTS · Neural Voices</span>
+      </div>
+    </a>
+    <!-- Desktop nav links -->
+    <div class="nav-links" id="navLinks">
       <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>
+      <span class="nav-badge">Free</span>
+      <a href="#tool" class="nav-cta">Generate Voice →</a>
     </div>
+    <!-- Hamburger toggle -->
+    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
   </div>
 </nav>
 <!-- Top ad slot -->
 <div class="ad-slot">
   <div class="ad-label">Advertisement</div>
+  <div class="ad-inner">
+    <ins class="adsbygoogle"
+         style="display:block;width:100%"
+         data-ad-client="ca-pub-1188893611988786"
+         data-ad-slot="1111111111"
+         data-ad-format="auto"
+         data-full-width-responsive="true"></ins>
+    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+  </div>
 </div>
 <div class="wrap" id="tool">
   </section>
   <!-- In-content ad slot -->
+  <div class="ad-slot" style="padding:0">
     <div class="ad-label">Advertisement</div>
+    <div class="ad-inner">
+      <ins class="adsbygoogle"
+           style="display:block;width:100%"
+           data-ad-client="ca-pub-1188893611988786"
+           data-ad-slot="2222222222"
+           data-ad-format="auto"
+           data-full-width-responsive="true"></ins>
+      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+    </div>
   </div>
   <!-- FAQ -->
 </footer>
 <script src="/app.js"></script>
+<!-- Hamburger toggle script -->
+<script>
+(function(){
+  var btn = document.getElementById('navToggle');
+  var menu = document.getElementById('navLinks');
+  if(!btn || !menu) return;
+  btn.addEventListener('click', function(){
+    var open = menu.classList.toggle('open');
+    btn.classList.toggle('open', open);
+    btn.setAttribute('aria-expanded', open);
+  });
+  // Close on link click (mobile)
+  menu.querySelectorAll('a').forEach(function(a){
+    a.addEventListener('click', function(){
+      menu.classList.remove('open');
+      btn.classList.remove('open');
+    });
+  });
+})();
+</script>
 </body>
 </html>