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>