Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Sylva | Sürükleyici Doğa Deneyimi</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

serif: ['"Cormorant Garamond"', 'serif'],

sans: ['"Montserrat"', 'sans-serif'],

},

colors: {

earth: {

900: '#1a2e1a',

800: '#263c26',

700: '#385238',

600: '#4a6b4a',

500: '#6b8c6b',

100: '#e0e8e0',

},

mist: 'rgba(255, 255, 255, 0.05)',

gold: '#d4af37'

},

animation: {

'drift': 'drift 20s infinite alternate',

'breathe': 'breathe 6s ease-in-out infinite',

'float': 'float 6s ease-in-out infinite',

},

keyframes: {

drift: {

'0%': { transform: 'translate(0, 0)' },

'100%': { transform: 'translate(-20px, -20px)' },

},

breathe: {

'0%, 100%': { opacity: '0.6' },

'50%': { opacity: '1' },

},

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-10px)' },

}

</script>

<style>

/* Özel Kaydırma Çubuğu */

::-webkit-scrollbar {

width: 6px;

}

::-webkit-scrollbar-track {

background: #0f1c0f;

}

::-webkit-scrollbar-thumb {

background: #4a6b4a;

border-radius: 10px;

}

/* Glassmorphism Araçları */

.glass-panel {

background: rgba(20, 30, 20, 0.65);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

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

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}

.glass-nav {

background: rgba(10, 20, 10, 0.8);

backdrop-filter: blur(20px);

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

}

/* Hacimsel Işık Efekti */

.volumetric-light {

position: fixed;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle at center, rgba(74, 107, 74, 0.15) 0%, transparent 60%);

pointer-events: none;

z-index: 0;

animation: breathe 10s infinite;

}

/* Metin Araçları */

.text-shadow {

text-shadow: 0 2px 4px rgba(0,0,0,0.5);

}

/* Yükleme Ekranı (LOADER) KODLARI SİLİNDİ */

/* Carousel için kaydırma çubuğunu gizle */

.no-scrollbar::-webkit-scrollbar {

display: none;

}

.no-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

</style>

</head>

<span class="font-serif text-2xl font-bold tracking-wider text-white">SYLVA</span>

</div>

<button onclick="navigateTo('home')" class="hover:text-gold transition-colors duration-300">Sığınak</button>

<button onclick="navigateTo('journal')" class="hover:text-gold transition-colors duration-300">Günlük</button>

<button onclick="navigateTo('gallery')" class="hover:text-gold transition-colors duration-300">Görseller</button>

<button onclick="navigateTo('analytics')" class="hover:text-gold transition-colors duration-300">Veriler</button>

<button onclick="navigateTo('contact')" class="hover:text-gold transition-colors duration-300">Bağlan</button>

</div>

</button>

</div>

<button onclick="navigateTo('home')" class="py-2 hover:text-gold">Sığınak</button>

<button onclick="navigateTo('journal')" class="py-2 hover:text-gold">Günlük</button>

<button onclick="navigateTo('gallery')" class="py-2 hover:text-gold">Görseller</button>

<button onclick="navigateTo('analytics')" class="py-2 hover:text-gold">Veriler</button>

<button onclick="navigateTo('contact')" class="py-2 hover:text-gold">Bağlan</button>

</div>

</nav>

<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop"

class="w-full h-full object-cover opacity-60 animate-drift scale-110" alt="Orman Hero">

</div>

Köklerle Yeniden Bağlan

</span>

Nefes Al <br> <span class="italic text-earth-500">Antik Dünya</span>

</h1>

Gezegenimizin akciğerlerini korumaya adanmış dijital bir sığınak. Keşfet, öğren ve yarının yeniden ağaçlandırılmasına katkıda bulun.

</p>

Vahşi Doğayı Keşfet

</button>

Etki Verilerini Gör

</button>

</div>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">Orman Günlüğü</h2>

<p class="mt-4 text-earth-100/70 max-w-xl mx-auto">Çevresel hikaye anlatımı, koruma çabaları ve ağaçların gizli yaşamına derinlemesine bir bakış.</p>

</div>

</div>

<span class="text-xs text-earth-500 font-bold tracking-widest uppercase">Koruma</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-gold transition-colors">Sessiz Kök Ağı</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Toprağın altında, ağaçların iletişim kurmasını, besin paylaşmasını ve tehlike uyarısı yapmasını sağlayan karmaşık bir mantar ağı yatar.</p>

