Spaces:
Running
Running
| <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 ; | |
| color: black ; | |
| } | |
| 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-alpdroidchat.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> |