1. <!DOCTYPE html>
  2. <html lang="tr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Metin2 - Ejderha Krallığı</title>
  7. <style>
  8. @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Orbitron:wght@400;700;900&display=swap');
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  16. body {
  17. font-family: 'Cinzel', serif;
  18. overflow-x: hidden;
  19. background: #000;
  20. color: white;
  21. cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><circle cx="12" cy="12" r="2" fill="%23ffd700"/></svg>'), auto;
  22. }
  24. /* Sinematik Arka Plan */
  25. .cinematic-bg {
  26. position: fixed;
  27. top: 0;
  28. left: 0;
  29. width: 100%;
  30. height: 100%;
  31. background:
  32. radial-gradient(ellipse at top, #1a0033 0%, transparent 50%),
  33. radial-gradient(ellipse at bottom, #330011 0%, transparent 50%),
  34. linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e, #0f3460);
  35. z-index: -3;
  36. }
  38. /* Karmaşık Parçacık Sistemi */
  39. .particle-system {
  40. position: fixed;
  41. top: 0;
  42. left: 0;
  43. width: 100%;
  44. height: 100%;
  45. z-index: -2;
  46. overflow: hidden;
  47. }
  49. .magical-orb {
  50. position: absolute;
  51. border-radius: 50%;
  52. background: radial-gradient(circle, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.4), transparent);
  53. box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  54. animation: float-magical 6s ease-in-out infinite;
  55. }
  57. .magical-orb:nth-child(1) { width: 8px; height: 8px; top: 20%; left: 10%; animation-delay: 0s; }
  58. .magical-orb:nth-child(2) { width: 12px; height: 12px; top: 60%; left: 80%; animation-delay: -2s; }
  59. .magical-orb:nth-child(3) { width: 6px; height: 6px; top: 80%; left: 20%; animation-delay: -4s; }
  60. .magical-orb:nth-child(4) { width: 10px; height: 10px; top: 30%; left: 70%; animation-delay: -1s; }
  61. .magical-orb:nth-child(5) { width: 14px; height: 14px; top: 70%; left: 50%; animation-delay: -3s; }
  63. @keyframes float-magical {
  64. 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
  65. 25% { transform: translateY(-20px) scale(1.1); opacity: 1; }
  66. 50% { transform: translateY(-10px) scale(0.9); opacity: 0.8; }
  67. 75% { transform: translateY(-30px) scale(1.05); opacity: 0.9; }
  68. }
  70. /* Rüzgar Efekti */
  71. .wind-effect {
  72. position: absolute;
  73. width: 2px;
  74. height: 100px;
  75. background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.3), transparent);
  76. animation: wind-blow 4s linear infinite;
  77. }
  79. .wind-effect:nth-child(6) { left: 15%; animation-delay: 0s; }
  80. .wind-effect:nth-child(7) { left: 35%; animation-delay: -1s; }
  81. .wind-effect:nth-child(8) { left: 55%; animation-delay: -2s; }
  82. .wind-effect:nth-child(9) { left: 75%; animation-delay: -0.5s; }
  84. @keyframes wind-blow {
  85. 0% { transform: translateY(100vh) rotate(10deg); opacity: 0; }
  86. 10% { opacity: 0.5; }
  87. 90% { opacity: 0.5; }
  88. 100% { transform: translateY(-100px) rotate(-10deg); opacity: 0; }
  89. }
  91. /* Merkez Aura Efekti */
  92. .center-aura {
  93. position: absolute;
  94. top: 50%;
  95. left: 50%;
  96. width: 600px;
  97. height: 600px;
  98. background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(255, 140, 0, 0.03) 30%, transparent 70%);
  99. border-radius: 50%;
  100. transform: translate(-50%, -50%);
  101. animation: aura-pulse 8s ease-in-out infinite;
  102. z-index: -1;
  103. }
  105. @keyframes aura-pulse {
  106. 0%, 100% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0.3; }
  107. 25% { transform: translate(-50%, -50%) scale(1.1) rotate(90deg); opacity: 0.7; }
  108. 50% { transform: translate(-50%, -50%) scale(1.3) rotate(180deg); opacity: 0.5; }
  109. 75% { transform: translate(-50%, -50%) scale(1.0) rotate(270deg); opacity: 0.8; }
  110. }
  112. /* Ana Container */
  113. .main-container {
  114. position: relative;
  115. min-height: 100vh;
  116. display: flex;
  117. flex-direction: column;
  118. justify-content: center;
  119. align-items: center;
  120. padding: 20px;
  121. z-index: 1;
  122. }
  124. /* Dramatik Giriş Animasyonu */
  125. .dramatic-entrance {
  126. animation: dramatic-reveal 2s ease-out forwards;
  127. opacity: 0;
  128. }
  130. @keyframes dramatic-reveal {
  131. 0% {
  132. opacity: 0;
  133. transform: scale(0.5) rotateY(180deg);
  134. filter: blur(20px);
  135. }
  136. 50% {
  137. opacity: 0.5;
  138. transform: scale(1.1) rotateY(90deg);
  139. filter: blur(10px);
  140. }
  141. 100% {
  142. opacity: 1;
  143. transform: scale(1) rotateY(0deg);
  144. filter: blur(0px);
  145. }
  146. }
  148. /* Epic Logo */
  149. .logo-container {
  150. text-align: center;
  151. margin-bottom: 60px;
  152. position: relative;
  153. }
  155. .main-logo {
  156. font-family: 'Orbitron', monospace;
  157. font-size: 5rem;
  158. font-weight: 900;
  159. background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffed4e, #ffa500);
  160. background-size: 400% 400%;
  161. -webkit-background-clip: text;
  162. -webkit-text-fill-color: transparent;
  163. background-clip: text;
  164. animation: epic-glow 4s ease-in-out infinite;
  165. text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  166. position: relative;
  167. margin-bottom: 15px;
  168. letter-spacing: 3px;
  169. }
  171. .main-logo::before {
  172. content: 'METIN2';
  173. position: absolute;
  174. top: 0;
  175. left: 0;
  176. background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  177. -webkit-background-clip: text;
  178. -webkit-text-fill-color: transparent;
  179. background-clip: text;
  180. animation: shine-sweep 3s ease-in-out infinite;
  181. }
  183. @keyframes epic-glow {
  184. 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)); }
  185. 25% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(255, 140, 0, 1)); }
  186. 50% { background-position: 200% 50%; filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1.2)); }
  187. 75% { background-position: 300% 50%; filter: drop-shadow(0 0 25px rgba(255, 165, 0, 1)); }
  188. }
  190. @keyframes shine-sweep {
  191. 0% { transform: translateX(-200%); }
  192. 100% { transform: translateX(200%); }
  193. }
  195. .subtitle-epic {
  196. font-size: 1.8rem;
  197. color: #ffd700;
  198. margin-bottom: 10px;
  199. font-weight: 600;
  200. text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  201. animation: subtitle-glow 3s ease-in-out infinite alternate;
  202. }
  204. @keyframes subtitle-glow {
  205. from { opacity: 0.8; transform: scale(1); }
  206. to { opacity: 1; transform: scale(1.02); }
  207. }
  209. .tagline-epic {
  210. font-size: 1rem;
  211. color: #cccccc;
  212. font-style: italic;
  213. opacity: 0.9;
  214. }
  216. /* 3D Menü Sistemi */
  217. .menu-grid {
  218. display: grid;
  219. grid-template-columns: repeat(3, 1fr);
  220. gap: 25px;
  221. max-width: 900px;
  222. width: 100%;
  223. perspective: 1000px;
  224. animation: menu-entrance 1.5s ease-out 0.8s both;
  225. }
  227. @keyframes menu-entrance {
  228. from {
  229. opacity: 0;
  230. transform: translateY(50px) rotateX(30deg);
  231. }
  232. to {
  233. opacity: 1;
  234. transform: translateY(0) rotateX(0deg);
  235. }
  236. }
  238. .menu-card {
  239. background: rgba(255, 255, 255, 0.05);
  240. border: 2px solid rgba(255, 215, 0, 0.3);
  241. border-radius: 20px;
  242. padding: 30px 20px;
  243. text-align: center;
  244. cursor: pointer;
  245. transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  246. backdrop-filter: blur(15px);
  247. position: relative;
  248. transform-style: preserve-3d;
  249. overflow: hidden;
  250. }
  252. .menu-card::before {
  253. content: '';
  254. position: absolute;
  255. top: 0;
  256. left: -100%;
  257. width: 100%;
  258. height: 100%;
  259. background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1), transparent);
  260. transition: left 0.6s ease;
  261. z-index: 1;
  262. }
  264. .menu-card::after {
  265. content: '';
  266. position: absolute;
  267. top: 50%;
  268. left: 50%;
  269. width: 0;
  270. height: 0;
  271. background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent);
  272. border-radius: 50%;
  273. transform: translate(-50%, -50%);
  274. transition: width 0.4s ease, height 0.4s ease;
  275. z-index: 0;
  276. }
  278. .menu-card:hover::before {
  279. left: 100%;
  280. }
  282. .menu-card:hover::after {
  283. width: 300px;
  284. height: 300px;
  285. }
  287. .menu-card:hover {
  288. transform: translateY(-15px) rotateX(10deg) rotateY(5deg) scale(1.05);
  289. border-color: #ffd700;
  290. box-shadow:
  291. 0 25px 50px rgba(255, 215, 0, 0.4),
  292. 0 0 0 1px rgba(255, 215, 0, 0.1),
  293. inset 0 1px 0 rgba(255, 255, 255, 0.1);
  294. background: rgba(255, 215, 0, 0.08);
  295. }
  297. .menu-card:active {
  298. transform: translateY(-10px) rotateX(5deg) scale(0.98);
  299. }
  301. .menu-icon-epic {
  302. font-size: 3rem;
  303. margin-bottom: 20px;
  304. display: block;
  305. position: relative;
  306. z-index: 2;
  307. transition: all 0.3s ease;
  308. filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  309. }
  311. .menu-card:hover .menu-icon-epic {
  312. transform: scale(1.1) rotateY(360deg);
  313. filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  314. }
  316. .menu-title-epic {
  317. font-size: 1.4rem;
  318. font-weight: 700;
  319. margin-bottom: 12px;
  320. color: #ffd700;
  321. position: relative;
  322. z-index: 2;
  323. transition: all 0.3s ease;
  324. }
  326. .menu-card:hover .menu-title-epic {
  327. text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  328. }
  330. .menu-desc-epic {
  331. font-size: 0.95rem;
  332. color: #cccccc;
  333. line-height: 1.5;
  334. position: relative;
  335. z-index: 2;
  336. transition: all 0.3s ease;
  337. }
  339. .menu-card:hover .menu-desc-epic {
  340. color: #ffffff;
  341. }
  343. /* Özel Büyük Kartlar */
  344. .menu-card.featured {
  345. grid-column: span 2;
  346. background: rgba(255, 215, 0, 0.05);
  347. border-color: rgba(255, 215, 0, 0.5);
  348. }
  350. .menu-card.featured .menu-title-epic {
  351. font-size: 1.6rem;
  352. }
  354. /* Alt Bilgi Alanı */
  355. .footer-section {
  356. position: absolute;
  357. bottom: 20px;
  358. width: 100%;
  359. text-align: center;
  360. color: rgba(255, 255, 255, 0.6);
  361. font-size: 0.9rem;
  362. animation: footer-fade 2s ease-out 1.5s both;
  363. }
  365. @keyframes footer-fade {
  366. from { opacity: 0; transform: translateY(20px); }
  367. to { opacity: 1; transform: translateY(0); }
  368. }
  370. /* Yanıp Sönen Efektler */
  371. .dragon-breath {
  372. position: absolute;
  373. top: 10%;
  374. right: 5%;
  375. width: 150px;
  376. height: 150px;
  377. background: radial-gradient(circle, rgba(255, 69, 0, 0.3), rgba(255, 140, 0, 0.2), transparent);
  378. border-radius: 50%;
  379. animation: dragon-breath 6s ease-in-out infinite;
  380. z-index: -1;
  381. }
  383. @keyframes dragon-breath {
  384. 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
  385. 33% { transform: scale(1.3) rotate(120deg); opacity: 0.7; }
  386. 66% { transform: scale(0.8) rotate(240deg); opacity: 0.5; }
  387. }
  389. /* Responsive Tasarım */
  390. @media (max-width: 1024px) {
  391. .menu-grid {
  392. grid-template-columns: repeat(2, 1fr);
  393. max-width: 600px;
  394. }
  396. .menu-card.featured {
  397. grid-column: span 2;
  398. }
  399. }
  401. @media (max-width: 768px) {
  402. .main-logo {
  403. font-size: 3rem;
  404. }
  406. .menu-grid {
  407. grid-template-columns: 1fr;
  408. max-width: 400px;
  409. gap: 20px;
  410. }
  412. .menu-card.featured {
  413. grid-column: span 1;
  414. }
  416. .menu-card {
  417. padding: 25px 15px;
  418. }
  419. }
  420. </style>
  421. </head>
  422. <body>
  423. <div class="cinematic-bg"></div>
  425. <div class="particle-system">
  426. <div class="magical-orb"></div>
  427. <div class="magical-orb"></div>
  428. <div class="magical-orb"></div>
  429. <div class="magical-orb"></div>
  430. <div class="magical-orb"></div>
  431. <div class="wind-effect"></div>
  432. <div class="wind-effect"></div>
  433. <div class="wind-effect"></div>
  434. <div class="wind-effect"></div>
  435. </div>
  437. <div class="center-aura"></div>
  438. <div class="dragon-breath"></div>
  440. <div class="main-container">
  441. <div class="logo-container dramatic-entrance">
  442. <h1 class="main-logo">METIN2</h1>
  443. <p class="subtitle-epic">Ejderha Krallığı</p>
  444. <p class="tagline-epic">Efsane Seni Çağırıyor...</p>
  445. </div>
  447. <div class="menu-grid">
  448. <div class="menu-card featured" onclick="handleEpicClick('giris')">
  449. <span class="menu-icon-epic">🗡️</span>
  450. <h3 class="menu-title-epic">Savaşa Katıl</h3>
  451. <p class="menu-desc-epic">Hesabınla giriş yapın ve efsanevi maceranıza devam edin</p>
  452. </div>
  454. <div class="menu-card" onclick="handleEpicClick('kayit')">
  455. <span class="menu-icon-epic">⚡</span>
  456. <h3 class="menu-title-epic">Yeni Savaşçı</h3>
  457. <p class="menu-desc-epic">Krallığa katılın</p>
  458. </div>
  460. <div class="menu-card" onclick="handleEpicClick('haberler')">
  461. <span class="menu-icon-epic">📜</span>
  462. <h3 class="menu-title-epic">Krallık Haberleri</h3>
  463. <p class="menu-desc-epic">Son gelişmeler</p>
  464. </div>
  466. <div class="menu-card" onclick="handleEpicClick('rehber')">
  467. <span class="menu-icon-epic">🏰</span>
  468. <h3 class="menu-title-epic">Savaşçı Rehberi</h3>
  469. <p class="menu-desc-epic">Taktik ve strateji</p>
  470. </div>
  472. <div class="menu-card" onclick="handleEpicClick('topluluk')">
  473. <span class="menu-icon-epic">👥</span>
  474. <h3 class="menu-title-epic">Lonca</h3>
  475. <p class="menu-desc-epic">Savaşçılarla tanışın</p>
  476. </div>
  478. <div class="menu-card featured" onclick="handleEpicClick('indirme')">
  479. <span class="menu-icon-epic">⬇️</span>
  480. <h3 class="menu-title-epic">Ejderha İndirme Merkezi</h3>
  481. <p class="menu-desc-epic">Son sürümü indirin ve maceranıza başlayın</p>
  482. </div>
  483. </div>
  485. <div class="footer-section">
  486. <p>&copy; 2025 Metin2 Ejderha Krallığı | Savaşçılar İçin Tasarlandı</p>
  487. </div>
  488. </div>
  490. <script>
  491. // Gelişmiş tıklama efekti
  492. function handleEpicClick(section) {
  493. const clickedCard = event.target.closest('.menu-card');
  495. // Dramatic click effect
  496. clickedCard.style.transform = 'translateY(-10px) rotateX(5deg) scale(0.95)';
  497. clickedCard.style.filter = 'brightness(1.2) saturate(1.5)';
  499. // Particle explosion effect
  500. createParticleExplosion(event.clientX, event.clientY);
  502. setTimeout(() => {
  503. clickedCard.style.transform = '';
  504. clickedCard.style.filter = '';
  505. }, 200);
  507. // Section handling
  508. setTimeout(() => {
  509. switch(section) {
  510. case 'giris':
  511. showEpicMessage('🗡️ Savaşa Hazırlanıyorsunuz...', '#ffd700');
  512. break;
  513. case 'kayit':
  514. showEpicMessage('⚡ Yeni Savaşçı Kaydı Başlatılıyor...', '#ff8c00');
  515. break;
  516. case 'haberler':
  517. showEpicMessage('📜 Krallık Haberleri Açılıyor...', '#ffd700');
  518. break;
  519. case 'rehber':
  520. showEpicMessage('🏰 Savaşçı Rehberi Hazırlanıyor...', '#ff8c00');
  521. break;
  522. case 'topluluk':
  523. showEpicMessage('👥 Lonca Salonuna Giriş...', '#ffd700');
  524. break;
  525. case 'indirme':
  526. showEpicMessage('⬇️ Ejder İndirme Başlatılıyor...', '#ff8c00');
  527. break;
  528. }
  529. }, 300);
  530. }
  532. // Epic mesaj gösterimi
  533. function showEpicMessage(message, color) {
  534. const messageDiv = document.createElement('div');
  535. messageDiv.innerHTML = message;
  536. messageDiv.style.cssText = `
  537. position: fixed;
  538. top: 50%;
  539. left: 50%;
  540. transform: translate(-50%, -50%);
  541. background: rgba(0, 0, 0, 0.9);
  542. color: ${color};
  543. padding: 20px 40px;
  544. border-radius: 15px;
  545. font-size: 1.5rem;
  546. font-weight: bold;
  547. z-index: 9999;
  548. text-align: center;
  549. border: 2px solid ${color};
  550. box-shadow: 0 0 30px ${color}50;
  551. animation: epic-message 3s ease-out forwards;
  552. `;
  554. const style = document.createElement('style');
  555. style.textContent = `
  556. @keyframes epic-message {
  557. 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  558. 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  559. 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  560. 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  561. }
  562. `;
  563. document.head.appendChild(style);
  564. document.body.appendChild(messageDiv);
  566. setTimeout(() => {
  567. document.body.removeChild(messageDiv);
  568. document.head.removeChild(style);
  569. }, 3000);
  570. }
  572. // Parçacık patlaması efekti
  573. function createParticleExplosion(x, y) {
  574. for (let i = 0; i < 15; i++) {
  575. const particle = document.createElement('div');
  576. particle.style.cssText = `
  577. position: fixed;
  578. width: 4px;
  579. height: 4px;
  580. background: #ffd700;
  581. border-radius: 50%;
  582. left: ${x}px;
  583. top: ${y}px;
  584. pointer-events: none;
  585. z-index: 9998;
  586. `;
  588. const angle = (i / 15) * Math.PI * 2;
  589. const velocity = 50 + Math.random() * 50;
  590. const vx = Math.cos(angle) * velocity;
  591. const vy = Math.sin(angle) * velocity;
  593. document.body.appendChild(particle);
  595. let opacity = 1;
  596. let px = x, py = y;
  598. const animate = () => {
  599. px += vx * 0.1;
  600. py += vy * 0.1;
  601. opacity -= 0.02;
  603. particle.style.left = px + 'px';
  604. particle.style.top = py + 'px';
  605. particle.style.opacity = opacity;
  607. if (opacity > 0) {
  608. requestAnimationFrame(animate);
  609. } else {
  610. document.body.removeChild(particle);
  611. }
  612. };
  613. animate();
  614. }
  615. }
  617. // Sayfa yüklendiğinde özel efektler
  618. window.addEventListener('load', function() {
  619. // Rastgele parçacık zamanlaması
  620. document.querySelectorAll('.magical-orb').forEach((orb, index) => {
  621. orb.style.animationDelay = `-${Math.random() * 6}s`;
  622. });
  624. // Mouse takip efekti
  625. document.addEventListener('mousemove', function(e) {
  626. const aura = document.querySelector('.center-aura');
  627. const mouseX = (e.clientX / window.innerWidth - 0.5) * 50;
  628. const mouseY = (e.clientY / window.innerHeight - 0.5) * 50;
  630. aura.style.transform = `translate(calc(-50% + ${mouseX}px), calc(-50% + ${mouseY}px)) scale(0.8)`;
  631. });
  633. // Hoş geldin efekti
  634. setTimeout(() => {
  635. showEpicMessage('🐉 Ejderha Krallığına Hoş Geldiniz!', '#ffd700');
  636. }, 2500);
  637. });
  638. </script>
  639. </body>
  640. </html>