<span>5 dk okuma</span>

</div>

</article>

</div>

<span class="text-xs text-earth-500 font-bold tracking-widest uppercase">Ekoloji</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-gold transition-colors">Yağış & Restorasyon</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Antik ormanlardaki mikro iklimlerin, yaşam için gerekli olan bölgesel sıcaklık ve su döngülerini nasıl düzenlediği.</p>

<span>8 dk okuma</span>

</div>

</article>

</div>

<span class="text-xs text-earth-500 font-bold tracking-widest uppercase">İnovasyon</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-gold transition-colors">Biyo-Akustik Yapay Zeka</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Ormanı dinlemek, türlerin geri dönüşünü ve yasadışı ağaç kesim faaliyetlerini belirlemek için yapay zeka kullanmak.</p>

<span>6 dk okuma</span>

</div>

</article>

</div>

</section>

<div>

<h2 class="font-serif text-4xl md:text-5xl text-white">Görsel Deneyim</h2>

<p class="mt-2 text-earth-100/60">Seçilmiş yüksek çözünürlüklü organik görseller.</p>

</div>

<button class="px-4 py-2 glass-panel text-sm hover:bg-earth-600 transition-colors rounded">Flora</button>

<button class="px-4 py-2 glass-panel text-sm hover:bg-earth-600 transition-colors rounded">Fauna</button>

</div>

</div>

<h4 class="font-serif text-lg text-white">Sabah Sisi</h4>

<p class="text-xs text-gray-400">Sinematik 4K • 0:45</p>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="font-serif text-4xl text-white mb-2">Ekolojik Nabız</h2>

<p class="text-gray-400">Küresel çevre metriklerinin gerçek zamanlı görselleştirilmesi.</p>

</div>

<h3 class="font-serif text-xl text-white">Küresel Karbon Tutumu</h3>

<span class="text-xs text-green-400">Canlı Akış</span>

</div>

</div>

<span>Kaynak: NASA Dünya Verileri</span>

<span>Güncellendi: Şimdi</span>

</div>

<div>

<p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Dikilen Ağaçlar (24s)</p>

</div>

</div>

<div>

<p class="text-xs text-gray-400 uppercase tracking-widest mb-1">Korunan Hektarlar</p>

</div>

</div>

<div>

<p class="text-xs text-gray-400 uppercase tracking-widest mb-1">İzlenen Türler</p>

</div>

</div>

<h3 class="font-serif text-xl text-white mb-4">Ağaçlandırma vs. Ormansızlaşma Oranı</h3>

</div>

</section>

<h3 class="font-serif text-3xl mb-2">Harekete Katıl</h3>

<p class="text-sm opacity-80">Yeşilin koruyucusu ol.</p>

</div>

<span>1200 Orman Yolu, İstanbul, TR</span>

</div>

<span>merhaba@sylva.org</span>

</div>

<h2 class="font-serif text-3xl text-white mb-6">İletişime Geç</h2>

</div>

<label class="text-xs uppercase tracking-wider text-gray-400">Soyisim</label>

</div>

<label class="text-xs uppercase tracking-wider text-gray-400">E-posta Adresi</label>

</div>

<label class="text-xs uppercase tracking-wider text-gray-400">Mesaj</label>

</div>

Mesaj Gönder

</button>

</form>

</div>

</section>

</main>

</div>

<div>

<h4 class="text-sm font-bold text-white">Sylva AI</h4>

<span class="text-[10px] text-gray-300">Çevrimiçi</span>

</div>

</button>

</div>

Merhaba, gezgin. Ben Sylva. Bana orman ekosistemleri, bağış şeffaflığı veya yaklaşan etkinlikler hakkında sorabilirsin.

</div>

</button>

</div>

</button>

</div>

</button>

</div>

</div>

<div>

<h4 class="text-white text-sm font-bold">Başarılı</h4>

<p class="text-xs text-gray-300">Mesajınız alındı.</p>

</div>

// --- Başlatma & Navigasyon ---

lucide.createIcons();

// Navigasyon Mantığı

