Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>NEXUS AI - Geleceğin Mühendisliği</title>

<style>

/*

* =========================================

* CSS DEĞİŞKENLERİ VE TEMEL AYARLAR

* =========================================

*/

:root {

--bg-dark: #050510;

--bg-card: rgba(20, 20, 35, 0.6);

--bg-glass: rgba(255, 255, 255, 0.05);

--primary-neon: #00f3ff; /* Turkuaz/Mavi Neon */

--secondary-neon: #bc13fe; /* Mor Neon */

--text-main: #ffffff;

--text-muted: #a0a0b0;

--font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

--transition-speed: 0.4s;

--border-radius: 12px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

outline: none;

}

html {

scroll-behavior: smooth;

}

body {

font-family: var(--font-main);

background-color: var(--bg-dark);

color: var(--text-main);

overflow-x: hidden;

line-height: 1.6;

}

/* Scrollbar Tasarımı */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--bg-dark);

}

::-webkit-scrollbar-thumb {

background: linear-gradient(var(--bg-dark), var(--secondary-neon));

border-radius: 4px;

}

/*

* =========================================

* GENEL BİLEŞENLER (Buttons, Typography)

* =========================================

*/

h1, h2, h3, h4 {

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

}

.gradient-text {

background: linear-gradient(90deg, var(--primary-neon), var(--secondary-neon));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: 800;

}

.section-title {

text-align: center;

font-size: 2.5rem;

margin-bottom: 1rem;

position: relative;

display: inline-block;

width: 100%;

}

.section-subtitle {

text-align: center;

color: var(--text-muted);

margin-bottom: 4rem;

max-width: 600px;

margin-left: auto;

margin-right: auto;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

section {

padding: 100px 0;

position: relative;

}

/* Butonlar */

.btn {

display: inline-block;

padding: 12px 30px;

border-radius: 30px;

text-decoration: none;

font-weight: 600;

transition: all var(--transition-speed);

cursor: pointer;

border: none;

position: relative;

overflow: hidden;

font-size: 0.9rem;

letter-spacing: 1px;

}

.btn-primary {

background: transparent;

border: 2px solid var(--primary-neon);

color: var(--primary-neon);

box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);

}

.btn-primary:hover {

background: var(--primary-neon);

color: var(--bg-dark);

box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);

}

.btn-secondary {

background: transparent;

border: 2px solid var(--secondary-neon);

color: var(--secondary-neon);

margin-left: 15px;

}

.btn-secondary:hover {

background: var(--secondary-neon);

color: #fff;

box-shadow: 0 0 20px rgba(188, 19, 254, 0.6);

}

/*

* =========================================

* HEADER & NAV

* =========================================

*/

header {

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

padding: 20px 0;

transition: all 0.3s ease;

background: rgba(5, 5, 16, 0.8);

backdrop-filter: blur(10px);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

nav {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.5rem;

font-weight: 800;

color: #fff;

display: flex;

align-items: center;

gap: 10px;

}

.logo svg {

fill: var(--primary-neon);

width: 30px;

height: 30px;

}

.nav-links {

display: flex;

gap: 30px;

list-style: none;

}

.nav-links a {

color: var(--text-main);

text-decoration: none;

font-size: 0.9rem;

text-transform: uppercase;

transition: color 0.3s;

position: relative;

}

.nav-links a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

left: 0;

background-color: var(--primary-neon);

transition: width 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

.mobile-menu-btn {

display: none;

background: none;

border: none;

color: #fff;

cursor: pointer;

}

/*

* =========================================

* HERO SECTION (CANVAS ANIMATION)

* =========================================

*/

#hero {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

position: relative;

overflow: hidden;

padding: 0;

}

#canvas-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.hero-content {

position: relative;

z-index: 2;

text-align: center;

max-width: 800px;

padding: 0 20px;

}

.hero-title {

font-size: 4rem;

margin-bottom: 20px;

line-height: 1.1;

text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);

}

.hero-desc {

font-size: 1.2rem;

color: var(--text-muted);

margin-bottom: 40px;

}

.scroll-indicator {

position: absolute;

bottom: 30px;

left: 50%;

transform: translateX(-50%);

z-index: 2;

animation: bounce 2s infinite;

}

@keyframes bounce {

0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}

40% {transform: translateX(-50%) translateY(-10px);}

60% {transform: translateX(-50%) translateY(-5px);}

}

