Hugging Face's logo

Spaces:
alperall
/
AlpDroid
No application file

App Files Community
AlpDroid / index.html
alperall's picture
alperall
Update index.html
63b9f54 verified
raw
history blame contribute delete
31.6 kB
<!DOCTYPE html>
<html lang="tr" class="dark">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AlpDroid - AI Assistant Platform</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary: #9333ea;
 --primary-dark: #7e22ce;
 --primary-light: #a855f7;
 --success: #22c55e;
 --bg-light: #f8fafc;
 --text-light: #1e293b;
 --bg-dark: #0f172a;
 --bg-dark-secondary: #1e293b;
 --text-dark: #f1f5f9;
 --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
 --transition: all 0.3s ease;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
 html, body {
 height: 100%;
 width: 100%;
 overflow-x: hidden;
 }
body.light {
 background-color: white !important;
 color: black !important;
 }
 body.dark {
 background-color: var(--bg-dark);
 color: var(--text-dark);
 }
 /* Loading Screen */
 .loading-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--bg-dark);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 0.5s ease;
 }
 .loading-animation {
 position: relative;
 width: 150px;
 height: 150px;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .loading-logo-image {
 width: 100%;
 height: 100%;
 object-fit: contain;
 animation: pulse 2s infinite ease-in-out;
 }
 @keyframes pulse {
 0% { transform: scale(0.95); opacity: 0.7; }
 50% { transform: scale(1.05); opacity: 1; }
 100% { transform: scale(0.95); opacity: 0.7; }
 }
 .loading-text {
 margin-top: 20px;
 font-size: 20px;
 color: var(--primary-light);
 letter-spacing: 2px;
 }
 .loading-credits {
 position: absolute;
 bottom: 20px;
 font-size: 14px;
 color: var(--text-dark);
 opacity: 0.7;
 }
 /* Header */
 header {
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 box-shadow: var(--shadow-dark);
 background-color: rgba(15, 23, 42, 0.9);
 backdrop-filter: blur(10px);
 position: sticky;
 top: 0;
 z-index: 100;
 }
 .light header {
 background-color: rgba(248, 250, 252, 0.9);
 box-shadow: var(--shadow-light);
 }
 .logo {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 1.5rem;
 font-weight: bold;
 color: var(--primary);
 }
 .logo i {
 font-size: 1.8rem;
 }
 /* Menu Button Animation */
 .menu-btn {
 background: none;
 border: none;
 cursor: pointer;
 width: 40px;
 height: 40px;
 position: relative;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 110;
 }
 .menu-btn-burger,
 .menu-btn-burger::before,
 .menu-btn-burger::after {
 width: 30px;
 height: 3px;
 background-color: var(--primary);
 transition: var(--transition);
 border-radius: 2px;
 }
 .menu-btn-burger::before,
 .menu-btn-burger::after {
 content: '';
 position: absolute;
 left: 5px;
 }
 .menu-btn-burger::before {
 transform: translateY(-10px);
 width: 30px;
 }
 .menu-btn-burger::after {
 transform: translateY(10px);
 width: 25px;
 }
 .menu-btn.open .menu-btn-burger {
 transform: translateX(-50px);
 background: transparent;
 }
 .menu-btn.open .menu-btn-burger::before {
 transform: rotate(45deg) translate(35px, -35px);
 width: 30px;
 }
 .menu-btn.open .menu-btn-burger::after {
 transform: rotate(-45deg) translate(35px, 35px);
 width: 30px;
 }
 /* Controls */
 .controls {
 display: flex;
 align-items: center;
 gap: 15px;
 }
 .theme-toggle {
 background: none;
 border: none;
 cursor: pointer;
 font-size: 1.5rem;
 color: var(--primary);
 transition: var(--transition);
 }
 .theme-toggle:hover {
 color: var(--primary-light);
 transform: rotate(30deg);
 }
 /* Navigation */
 .nav {
 position: fixed;
 top: 0;
 right: -300px;
 width: 300px;
 height: 100%;
 background-color: var(--bg-dark-secondary);
 padding: 100px 20px 20px;
 transition: var(--transition);
 z-index: 105;
 overflow-y: auto;
 }
 .light .nav {
 background-color: var(--bg-light);
 box-shadow: var(--shadow-light);
 }
 .nav.open {
 right: 0;
 }
 .nav-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 opacity: 0;
 visibility: hidden;
 transition: var(--transition);
 z-index: 104;
 }
 .nav-overlay.open {
 opacity: 1;
 visibility: visible;
 }
 .nav-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 10px;
 }
 .nav-item {
 border-radius: 8px;
 overflow: hidden;
 transition: var(--transition);
 }
 .nav-item:hover {
 transform: translateX(5px);
 }
 .nav-link {
 display: flex;
 align-items: center;
 gap: 15px;
 padding: 15px;
 text-decoration: none;
 color: var(--text-dark);
 transition: var(--transition);
 border-left: 4px solid transparent;
 }
 .light .nav-link {
 color: var(--text-light);
 }
 .nav-link.active {
 background-color: var(--primary);
 color: white;
 border-left: 4px solid var(--primary-light);
 }
 .nav-link:hover:not(.active) {
 background-color: rgba(147, 51, 234, 0.1);
 border-left: 4px solid var(--primary);
 }
 .nav-link i {
 font-size: 1.2rem;
 min-width: 24px;
 text-align: center;
 }
 /* Close Button for Nav Menu */
 .nav-close {
 position: absolute;
 top: 20px;
 right: 20px;
 background: none;
 border: none;
 font-size: 1.5rem;
 color: var(--primary);
 cursor: pointer;
 z-index: 106;
 width: 30px;
 height: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;
 transition: var(--transition);
 }
 .nav-close:hover {
 background-color: rgba(147, 51, 234, 0.1);
 transform: rotate(90deg);
 }
 /* Main Content */
 .main-content {
 min-height: calc(100vh - 76px);
 padding: 20px;
 overflow-y: auto; /* Enable vertical scrolling */
 }
 .tab-content {
 display: none;
 opacity: 0;
 transition: opacity 0.5s ease, transform 0.5s ease;
 height: calc(100vh - 116px);
 border-radius: 10px;
 overflow: hidden;
 background-color: var(--bg-dark-secondary);
 box-shadow: var(--shadow-dark);
 transform: translateY(20px);
 }
 .light .tab-content {
 background-color: white;
 box-shadow: var(--shadow-light);
 }
 .tab-content.active {
 display: block;
 opacity: 1;
 transform: translateY(0);
 }
 .iframe-container {
 width: 100%;
 height: 100%;
 border: none;
 border-radius: 10px;
 overflow: hidden;
 }
 iframe {
 width: 100%;
 height: 100%;
 border: none;
 }
 .welcome-screen {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 height: 100%;
 padding: 20px;
 animation: fadeIn 0.5s ease-in-out;
 overflow-y: auto; /* Enable vertical scrolling */
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
.welcome-logo {
 display: flex;
 justify-content: center;
 margin-bottom: 10px; /* Başlık ile arasındaki boşluk */
}
 .welcome-title {
 font-size: 2.5rem;
 margin-bottom: 20px;
 background: linear-gradient(to right, var(--primary), var(--primary-light));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
 .welcome-subtitle {
 font-size: 1.2rem;
 margin-bottom: 40px;
 max-width: 600px;
 opacity: 0.8;
 }
 .feature-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 max-width: 800px;
 width: 100%;
 }
 .feature-card {
 background-color: rgba(147, 51, 234, 0.1);
 border-radius: 10px;
 padding: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 cursor: pointer;
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 position: relative;
 overflow: hidden;
 border: 1px solid transparent;
 }
 .feature-card:hover {
 transform: translateY(-8px) scale(1.02);
 border-color: var(--primary);
 box-shadow: 0 15px 30px rgba(147, 51, 234, 0.2);
 }
 .feature-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, transparent, rgba(147, 51, 234, 0.1), transparent);
 transform: translateX(-100%);
 transition: transform 0.8s ease;
 }
 .feature-card:hover::before {
 transform: translateX(100%);
 }
 .feature-icon {
 font-size: 2.5rem;
 color: var(--primary);
 margin-bottom: 15px;
 transition: transform 0.5s ease;
 }
 .feature-card:hover .feature-icon {
 transform: scale(1.2);
 }
 .feature-title {
 font-size: 1.2rem;
 margin-bottom: 10px;
 font-weight: bold;
 }
 .feature-desc {
 font-size: 0.9rem;
 opacity: 0.8;
 }