function navigateTo(sectionId) {

// Mobilde menüyü kapat

document.getElementById('mobile-menu').classList.add('hidden');

// Tüm bölümleri gizle

const sections = document.querySelectorAll('.page-section');

sections.forEach(sec => {

sec.classList.add('hidden');

sec.classList.remove('animate-fade-in-up');

});

// Hedef bölümü göster

const target = document.getElementById(sectionId);

target.classList.remove('hidden');

// Animasyonu tetikle

void target.offsetWidth; // Reflow tetikle

target.classList.add('animate-fade-in-up');

// Eğer analitik sayfasıysa grafikleri başlat

if(sectionId === 'analytics') {

setTimeout(initCharts, 300);

animateNumbers();

}

// Yukarı kaydır

window.scrollTo({ top: 0, behavior: 'smooth' });

}

// Mobil Menü

function toggleMobileMenu() {

const menu = document.getElementById('mobile-menu');

menu.classList.toggle('hidden');

}

// --- Grafikler (Custom Canvas) ---

// Harici kütüphane olmadan hafif görselleştirme

let mainChartInstance = null;

let barChartInstance = null;

function initCharts() {

if (mainChartInstance) return; // Tekrar çizmeyi önle

const ctx1 = document.getElementById('mainChart').getContext('2d');

const ctx2 = document.getElementById('barChart').getContext('2d');

mainChartInstance = new LineChart(ctx1);

barChartInstance = new BarChart(ctx2);

function animateCharts() {

mainChartInstance.update();

mainChartInstance.draw();

barChartInstance.draw();

requestAnimationFrame(animateCharts);

}

animateCharts();

}

class LineChart {

constructor(ctx) {

this.ctx = ctx;

this.points = [];

this.width = ctx.canvas.width = ctx.canvas.parentElement.offsetWidth;

this.height = ctx.canvas.height = ctx.canvas.parentElement.offsetHeight;

// Noktaları başlat

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

this.points.push(Math.random() * 0.5 + 0.2);

}

this.offset = 0;

}

update() {

this.offset += 0.02;

// "Canlı" hissi için noktaları kaydır

this.points.shift();

const last = this.points[this.points.length-1];

const noise = (Math.random() - 0.5) * 0.1;

let next = last + noise;

if(next > 0.9) next = 0.9;

if(next < 0.1) next = 0.1;

this.points.push(next);

}

draw() {

const { ctx, width, height } = this;

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

// Gradyan

const gradient = ctx.createLinearGradient(0, 0, 0, height);

gradient.addColorStop(0, 'rgba(74, 107, 74, 0.6)');

gradient.addColorStop(1, 'rgba(74, 107, 74, 0.0)');

ctx.beginPath();

ctx.moveTo(0, height);

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

const x = (i / (this.points.length - 1)) * width;

const y = height - (this.points[i] * height);

ctx.lineTo(x, y);

}

ctx.lineTo(width, height);

ctx.closePath();

ctx.fillStyle = gradient;

ctx.fill();

// Çizgi

ctx.beginPath();

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

const x = (i / (this.points.length - 1)) * width;

const y = height - (this.points[i] * height);

if(i===0) ctx.moveTo(x,y);

else ctx.lineTo(x,y);

}

ctx.strokeStyle = '#6b8c6b';

ctx.lineWidth = 2;

ctx.stroke();

}