/*

* =========================================

* CARDS & SERVICES (Glassmorphism)

* =========================================

*/

.grid-3 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.card {

background: var(--bg-card);

border: 1px solid rgba(255, 255, 255, 0.05);

border-radius: var(--border-radius);

padding: 40px 30px;

transition: all var(--transition-speed);

backdrop-filter: blur(5px);

position: relative;

overflow: hidden;

height: 100%;

display: flex;

flex-direction: column;

justify-content: flex-start;

}

.card::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 3px;

background: linear-gradient(90deg, var(--primary-neon), var(--secondary-neon));

transform: scaleX(0);

transform-origin: left;

transition: transform 0.4s;

}

.card:hover {

transform: translateY(-10px);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

border-color: rgba(255, 255, 255, 0.1);

}

.card:hover::before {

transform: scaleX(1);

}

.card-icon {

width: 60px;

height: 60px;

background: rgba(255, 255, 255, 0.05);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 25px;

color: var(--primary-neon);

transition: 0.3s;

}

.card:hover .card-icon {

background: var(--primary-neon);

color: var(--bg-dark);

box-shadow: 0 0 15px var(--primary-neon);

}

.card h3 {

margin-bottom: 15px;

font-size: 1.3rem;

}

.card p {

color: var(--text-muted);

font-size: 0.95rem;

}

/*

* =========================================

* PRODUCTS (Interactive Showcase)

* =========================================

*/

.product-card {

position: relative;

border-radius: var(--border-radius);

overflow: hidden;

height: 300px;

cursor: pointer;

}

.product-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s;

filter: grayscale(80%);

}

.product-card:hover .product-bg {

transform: scale(1.1);

filter: grayscale(0%);

}

.product-overlay {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

background: linear-gradient(to top, var(--bg-dark), transparent);

padding: 30px;

transform: translateY(20px);

opacity: 0.8;

transition: 0.4s;

}

.product-card:hover .product-overlay {

transform: translateY(0);

opacity: 1;

}

.product-demo-btn {

margin-top: 10px;

font-size: 0.8rem;

color: var(--primary-neon);

text-transform: uppercase;

font-weight: bold;

display: flex;

align-items: center;

gap: 5px;

}

/*

* =========================================

* VIDEO SECTION

* =========================================

*/

#video {

background: #000;

}

.video-wrapper {

position: relative;

width: 100%;

max-width: 900px;

margin: 0 auto;

border-radius: var(--border-radius);

overflow: hidden;

border: 1px solid #333;

box-shadow: 0 0 40px rgba(0, 243, 255, 0.1);

}

.video-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.4);

display: flex;

align-items: center;

justify-content: center;

z-index: 10;

cursor: pointer;

transition: opacity 0.3s;

}

.play-btn {

width: 80px;

height: 80px;

background: rgba(255,255,255,0.1);

border-radius: 50%;

border: 2px solid #fff;

display: flex;

align-items: center;

justify-content: center;

backdrop-filter: blur(5px);

transition: all 0.3s;

}

.play-btn::after {

content: '';

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 18px solid #fff;

margin-left: 5px;

}

.video-wrapper:hover .play-btn {

background: var(--primary-neon);

transform: scale(1.1);

}

.video-wrapper:hover .play-btn::after {

border-left-color: #000;

}

video {

width: 100%;

display: block;

}

/*

* =========================================

* GALLERY & LIGHTBOX

* =========================================

*/

.gallery-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 15px;

}

.gallery-item {

position: relative;

height: 200px;

overflow: hidden;

border-radius: 8px;

cursor: pointer;

}

.gallery-item img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.4s;

}

.gallery-item:hover img {

transform: scale(1.1);

}

/* Lightbox */

.lightbox {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.95);

z-index: 2000;

display: none; /* JS ile block */

justify-content: center;

align-items: center;

flex-direction: column;

padding: 20px;

}

.lightbox.active {

display: flex;

animation: fadeIn 0.3s ease;

}

.lightbox-img {

max-width: 90%;

max-height: 80vh;

border: 2px solid var(--primary-neon);

box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);

}

.lightbox-close {

position: absolute;

top: 30px;

right: 30px;

color: #fff;

font-size: 2rem;

cursor: pointer;

background: none;

border: none;

}

/*

* =========================================

* BLOG SECTION

* =========================================

*/

.blog-date {

font-size: 0.8rem;

color: var(--primary-neon);

margin-bottom: 10px;

display: block;

}

