|
|
<!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 { |
|
|
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 { |
|
|
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-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 { |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.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 { |
|
|
min-height: calc(100vh - 76px); |
|
|
padding: 20px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.welcome-logo { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.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 { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
font-size: 1.2rem; |
|
|
font-weight: bold; |
|
|
padding: 20px 40px; |
|
|
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; |
|
|
height: 60px; |
|
|
} |
|
|
|
|
|
.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%); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.feature-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.welcome-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.welcome-subtitle { |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.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-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; |
|
|
} |
|
|
|
|
|
|
|
|
::-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"> |
|
|
|
|
|
<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> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="main-content"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="chat" class="tab-content"> |
|
|
<iframe class="iframe-container" src="https://alperall-alpdroid.hf.space/" title="AlpDroid Chat"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="image" class="tab-content"> |
|
|
<iframe class="iframe-container" src="https://mukaist-midjourney.hf.space/" title="Fotoğraf Üretme"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="voice" class="tab-content"> |
|
|
<iframe class="iframe-container" src="https://alperall-text-to-speech.hf.space/" title="Ses Üretme"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video" class="tab-content"> |
|
|
<iframe class="iframe-container" src="https://kingnish-instant-video.hf.space/" title="Video Üretme"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
setTimeout(() => { |
|
|
const loadingScreen = document.querySelector('.loading-screen'); |
|
|
loadingScreen.style.opacity = 0; |
|
|
setTimeout(() => { |
|
|
loadingScreen.style.display = 'none'; |
|
|
}, 500); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
|
|
|
|
|
|
createRipple(event, themeToggle); |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
createRipple(event, menuBtn); |
|
|
}); |
|
|
|
|
|
navClose.addEventListener('click', (event) => { |
|
|
toggleMenu(); |
|
|
|
|
|
createRipple(event, navClose); |
|
|
}); |
|
|
|
|
|
navOverlay.addEventListener('click', () => { |
|
|
toggleMenu(); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabLinks = document.querySelectorAll('.nav-link, .feature-card'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
|
|
tabLinks.forEach(link => { |
|
|
link.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
createRipple(e, link); |
|
|
|
|
|
const tabId = link.getAttribute('data-tab'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(navLink => { |
|
|
if (navLink.getAttribute('data-tab') === tabId) { |
|
|
navLink.classList.add('active'); |
|
|
} else { |
|
|
navLink.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
tabContents.forEach(content => { |
|
|
if (content.id === tabId) { |
|
|
content.classList.add('page-transition'); |
|
|
content.classList.add('active'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
content.classList.remove('page-transition'); |
|
|
}, 500); |
|
|
} else { |
|
|
content.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
menuBtn.classList.remove('open'); |
|
|
nav.classList.remove('open'); |
|
|
navOverlay.classList.remove('open'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
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'; |
|
|
|
|
|
|
|
|
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'; |
|
|
|
|
|
|
|
|
const existingRipples = element.querySelectorAll('.ripple'); |
|
|
existingRipples.forEach(r => r.remove()); |
|
|
|
|
|
element.appendChild(ripple); |
|
|
|
|
|
setTimeout(() => { |
|
|
ripple.remove(); |
|
|
}, 800); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link, .feature-card, .theme-toggle, .menu-btn, .nav-close').forEach(element => { |
|
|
element.addEventListener('click', (e) => { |
|
|
createRipple(e, element); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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)'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener("DOMContentLoaded", () => { |
|
|
const startButton = document.querySelector(".start-button"); |
|
|
const chatTab = document.querySelector('.nav-link[data-tab="chat"]'); |
|
|
|
|
|
if (startButton && chatTab) { |
|
|
startButton.addEventListener("click", (e) => { |
|
|
e.preventDefault(); |
|
|
chatTab.click(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
