From bfa1316f65db73ba1829c1f421cc3dcacb55178a Mon Sep 17 00:00:00 2001
From: AzenKain <doduykhanh344@gmail.com>
Date: Sun, 19 Apr 2026 12:31:02 +0700
Subject: [PATCH] init

---
 index.html | 148 +++++++++++++++++++++++++++++------------------------
 1 file changed, 81 insertions(+), 67 deletions(-)
diff --git a/index.html b/index.html
index 82ee5a9..8dee456 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
-<html lang="vi"> <head>
+<html lang="vi">
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Punklorde</title>
+    <title>Punklorde's Rainbow City</title>
+    <link rel="icon" href="https://cdn.punklorde.org/punklorde-icon.png" type="image/png">
     <style>
         * {
             margin: 0;
@@ -29,32 +31,48 @@
             border-bottom: 1px solid #1f2329;
         }
 
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .nav-icon {
+            width: 32px;
+            height: 32px;
+        }
+
         .logo {
-            font-size: 1.5rem;
+            font-size: 1.2rem;
             font-weight: bold;
             color: #bd93f9;
-            letter-spacing: 2px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
         }
 
         header {
             text-align: center;
-            margin: 4rem 1rem 2rem;
+            margin: 4rem 1rem 1rem;
         }
 
         .hero-image {
-            max-width: 150px; 
+            max-width: 180px;
             height: auto;
             margin-bottom: 1rem;
         }
 
         header h1 {
-            font-size: 2.5rem;
+            font-size: 2.8rem;
             margin-bottom: 1rem;
             color: #ffffff;
+            background: linear-gradient(90deg, #bd93f9, #58a6ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         header p {
             color: #8b949e;
+            font-size: 1.1rem;
         }
 
         main {
@@ -62,71 +80,70 @@
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 1.5rem;
             width: 100%;
-            max-width: 1000px;
+            max-width: 1100px;
             padding: 2rem;
         }
 
         .card {
             background: #161b22;
             border: 1px solid #30363d;
-            border-radius: 8px;
-            padding: 2rem;
+            border-radius: 12px;
+            padding: 2.5rem;
             text-decoration: none;
             color: inherit;
-            transition: transform 0.2s ease, border-color 0.2s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             display: flex;
             flex-direction: column;
         }
 
         .card:hover:not(.disabled) {
-            transform: translateY(-5px);
+            transform: translateY(-8px);
             border-color: #bd93f9;
+            box-shadow: 0 10px 30px rgba(189, 147, 249, 0.1);
         }
 
         .card h2 {
             color: #58a6ff;
-            margin-bottom: 0.5rem;
-            font-size: 1.25rem;
+            margin-bottom: 0.75rem;
+            font-size: 1.4rem;
         }
 
         .card p {
             color: #8b949e;
-            font-size: 0.9rem;
-            line-height: 1.5;
+            font-size: 0.95rem;
+            line-height: 1.6;
         }
 
         .card.disabled {
-            opacity: 0.6;
+            opacity: 0.5;
             cursor: not-allowed;
             background: #0d1117;
         }
 
-        .card.disabled h2 {
-            color: #8b949e;
-        }
-
         .badge {
             position: absolute;
             top: 1rem;
             right: 1rem;
             background: #238636;
             color: #ffffff;
-            padding: 0.2rem 0.6rem;
-            font-size: 0.7rem;
-            border-radius: 12px;
-            font-weight: bold;
-            text-transform: uppercase;
+            padding: 0.25rem 0.75rem;
+            font-size: 0.75rem;
+            border-radius: 20px;
+            font-weight: 600;
         }
     </style>
 </head>
 <body>
     <nav>
-        <div class="logo">Punklorde</div>
+        <div class="logo-container">
+            <img src="https://cdn.punklorde.org/punklorde-icon.png" alt="Icon" class="nav-icon">
+            <div class="logo">Punklorde's Rainbow City</div>
+        </div>
     </nav>
 
     <header>
-        <img src="https://cdn.punklorde.org/punklorde.jpg" alt="Punklorde Logo" class="hero-image">
+        <img src="https://cdn.punklorde.org/punklorde.jpg" alt="Hero" class="hero-image">
         <h1 data-i18n="welcome"></h1>
         <p data-i18n="desc"></p>
     </header>
@@ -152,58 +169,58 @@
     <script>
         const translations = {
             vi: {
-                welcome: "Chào mừng đến với Punklorde",
-                desc: "Trung tâm dữ liệu và tiện ích toàn diện.",
-                sranalysis_title: "Firefly Analysis",
-                sranalysis_desc: "Hệ thống phân tích sát thương và tối ưu hóa chỉ số chuyên sâu.",
-                srtools_title: "Firefly SrTools",
-                srtools_desc: "Công cụ tính toán, theo dõi tài nguyên và quản lý dữ liệu.",
+                welcome: "Chào mừng đến với Rainbow City",
+                desc: "Thành phố của dữ liệu và các công cụ tối ưu cho Punklorde.",
+                sranalysis_title: "SR Analysis",
+                sranalysis_desc: "Phân tích sát thương chuyên sâu và tối ưu hóa chỉ số nhân vật.",
+                srtools_title: "SR Tools",
+                srtools_desc: "Bộ công cụ tính toán tài nguyên và quản lý dữ liệu hiệu quả.",
                 wiki_title: "Punklorde Wiki",
-                wiki_desc: "Cơ sở dữ liệu, bách khoa toàn thư và hướng dẫn chi tiết.",
+                wiki_desc: "Thư viện bách khoa toàn thư và hướng dẫn chi tiết.",
                 coming_soon: "Sắp ra mắt"
             },
             en: {
-                welcome: "Welcome to Punklorde",
-                desc: "The comprehensive data and utility hub.",
-                sranalysis_title: "Firefly Analysis",
-                sranalysis_desc: "Advanced damage analysis and stat optimization system.",
-                srtools_title: "Firefly SrTools",
-                srtools_desc: "Calculators, resource trackers, and data management tools.",
+                welcome: "Welcome to Rainbow City",
+                desc: "The hub for data and optimization tools for Punklorde.",
+                sranalysis_title: "SR Analysis",
+                sranalysis_desc: "In-depth damage analysis and character stat optimization.",
+                srtools_title: "SR Tools",
+                srtools_desc: "Resource calculation and efficient data management toolkit.",
                 wiki_title: "Punklorde Wiki",
-                wiki_desc: "Comprehensive database, encyclopedia, and detailed guides.",
+                wiki_desc: "Comprehensive encyclopedia and detailed guides.",
                 coming_soon: "Coming Soon"
             },
             ja: {
-                welcome: "Punklordeへようこそ",
-                desc: "総合的なデータとユーティリティのハブ。",
-                sranalysis_title: "Firefly Analysis",
-                sranalysis_desc: "高度なダメージ分析とステータス最適化システム。",
-                srtools_title: "Firefly SrTools",
-                srtools_desc: "計算機、リソーストラッカー、データ管理ツール。",
+                welcome: "Rainbow Cityへようこそ",
+                desc: "Punklordeのためのデータと最適化ツールのハブ。",
+                sranalysis_title: "SR Analysis",
+                sranalysis_desc: "詳細なダメージ分析とキャラクターステータスの最適化。",
+                srtools_title: "SR Tools",
+                srtools_desc: "リソース計算と効率的なデータ管理ツールキット。",
                 wiki_title: "Punklorde Wiki",
-                wiki_desc: "包括的なデータベース、百科事典、詳細なガイド。",
+                wiki_desc: "包括的な百科事典と詳細なガイド。",
                 coming_soon: "近日公開"
             },
             zh: {
-                welcome: "欢迎来到 Punklorde",
-                desc: "综合数据与实用工具中心。",
-                sranalysis_title: "Firefly Analysis",
-                sranalysis_desc: "高级伤害分析与面板属性优化系统。",
-                srtools_title: "Firefly SrTools",
-                srtools_desc: "计算器、资源追踪器与数据管理工具。",
+                welcome: "欢迎来到 Rainbow City",
+                desc: "Punklorde 的数据与优化工具中心。",
+                sranalysis_title: "SR Analysis",
+                sranalysis_desc: "深度伤害分析与角色属性优化。",
+                srtools_title: "SR Tools",
+                srtools_desc: "资源计算与高效数据管理工具包。",
                 wiki_title: "Punklorde Wiki",
-                wiki_desc: "综合数据库、百科全书与详细指南。",
+                wiki_desc: "百科全书与详细指南。",
                 coming_soon: "敬请期待"
             },
             ko: {
-                welcome: "Punklorde에 오신 것을 환영합니다",
-                desc: "종합적인 데이터 및 유틸리티 허브.",
-                sranalysis_title: "Firefly Analysis",
-                sranalysis_desc: "고급 데미지 분석 및 스탯 최적화 시스템.",
-                srtools_title: "Firefly SrTools",
-                srtools_desc: "계산기, 리소스 트래커 및 데이터 관리 도구.",
+                welcome: "Rainbow City에 오신 것을 환영합니다",
+                desc: "Punklorde를 위한 데이터 및 최적화 도구 허브.",
+                sranalysis_title: "SR Analysis",
+                sranalysis_desc: "심층 데미지 분석 및 캐릭터 스탯 최적화.",
+                srtools_title: "SR Tools",
+                srtools_desc: "자원 계산 및 효율적인 데이터 관리 툴킷.",
                 wiki_title: "Punklorde Wiki",
-                wiki_desc: "포괄적인 데이터베이스, 백과사전 및 상세 가이드.",
+                wiki_desc: "종합 백과사전 및 상세 가이드.",
                 coming_soon: "출시 예정"
             }
         };
@@ -212,14 +229,12 @@
             const browserLang = navigator.language || navigator.userLanguage;
             const shortLang = browserLang.split('-')[0].toLowerCase();
             const supportedLangs = ['vi', 'en', 'ja', 'zh', 'ko'];
-            
             return supportedLangs.includes(shortLang) ? shortLang : 'en';
         }
 
         function setLanguage(lang) {
             document.documentElement.lang = lang;
             const elements = document.querySelectorAll('[data-i18n]');
-            
             elements.forEach(el => {
                 const key = el.getAttribute('data-i18n');
                 if (translations[lang] && translations[lang][key]) {
@@ -228,8 +243,7 @@
             });
         }
 
-        const detectedLanguage = getBrowserLanguage();
-        setLanguage(detectedLanguage);
+        setLanguage(getBrowserLanguage());
     </script>
 </body>
 </html>
\ No newline at end of file