.blog-link {

margin-top: 20px;

display: inline-block;

color: #fff;

text-decoration: none;

border-bottom: 1px solid var(--secondary-neon);

padding-bottom: 2px;

}

/*

* =========================================

* CONTACT FORM

* =========================================

*/

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.contact-info h4 {

font-size: 1.5rem;

margin-bottom: 20px;

color: var(--secondary-neon);

}

.form-group {

position: relative;

margin-bottom: 30px;

}

.form-control {

width: 100%;

background: transparent;

border: none;

border-bottom: 1px solid #444;

padding: 10px 0;

color: #fff;

font-size: 1rem;

transition: 0.3s;

}

.form-control:focus {

border-bottom-color: var(--primary-neon);

}

.form-label {

position: absolute;

top: 10px;

left: 0;

color: var(--text-muted);

pointer-events: none;

transition: 0.3s;

}

.form-control:focus ~ .form-label,

.form-control:valid ~ .form-label {

top: -15px;

font-size: 0.8rem;

color: var(--primary-neon);

}

/* Toast Message */

.toast {

position: fixed;

bottom: 30px;

right: 30px;

background: rgba(5, 5, 16, 0.95);

border-left: 4px solid var(--primary-neon);

padding: 15px 25px;

color: #fff;

border-radius: 4px;

transform: translateX(200%);

transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

z-index: 3000;

box-shadow: 0 5px 15px rgba(0,0,0,0.5);

display: flex;

align-items: center;

gap: 10px;

}

.toast.show {

transform: translateX(0);

}

.toast svg {

fill: var(--primary-neon);

width: 20px;

height: 20px;

}

/*

* =========================================

* FOOTER

* =========================================

*/

footer {

background: #020208;

padding: 60px 0 20px;

border-top: 1px solid #111;

}

.footer-content {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 30px;

margin-bottom: 40px;

}

.footer-col h5 {

color: #fff;

margin-bottom: 20px;

font-size: 1.1rem;

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 10px;

}

.footer-links a {

color: var(--text-muted);

text-decoration: none;

transition: 0.3s;

}

.footer-links a:hover {

color: var(--primary-neon);

padding-left: 5px;

}

.social-icons {

display: flex;

gap: 15px;

}

.social-icons a {

color: #fff;

background: rgba(255,255,255,0.1);

width: 40px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

transition: 0.3s;

}

.social-icons a:hover {

background: var(--primary-neon);

color: #000;

}

.copyright {

text-align: center;

color: #555;

font-size: 0.8rem;

padding-top: 20px;

border-top: 1px solid #111;

}

/*

* =========================================

* RESPONSIVE

* =========================================

*/