/* Start Button */
.start-button {
 display: inline-flex; /* Flex kullanarak içeriği hizala */
 align-items: center; /* Dikey olarak ortala */
 justify-content: center; /* Yatay olarak ortala */
 background: var(--primary);
 color: white;
 font-size: 1.2rem;
 font-weight: bold;
 padding: 20px 40px; /* Butonu daha geniş yapmak için */
 border-radius: 50px;
 margin-top: 20px;
 margin-bottom: 40px;
 cursor: pointer;
 transition: all 0.3s ease;
 border: none;
 text-decoration: none;
 box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
 position: relative;
 overflow: hidden;
 text-align: center;
 min-width: 150px; /* Minimum genişlik vererek içeriğin düzgün durmasını sağla */
 height: 60px; /* Sabit yükseklik vererek dikey hizalamayı koru */
}
.start-button:hover {
 background: var(--primary-dark);
 transform: translateY(-5px);
 box-shadow: 0 7px 20px rgba(147, 51, 234, 0.4);
}
.start-button::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 transform: translateX(-100%);
 transition: transform 0.6s ease;
}
.start-button:hover::after {
 transform: translateX(100%);
}
/* Responsive */
 @media (max-width: 768px) {
 .feature-grid {
 grid-template-columns: 1fr;
 }
 .welcome-title {
 font-size: 2rem;
 }
 .welcome-subtitle {
 font-size: 1rem;
 }
 }
 /* Ripple Effect */
 .ripple {
 position: absolute;
 border-radius: 50%;
 background-color: rgba(147, 51, 234, 0.3);
 transform: scale(0);
 animation: ripple 0.8s cubic-bezier(0, 0, 0.2, 1);
 pointer-events: none;
 }
 @keyframes ripple {
 to {
 transform: scale(4);
 opacity: 0;
 }
 }
 /* Animations */
 .page-transition {
 animation: pageTransition 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 @keyframes pageTransition {
 0% { opacity: 0; transform: translateY(20px); }
 100% { opacity: 1; transform: translateY(0); }
 }
 /* Video section highlight */
 .video-highlight {
 position: relative;
 overflow: hidden;
 }
 .video-highlight::after {
 content: 'YENİ';
 position: absolute;
 top: 0;
 right: 0;
 background: var(--primary);
 color: white;
 font-size: 0.7rem;
 padding: 4px 8px;
 border-radius: 0 10px 0 10px;
 font-weight: bold;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: rgba(147, 51, 234, 0.1);
 }
 ::-webkit-scrollbar-thumb {
 background-color: var(--primary);
 border-radius: 1px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background-color: var(--primary-dark);
 }
</style>
</head>
<body class="dark">
 <!-- Loading Screen -->
 <div class="loading-screen">
 <div class="loading-animation">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Photoroom-20250308_203609.png" alt="AlpDroid Logo" class="loading-logo-image">
 <div class="loading-circle"></div>
 <div class="loading-inner-circle"></div>
 </div>
 <div class="loading-text">AlpDroid Yükleniyor...</div>
 <div class="loading-credits">By alperall</div>
 </div>
<!-- Header -->
 <header>
 <div class="logo">
 <i class="fas fa-robot"></i>
 <span>AlpDroid</span>
 </div>
 <div class="controls">
 <button class="theme-toggle" aria-label="Tema Değiştir">
 <i class="fas fa-moon"></i>
 </button>
 <button class="menu-btn" aria-label="Menü">
 <div class="menu-btn-burger"></div>
 </button>
 </div>
 </header>
<!-- Navigation Menu -->
 <div class="nav-overlay"></div>
 <nav class="nav">
 <button class="nav-close" aria-label="Kapat">
 <i class="fas fa-times"></i>
 </button>
 <ul class="nav-list">
 <li class="nav-item">
 <a href="#welcome" class="nav-link active" data-tab="welcome">
 <i class="fas fa-home"></i>
 <span>Ana Sayfa</span>
 </a>
 </li>
 <li class="nav-item">
 <a href="#chat" class="nav-link" data-tab="chat">
 <i class="fas fa-comment-dots"></i>
 <span>Chat</span>
 </a>
 </li>
 <li class="nav-item">
 <a href="#image" class="nav-link" data-tab="image">
 <i class="fas fa-image"></i>
 <span>Fotoğraf Üretme</span>
 </a>
 </li>
 <li class="nav-item">
 <a href="#voice" class="nav-link" data-tab="voice">
 <i class="fas fa-microphone-alt"></i>
 <span>Ses Üretme</span>
 </a>
 </li>
 <li class="nav-item video-highlight">
 <a href="#video" class="nav-link" data-tab="video">
 <i class="fas fa-video"></i>
 <span>Video Üretme</span>
 </a>
 </li>
 <li class="nav-item">
 <a href="#about" class="nav-link" data-tab="about">
 <i class="fas fa-info-circle"></i>
 <span>Hakkında</span>
 </a>
 </li>
 </ul>
 </nav>
<!-- Main Content -->
 <main class="main-content">
 <!-- Welcome Screen -->
 <div id="welcome" class="tab-content active">
 <div class="welcome-screen">
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Screenshot_20250309_155725_QuickEdit%2B.jpg" alt="AlpDroid Logo" style="height: 80px;">
 </div>
 <!-- Logo -->
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Screenshot_20250309_155725_QuickEdit%2B.jpg" alt="AlpDroid Logo" style="height: 120px;">
 </div>
<!-- Logo -->
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Screenshot_20250309_155725_QuickEdit%2B.jpg" alt="AlpDroid Logo" style="height: 120px;">
 </div>
 <!-- Logo -->
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Screenshot_20250309_155725_QuickEdit%2B.jpg" alt="AlpDroid Logo" style="height: 120px;">
 </div>
 <!-- Logo -->
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Screenshot_20250309_155725_QuickEdit%2B.jpg" alt="AlpDroid Logo" style="height: 120px;">
 </div>
<!-- Logo -->
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Photoroom-20250308_203609.png" alt="AlpDroid Logo" style="height: 120px;">
 </div>
<!-- Start Button -->
 <h1 class="welcome-title">AlpDroid AI Assistant</h1>
 <button class="start-button" data-tab="chat">
 Hadi Başlayalım <i class="fas fa-arrow-right ml-2"></i>
 </button>
<p class="welcome-subtitle">
 AlpDroid ile yapay zeka deneyiminizi bir üst seviyeye taşıyın. Sohbet edin, görsel oluşturun,
ses sentezleyin ve video üretin - hepsi tek bir platformda.
 </p>
 <div class="feature-grid">
 <div class="feature-card" data-tab="chat">
 <div class="feature-icon">
 <i class="fas fa-comment-dots"></i>
 </div>
 <h3 class="feature-title">AI Chat</h3>
 <p class="feature-desc">
 AlpDroid ile sohbet edin, sorular sorun ve anında cevaplar alın.
 </p>
 </div>
 <div class="feature-card" data-tab="image">
 <div class="feature-icon">
 <i class="fas fa-image"></i>
 </div>
 <h3 class="feature-title">Görsel Üretme</h3>
 <p class="feature-desc">
 Metinden görsel oluşturun ve yaratıcı fikirlerinizi hayata geçirin.
 </p>
 </div>
 <div class="feature-card" data-tab="voice">
 <div class="feature-icon">
 <i class="fas fa-microphone-alt"></i>
 </div>
 <h3 class="feature-title">Ses Sentezi</h3>
 <p class="feature-desc">
 Metinlerinizi doğal sesli anlatımlara dönüştürün.
 </p>
 </div>
 <div class="feature-card video-highlight" data-tab="video">
 <div class="feature-icon">
 <i class="fas fa-video"></i>
 </div>
 <h3 class="feature-title">Video Oluşturma</h3>
 <p class="feature-desc">
 Metin veya görsel girdilerinden etkileyici videolar yaratın.
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Chat Tab -->
 <div id="chat" class="tab-content">
 <iframe class="iframe-container" src="https://alperall-alpdroid.hf.space/" title="AlpDroid Chat"></iframe>
 </div>
<!-- Image Generation Tab -->
 <div id="image" class="tab-content">
 <iframe class="iframe-container" src="https://mukaist-midjourney.hf.space/" title="Fotoğraf Üretme"></iframe>
 </div>
<!-- Voice Generation Tab -->
 <div id="voice" class="tab-content">
 <iframe class="iframe-container" src="https://alperall-text-to-speech.hf.space/" title="Ses Üretme"></iframe>
 </div>
<!-- Video Generation Tab -->
 <div id="video" class="tab-content">
 <iframe class="iframe-container" src="https://kingnish-instant-video.hf.space/" title="Video Üretme"></iframe>
 </div>
<!-- About Tab -->
 <div id="about" class="tab-content">
 <div class="welcome-screen">
 <div class="welcome-logo">
 <img src="https://raw.githubusercontent.com/ALPERALL/AlpDroid/refs/heads/main/Photoroom-20250308_203609.png" alt="AlpDroid Logo" style="height: 60px;">
 </div>
 <h1 class="welcome-title">AlpDroid Hakkında</h1>
 <p class="welcome-subtitle">
 AlpDroid, yapay zeka teknolojilerine erişiminizi kolaylaştırmak amacıyla alperall tarafından geliştirilmiş
bir platformdur. Sohbet, görsel, ses ve video üretme özelliklerini tek bir arayüzde birleştirerek
yaratıcılığınızı destekler.
 </p>
 <div style="margin-top: 30px; opacity: 0.7;">
 <p>© 2025 AlpDroid. Tüm hakları saklıdır.</p>
 <p>Created by alperall</p>
 </div>
 </div>
 </div>
 </main>
 <script>
 // Loading Screen
 document.addEventListener('DOMContentLoaded', () => {
 setTimeout(() => {
 const loadingScreen = document.querySelector('.loading-screen');
 loadingScreen.style.opacity = 0;
 setTimeout(() => {
 loadingScreen.style.display = 'none';
 }, 500);
 }, 3000); // Reduced to 3 seconds for better UX
 });
 // Theme Toggle
 const themeToggle = document.querySelector('.theme-toggle');
 const themeIcon = themeToggle.querySelector('i');
themeToggle.addEventListener('click', () => {
 document.body.classList.toggle('light');
 const isDark = document.body.classList.contains('dark');
if (document.body.classList.contains('light')) {
 themeIcon.classList.remove('fa-moon');
 themeIcon.classList.add('fa-sun');
 document.documentElement.classList.remove('dark');
 } else {
 themeIcon.classList.remove('fa-sun');
 themeIcon.classList.add('fa-moon');
 document.body.classList.add('dark');
 document.documentElement.classList.add('dark');
 }
// Add ripple effect to theme toggle button
 createRipple(event, themeToggle);
 });
 // Menu Button Toggle
 const menuBtn = document.querySelector('.menu-btn');
 const nav = document.querySelector('.nav');
 const navOverlay = document.querySelector('.nav-overlay');
 const navClose = document.querySelector('.nav-close');
function toggleMenu() {
 menuBtn.classList.toggle('open');
 nav.classList.toggle('open');
 navOverlay.classList.toggle('open');
 }
menuBtn.addEventListener('click', (event) => {
 toggleMenu();
 // Add ripple effect to menu button
 createRipple(event, menuBtn);
 });
navClose.addEventListener('click', (event) => {
 toggleMenu();
 // Add ripple effect to close button
 createRipple(event, navClose);
 });
navOverlay.addEventListener('click', () => {
 toggleMenu();
 });
 // Tab Navigation
 const tabLinks = document.querySelectorAll('.nav-link, .feature-card');
 const tabContents = document.querySelectorAll('.tab-content');
tabLinks.forEach(link => {
 link.addEventListener('click', (e) => {
 e.preventDefault();
// Add ripple effect
 createRipple(e, link);
const tabId = link.getAttribute('data-tab');
// Update active link in navigation
 document.querySelectorAll('.nav-link').forEach(navLink => {
 if (navLink.getAttribute('data-tab') === tabId) {
 navLink.classList.add('active');
 } else {
 navLink.classList.remove('active');
 }
 });
// Show selected tab with animation
 tabContents.forEach(content => {
 if (content.id === tabId) {
 content.classList.add('page-transition');
 content.classList.add('active');
// Reset animation
 setTimeout(() => {
 content.classList.remove('page-transition');
 }, 500);
 } else {
 content.classList.remove('active');
 }
 });
// Close menu on mobile after selection
 menuBtn.classList.remove('open');
 nav.classList.remove('open');
 navOverlay.classList.remove('open');
 });
 });
// Enhanced Ripple Effect
 function createRipple(event, element) {
 const ripple = document.createElement('span');
 ripple.classList.add('ripple');
const rect = element.getBoundingClientRect();
 const size = Math.max(rect.width, rect.height) * 1.5;
ripple.style.width = ripple.style.height = size + 'px';
// Get click position relative to the element
 const x = event.clientX - rect.left - size / 2;
 const y = event.clientY - rect.top - size / 2;
ripple.style.left = x + 'px';
 ripple.style.top = y + 'px';
// Remove existing ripples for cleaner effect
 const existingRipples = element.querySelectorAll('.ripple');
 existingRipples.forEach(r => r.remove());
element.appendChild(ripple);
setTimeout(() => {
 ripple.remove();
 }, 800); // Match with the animation duration
 }
 // Add ripple effect to all interactive elements
 document.querySelectorAll('.nav-link, .feature-card, .theme-toggle, .menu-btn, .nav-close').forEach(element => {
 element.addEventListener('click', (e) => {
 createRipple(e, element);
 });
 });
 // Smooth hover transitions for feature cards
 document.querySelectorAll('.feature-card').forEach(card => {
 card.addEventListener('mouseenter', () => {
 card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
 });
card.addEventListener('mouseleave', () => {
 card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
 });
 });
 // "Hadi Başlayalım" Butonuna Tıklanınca Chat Sayfasını Aç
document.addEventListener("DOMContentLoaded", () => {
 const startButton = document.querySelector(".start-button"); // Butonu seç
 const chatTab = document.querySelector('.nav-link[data-tab="chat"]'); // Chat sekmesini seç
 if (startButton && chatTab) {
 startButton.addEventListener("click", (e) => {
 e.preventDefault();
 chatTab.click(); // Chat sekmesini aç
 });
 }
});
 </script>
</body>