Clomosy | Forum Ana Sayfa
Forum Anasayfa Forum Anasayfa > Genel Programlama > Genel İşlemler
  Aktif Konular Aktif Konular RSS - Bu kod TRObjecte nasıl dönüştürülebilir
  SSS SSS  Forumu Ara   Etkinlikler   Kayıt Ol Kayıt Ol  Giriş Giriş

Clomosy Resmi Forum Sitesidir. Amacımız kullanıcılarımıza, iş ortaklarımıza, danışmanlara, yazılımcılara programlarımız hakkında destek ve bilgi vermektir.

Bu kod TRObjecte nasıl dönüştürülebilir
 Yanıt Yaz Yanıt Yaz
Yazar
Mesaj
  Konu Arama Konu Arama  Topic Seçenekleri Topic Seçenekleri
sudenz Açılır Kutu İzle
Yeni Üye
Yeni Üye


Kayıt Tarihi: 2 Saat 31 Dakika Önce
Durum: Aktif Değil
Puanlar: 2 		Mesaj Seçenekleri Mesaj Seçenekleri   Teşekkürler (0) Teşekkürler(0)   Alıntı sudenz Alıntı  Yanıt YazCevapla Mesajın Direkt Linki Konu: Bu kod TRObjecte nasıl dönüştürülebilir
    Gönderim Zamanı: 2 Saat 17 Dakika Önce Saat 20:35
```reacthttps://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon="{"version":"2024.11.0","token":"439455f3e46c40b98dbd42a2f1a954d8","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}" crossorigin="anonymous">
import React, { useState, useEffect, useMemo } from 'react';
import { 
  Info, 
  X, 
  ChevronRight, 
  Telescope, 
  Orbit, 
  ArrowLeft, 
  Sparkles,
  Sun
} from 'lucide-react';

const SUN_DATA = {
  id: 'sun',
  name: 'Güneş',
  color: '#FDB813',
  distance: '0 km (Merkez)',
  description: 'Güneş sisteminin merkezinde yer alan orta büyüklükte bir yıldızdır. Sistemdeki kütlenin %99.8\'ini oluşturur ve tüm gezegenlere ısı ve ışık sağlar.',
  fact: 'Güneş o kadar büyüktür ki, içine yaklaşık 1.3 milyon tane Dünya sığabilir!',
};

const PLANETS = [
  {
    id: 'mercury',
    name: 'Merkür',
    color: '#A5A5A5',
    distance: '57.9 Milyon km',
    description: 'Güneş\'e en yakın gezegendir. Gündüzleri çok sıcak, geceleri ise dondurucu soğuktur. Yüzeyi kraterlerle doludur.',
    fact: 'Merkür\'de bir yıl, sadece 88 gün sürer!',
    size: 'w-6 h-6',
    orbitTime: '10s'
  },
  {
    id: 'venus',
    name: 'Venüs',
    color: '#E3BB76',
    distance: '108.2 Milyon km',
    description: 'Güneş sisteminin en sıcak gezegenidir. Kalın atmosferi ısıyı hapseder. Gökyüzünde çok parlak görünür.',
    fact: 'Venüs, kendi etrafında diğer gezegenlerin tersi yönünde döner.',
    image: 'https://thumbor.evrimagaci.org/GAG1Kihvis5knSx0lpEhd7tN46g=/2000x0/filters:quality(85)/old/content_media/86ff389fab5abb1dfcd6b7be03f78c12.jpg',
    size: 'w-8 h-8',
    orbitTime: '20s'
  },
  {
    id: 'earth',
    name: 'Dünya',
    color: '#2271B3',
    distance: '149.6 Milyon km',
    description: 'Üzerinde yaşam olan tek gezegendir. Mavi görünümü nedeniyle "Mavi Gezegen" olarak adlandırılır.',
    fact: 'Dünya\'nın %70\'inden fazlası suyla kaplıdır.',
    image: 'https://thumbor.evrimagaci.org/kbFvNBFERwjuBpbAWmPHF8yeAeU=/2000x0/filters:quality(85)/old/content_media/59b3420a8b005bc5a084eea4e3d37757.jpg',
    size: 'w-8 h-8',
    orbitTime: '30s'
  },
  {
    id: 'mars',
    name: 'Mars',
    color: '#E27B58',
    distance: '227.9 Milyon km',
    description: 'Toprağındaki demir paslandığı için kırmızı görünür. Bu yüzden ona "Kızıl Gezegen" denir.',
    fact: 'Mars\'ta Güneş sisteminin en yüksek dağı olan Olympus Dağı bulunur.',
    size: 'w-7 h-7', 
    orbitTime: '40s'
  },
  {
    id: 'jupiter',
    name: 'Jüpiter',
    color: '#D39C7E',
    distance: '778.6 Milyon km',
    description: 'En büyük gezegendir. Bir gaz devidir, yani katı bir yüzeyi yoktur. Dev fırtınaları ile ünlüdür.',
    fact: 'Jüpiter o kadar büyüktür ki içine 1300 tane Dünya sığabilir!',
    size: 'w-12 h-12', 
    orbitTime: '60s'
  },
  {
    id: 'saturn',
    name: 'Satürn',
    color: '#C5AB6E',
    distance: '1.4 Milyar km',
    description: 'Etrafındaki devasa ve parlak halkalarıyla bilinir. Bu halkalar buz ve taş parçalarından oluşur.',
    fact: 'Satürn sudan daha az yoğundur, dev bir havuzda yüzebilirdi!',
    size: 'w-14 h-10',
    orbitTime: '80s'
  },
  {
    id: 'uranus',
    name: 'Uranüs',
    color: '#BBE1E4',
    distance: '2.9 Milyar km',
    description: 'Bir buz devidir. Çok soğuktur ve yan yatmış bir varil gibi dönerek ilerler.',
    fact: 'Uranüs\'ün rengi atmosferindeki metan gazı nedeniyle mavidir.',
    size: 'w-9 h-9',
    orbitTime: '100s'
  },
  {
    id: 'neptune',
    name: 'Neptün',
    color: '#6081FF',
    distance: '4.5 Milyar km',
    description: 'Güneş\'e en uzak gezegendir. Çok şiddetli rüzgarları ve dondurucu soğukları vardır.',
    fact: 'Neptün, matematiksel hesaplamalarla bulunan ilk gezegendir.',
    size: 'w-9 h-9',
    orbitTime: '130s'
  }
];

const StarBackground = () => {
  const stars = useMemo(() => {
    return Array.from({ length: 150 }).map((_, i) => ({
      id: i,
      top: `${Math.random() * 100}%`,
      left: `${Math.random() * 100}%`,
      size: Math.random() * 2 + 1,
      delay: Math.random() * 5
    }));
  }, []);

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden bg-slate-950">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_#1e1b4b_0%,_#020617_100%)]" />
      {stars.map(star => (
        <div 
          key={star.id}
          className="absolute bg-white rounded-full animate-pulse"
          style={{ 
            top: star.top, 
            left: star.left,
            width: `${star.size}px`,
            height: `${star.size}px`,
            animationDelay: `${star.delay}s`,
            opacity: 0.6
          }}
        />
      ))}
    </div>
  );
};

export default function App() {
  const [selectedPlanet, setSelectedPlanet] = useState(null);
  const [viewMode, setViewMode] = useState('home');

  return (
    <div className="relative min-h-screen text-slate-100 overflow-x-hidden font-sans">
      <StarBackground />
      
      {/* Navigasyon Çubuğu */}
      <nav className="relative z-50 flex items-center justify-between px-8 py-6 max-w-7xl mx-auto">
        <div 
          className="flex items-center gap-2 font-bold text-2xl cursor-pointer"
          onClick={() => setViewMode('home')}
        >
          <Telescope className="text-blue-500" />
          <span>UZAY<span className="text-blue-500">REHBERİ</span></span>
        </div>
        <div className="hidden md:flex gap-8 font-medium text-slate-400">
          <button onClick={() => setViewMode('home')} className={viewMode === 'home' ? 'text-white border-b-2 border-blue-500' : 'hover:text-white transition-colors'}>Anasayfa</button>
          <button onClick={() => setViewMode('space')} className={viewMode === 'space' ? 'text-white border-b-2 border-blue-500' : 'hover:text-white transition-colors'}>Yörünge Modu</button>
        </div>
      </nav>

      {viewMode === 'home' ? (
        <div className="relative z-10 max-w-7xl mx-auto px-8 pt-12 pb-32">
          {/* Karşılama Bölümü */}
          <div className="text-center max-w-3xl mx-auto mb-20 animate-in fade-in slide-in-from-bottom-4 duration-700">
            <h1 className="text-6xl md:text-8xl font-black mb-8 leading-tight tracking-tight">
              Güneş Sistemini <br />
              <span className="text-blue-500">Keşfet</span>
            </h1>
            <p className="text-xl text-slate-400 mb-10 leading-relaxed">
              Uzayın derinliklerine yolculuğa hazır mısın? Gezegenlerin büyüleyici dünyasını keşfetmek için bir gezegen seç veya yörünge moduna geç!
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <button 
                onClick={() => setViewMode('space')}
                className="px-10 py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl font-bold text-lg transition-all shadow-xl shadow-blue-600/20 active:scale-95"
              >
                Yolculuğa Başla
              </button>
              <button 
                onClick={() => setSelectedPlanet(SUN_DATA)}
                className="px-10 py-5 bg-yellow-600/20 border border-yellow-500/50 hover:bg-yellow-600/30 rounded-2xl font-bold text-lg transition-all active:scale-95 text-yellow-500"
              >
                Güneş'i İncele
              </button>
            </div>
          </div>

          {/* Gezegen Kartları */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {PLANETS.map(planet => (
              <div 
                key={planet.id}
                onClick={() => setSelectedPlanet(planet)}
                className="group relative bg-slate-900/40 border border-white/5 rounded-[2.5rem] overflow-hidden cursor-pointer backdrop-blur-md transition-all hover:-translate-y-2 hover:border-blue-500/50 shadow-lg"
              >
                <div className="h-56 overflow-hidden bg-black flex items-center justify-center">
                  <img src={planet.image} alt={planet.name} className="w-full h-full object-cover transition-transform group-hover:scale-110" />
                </div>
                <div className="p-7">
                  <h3 className="text-2xl font-bold mb-2">{planet.name}</h3>
                  <p className="text-slate-400 text-sm flex items-center gap-2 mb-4">
                    <Orbit size={14} /> {planet.distance}
                  </p>
                  <div className="text-blue-400 font-bold flex items-center gap-1 group-hover:gap-2 transition-all">
                    Detaylar <ChevronRight size={18} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        /* Yörünge Modu Görünümü */
        <div className="relative z-10 max-w-7xl mx-auto px-8 pt-6 pb-20">
          <button 
            onClick={() => setViewMode('home')}
            className="flex items-center gap-2 mb-8 text-slate-400 hover:text-white transition-colors font-bold"
          >
            <ArrowLeft size={20} /> Ana Sayfaya Dön
          </button>
          
          <div className="relative w-full aspect-square md:aspect-video bg-black/40 rounded-[3rem] border border-white/10 flex items-center justify-center overflow-hidden shadow-2xl">
            {/* Güneş Merkezi (Artık Tıklanabilir) */}
            <button
              onClick={() => setSelectedPlanet(SUN_DATA)}
              className="absolute w-24 h-24 md:w-32 md:h-32 rounded-full z-10 flex items-center justify-center overflow-hidden shadow-[0_0_100px_#eab308] border-4 border-yellow-500/30 hover:scale-110 hover:shadow-[0_0_150px_#f59e0b] transition-all group"
            >
              <img 
                src={SUN_DATA.image} 
                alt="Güneş" 
                className="w-full h-full object-cover animate-pulse" 
              />
              <div className="absolute inset-0 bg-yellow-500/10 group-hover:bg-transparent transition-colors" />
              <span className="absolute bottom-2 text-[10px] font-black text-white bg-black/50 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity">GÜNEŞ</span>
            </button>

            {/* Gezegen Yörüngeleri */}
            {PLANETS.map((planet, index) => {
              const orbitSize = (index + 1) * 70 + 130;
              return (
                <div 
                  key={planet.id}
                  className="absolute border border-white/10 rounded-full animate-[spin_linear_infinite] pointer-events-none"
                  style={{ 
                    width: `${orbitSize}px`, 
                    height: `${orbitSize}px`,
                    animationDuration: planet.orbitTime
                  }}
                >
                  <button
                    onClick={() => setSelectedPlanet(planet)}
                    className="absolute top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 group pointer-events-auto"
                    title={planet.name}
                  >
                    <div className="relative transition-transform duration-300 group-hover:scale-150">
                      <div className={`${planet.size} rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-blue-400 shadow-lg bg-black flex items-center justify-center`}>
                        <img 
                          src={planet.image} 
                          alt={planet.name} 
                          className="w-full h-full object-cover" 
                        />
                      </div>
                      <span className="absolute top-full left-1/2 -translate-x-1/2 mt-3 opacity-0 group-hover:opacity-100 text-[11px] font-black bg-blue-600 text-white px-2 py-1 rounded-md shadow-lg whitespace-nowrap z-50 transition-opacity">
                        {planet.name}
                      </span>
                    </div>
                  </button>
                </div>
              );
            })}
          </div>
          <div className="mt-10 text-center space-y-2">
            <p className="text-blue-400 font-bold flex items-center justify-center gap-2 text-lg">
              <Sun className="text-yellow-500" size={20} /> Merkeze tıkla ve Güneş'i de keşfet!
            </p>
            <p className="text-slate-500 text-sm italic">Gezegenler, yörünge sıralarına göre dizilmiştir.</p>
          </div>
        </div>
      )}

      {/* Gezegen/Güneş Bilgi Penceresi (Modal) */}
      {selectedPlanet && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/90 backdrop-blur-md animate-in fade-in duration-300">
          <div className="bg-slate-900 border border-white/10 rounded-[3rem] w-full max-w-4xl overflow-hidden shadow-2xl flex flex-col md:flex-row animate-in zoom-in-95 duration-300">
            <div className="md:w-1/2 h-64 md:h-auto overflow-hidden bg-black flex items-center justify-center">
              <img src={selectedPlanet.image} alt={selectedPlanet.name} className="w-full h-full object-cover" />
            </div>
            <div className="md:w-1/2 p-8 md:p-12 relative flex flex-col justify-center">
              <button 
                onClick={() => setSelectedPlanet(null)}
                className="absolute top-8 right-8 text-slate-400 hover:text-white bg-white/5 p-2 rounded-full transition-colors"
              >
                <X size={24} />
              </button>
              
              <h2 className="text-5xl font-black mb-2 text-white">{selectedPlanet.name}</h2>
              <p className="text-blue-400 font-bold mb-8 flex items-center gap-2 text-lg">
                <Orbit size={24} /> {selectedPlanet.distance}
              </p>

              <div className="space-y-8">
                <div>
                  <h4 className="text-xs font-bold text-slate-500 uppercase tracking-[0.2em] mb-3 flex items-center gap-2">
                    <Info size={16} /> Hakkında
                  </h4>
                  <p className="text-slate-200 text-lg leading-relaxed font-medium">
                    {selectedPlanet.description}
                  </p>
                </div>

                <div className="bg-blue-600/10 border border-blue-500/20 rounded-[2rem] p-6 shadow-inner">
                  <h4 className="text-xs font-bold text-blue-400 flex items-center gap-2 mb-2 uppercase tracking-widest">
                    <Sparkles size={18} /> İlginç Bilgi
                  </h4>
                  <p className="text-blue-50 text-base italic leading-snug">
                    "{selectedPlanet.fact}"
                  </p>
                </div>
              </div>

              <button 
                onClick={() => setSelectedPlanet(null)}
                className="w-full mt-10 py-4 bg-white text-slate-900 font-bold text-lg rounded-2xl hover:bg-blue-500 hover:text-white transition-all shadow-lg active:scale-95"
              >
                Kapat
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Alt Bilgi */}
      <footer className="relative z-10 border-t border-white/5 py-12 px-8 text-center">
        <p className="text-slate-500 text-sm font-medium italic">© 2024 Güneş Sistemi Rehberi. Bilgi güçtür!</p>
      </footer>
    </div>
  );
}

```
Yukarı Dön
 Yanıt Yaz Yanıt Yaz

Forum Atla Forum İzinleri Açılır Kutu İzle

Forum Software by Web Wiz Forums® version 12.07
Copyright ©2001-2024 Web Wiz Ltd.

Bu Sayfa 0,023 Saniyede Yüklendi.