@media (max-width: 768px) {

.hero-title {

font-size: 2.5rem;

}

.nav-links {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background: rgba(5, 5, 16, 0.98);

flex-direction: column;

justify-content: center;

align-items: center;

transition: 0.4s;

z-index: 999;

box-shadow: -5px 0 15px rgba(0,0,0,0.5);

}

.nav-links.active {

right: 0;

}

.mobile-menu-btn {

display: block;

z-index: 1001;

}

.contact-container {

grid-template-columns: 1fr;

}

.btn {

width: 100%;

margin: 10px 0 0 0;

text-align: center;

}

/* Animations */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

/* SVG Icons Helper Class */

.icon-svg {

width: 24px;

height: 24px;

fill: currentColor;

}

</style>

</head>

<body>

<nav>

</svg>

NEXUS AI

</a>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#solutions">Çözümler</a></li>

<li><a href="#services">Teknoloji</a></li>

<li><a href="#products">Ürünler</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</svg>

</button>

</nav>

</div>

</header>

<h1 class="hero-title">Geleceği <span class="gradient-text">Kodla</span></h1>

<p class="hero-desc">Yapay zekâ, veri analitiği ve otonom sistemlerle iş süreçlerinizi evrimleştirin. Yüksek mühendislik, sınırsız olanak.</p>

<a href="#solutions" class="btn btn-primary">Çözümleri Keşfet</a>

<a href="#contact" class="btn btn-secondary">Demo Talep Et</a>

</div>

</svg>

</div>

</section>

<h2 class="section-title">Yapay Zekâ Çözümleri</h2>

<p class="section-subtitle">Karmaşık problemleri basitleştiren, öğrenen ve gelişen algoritmik mimariler.</p>

</div>

<h3>Makine Öğrenmesi</h3>

<p>Veri tabanlı tahmin modelleri ve desen tanıma sistemleri ile karar mekanizmalarınızı güçlendirin.</p>

</div>

</div>

<h3>Derin Öğrenme</h3>

<p>Görüntü, ses ve doğal dil işleme (NLP) için derin sinir ağları (Deep Neural Networks) uygulamaları.</p>

</div>

</div>

<h3>Akıllı Otomasyon</h3>

<p>Tekrarlayan iş süreçlerini RPA ve AI botlarıyla otonom hale getirerek verimliliği %400 artırın.</p>

</div>

</section>

<h2 class="section-title">Teknoloji Hizmetleri</h2>

<p class="section-subtitle">Gelecek nesil altyapı ve güvenlik mimarileri.</p>

<h3>Bulut Sistemleri</h3>

<p>Ölçeklenebilir ve esnek bulut mimarileri.</p>

</div>

<h3>API Entegrasyonu</h3>

<p>Kusursuz sistemler arası veri akışı ve haberleşme.</p>

</div>

<h3>Siber Güvenlik</h3>

<p>Sıfır güven mimarisi ve proaktif tehdit koruması.</p>

</div>

</section>

<h2 class="section-title">Ürünler & Platformlar</h2>

<h3>Nexus Core AI</h3>

<p style="color:#ddd; font-size:0.9rem;">Kurumsal yapay zekâ yönetim paneli.</p>

<div class="product-demo-btn">Canlı Demo <span>→</span></div>

</div>

<h3>Data Vision</h3>

<p style="color:#ddd; font-size:0.9rem;">Gerçek zamanlı büyük veri görselleştirme.</p>

<div class="product-demo-btn">Canlı Demo <span>→</span></div>

</div>

<h3>AutoBot SaaS</h3>

<p style="color:#ddd; font-size:0.9rem;">Otomatik müşteri hizmetleri botu.</p>

<div class="product-demo-btn">Canlı Demo <span>→</span></div>

</div>

</section>

<h2 class="section-title">Vizyonumuz</h2>

<p class="section-subtitle">Yapay zekânın insanlığı nasıl ileriye taşıdığını izleyin.</p>

Tarayıcınız video etiketini desteklemiyor.

</video>

</div>

</section>

<h2 class="section-title">Veri Görselleştirme</h2>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="section-title">İçgörüler & Blog</h2>

<h3>Generative AI'nin Geleceği</h3>

<p>Üretken yapay zekâ modellerinin yaratıcı endüstrileri nasıl kökten değiştirdiği üzerine bir analiz.</p>

<a href="#" class="blog-link">Devamını Oku</a>

</article>

<span class="blog-date">25 Eylül 2023</span>

<h3>Etik Yapay Zekâ</h3>

<p>Güçlü sistemler geliştirirken etik kurallara ve sürdürülebilirliğe nasıl dikkat etmeliyiz?</p>

<a href="#" class="blog-link">Devamını Oku</a>

</article>

<span class="blog-date">12 Ağustos 2023</span>

<h3>Siber Güvenlikte AI</h3>

<p>Siber saldırıları önlemek için yapay zekâ tabanlı savunma mekanizmalarının rolü.</p>

<a href="#" class="blog-link">Devamını Oku</a>

</article>

</div>

</section>

<h4>Vizyonumuz</h4>

Nexus AI olarak, teknolojiyi bir amaç değil, insanlığı ve iş dünyasını ileriye taşıyan bir araç olarak görüyoruz.

</p>

Misyonumuz, karmaşık yapay zekâ algoritmalarını herkes için erişilebilir, anlaşılır ve faydalı hale getirmektir. Mühendislik yaklaşımımızda şeffaflık, performans ve estetik bir bütündür.

</p>

</div>

<p>Tamamlanan Proje</p>

</div>

<p>Müşteri Memnuniyeti</p>

</div>

</section>

<h2 class="section-title">İletişim & Demo</h2>

<label for="name" class="form-label">Adınız Soyadınız</label>

</div>

<label for="email" class="form-label">E-Posta Adresiniz</label>

</div>

<label for="company" class="form-label">Şirket</label>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary" style="width:100%;">Gönder</button>

</form>

</div>

<h4>Bize Ulaşın</h4>

Projeleriniz hakkında detaylı görüşmek ve demo talep etmek için formu doldurun veya aşağıdaki bilgilerden bize ulaşın.

</p>

<p><strong style="color:var(--primary-neon);">Merkez:</strong> Maslak, Teknopark İstanbul</p>

<p style="margin-bottom:20px;"><strong style="color:var(--primary-neon);">E-Posta:</strong> hello@nexusai.tech</p>

</div>

</section>

NEXUS AI

</a>

Teknolojinin sınırlarını zorlayan, yapay zekâ odaklı çözümler üreten küresel bir mühendislik markasıyız.

</p>

</div>

<h5>Hızlı Erişim</h5>

<li><a href="#hero">Ana Sayfa</a></li>

<li><a href="#solutions">Çözümler</a></li>

<li><a href="#products">Ürünler</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</div>

<h5>Yasal</h5>

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Kullanım Koşulları</a></li>

</ul>

</div>

</div>

</footer>

</div>

<span id="toast-message">İşlem Başarılı!</span>

</div>

document.addEventListener('DOMContentLoaded', () => {

/*

* 1. CANVAS BACKGROUND (Neural Network Effect)

* Parçacıkları birbirine bağlayan dinamik bir ağ yapısı.

*/

const canvas = document.getElementById('canvas-bg');

const ctx = canvas.getContext('2d');

let width, height;

let particles = [];

const particleCount = window.innerWidth < 768 ? 50 : 100; // Mobilde daha az parçacık

const connectionDistance = 150;

const mouseDistance = 200;

let mouse = { x: null, y: null };

window.addEventListener('resize', resizeCanvas);

window.addEventListener('mousemove', (e) => {

mouse.x = e.x;

mouse.y = e.y;

});

// Mouse canvas'tan çıkınca etkileşimi sıfırla

window.addEventListener('mouseout', () => {

mouse.x = null;

mouse.y = null;

});

function resizeCanvas() {

width = window.innerWidth;

height = window.innerHeight;

canvas.width = width;

canvas.height = height;

initParticles();

}

class Particle {

constructor() {

this.x = Math.random() * width;

this.y = Math.random() * height;

this.vx = (Math.random() - 0.5) * 1.5; // Hız

this.vy = (Math.random() - 0.5) * 1.5;

this.size = Math.random() * 2 + 1;

// Rastgele bir renk seçimi (Mavi veya Mor tonları)

this.color = Math.random() > 0.5 ? 'rgba(0, 243, 255,' : 'rgba(188, 19, 254,';

}

update() {

this.x += this.vx;

this.y += this.vy;

// Ekran sınırlarından sekme

if (this.x < 0 || this.x > width) this.vx *= -1;

if (this.y < 0 || this.y > height) this.vy *= -1;

// Mouse etkileşimi (Yaklaşınca kaçma veya bağlanma)

// Burada yumuşak bir kaçma efekti ekliyoruz

let dx = mouse.x - this.x;

let dy = mouse.y - this.y;

let distance = Math.sqrt(dx*dx + dy*dy);

if (distance < mouseDistance && mouse.x !== null) {

const forceDirectionX = dx / distance;

const forceDirectionY = dy / distance;

const force = (mouseDistance - distance) / mouseDistance;

const directionX = forceDirectionX * force * 3; // Güç

const directionY = forceDirectionY * force * 3;

this.x -= directionX;

this.y -= directionY;

}

draw() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fillStyle = this.color + '0.8)';

ctx.fill();

}

function initParticles() {

particles = [];

for (let i = 0; i < particleCount; i++) {

particles.push(new Particle());

}

function animate() {

ctx.clearRect(0, 0, width, height);

for (let i = 0; i < particles.length; i++) {

particles[i].update();

particles[i].draw();

// Parçacıkları birbirine bağla

for (let j = i; j < particles.length; j++) {

let dx = particles[i].x - particles[j].x;

let dy = particles[i].y - particles[j].y;

let distance = Math.sqrt(dx*dx + dy*dy);

if (distance < connectionDistance) {

ctx.beginPath();

// Opaklık mesafeye göre değişir

let opacity = 1 - (distance / connectionDistance);

ctx.strokeStyle = 'rgba(100, 100, 255,' + (opacity * 0.2) + ')';

ctx.lineWidth = 1;

ctx.moveTo(particles[i].x, particles[i].y);

ctx.lineTo(particles[j].x, particles[j].y);

ctx.stroke();

}

requestAnimationFrame(animate);

}

resizeCanvas();

animate();

/*

* 2. MOBILE MENU TOGGLE

*/

const mobileBtn = document.querySelector('.mobile-menu-btn');

const navLinks = document.querySelector('.nav-links');

mobileBtn.addEventListener('click', () => {

navLinks.classList.toggle('active');

// Menü açıkken ikonu değiştirebiliriz (opsiyonel)

});

// Menüdeki linke tıklayınca menüyü kapat

document.querySelectorAll('.nav-links a').forEach(link => {

link.addEventListener('click', () => {

navLinks.classList.remove('active');

});

/*

* 3. SCROLL REVEAL ANIMATION

* Elementler ekrana girdikçe belirir.

*/

const reveals = document.querySelectorAll('.reveal');

const revealOnScroll = () => {

const windowHeight = window.innerHeight;

const elementVisible = 150;

reveals.forEach((reveal) => {

const elementTop = reveal.getBoundingClientRect().top;

if (elementTop < windowHeight - elementVisible) {

reveal.classList.add('active');

}

});

};

window.addEventListener('scroll', revealOnScroll);

// İlk yüklemede tetikle

revealOnScroll();

/*

* 4. VIDEO PLAYER CUSTOM LOGIC

*/

const videoWrapper = document.querySelector('.video-wrapper');

const video = document.getElementById('promo-video');

const overlay = document.getElementById('play-overlay');

videoWrapper.addEventListener('click', () => {

if (video.paused) {

video.play();

overlay.style.opacity = '0';

setTimeout(() => { overlay.style.display = 'none'; }, 300); // Fade out süresi

} else {

video.pause();

overlay.style.display = 'flex';

// Küçük bir gecikme ile opacity'i geri getir

setTimeout(() => { overlay.style.opacity = '1'; }, 10);

}

});

// Video bitince overlay'i geri getir

video.addEventListener('ended', () => {

overlay.style.display = 'flex';

setTimeout(() => { overlay.style.opacity = '1'; }, 10);

});

/*

* 5. LIGHTBOX GALLERY

*/

const lightbox = document.getElementById('lightbox');

const lightboxImg = lightbox.querySelector('.lightbox-img');

const closeBtn = lightbox.querySelector('.lightbox-close');

const galleryItems = document.querySelectorAll('.gallery-item img');

galleryItems.forEach(img => {

img.addEventListener('click', (e) => {

// Tıklanan resmin yüksek çözünürlüklü versiyonunu al

// (Burada basitlik için aynı kaynağı kullanıyoruz)

const src = e.target.src;

lightboxImg.src = src;

lightbox.classList.add('active');

});

closeBtn.addEventListener('click', () => {

lightbox.classList.remove('active');

});

lightbox.addEventListener('click', (e) => {

if (e.target !== lightboxImg) {

lightbox.classList.remove('active');

}

});

/*

* 6. CONTACT FORM & TOAST

*/

const form = document.getElementById('main-contact-form');

const toast = document.getElementById('toast');

const toastMsg = document.getElementById('toast-message');

function showToast(message, isError = false) {

toastMsg.textContent = message;

toast.style.borderLeftColor = isError ? '#ff3333' : '#00f3ff';

toast.classList.add('show');

setTimeout(() => {

toast.classList.remove('show');

}, 4000);

}

form.addEventListener('submit', (e) => {

e.preventDefault();

// Basit doğrulama (HTML5 required zaten çalışıyor ama ek kontrol)

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

if(name && email && message) {

// Gerçek senaryoda burada bir API isteği olurdu.

// Simülasyon:

const submitBtn = form.querySelector('button');

const originalText = submitBtn.textContent;

submitBtn.textContent = 'Gönderiliyor...';

submitBtn.disabled = true;

setTimeout(() => {

showToast(`Teşekkürler ${name}, mesajınız iletildi.`);

form.reset();

submitBtn.textContent = originalText;

submitBtn.disabled = false;

}, 1500);

} else {

showToast('Lütfen tüm alanları doldurun.', true);

}

});

/*

* 7. STICKY NAVBAR EFFECT

*/

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.style.background = 'rgba(5, 5, 16, 0.95)';

navbar.style.padding = '10px 0';

} else {

navbar.style.background = 'rgba(5, 5, 16, 0.8)';

navbar.style.padding = '20px 0';

}

});

</script>

</body>

</html>

Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS