Tttt / index.html
Ezmary's picture
Update index.html
2471577 verified
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- SEO Meta Tags -->
<title>آلفا صدا | سوپر اپلیکیشن هوش مصنوعی صوتی</title>
<meta name="description" content="اولین استودیو هوشمند صوتی ایران. تغییر صدا، متن به گفتار، ساخت پادکست و حذف نویز با تکنولوژی RVC و Neural TTS.">
<meta name="keywords" content="تغییر صدا هوش مصنوعی، متن به صدا فارسی، هوش مصنوعی صوتی، حذف نویز، ساخت پادکست، تبدیل گفتار به متن">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4A6CFA',
secondary: '#0FD4A8',
accent: '#F59E0B',
dark: '#0F172A',
appBg: '#F1F5F9'
},
borderRadius: {
'app': '2rem',
}
}
}
}
</script>
<style>
body {
font-family: 'Vazirmatn', sans-serif;
background-color: #F1F5F9;
color: #1E293B;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
/* Mobile-First Layout */
.app-container {
max-width: 500px;
margin: 0 auto;
background: #F1F5F9;
min-height: 100vh;
position: relative;
padding-bottom: 100px;
}
.glass-nav {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.tool-card {
background: white;
border-radius: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #E2E8F0;
}
.tool-card:active {
transform: scale(0.95);
background: #F8FAFC;
}
/* Smooth Tab Transition */
.tab-content {
display: none;
animation: slideIn 0.3s ease-out;
}
.tab-content.active {
display: block;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Desktop Mockup */
@media (min-width: 501px) {
body { background-color: #E2E8F0; }
.app-container {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
margin-top: 20px;
margin-bottom: 20px;
border-radius: 3rem;
overflow: hidden;
height: 90vh;
overflow-y: auto;
}
}
</style>
</head>
<body>
<div class="app-container no-scrollbar">
<!-- App Header -->
<header class="p-6 flex justify-between items-center bg-white/50 sticky top-0 z-50 backdrop-blur-md">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg">
<i class="fas fa-wave-square"></i>
</div>
<h1 class="text-xl font-black text-slate-800">آلفا صدا</h1>
</div>
<button class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600">
<i class="fas fa-user"></i>
</button>
</header>
<!-- Tab 1: Home (Tools Grid) -->
<div id="home-tab" class="tab-content active p-6">
<!-- Credit Status -->
<div class="bg-gradient-to-r from-primary to-blue-600 rounded-3xl p-6 text-white shadow-xl mb-8 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
<h2 class="text-lg font-bold mb-2">اعتبار رایگان امروز</h2>
<div class="flex gap-4 mt-4 text-center">
<div class="flex-1 bg-white/20 rounded-2xl p-3 backdrop-blur-md">
<span class="block text-2xl font-black">۵</span>
<span class="text-[10px] opacity-80">متن به صدا</span>
</div>
<div class="flex-1 bg-white/20 rounded-2xl p-3 backdrop-blur-md">
<span class="block text-2xl font-black">۱۰</span>
<span class="text-[10px] opacity-80">تغییر صدا</span>
</div>
</div>
</div>
<h3 class="font-black text-slate-800 mb-6 flex items-center gap-2">
<i class="fas fa-th-large text-primary"></i> ابزارهای هوشمند
</h3>
<!-- Tools Grid -->
<div class="grid grid-cols-2 gap-4">
<!-- TTS -->
<a href="/tts" class="tool-card p-5 text-center flex flex-col items-center">
<div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-keyboard"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">تبدیل متن<br>به صدا</span>
</a>
<!-- Voice Changer -->
<a href="/voice-changer" class="tool-card p-5 text-center flex flex-col items-center border-2 border-primary/20 shadow-lg shadow-primary/5">
<div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-microphone-lines"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">تغییر صدا<br>(AI)</span>
</a>
<!-- Podcast -->
<a href="/podcast" class="tool-card p-5 text-center flex flex-col items-center">
<div class="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-podcast"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">ساخت<br>پادکست</span>
</a>
<!-- Enhancement -->
<a href="/enhance" class="tool-card p-5 text-center flex flex-col items-center">
<div class="w-14 h-14 bg-orange-100 text-orange-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-wand-magic-sparkles"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">افزایش کیفیت<br>و حذف نویز</span>
</a>
<!-- STT -->
<a href="/stt" class="tool-card p-5 text-center flex flex-col items-center">
<div class="w-14 h-14 bg-cyan-100 text-cyan-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-file-audio"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">تبدیل گفتار<br>به متن</span>
</a>
<!-- AI Chat -->
<a href="/chat" class="tool-card p-5 text-center flex flex-col items-center">
<div class="w-14 h-14 bg-rose-100 text-rose-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
<i class="fas fa-video"></i>
</div>
<span class="text-xs font-black text-slate-700 leading-tight">چت صوتی و<br>تصویری</span>
</a>
</div>
</div>
<!-- Tab 2: Info/SEO (Content Section) -->
<div id="info-tab" class="tab-content p-6">
<h2 class="text-2xl font-black text-slate-900 mb-6">راهنمای جامع آلفا صدا</h2>
<div class="space-y-8 text-sm text-slate-600 leading-loose text-justify">
<!-- TTS SEO -->
<section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<h3 class="text-lg font-black text-primary mb-4">تبدیل متن به صدا با هوش مصنوعی</h3>
<p>
سرویس <strong>تبدیل متن به صدا</strong> آلفا صدا، پیشرفته‌ترین ابزار TTS فارسی است. ما با استفاده از مدل‌های Deep Learning، متن‌های شما را با لحنی کاملاً انسانی تولید می‌کنیم. این ابزار برای تولید کتاب صوتی، نریشن ویدیوهای اینستاگرامی و یوتیوب ایده‌آل است.
</p>
</section>
<!-- Voice Changer SEO -->
<section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<h3 class="text-lg font-black text-purple-600 mb-4">تغییر صدا با هوش مصنوعی (RVC)</h3>
<p>
تکنولوژی <strong>تغییر صدا</strong> به شما این امکان را می‌دهد تا فایل صوتی خود را به صدای خوانندگان مشهور یا شخصیت‌های محبوب تبدیل کنید. این فرآیند با دقت فرکانسی ۹۸٪ انجام می‌شود و تمام جزئیات صدای هدف را بازسازی می‌کند.
</p>
</section>
<!-- Podcast SEO -->
<section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<h3 class="text-lg font-black text-emerald-600 mb-4">ساخت پادکست هوشمند</h3>
<p>
دیگر نیازی به اجاره استودیو ندارید. با <strong>ساخت پادکست هوشمند</strong>، سناریو بنویسید و گفتگوهای چند نفره را با کیفیت عالی تحویل بگیرید. هوش مصنوعی ما به صورت خودکار موسیقی متن و فواصل صوتی را تنظیم می‌کند.
</p>
</section>
<!-- Enhancement SEO -->
<section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<h3 class="text-lg font-black text-orange-600 mb-4">حذف نویز و افزایش کیفیت صدا</h3>
<p>
ابزار <strong>افزایش کیفیت صدا</strong> نویزهای آزاردهنده محیطی، باد و خش‌خش را حذف کرده و با بازسازی فرکانس‌های ضعیف، خروجی استودیویی (HD) تحویل می‌دهد. مناسب برای ویس‌های ضبط شده در محیط‌های شلوغ.
</p>
</section>
<!-- STT SEO -->
<section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
<h3 class="text-lg font-black text-cyan-600 mb-4">تبدیل گفتار به متن</h3>
<p>
جلسات، ویس‌های تلگرامی و ویدیوهای خود را به راحتی به متن تایپ شده تبدیل کنید. ابزار <strong>تبدیل گفتار به متن</strong> ما از علائم نگارشی فارسی پشتیبانی کرده و دقت بسیار بالایی در تشخیص لهجه‌ها دارد.
</p>
</section>
</div>
<!-- FAQ Section -->
<div id="faq" class="mt-12 space-y-4 pb-20">
<h3 class="text-xl font-black text-center mb-8">سوالات متداول</h3>
<div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100">
<h4 class="font-bold text-slate-800 text-sm mb-2">آیا اعتبارها روزانه شارژ می‌شوند؟</h4>
<p class="text-xs text-slate-500">بله، هر شب ساعت ۰۰:۰۰ اعتبار ۵ تایی متن به صدا و ۱۰ تایی تغییر صدا برای تمام کاربران شارژ مجدد می‌شود.</p>
</div>
<div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100">
<h4 class="font-bold text-slate-800 text-sm mb-2">چگونه اشتراک نامحدود تهیه کنم؟</h4>
<p class="text-xs text-slate-500">از طریق منوی پروفایل و بخش ارتقای حساب، می‌توانید پلن‌های ۳۰ روزه، ۹۰ روزه و سالانه را با قیمت‌های استثنایی تهیه کنید.</p>
</div>
</div>
</div>
<!-- Bottom Navigation Bar (The App Feel) -->
<nav class="fixed bottom-0 left-0 right-0 glass-nav z-[100] max-w-[500px] mx-auto rounded-t-[2.5rem] shadow-[0_-10px_30px_rgba(0,0,0,0.05)]">
<div class="flex justify-around items-center h-20 px-6">
<button onclick="switchTab('home')" id="home-btn" class="flex flex-col items-center gap-1 text-primary">
<i class="fas fa-home text-xl"></i>
<span class="text-[10px] font-black">خانه</span>
</button>
<button onclick="switchTab('info')" id="info-btn" class="flex flex-col items-center gap-1 text-slate-400">
<i class="fas fa-book-open text-xl"></i>
<span class="text-[10px] font-bold">آموزش و سئو</span>
</button>
<div class="relative -top-8">
<a href="https://t.me/ezmarynoori" class="w-14 h-14 bg-dark text-white rounded-full flex items-center justify-center shadow-xl border-4 border-[#F1F5F9] active:scale-90 transition-transform">
<i class="fab fa-telegram-plane text-xl"></i>
</a>
</div>
<button onclick="window.location.href='/pricing'" class="flex flex-col items-center gap-1 text-slate-400">
<i class="fas fa-crown text-xl"></i>
<span class="text-[10px] font-bold">اشتراک</span>
</button>
<button onclick="window.location.href='/login'" class="flex flex-col items-center gap-1 text-slate-400">
<i class="fas fa-user-circle text-xl"></i>
<span class="text-[10px] font-bold">پروفایل</span>
</button>
</div>
</nav>
</div>
<script>
function switchTab(tabName) {
// Hide all contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Deactivate all buttons
document.querySelectorAll('nav button').forEach(btn => {
btn.classList.replace('text-primary', 'text-slate-400');
btn.querySelector('span').classList.replace('font-black', 'font-bold');
});
// Show selected content
document.getElementById(tabName + '-tab').classList.add('active');
// Active button style
const activeBtn = document.getElementById(tabName + '-btn');
activeBtn.classList.replace('text-slate-400', 'text-primary');
activeBtn.querySelector('span').classList.replace('font-bold', 'font-black');
// Scroll to top
if(window.innerWidth > 500) {
document.querySelector('.app-container').scrollTop = 0;
} else {
window.scrollTo(0, 0);
}
}
</script>
</body>
</html>