class BarChart {

constructor(ctx) {

this.ctx = ctx;

this.width = ctx.canvas.width = ctx.canvas.parentElement.offsetWidth;

this.height = ctx.canvas.height = ctx.canvas.parentElement.offsetHeight;

this.data = [0.6, 0.7, 0.5, 0.8, 0.65, 0.75, 0.9];

}

draw() {

const { ctx, width, height } = this;

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

const barWidth = (width / this.data.length) * 0.6;

const spacing = (width / this.data.length);

this.data.forEach((val, i) => {

const x = (i * spacing) + (spacing/2) - (barWidth/2);

const h = val * height * 0.8;

const y = height - h;

ctx.fillStyle = i % 2 === 0 ? 'rgba(212, 175, 55, 0.6)' : 'rgba(255, 255, 255, 0.1)';

ctx.fillRect(x, y, barWidth, h);

});

}

// Animasyonlu Sayılar

function animateNumbers() {

const counters = document.querySelectorAll('.count-up');

counters.forEach(counter => {

const target = +counter.getAttribute('data-target');

const duration = 2000; // ms

const increment = target / (duration / 16);

let current = 0;

const updateCount = () => {

current += increment;

if(current < target) {

counter.innerText = Math.ceil(current).toLocaleString();

requestAnimationFrame(updateCount);

} else {

counter.innerText = target.toLocaleString();

}

};

updateCount();

});

}

// --- Chatbot Mantığı ---

let isChatOpen = false;

function toggleChat() {

const window = document.getElementById('chat-window');

isChatOpen = !isChatOpen;

if (isChatOpen) {

window.classList.remove('scale-0');

window.classList.add('scale-100');

} else {

window.classList.remove('scale-100');

window.classList.add('scale-0');

}

function handleChatKey(e) {

if (e.key === 'Enter') sendMessage();

}

function sendMessage() {

const input = document.getElementById('chat-input');

const msg = input.value.trim();

if (!msg) return;

addMessage(msg, 'user');

input.value = '';

// Yazıyor simülasyonu

const chatMessages = document.getElementById('chat-messages');

const typingIndicator = document.createElement('div');

typingIndicator.id = 'typing';

typingIndicator.className = 'text-xs text-gray-400 italic ml-2';

typingIndicator.innerText = 'Sylva düşünüyor...';

chatMessages.appendChild(typingIndicator);

chatMessages.scrollTop = chatMessages.scrollHeight;

setTimeout(() => {

document.getElementById('typing').remove();

const response = getAIResponse(msg);

addMessage(response, 'bot');

}, 1500);

}

function addMessage(text, sender) {

const container = document.getElementById('chat-messages');

const div = document.createElement('div');

div.className = 'flex items-start gap-2 ' + (sender === 'user' ? 'flex-row-reverse' : '');

const avatar = document.createElement('div');

avatar.className = `w-6 h-6 rounded-full flex-shrink-0 ${sender === 'user' ? 'bg-gray-500' : 'bg-gradient-to-tr from-green-400 to-blue-500'}`;

const bubble = document.createElement('div');

bubble.className = `p-2.5 rounded-t-lg text-gray-200 ${sender === 'user' ? 'bg-earth-600 rounded-bl-lg' : 'bg-white/10 rounded-br-lg'}`;

bubble.innerText = text;

div.appendChild(avatar);

div.appendChild(bubble);

container.appendChild(div);

container.scrollTop = container.scrollHeight;

}

function getAIResponse(input) {

input = input.toLowerCase();

if (input.includes('merhaba') || input.includes('selam')) return "Selamlar. Ekolojik yolculuğunda sana nasıl yardımcı olabilirim?";

if (input.includes('bağış') || input.includes('katkı')) return "Katkılar doğrudan Amazon ve Kongo Havzası'ndaki yeniden ağaçlandırma ortaklarımıza gider.";

if (input.includes('ağaç') || input.includes('orman')) return "Ağaçlar dünyamızın direkleridir. Sadece bu ay 12.000'den fazla ağaç diktik.";

if (input.includes('veri') || input.includes('grafik')) return "Analitik sayfamız karbon seviyeleri ve yeşil örtü ile ilgili gerçek zamanlı uydu verilerini çeker.";

return "Orman frekanslarına uyumluyum, ama bunu tam anlayamadım. Tekrar edebilir misin?";

}

// --- Lightbox Mantığı ---

function openLightbox(type, src) {

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

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

lightbox.classList.remove('hidden');

content.innerHTML = '';

if (type === 'image') {

const img = document.createElement('img');

img.src = src;

img.className = 'max-w-full max-h-[85vh] rounded shadow-2xl';

content.appendChild(img);

} else if (type === 'video') {

const video = document.createElement('video');

video.src = src;

video.controls = true;

video.autoplay = true;

video.className = 'max-w-full max-h-[85vh] rounded shadow-2xl';

content.appendChild(video);

}

function closeLightbox() {

document.getElementById('lightbox').classList.add('hidden');

document.getElementById('lightbox-content').innerHTML = ''; // Videoyu durdur

}

// --- Form Mantığı ---

function handleFormSubmit(e) {

e.preventDefault();

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

toast.classList.remove('translate-x-60', 'opacity-0');

// Formu sıfırla

e.target.reset();

setTimeout(() => {

toast.classList.add('translate-x-60', 'opacity-0');

}, 3000);

}

// Pencere Boyutlandığında Canvas Yenileme

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

if(!document.getElementById('analytics').classList.contains('hidden')) {

// Hızlı ve basit canvas yenileme

mainChartInstance = null;

initCharts();

}

});

</script>

</body>

</html>

Metehan

Recommended

metehan'ın bir kodu

HTML

CSS

JS

Recommended

metehan'ın bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS