diff --git a/Dockerfile b/Dockerfile
index 5692da3..bad25d7 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,12 +1,18 @@
+FROM node:18
 
-FROM node:16.15.0
-FROM node:18.2.0
-RUN apt-get update
-RUN apt-get upgrade -y
-RUN apt-get install nodejs -y
+# Install canvas dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libjpeg-dev \
+    libgif-dev \
+    librsvg2-dev \
+    libpixman-1-dev
 
 WORKDIR /app
-COPY . /app
+COPY package*.json ./
 RUN npm install
-CMD ["node", "index.js"]
-EXPOSE 6892
+COPY . .
+EXPOSE 3000
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/package.json b/package.json
index dde0885..2567ad3 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,10 @@
   "name": "API-REST",
   "version": "1.1.0",
   "description": "turu",
-  "main": "node index.js",
+  "main": "index.js",
   "scripts": {
-    "start": "nodemon index.js"
+    "start": "node index.js",
+    "dev": "nodemon index.js"
   },
   "repository": {
     "type": "git",
@@ -13,52 +14,47 @@
   "keywords": [
     "simple",
     "api",
-    "rest",
-    "api"
+    "rest"
   ],
   "author": "Reyganz",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/inirey/API-REST/issues"
   },
+  "homepage": "https://github.com/inirey/API-REST#readme",
+  "engines": {
+    "node": "18.x"
+  },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^1.7.7",
     "base-64": "^1.0.0",
-    "base32": "0.0.6",
-    "chalk": "^4.1.0",
-    "cheerio": "^1.0.0-rc.5",
-    "child_process": "^1.0.2",
-    "facebook-video-link": "^1.0.2",
+    "base32": "^0.0.6",
+    "chalk": "^4.1.2",
+    "cheerio": "^1.0.0",
     "cors": "^2.8.5",
     "tiktok-scraper-without-watermark": "^1.1.2",
-    "path": "^0.12.7",
-    "dotenv": "^8.2.0",
-    "canvacord": "^5.2.1",
-    "canvas": "^2.8.0",
+    "dotenv": "^16.4.5",
+    "canvas": "^2.11.2",
+    "canvacord": "^5.4.10",
     "canvas-hikki": "github:ZyxMapLe/canvas-hikki",
-    "emoji-api": "^2.0.0",
-    "express": "^4.17.1",
-    "fbdl-core": "^1.0.2",
+    "express": "^4.21.0",
     "form-data": "^4.0.0",
-    "fs": "0.0.1-security",
-    "genius-lyrics": "^4.2.7",
+    "genius-lyrics": "^4.4.6",
     "instatouch": "^2.3.3",
-    "lodash": "^4.17.20",
-    "moment": "^2.29.1",
-    "mongodb": "^3.6.3",
-    "monk": "^7.3.3",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "mongodb": "^6.9.0",
+    "monk": "^7.3.4",
     "morgan": "^1.10.0",
-    "needle": "^3.0.0",
-    "node-fetch": "^2.6.1",
-    "nodemon": "^2.0.7",
-    "request": "^2.88.2",
-    "ssl-express-www": "^3.0.7",
-    "skh-api": "^1.0.0",
-    "tiktok-scraper": "^1.4.12",
+    "needle": "^3.3.1",
+    "node-fetch": "^2.7.0",
+    "ssl-express-www": "^3.0.8",
     "urlencode": "^1.1.0",
-    "skh-api": "2.1.1",
-    "api-rey": "1.1.0",
-    "zrapi": "0.0.6"
+    "skh-api": "^2.1.1",
+    "api-rey": "^1.1.0",
+    "zrapi": "^0.0.6"
   },
-  "homepage": "https://github.com/inirey/API-REST#readme"
-}
+  "devDependencies": {
+    "nodemon": "^3.1.7"
+  }
+}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
index 95c5de4..717cf3b 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,11 +1,25 @@
 {
-   "version": 2,
-   "builds": [{
+  "version": 2,
+  "builds": [
+    {
       "src": "index.js",
-      "use": "@vercel/node"
-   }],
-   "routes": [{
-      "src": "/.*",
-      "dest": "/"
-   }]
-}
+      "use": "@vercel/node",
+      "config": {
+        "installCommand": "apt-get update && apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev libpixman-1-dev pkg-config && npm install",
+        "nodeVersion": "18"
+      }
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "index.js"
+    }
+  ],
+  "env": {
+    "NODE_ENV": "production"
+  },
+  "engines": {
+    "node": "18.x"
+  }
+}
\ No newline at end of file
diff --git a/views/docs.html b/views/docs.html
index 33b8d6c..ccd3abb 100644
--- a/views/docs.html
+++ b/views/docs.html
@@ -1,103 +1,129 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
 <head>
-     <meta charset="UTF-8">
-     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-     <script src="https://kit.fontawesome.com/a81368914c.js"></script>
-     <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap"
-          rel="stylesheet">
-     <link rel="stylesheet" href="https://erzacanz.github.io/simple/static/css/index.css">
-     <title>Rey sekha</title>
-     <link rel="icon" href="icons/favicon.ico" type="image/x-icon">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>brokenvznapi</title>
+  <link rel="icon" href="https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg" type="image/x-icon">
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
+<body class="bg-gradient-to-br from-gray-900 via-red-950 to-black min-h-screen flex items-center justify-center transition-all duration-500" id="body">
+  <!-- Dark Mode Toggle -->
+  <div class="fixed top-4 right-4 z-50">
+    <input type="checkbox" class="hidden toggle-input" id="dark-toggle" onchange="toggleDarkMode()">
+    <label for="dark-toggle" class="cursor-pointer">
+      <div class="toggle-bg w-12 h-6 bg-gray-300 rounded-full shadow-inner"></div>
+      <div class="toggle-switch absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow-lg transform transition-transform duration-300"></div>
+    </label>
+  </div>
 
-<body id="body" class="dark">
-     <!-- <div class="wrapper">
-          <div class="toggle">
-               <input class="toggle-input" type="checkbox" />
-               <div class="toggle-bg"></div>
-               <div class="toggle-switch">
-                    <div class="toggle-switch-figure"></div>
-                    <div class="toggle-switch-figureAlt"></div>
-               </div>
-          </div>
-     </div> -->
-     <div class="modal">
-          <img src="https://avatars.githubusercontent.com/u/85196372?s=400&u=8740585aca0a7d17e89d638bdff27060458abe38&v=4" alt="img">
-          <div class="close"></div>
-     </div>
+  <!-- Modal -->
+  <div class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40 hidden" id="modal">
+    <div class="relative bg-gray-800 bg-opacity-80 rounded-xl p-4 shadow-2xl backdrop-blur-md">
+      <img src="https://via.placeholder.com/200" alt="Profile" class="w-48 h-48 rounded-full border-4 border-gray-600 shadow-lg">
+      <button class="close absolute top-2 right-2 text-white text-xl font-bold" onclick="closeModal()">×</button>
+    </div>
+  </div>
 
-     <div id="container" class="container">
-          <input type="checkbox" name="" id="check">
-          <div class="card">
-               <div class="sidebar" id="sidebar">
-                    <ul>
-                         
-                         <li><a class="active" href="https://github.com/erzacanz">My Bot</a></li>
-                         <li><a class="active" href="https://reysekha-web.eu.org">Website</a></li>
-                         <li><a class="active" href="/docs">Rest Api</a></li>
+  <!-- Main Container -->
+  <div id="container" class="container max-w-4xl mx-auto p-6 bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md">
+    <input type="checkbox" name="" id="check" class="hidden">
+    <div class="card flex flex-col md:flex-row">
+      <!-- Sidebar -->
+      <div class="sidebar bg-gray-900 bg-opacity-90 p-4 rounded-lg shadow-inner w-full md:w-64 md:min-h-screen" id="sidebar">
+        <ul class="space-y-4">
+          <li><a href="https://github.com/neaterry6" class="block px-4 py-2 text-white bg-red-700 rounded-lg shadow-lg hover:bg-red-600 transition-all">My GitHub</a></li>
+          <li><a href="https://example.com" class="block px-4 py-2 text-white bg-red-700 rounded-lg shadow-lg hover:bg-red-600 transition-all">Website</a></li>
+          <li><a href="/docs" class="block px-4 py-2 text-white bg-red-700 rounded-lg shadow-lg hover:bg-red-600 transition-all">Rest API</a></li>
+        </ul>
+      </div>
 
-                        
-                    </ul>
-               </div>
-               <div class="header">
-                    <label for="check" class="checkbtn" id="chkbtn">
-                         <div class="hamburger-menu">
-                              <div class="center"></div>
-                         </div>
-                    </label>
-                    <a href="mailto: contact.reysekha@gmail.com" class="mail">
-                         <i class="far fa-envelope"></i>
-                    </a>
-                    <div class="main">
-                         <div class="image">
-                              <div class="hover">
-                                   <i class="fas fa-camera fa-2x"></i>
-                              </div>
-                         </div>
-                         <h3 class="name">Rey Sekha</h3>
-                         <h3 class="sub-name">@_sekhaa</h3>
-                    </div>
-               </div>
+      <!-- Main Content -->
+      <div class="flex-1 p-6">
+        <div class="header flex items-center justify-between mb-6">
+          <label for="check" class="checkbtn cursor-pointer" id="chkbtn">
+            <div class="hamburger-menu w-8 h-8 flex items-center justify-center">
+              <div class="center w-6 h-1 bg-white rounded"></div>
+            </div>
+          </label>
+          <a href="mailto:akewusholaabdulbakri101@gmail.com" class="mail text-white text-2xl">
+            <i class="fas fa-envelope"></i>
+          </a>
+          <div class="main text-center">
+            <div class="image relative w-24 h-24 mx-auto cursor-pointer" onclick="openModal()">
+              <img src="https://via.placeholder.com/100" alt="Profile" class="w-full h-full rounded-full border-4 border-gray-600 shadow-lg">
+              <div class="hover absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                <i class="fas fa-camera text-white text-xl"></i>
+              </div>
+            </div>
+            <h3 class="name text-2xl md:text-3xl text-white font-bold mt-2">Akewushola Abdulbakri</h3>
+            <h3 class="sub-name text-lg md:text-xl text-gray-300">@brokenvzn</h3>
+          </div>
+        </div>
 
-               <div class="content">
-                    <div class="left">
-                         <div class="about-container">
-                              <h3 class="title">About</h3>
-                              <p class="text">hi world introduce the name Rey sekha my hobby is watching anime and dialogue in Japanese and I also don't have any skills I can only MANGAN,TURU,NGARIT</p>
-                         </div>
-                         <div class="icons-container">
-                              <a href="https://github.com/inirey" class="icon">
-                                   <i class="fab fa-github"></i>
-                              </a>
-                              <a href="https://instagram.com/_sekhaa" class="icon">
-                                   <i class="fab fa-instagram"></i>
-                              </a>
-                              <a href="https://wa.me/0" class="icon">
-                                   <i class="fab fa-whatsapp"></i>
-                              </a>
-                              
-                                                     
-                         </div>
-                         <div class="buttons-wrap">
-                              <div class="follow-wrap">
-                                   <a href="https://github.com/inirey" class="follow">Follow</a>
-                              </div>
-                              <div class="share-wrap">
-                                   <a href="/contact" class="share">Contact</a>
-                              </div>
-                         </div>
-                    </div>
-               </div>
+        <div class="content">
+          <div class="left">
+            <div class="about-container mb-6">
+              <h3 class="title text-xl md:text-2xl text-white font-semibold mb-2">About</h3>
+              <p class="text text-gray-300">
+                Hey there! I'm Akewushola Abdulbakri, aka broken Vzn, a developer passionate about AI, chatbots, and coding. I love building projects like my <strong>cognitivePath CBT webapk</strong> and creating APIs for innovative solutions. When I'm not coding, I'm exploring open-source tech or connecting with my community on social media!
+              </p>
+            </div>
+            <!-- GitHub Stats -->
+            <div class="mb-6">
+              <h3 class="text-xl md:text-2xl text-white font-semibold mb-4">GitHub Stats</h3>
+              <div class="flex flex-wrap justify-center gap-4">
+                <img src="https://img.shields.io/github/followers/neaterry6?color=red&style=flat-square" alt="GitHub Followers" class="shadow-md">
+                <img src="https://komarev.com/ghpvc/?username=neaterry6&color=green&style=flat-square&label=Profile+View" alt="Profile Views" class="shadow-md">
+                <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=neaterry6&theme=radical&layout=compact" alt="Top Languages" class="shadow-md">
+              </div>
+              <img src="https://github-profile-trophy.vercel.app/?username=neaterry6&theme=darkhub" alt="GitHub Trophies" class="mt-4 shadow-md w-full">
+            </div>
+            <!-- Social Media Links -->
+            <div class="icons-container flex flex-wrap justify-center gap-4 mb-6">
+              <a href="https://www.youtube.com/@brokenvzn" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">YouTube</a>
+              <a href="https://www.instagram.com/brokenvzn?igsh=YzljYTk1ODg3Zg==" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Instagram</a>
+              <a href="https://t.me/Heartbreak798453" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Telegram</a>
+              <a href="https://github.com/neaterry6" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">GitHub</a>
+              <a href="https://www.tiktok.com/@heisbroken05?_t=ZS-8zDI2CxF7Nl&_r=1" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">TikTok</a>
+              <a href="https://wa.me/2348148804813" class="icon px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">WhatsApp</a>
+            </div>
+            <div class="buttons-wrap flex justify-center gap-4">
+              <a href="https://github.com/neaterry6" class="follow px-6 py-3 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Follow</a>
+              <a href="mailto:akewusholaabdulbakri101@gmail.com" class="share px-6 py-3 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Contact</a>
+            </div>
           </div>
-     </div>
-     <script src="https://erzacanz.github.io/simple/static/js/app.js"></script>
-     
-     <script
-  id="contactform"
-  form_worker_url="https://mjvbzcontactme.tomsmater.workers.dev/"> </script>
-   </body>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function toggleDarkMode() {
+      const body = document.getElementById('body');
+      const toggleSwitch = document.querySelector('.toggle-switch');
+      body.classList.toggle('bg-gray-200');
+      body.classList.toggle('bg-gradient-to-br');
+      body.classList.toggle('from-gray-900');
+      body.classList.toggle('via-red-950');
+      body.classList.toggle('to-black');
+      toggleSwitch.classList.toggle('translate-x-6');
+    }
+
+    function openModal() {
+      document.getElementById('modal').classList.remove('hidden');
+    }
+
+    function closeModal() {
+      document.getElementById('modal').classList.add('hidden');
+    }
 
-</html>
+    document.getElementById('check').addEventListener('change', () => {
+      const sidebar = document.getElementById('sidebar');
+      sidebar.classList.toggle('hidden', !document.getElementById('check').checked);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/game.html b/views/game.html
index 4b95505..633583b 100644
--- a/views/game.html
+++ b/views/game.html
@@ -1,593 +1,355 @@
-<!-- MiniGames -->
-<!doctype html><html><head> 
-  <meta property="og:image" content="https://i.postimg.cc/tCMHgZ07/20210703-130046.jpg"> 
-  <link rel="shortcut icon" href="https://i.postimg.cc/tCMHgZ07/20210703-130046.jpg"> 
-  <meta charset="UTF-8"> 
-  <meta name="viewport" content="width=device-width,initial-scale=1,user-scallable=no"> 
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 
-  <title>🏓Ping Pong</title> 
-  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P|Sarabun" rel="stylesheet"> 
- <style type="text/css" id="dcoder_stylesheet">
-
-body 
-{
-    margin:0; padding:5px;
-    background-color:#262626;
-    user-select:none;    
-    font-family: 'Sarabun', sans-serif;
-    
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta property="og:image" content="https://i.postimg.cc/tCMHgZ07/20210703-130046.jpg">
+  <meta property="og:title" content="brokenvznapi - Ping Pong">
+  <meta property="og:description" content="Ping Pong game by broken Vzn (Akewushola Abdulbakri) | Powered by AI and cognitivePath CBT webapk">
+  <link rel="shortcut icon" href="https://i.postimg.cc/tCMHgZ07/20210703-130046.jpg" type="image/x-icon">
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
+  <title>🏓 brokenvznapi - Ping Pong</title>
+</head>
+<body class="bg-gradient-to-br from-gray-900 via-red-950 to-black min-h-screen flex items-center justify-center font-poppins">
+  <!-- Loading Screen -->
+  <div id="container" class="fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center z-50">
+    <div id="loader" class="w-24 h-24 border-4 border-t-transparent border-gray-300 rounded-full animate-spin shadow-lg"></div>
+    <div id="load" class="mt-4 text-white text-xl">Loading brokenvznapi...</div>
+    <p class="text-gray-300">by broken Vzn</p>
+  </div>
+
+  <!-- Game Canvas -->
+  <canvas id="canvas" class="absolute top-0 bottom-0 left-0 right-0 m-auto bg-gray-600 border-4 border-white shadow-lg z-10"></canvas>
+
+  <!-- Game Menu -->
+  <div class="tab absolute top-0 bottom-0 left-0 right-0 m-auto bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md w-80 h-[370px] p-4 z-20 animate-pop">
+    <div id="logo" class="flex items-center justify-center">
+      <img src="https://i.top4top.io/p_1878v71z30.png" alt="Logo" class="h-20 w-20 rounded-lg shadow-md">
+      <h3 class="ml-2 text-xl text-white font-bold">Ping Pong</h3>
+    </div>
+    <div id="info" class="text-gray-300 text-center mt-4">
+      <b>ⓘ</b> First to 10 points wins! 🏆
+    </div>
+    <div class="level mt-4 space-y-3">
+      <div id="easy" onclick="eas()" class="block px-4 py-3 bg-white text-red-900 font-semibold rounded-lg shadow-lg hover:bg-red-700 hover:text-white transition-all cursor-pointer text-center">Beginner Level</div>
+      <div id="hard" onclick="har()" class="block px-4 py-3 bg-white text-red-900 font-semibold rounded-lg shadow-lg hover:bg-red-700 hover:text-white transition-all cursor-pointer text-center">Medium Level</div>
+      <div id="impossible" onclick="imp()" class="block px-4 py-3 bg-white text-red-900 font-semibold rounded-lg shadow-lg hover:bg-red-700 hover:text-white transition-all cursor-pointer text-center">Impossible Level 😈</div>
+    </div>
+  </div>
+
+  <!-- Status Screen -->
+  <div id="status" class="absolute top-0 bottom-0 left-0 right-0 m-auto bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md w-80 h-48 p-4 z-20 hidden">
+    <div id="result" class="text-white text-2xl font-bold text-center mt-4"></div>
+    <button onclick="again()" class="block mx-auto mt-6 px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-lg hover:bg-green-700 transition-all">Play Again</button>
+  </div>
+
+  <!-- Audio -->
+  <audio id="music" loop>
+    <source src="https://j.top4top.io/m_19253wtq75.mp3" type="audio/mp3">
+  </audio>
+  <audio id="win">
+    <source src="https://dl-web.dropbox.com/s/rp61o4fyqrr4rzx/victory%20%20sound.mp3?dl=0" type="audio/mp3">
+  </audio>
+  <audio id="lose">
+    <source src="https://dl-web.dropbox.com/s/v92i14096c2syxg/Lose%20Game%20.mp3?dl=0" type="audio/mp3">
+  </audio>
+
+  <!-- GitHub Stats -->
+  <div class="absolute bottom-4 left-0 right-0 text-center">
+    <div class="max-w-4xl mx-auto p-4 bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md">
+      <h3 class="text-xl text-white font-semibold mb-4">broken Vzn's GitHub</h3>
+      <div class="flex flex-wrap justify-center gap-4">
+        <img src="https://img.shields.io/github/followers/neaterry6?color=red&style=flat-square" alt="GitHub Followers" class="shadow-md">
+        <img src="https://komarev.com/ghpvc/?username=neaterry6&color=green&style=flat-square&label=Profile+View" alt="Profile Views" class="shadow-md">
+        <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=neaterry6&theme=radical&layout=compact" alt="Top Languages" class="shadow-md">
+      </div>
+      <img src="https://github-profile-trophy.vercel.app/?username=neaterry6&theme=darkhub" alt="GitHub Trophies" class="mt-4 shadow-md w-full">
+    </div>
+  </div>
+
+  <!-- Social Media and Quote -->
+  <div class="absolute bottom-16 left-0 right-0 text-center">
+    <div class="max-w-4xl mx-auto p-4 bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md">
+      <h3 class="text-xl text-white font-semibold mb-4">Connect with broken Vzn</h3>
+      <div class="flex flex-wrap justify-center gap-4">
+        <a href="https://www.youtube.com/@brokenvzn" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">YouTube</a>
+        <a href="https://www.instagram.com/brokenvzn?igsh=YzljYTk1ODg3Zg==" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Instagram</a>
+        <a href="https://t.me/Heartbreak798453" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">Telegram</a>
+        <a href="https://github.com/neaterry6" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">GitHub</a>
+        <a href="https://www.tiktok.com/@heisbroken05?_t=ZS-8zDI2CxF7Nl&_r=1" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">TikTok</a>
+        <a href="https://wa.me/2348148804813" class="px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all">WhatsApp</a>
+      </div>
+      <p class="text-gray-300 mt-4">"Success requires effort and gratitude for what we have." - broken Vzn</p>
+      <a href="https://github.com/neaterry6" class="block mt-2 text-white font-semibold hover:underline">Back to brokenvznapi</a>
+    </div>
+  </div>
+
+  <style>
+    body {
+      background: linear-gradient(45deg, #1a0000, #2d0000, #1a0000);
+      background-size: 400%;
+      animation: gradientShift 15s ease infinite;
     }
 
-body:after
-{     display:none; 
-      content: url(https://dl-web.dropbox.com/s/9smc0vzt2oe6jfl/Ping%20Pong%20music%202.mp3?dl=0);
-}
-i
-{    color:red; 
-    margin:0px 2px 0px 2px;   
-}
-
-.tab, #status
-{
-    position:absolute ;
-    top:0; left:0; right:0; bottom:0;
-    margin:auto;
-    background-color:white;
-    border-radius:10px;
-    z-index:1; 
-    width:330px;  height:370px;
-    padding:10px;
-    box-sizing:border-box ;
-    transition-duration:150ms;
-}
-img
-{
-    display:inline-block ;
-    position:relative ;
-    height:80px; width:80px;
-    border-radius:10px;
-    top:20px;
-}
-h3
-{   
-    display:inline-block ;
-    color:dimgray;
-    font-family: 'Press Start 2P', cursive;
-    font-size:20px; margin:2px;
-}
-#info
-{
-    display:block ;
-    position:relative;
-    font-family: 'Sarabun', sans-serif;  margin:15px; margin-top:25px;
-}
-#easy, #hard , #impossible
-{
-    display:block ;
-    position:relative ;
-    padding:12px;
-    font-family: 'Press Start 2P', cursive;
-    background-color:#efefef;
-    border:3px dashed #262626;
-    font-size:15px;
-    text-align:center;
-    margin:10px; 
-}
-
-#status
-{
-    font-family: 'Press Start 2P', cursive;
-    height:200px;
-    visibility:hidden;
-    transition-duration:100ms;
-}
-
-#result
-{
-    font-size:30px;
-    margin:20px 10px 10px 10px;
-}
-button
-{
-    padding:20px;
-    position:relative;
-    outline:none;
-    border:3px dashed #262626;
-    border-radius:10px;
-    background-color:green;
-    color:white;
-    font-family: 'Press Start 2P', cursive;
-    font-size:18px;
-    margin:8px; margin-top:25px;
-    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.3);
-}
-button:active {
-    transform:scale(0.85);
-    box-shadow:0px 0px 0px gray;
-}
-
-
-
-#canvas
-{
-    position:absolute ;    
-    margin:auto;
-    top:0;  left:0;
-    bottom:0; right:0;
-    background-color:dimgray;
-    border:4px solid white;
-    box-sizing:border-box;
-    z-index:1;
-    
-}
-
- #container
-{   display:block;
-    position:fixed;
-    height:100vh; width:100vw;
-    background-color:#262626;
-    z-index:5;
-}
-#load
-{
-    font-size:18px;
-    color:white;
-    margin:auto; text-align:center;
-    font-family: 'Aleo', serif;   
-    user-select:none;
-    z-index:10;
-}
-
-#loader
-{
-    display:block ;
-    position:relative ;
-    height:110px; width:110px;
-    border-radius:50%;
-    margin:auto; 
-    margin-top:40%;
-    background-image:-webkit-linear-gradient(left,#14ffe9,#ffeb3b,#ff00e0);
-    animation:animate 0.5s linear infinite;
-    border:7px solid white;
-    user-select:none;
-}
-#loader:after
-{
-    content:'';
-    position:absolute;
-    margin:15px;
-    height:80px; width:80px;
-    border-radius:50%;
-    background-color:#262626;
-    opacity:0.9;
-}
-#loader > span
-{
-    display:block ;
-    position:absolute ;
-    height:100%; width:100%;
-    border-radius:50%;
-    margin:auto; 
-    background-image:-webkit-linear-gradient(left,#14ffe9,#ffeb3b,#ff00e0);
-}
-
-#loader > span:nth-child(1)
-{
-    filter:blur(5px);
-}
-#loader > span:nth-child(2)
-{
-    filter:blur(10px);
-}
-#loader > span:nth-child(3)
-{
-    filter:blur(25px);
-}
-#loader > span:nth-child(4)
-{
-    filter:blur(45px);
-} 
-
-@keyframes animate
-{
-    100%
-    {
-        transform:rotate(360deg);
+    .animate-pop {
+      animation: pop 0.27s ease;
     }
-}
-
-@keyframes pop
-{
-    0%
-    { transform:scale(0.8); }
-    34%
-    { transform:scale(1); }
-    66%
-    { transform:scale(0.9); }
-    100%
-    { transform:scale(1); }
-    
-}</style></head> 
- <body onload="document.getElementById('container').style.visibility='hidden',document.getElementsByClassName('tab')[0].style.animation='pop .27s ease'"> 
-  <canvas id="canvas"></canvas> 
-  <!-- Loader starts --> 
-  <div id="container"> 
-   <div id="loader"> 
-    <span></span> 
-    <span></span> 
-    <span></span> 
-    <span></span> 
-   </div> 
-   <br> 
-   <br> 
-   <br> 
-   <div id="load">
-     Loading... 
-   </div> 
-  </div> 
-  <!--    Loader ends --> 
-  <div class="tab"> 
-   <div id="logo"> 
-    <img src="https://i.top4top.io/p_1878v71z30.png" alt="Logo"> 
-    <h3>Ping Pong</h3> 
-   </div> 
-   <div id="info"> 
-    <b>ⓘ</b> 🏆PEMAIN PERTAMA MENCETAK 10 POIN YANG AKAN MENANG🏆 . 
-   </div> 
-   <div class="level"> 
-    <div id="easy" onclick="eas()">
-      Level Pemula 
-    </div> 
-    <div id="hard" onclick="har()">
-      Level Sedang 
-    </div> 
-    <div id="impossible" onclick="imp()"> 
-     <i class="fas fa-skull"></i> Level Mustahil 
-     <i class="fas fa-skull"></i> 
-    </div> 
-   </div> 
-  </div> 
-  <div id="status"> 
-   <center> 
-    <div id="result">
-      Kamu Menang :D 
-    </div> 
-   </center> 
-   <center> 
-    <button onclick="again()">Mulai Ulang</button> 
-   </center> 
-  </div> 
-  <!-- To get clicking sound --> 
-  <audio id="music" autoplay loop> 
-   <source src="https://j.top4top.io/m_19253wtq75.mp3" type="audio/mp3"> 
-  </audio> 
-  <audio id="win" autoplay> 
-   <source src="https://dl-web.dropbox.com/s/rp61o4fyqrr4rzx/victory%20%20sound.mp3?dl=0" type="audio/mp3"> 
-  </audio> 
-  <audio id="lose" autoplay> 
-   <source src="https://dl-web.dropbox.com/s/v92i14096c2syxg/Lose%20Game%20.mp3?dl=0" type="audio/mp3"> 
-  </audio> 
-  <center> 
-   <a href="/api"> <font size="2px" style="font-family: Iceland, sans-serif;color:white;text-shadow: 0 0 1px red, 0px 0px 3px red" 2px"><b>Back To Rest Api</b></font></a> 
-   <font size="2px" style="font-family: Iceland, sans-serif;color:white;text-shadow: 0 0 1px red, 0px 0px 3px red" 2px"> 
-    <marquee behavior="scroll" direction="left" scrollamount="2" scrolldelay="25" width="100%"> 
-     <b>Banyak orang gagal karena mereka tidak memahami usaha yang diperlukan untuk menjadi sukses. Yukino Yukinoshita (Oregairu), Kita harus mensyukuri apa yang kita punya saat ini, karena mungkin orang lain belum tentu mempunyainya. Kayaba Akihiko (Sword Art Online),</b> 
-    </marquee> </font> 
-  </center> 
- 
-<script type="text/javascript" id="dcoder_script">// Created by AMbuRaDul //
-
-var aiLevel = 0.03;
-var run ;
-
-function  init() {
-  
-  //for sound effects  
-  var music = document.getElementById("music");  
- var win = document.getElementById("win");   
-var lose = document.getElementById("lose");    
-win.volume=0; lose.volume=0;
-music.play();
-    
-   
-document.getElementsByClassName('tab')[0].style.transform='scale(0)';  
-document.getElementsByClassName('tab')[0].style.animation='' ;      
-    //Just some canvas setup stuff    
-    var canvas = document.getElementById("canvas");
-    var ctx = canvas.getContext('2d');
-    
-    var h = canvas.height = 450;
-    var w = canvas.width = 284;
-    var fps = 40 ;
-    
-    //ball object
-    const ball = {
-    
-        x : w/2 ,
-        y : h/2 ,
-        r : 10 ,
-        speed : 9.5,
-        dx : 3,
-        dy : 5,
-        color : "red" ,
-     }
-     
-     //user paddle
-     const user = {
-          
-          x : 95 ,
-          y : h - 30,
-          height : 10 ,
-          width : 100 ,
-          point : 00,
-          color : "black" ,                  
-     }
-     
-     //AI paddle
-     const ai = {
-          
-          x : 95,
-          y : 20,
-          height : 10 ,
-          width : 100 ,
-          point : 00,
-          color : "black" ,                  
-     }
-     
-     //The net
-     const net = {
-         
-          x : 2,
-          y : h/2,
-          height : 5 ,
-          width : 10 ,
-          point : 0,
-          color : "black" , 
-     }
-
-
-// draw a rectangle, will be used to draw paddles
-function drawRect(x, y, w, h, color){
-
-    ctx.fillStyle = color;
-    ctx.fillRect(x, y, w, h);
-
-}
-
-// draw circle, will be used to draw the ball
-function drawArc(x, y, r, color){
-
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.arc(x,y,r,0,Math.PI*2,true);
-    ctx.closePath();
-    ctx.fill();
-}  
-
-//to draw net
-function drawNet()  {
-    
-    for(let i = 0; i<19;i ++)
-    {
-        drawRect(net.x + 15*i, net.y, net.width, net.height, net.color);
-        
-    }
-}
-
-//to draw text i.e points
-function drawText(text,x,y)  {
-
-    ctx.fillStyle = "#FFF";
-    ctx.font = "30px Sarabun";
-    ctx.fillText(text, x, y);
-}
- 
-// when ai or user scores, we reset the ball
-function resetBall(){
-
-    ball.x = canvas.width/2;
-    ball.y = canvas.height/2;
-    ball.speed = 9.5;
-    ball.dy=-ball.dy;
-}
-
-// collision detection
-function collision(b,p,dir){
-    
-    p.top = p.y - dir*p.height;
-    p.left = p.x - p.width/5;
-    p.right = p.x + p.width + 20 ;
-    
-    b.top = b.y + dir*b.r;
-    b.left = b.x - b.r ;
-    b.right = b.x + b.r ;
-    
-    
-var hitX = b.left > p.left && b.right < p.right;
-    var hitY = false;
-    if(dir === 1){
-        hitY = b.dy > 0 && b.y >= p.top;
-    }
-    if(dir === -1){
-        hitY = b.dy < 0 && b.y <= p.top + p.width/7;
-    }
-    
-    return hitY && hitX;    
 
-}
-
-//mousemove eventListener controls
-window.addEventListener("mousemove",function(evt) {
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
 
-  user.x = evt.x - user.width ;
-   evt.preventDefault();
-   
-   });
-        
-//touchmove eventListener controls
-canvas.addEventListener("touchmove", function(e){
+    @keyframes pop {
+      0% { transform: scale(0.8); }
+      34% { transform: scale(1); }
+      66% { transform: scale(0.9); }
+      100% { transform: scale(1); }
+    }
+  </style>
+
+  <script>
+    // Hide loading screen after 3 seconds
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        document.getElementById('container').style.opacity = '0';
+        setTimeout(() => {
+          document.getElementById('container').style.display = 'none';
+        }, 500);
+      }, 3000);
+    });
+
+    // Game Logic (unchanged from original)
+    var aiLevel = 0.03;
+    var run;
+
+    function init() {
+      var music = document.getElementById("music");
+      var win = document.getElementById("win");
+      var lose = document.getElementById("lose");
+      win.volume = 0;
+      lose.volume = 0;
+      music.play();
+
+      document.getElementsByClassName('tab')[0].style.transform = 'scale(0)';
+      document.getElementsByClassName('tab')[0].style.animation = '';
+
+      var canvas = document.getElementById("canvas");
+      var ctx = canvas.getContext('2d');
+      var h = canvas.height = 450;
+      var w = canvas.width = 284;
+      var fps = 40;
+
+      const ball = {
+        x: w / 2,
+        y: h / 2,
+        r: 10,
+        speed: 9.5,
+        dx: 3,
+        dy: 5,
+        color: "red"
+      };
+
+      const user = {
+        x: 95,
+        y: h - 30,
+        height: 10,
+        width: 100,
+        point: 0,
+        color: "black"
+      };
+
+      const ai = {
+        x: 95,
+        y: 20,
+        height: 10,
+        width: 100,
+        point: 0,
+        color: "black"
+      };
+
+      const net = {
+        x: 2,
+        y: h / 2,
+        height: 5,
+        width: 10,
+        point: 0,
+        color: "black"
+      };
+
+      function drawRect(x, y, w, h, color) {
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, w, h);
+      }
+
+      function drawArc(x, y, r, color) {
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.fill();
+      }
+
+      function drawNet() {
+        for (let i = 0; i < 19; i++) {
+          drawRect(net.x + 15 * i, net.y, net.width, net.height, net.color);
+        }
+      }
+
+      function drawText(text, x, y) {
+        ctx.fillStyle = "#FFF";
+        ctx.font = "30px Poppins";
+        ctx.fillText(text, x, y);
+      }
+
+      function resetBall() {
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.speed = 9.5;
+        ball.dy = -ball.dy;
+      }
+
+      function collision(b, p, dir) {
+        p.top = p.y - dir * p.height;
+        p.left = p.x - p.width / 5;
+        p.right = p.x + p.width + 20;
+        b.top = b.y + dir * b.r;
+        b.left = b.x - b.r;
+        b.right = b.x + b.r;
+        var hitX = b.left > p.left && b.right < p.right;
+        var hitY = false;
+        if (dir === 1) {
+          hitY = b.dy > 0 && b.y >= p.top;
+        }
+        if (dir === -1) {
+          hitY = b.dy < 0 && b.y <= p.top + p.width / 7;
+        }
+        return hitY && hitX;
+      }
+
+      window.addEventListener("mousemove", function (evt) {
+        user.x = evt.x - user.width;
+        evt.preventDefault();
+      });
+
+      canvas.addEventListener("touchmove", function (e) {
         var rect = canvas.getBoundingClientRect();
         var root = document.documentElement;
         var touch = e.changedTouches[0];
-        var touchX = parseInt(touch.clientX) - rect.top - root.scrollTop ;
+        var touchX = parseInt(touch.clientX) - rect.top - root.scrollTop;
         e.preventDefault();
-        user.x = touchX - user.width/2;});
-        
-        
-        
-           
-//keyboard controls
-addEventListener("keydown",
-function(e) {
-  
-  //arrow left
-  if (e.keyCode == "83") {
-       user.y-=2;
-  } //arrow right
-  else if (e.keyCode =="85")  {    
-       user.y+=2;
-  }
-});
-
-
-
-    
-//to update everything
-function update () {
-    
-    //to change points
-    if( ball.y - ball.r < 0 ) {
-        user.point++;
-        resetBall();
-
-    }else if( ball.y + ball.r >h ){
-        ai.point++;
-        resetBall();
-    }
-        
-    //moving the ball
-    ball.x += ball.dx;
-    ball.y += ball.dy;    
-  
-   //to bounce off the ball from the edge  
-   if(ball.x - ball.r - 2 < 0 || ball.x + ball.r + 2> w){
-        ball.dx = -ball.dx;
-    }
-  
-    // we check if the paddle hit the user or the ai paddle
-  var player = (ball.y + ball.r < h/2)?ai:user;
-   var dir =  (ball.y + ball.r < h/2)?-1:1;
-   
-     //After collision effect
-     if(collision(ball,player,dir))
-     {
-       
-      // we check where the ball hits the paddle
-      let collidePoint =ball.x - (player.x+player.width/2);
-      collidePoint = collidePoint / (player.width/2);
-
-         //angle  
-        let angleRad = -(Math.PI/4) * collidePoint;
-
-       ball.dy = -dir*ball.speed * Math.cos(angleRad);
-
-        ball.dx = -dir*dir*ball.speed * Math.sin(angleRad);
-        
-        // speed up the ball everytime a paddle hits it.
-        ball.speed += 0.64;
-}     
-     //simple ai
-      ai.x += (ball.x - (ai.x + ai.width/2))*aiLevel;   
-              
-}
-    
-//to draw everything
-function render() {
-    
-    //clear previous builda
-    ctx.clearRect(0,0,w,h);
-    //the net
-    drawNet();    
-    //the ball
-    drawArc(ball.x, ball.y, ball.r, ball.color);
-    
-    //user paddle
-    drawRect(user.x, user.y, user.width, user.height, user.color);
-    //ai paddle
-    drawRect(ai.x, ai.y, ai.width, ai.height, ai.color); 
-    
-    //points
-    drawText(ai.point,20,h/2-20);
-    drawText(user.point,w-35,h/2 +45);  
-}
-
-//actual game
-function game() {
-
-    render();  update();
-    if(ai.point == 10)
-    {   
-        change('You lost');  
-        lose.volume=1;
-        lose.play()   ;          
-    }
-    else if(user.point == 10)
-    {
-        change('You won');
-        win.volume=1;
-        win.play();
-    }    
-}  
-
-function change(txt)
-{
+        user.x = touchX - user.width / 2;
+      });
+
+      addEventListener("keydown", function (e) {
+        if (e.keyCode == "83") {
+          user.y -= 2;
+        } else if (e.keyCode == "85") {
+          user.y += 2;
+        }
+      });
+
+      function update() {
+        if (ball.y - ball.r < 0) {
+          user.point++;
+          resetBall();
+        } else if (ball.y + ball.r > h) {
+          ai.point++;
+          resetBall();
+        }
+        ball.x += ball.dx;
+        ball.y += ball.dy;
+        if (ball.x - ball.r - 2 < 0 || ball.x + ball.r + 2 > w) {
+          ball.dx = -ball.dx;
+        }
+        var player = (ball.y + ball.r < h / 2) ? ai : user;
+        var dir = (ball.y + ball.r < h / 2) ? -1 : 1;
+        if (collision(ball, player, dir)) {
+          let collidePoint = ball.x - (player.x + player.width / 2);
+          collidePoint = collidePoint / (player.width / 2);
+          let angleRad = -(Math.PI / 4) * collidePoint;
+          ball.dy = -dir * ball.speed * Math.cos(angleRad);
+          ball.dx = -dir * dir * ball.speed * Math.sin(angleRad);
+          ball.speed += 0.64;
+        }
+        ai.x += (ball.x - (ai.x + ai.width / 2)) * aiLevel;
+      }
+
+      function render() {
+        ctx.clearRect(0, 0, w, h);
+        drawNet();
+        drawArc(ball.x, ball.y, ball.r, ball.color);
+        drawRect(user.x, user.y, user.width, user.height, user.color);
+        drawRect(ai.x, ai.y, ai.width, ai.height, ai.color);
+        drawText(ai.point, 20, h / 2 - 20);
+        drawText(user.point, w - 35, h / 2 + 45);
+      }
+
+      function game() {
+        render();
+        update();
+        if (ai.point == 10) {
+          change('You lost');
+          lose.volume = 1;
+          lose.play();
+        } else if (user.point == 10) {
+          change('You won');
+          win.volume = 1;
+          win.play();
+        }
+      }
+
+      function change(txt) {
         clearInterval(run);
-        ai.point=0; user.point=0;
+        ai.point = 0;
+        user.point = 0;
         music.pause();
         render();
-        
-document.getElementById("result").innerHTML= txt ;   document.getElementById('status').style.visibility='visible'; 
-document.getElementById('status').style.transform='scale(1)'; 
-document.getElementById('status').style.animation='pop .27s ease' ;     
-        
-}
-run = setInterval(game,1000/fps);    
-
-}
-
-function again()
-{
-document.getElementById('status').style.transform='scale(0)'; 
-document.getElementById('status').style.animation='' ;  
-    document.getElementsByClassName('tab')[0].style.transform='scale(1)';  
-document.getElementsByClassName('tab')[0].style.animation='pop .27s ease' ;
-  
-}
-
-//levels
-function eas() {
-    aiLevel = 0.03;    
-    document.getElementById("easy").style.backgroundColor="cyan";
-document.getElementById("hard").style.backgroundColor="#efefef";
-document.getElementById("impossible").style.backgroundColor="#efefef";
-    win.play();lose.play();
-    init();
-}
-function har() {
-    aiLevel = 0.06;
-        document.getElementById("easy").style.backgroundColor="#efefef";
-document.getElementById("hard").style.backgroundColor="cyan";
-document.getElementById("impossible").style.backgroundColor="#efefef";
-     win.play();lose.play();
-     init();
-    
-}
-function imp() {
-    aiLevel = 0.7;
-       document.getElementById("easy").style.backgroundColor="#efefef";
-document.getElementById("hard").style.backgroundColor="#efefef";
-document.getElementById("impossible").style.backgroundColor="cyan";
-
-    win.play();lose.play();
-    init();
-}</script></body></html>
+        document.getElementById("result").innerHTML = txt;
+        document.getElementById('status').style.display = 'block';
+        document.getElementById('status').classList.add('animate-pop');
+      }
+
+      run = setInterval(game, 1000 / fps);
+    }
+
+    function again() {
+      document.getElementById('status').style.display = 'none';
+      document.getElementsByClassName('tab')[0].style.transform = 'scale(1)';
+      document.getElementsByClassName('tab')[0].classList.add('animate-pop');
+    }
+
+    function eas() {
+      aiLevel = 0.03;
+      document.getElementById("easy").classList.add('bg-cyan-500', 'text-white');
+      document.getElementById("hard").classList.remove('bg-cyan-500', 'text-white');
+      document.getElementById("impossible").classList.remove('bg-cyan-500', 'text-white');
+      win.play();
+      lose.play();
+      init();
+    }
+
+    function har() {
+      aiLevel = 0.06;
+      document.getElementById("easy").classList.remove('bg-cyan-500', 'text-white');
+      document.getElementById("hard").classList.add('bg-cyan-500', 'text-white');
+      document.getElementById("impossible").classList.remove('bg-cyan-500', 'text-white');
+      win.play();
+      lose.play();
+      init();
+    }
+
+    function imp() {
+      aiLevel = 0.7;
+      document.getElementById("easy").classList.remove('bg-cyan-500', 'text-white');
+      document.getElementById("hard").classList.remove('bg-cyan-500', 'text-white');
+      document.getElementById("impossible").classList.add('bg-cyan-500', 'text-white');
+      win.play();
+      lose.play();
+      init();
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index c24ddfa..5948342 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,411 +1,160 @@
-
-
-<!DOCTYPE html>
-
-	<html>
-
-<head>
-<title> REY - Api </title> 
-<meta property="og:image" content="https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg" /> 
-<meta property="og:title" content="REY - API" /> <meta property="og:description" content="DEVELOPER : @REY | Buat kalian yang mau free apikey whatsapp bot"/> 
-<link rel="shortcut icon" href="https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg" type="image/x-icon" />
-</head>
-<body>
-
-<!--Please Volume up your mobile-->
- <!--Automatically play when load this page-->
- <audio autoplay="false" src="https://i.top4top.io/m_19290u0i99.mp3">
- </audio>
-
-  <div class="sp-container">
-    <div class="sp-content">
-      <div class="sp-globe"></div>
-      <h2 class="frame-1">Selamat</h2>
-      <h2 class="frame-2">Datang</h2>
-      <h2 class="frame-3">Di Website</h2>
-      <h2 class="frame-4">Rest Api</h2>
-      <h2 class="frame-5">
-        <span>REY</span>
-        <span>Rest</span>
-        <span>API's</span>
-      </h2>
-      <a class="sp-circle-link" href="/api">Open Docs</a>
-    </div>
-  </div>
-
-  <style>
-    @import url('https://fonts.googleapis.com/css?family=Barlow');
-    body {
-      background: #310404 url(https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg) no-repeat center center fixed;
-      -webkit-background-size: cover;
-      -moz-background-size: cover;
-      -o-background-size: cover;
-      background-size: cover;
-      font-family: 'Barlow', sans-serif;
-    }
-    
-    .container {
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-    }
-    
-    a {
-      text-decoration: none;
-    }
-    
-    h1.main,
-    p.demos {
-      -webkit-animation-delay: 18s;
-      -moz-animation-delay: 18s;
-      -ms-animation-delay: 18s;
-      animation-delay: 18s;
-    }
-    
-    .sp-container {
-      position: fixed;
-      top: 0px;
-      left: 0px;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
-      background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
-      background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
-      background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
-    }
-    
-    .sp-content {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0px;
-      top: 0px;
-      z-index: 1000;
-    }
-    
-    .sp-container h2 {
-      position: absolute;
-      top: 50%;
-      line-height: 100px;
-      height: 90px;
-      margin-top: -50px;
-      font-size: 90px;
-      width: 100%;
-      text-align: center;
-      color: transparent;
-      -webkit-animation: blurFadeInOut 3s ease-in backwards;
-      -moz-animation: blurFadeInOut 3s ease-in backwards;
-      -ms-animation: blurFadeInOut 3s ease-in backwards;
-      animation: blurFadeInOut 3s ease-in backwards;
-    }
-    
-    .sp-container h2.frame-1 {
-      -webkit-animation-delay: 0s;
-      -moz-animation-delay: 0s;
-      -ms-animation-delay: 0s;
-      animation-delay: 0s;
- 
-    }
-    
-    .sp-container h2.frame-2 {
-      -webkit-animation-delay: 3s;
-      -moz-animation-delay: 3s;
-      -ms-animation-delay: 3s;
-      animation-delay: 3s;
-    }
-    
-    .sp-container h2.frame-3 {
-      -webkit-animation-delay: 6s;
-      -moz-animation-delay: 6s;
-      -ms-animation-delay: 6s;
-      animation-delay: 6s;
-    }
-    
-    .sp-container h2.frame-4 {
-      font-size: 200px;
-      -webkit-animation-delay: 9s;
-      -moz-animation-delay: 9s;
-      -ms-animation-delay: 9s;
-      animation-delay: 9s;
-    }
-    
-    .sp-container h2.frame-5 {
-      -webkit-animation: none;
-      -moz-animation: none;
-      -ms-animation: none;
-      animation: none;
-      color: transparent;
-      text-shadow: 0px 0px 1px #fff;
-    }
-    
-    .sp-container h2.frame-5 span {
-      -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-      -moz-animation: blurFadeIn 1s ease-in 12s backwards;
-      -ms-animation: blurFadeIn 3s ease-in 12s backwards;
-      animation: blurFadeIn 3s ease-in 12s backwards;
-      color: transparent;
-      text-shadow: 0px 0px 1px #fff;
-    }
-    
-    .sp-container h2.frame-5 span:nth-child(2) {
-      -webkit-animation-delay: 13s;
-      -moz-animation-delay: 13s;
-      -ms-animation-delay: 13s;
-      animation-delay: 13s;
-    }
-    
-    .sp-container h2.frame-5 span:nth-child(3) {
-      -webkit-animation-delay: 14s;
-      -moz-animation-delay: 14s;
-      -ms-animation-delay: 14s;
-      animation-delay: 14s;
-    }
-    
-    .sp-globe {
-      position: absolute;
-      width: 282px;
-      height: 273px;
-      left: 50%;
-      top: 50%;
-      margin: -137px 0 0 -141px;
-      background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
-      -webkit-animation: fadeInBack 3.6s linear 14s backwards;
-      -moz-animation: fadeInBack 3.6s linear 14s backwards;
-      -ms-animation: fadeInBack 3.6s linear 14s backwards;
-      animation: fadeInBack 3.6s linear 14s backwards;
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-      filter: alpha(opacity=30);
-      opacity: 0.3;
-      -webkit-transform: scale(5);
-      -moz-transform: scale(5);
-      -o-transform: scale(5);
-      -ms-transform: scale(5);
-      transform: scale(5);
-    }
-    
-    .sp-circle-link {
-      position: absolute;
-      left: 50%;
-      bottom: 100px;
-      margin-left: -50px;
-      text-align: center;
-      line-height: 100px;
-      width: 100px;
-      height: 100px;
-      background: #fff;
-      color: #3f1616;
-      font-size: 25px;
-      -webkit-border-radius: 50%;
-      -moz-border-radius: 50%;
-      border-radius: 50%;
-      -webkit-animation: fadeInRotate 1s linear 16s backwards;
-      -moz-animation: fadeInRotate 1s linear 16s backwards;
-      -ms-animation: fadeInRotate 1s linear 16s backwards;
-      animation: fadeInRotate 1s linear 16s backwards;
-      -webkit-transform: scale(1) rotate(0deg);
-      -moz-transform: scale(1) rotate(0deg);
-      -o-transform: scale(1) rotate(0deg);
-      -ms-transform: scale(1) rotate(0deg);
-      transform: scale(1) rotate(0deg);
-    }
-    
-    .sp-circle-link:hover {
-      background: #85373b;
-      color: #fff;
-    }
-    /**/
-    
-    @-webkit-keyframes blurFadeInOut {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        -webkit-transform: scale(1.3);
-      }
-      20%,
-      75% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        -webkit-transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        text-shadow: 0px 0px 50px #fff;
-        -webkit-transform: scale(0);
-      }
-    }
-    
-    @-webkit-keyframes blurFadeIn {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        -webkit-transform: scale(1.3);
-      }
-      50% {
-        opacity: 0.5;
-        text-shadow: 0px 0px 10px #fff;
-        -webkit-transform: scale(1.1);
-      }
-      100% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        -webkit-transform: scale(1);
-      }
-    }
-    
-    @-webkit-keyframes fadeInBack {
-      0% {
-        opacity: 0;
-        -webkit-transform: scale(0);
-      }
-      50% {
-        opacity: 0.4;
-        -webkit-transform: scale(2);
-      }
-      100% {
-        opacity: 0.2;
-        -webkit-transform: scale(5);
-      }
-    }
-    
-    @-webkit-keyframes fadeInRotate {
-      0% {
-        opacity: 0;
-        -webkit-transform: scale(0) rotate(360deg);
-      }
-      100% {
-        opacity: 1;
-        -webkit-transform: scale(1) rotate(0deg);
-      }
-    }
-    /**/
-    
-    @-moz-keyframes blurFadeInOut {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        -moz-transform: scale(1.3);
-      }
-      20%,
-      75% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        -moz-transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        text-shadow: 0px 0px 50px #fff;
-        -moz-transform: scale(0);
-      }
-    }
-    
-    @-moz-keyframes blurFadeIn {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        -moz-transform: scale(1.3);
-      }
-      100% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        -moz-transform: scale(1);
-      }
-    }
-    
-    @-moz-keyframes fadeInBack {
-      0% {
-        opacity: 0;
-        -moz-transform: scale(0);
-      }
-      50% {
-        opacity: 0.4;
-        -moz-transform: scale(2);
-      }
-      100% {
-        opacity: 0.2;
-        -moz-transform: scale(5);
-      }
-    }
-    
-    @-moz-keyframes fadeInRotate {
-      0% {
-        opacity: 0;
-        -moz-transform: scale(0) rotate(360deg);
-      }
-      100% {
-        opacity: 1;
-        -moz-transform: scale(1) rotate(0deg);
-      }
-    }
-    /**/
-    
-    @keyframes blurFadeInOut {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        transform: scale(1.3);
-      }
-      20%,
-      75% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        text-shadow: 0px 0px 50px #fff;
-        transform: scale(0);
-      }
-    }
-    
-    @keyframes blurFadeIn {
-      0% {
-        opacity: 0;
-        text-shadow: 0px 0px 40px #fff;
-        transform: scale(1.3);
-      }
-      50% {
-        opacity: 0.5;
-        text-shadow: 0px 0px 10px #fff;
-        transform: scale(1.1);
-      }
-      100% {
-        opacity: 1;
-        text-shadow: 0px 0px 1px #fff;
-        transform: scale(1);
-      }
-    }
-    
-    @keyframes fadeInBack {
-      0% {
-        opacity: 0;
-        transform: scale(0);
-      }
-      50% {
-        opacity: 0.4;
-        transform: scale(2);
-      }
-      100% {
-        opacity: 0.2;
-        transform: scale(5);
-      }
-    }
-    
-    @keyframes fadeInRotate {
-      0% {
-        opacity: 0;
-        transform: scale(0) rotate(360deg);
-      }
-      100% {
-        opacity: 1;
-        transform: scale(1) rotate(0deg);
-      }
-    }
-  </style>
-
-
-
-' ) );
-
-
-</body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>brokenvznapi</title>
+  <meta property="og:image" content="https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg" />
+  <meta property="og:title" content="brokenvznapi" />
+  <meta property="og:description" content="DEVELOPER: @broken Vzn (Akewushola Abdulbakri) | APIs for AI, chatbots, and cognitivePath CBT webapk projects" />
+  <link rel="shortcut icon" href="https://raw.githubusercontent.com/inirey/inirey/main/4a16641bd5c493dd8f8d2758492fb469.jpg" type="image/x-icon" />
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-gradient-to-br from-gray-900 via-red-950 to-black min-h-screen flex items-center justify-center">
+  <!-- Loading Screen -->
+  <div id="loading-screen" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50">
+    <div class="text-center">
+      <div class="w-20 h-20 border-4 border-t-transparent border-gray-300 rounded-full animate-spin shadow-lg"></div>
+      <h2 class="mt-4 text-3xl text-white font-bold drop-shadow-lg">Loading brokenvznapi...</h2>
+      <p class="text-gray-300 text-lg">by broken Vzn</p>
+    </div>
+  </div>
+
+  <!-- Audio -->
+  <audio autoplay="false" src="https://i.top4top.io/m_19290u0i99.mp3"></audio>
+
+  <!-- Main Content -->
+  <div class="sp-container relative z-10 max-w-4xl mx-auto p-6 bg-gray-800 bg-opacity-80 rounded-xl shadow-2xl backdrop-blur-md">
+    <div class="sp-content text-center">
+      <div class="sp-globe"></div>
+      <h2 class="frame-1 text-5xl md:text-7xl text-white font-bold drop-shadow-md">Welcome</h2>
+      <h2 class="frame-2 text-5xl md:text-7xl text-white font-bold drop-shadow-md">to</h2>
+      <h2 class="frame-3 text-5xl md:text-7xl text-white font-bold drop-shadow-md">brokenvznapi</h2>
+      <h2 class="frame-4 text-4xl md:text-5xl text-white font-bold drop-shadow-md">by</h2>
+      <h2 class="frame-5 text-4xl md:text-5xl text-white font-bold drop-shadow-md">
+        <span>broken</span>
+        <span>Vzn</span>
+      </h2>
+      <a class="sp-circle-link inline-block mt-8 px-6 py-3 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300" href="/api">Open Docs</a>
+      
+      <!-- GitHub Stats -->
+      <div class="mt-12">
+        <h3 class="text-2xl text-white font-semibold mb-4">broken Vzn's GitHub</h3>
+        <div class="flex flex-wrap justify-center gap-4">
+          <img src="https://img.shields.io/github/followers/neaterry6?color=red&style=flat-square" alt="GitHub Followers" class="shadow-md">
+          <img src="https://komarev.com/ghpvc/?username=neaterry6&color=green&style=flat-square&label=Profile+View" alt="Profile Views" class="shadow-md">
+          <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=neaterry6&theme=radical&layout=compact" alt="Top Languages" class="shadow-md">
+        </div>
+        <img src="https://github-profile-trophy.vercel.app/?username=neaterry6&theme=darkhub" alt="GitHub Trophies" class="mt-4 shadow-md">
+      </div>
+
+      <!-- Social Media Links -->
+      <div class="mt-8">
+        <h3 class="text-2xl text-white font-semibold mb-4">Connect with broken Vzn</h3>
+        <div class="flex flex-wrap justify-center gap-4">
+          <a href="https://www.youtube.com/@brokenvzn" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">YouTube</a>
+          <a href="https://www.instagram.com/brokenvzn?igsh=YzljYTk1ODg3Zg==" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">Instagram</a>
+          <a href="https://t.me/Heartbreak798453" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">Telegram</a>
+          <a href="https://github.com/neaterry6" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">GitHub</a>
+          <a href="https://www.tiktok.com/@heisbroken05?_t=ZS-8zDI2CxF7Nl&_r=1" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">TikTok</a>
+          <a href="https://wa.me/2348148804813" class="social-link px-4 py-2 bg-white text-red-900 font-semibold rounded-full shadow-lg hover:bg-red-700 hover:text-white transition-all duration-300">WhatsApp</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: linear-gradient(45deg, #1a0000, #2d0000, #1a0000);
+      background-size: 400%;
+      animation: gradientShift 15s ease infinite;
+    }
+
+    .sp-container {
+      background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.8));
+    }
+
+    .sp-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .sp-container h2 {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      text-align: center;
+      color: transparent;
+      text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
+      animation: blurFadeInOut 3s ease-in backwards;
+    }
+
+    .sp-container h2.frame-1 { animation-delay: 0s; }
+    .sp-container h2.frame-2 { animation-delay: 3s; }
+    .sp-container h2.frame-3 { animation-delay: 6s; }
+    .sp-container h2.frame-4 { animation-delay: 9s; }
+    .sp-container h2.frame-5 {
+      animation: none;
+      color: transparent;
+      text-shadow: 0px 0px 1px #fff;
+    }
+
+    .sp-container h2.frame-5 span {
+      animation: blurFadeIn 3s ease-in 12s backwards;
+      color: transparent;
+      text-shadow: 0px 0px 1px #fff;
+    }
+
+    .sp-container h2.frame-5 span:nth-child(2) { animation-delay: 13s; }
+
+    .sp-globe {
+      position: absolute;
+      width: 282px;
+      height: 273px;
+      left: 50%;
+      top: 50%;
+      margin: -137px 0 0 -141px;
+      background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
+      animation: fadeInBack 3.6s linear 14s backwards;
+      opacity: 0.3;
+      transform: scale(5);
+    }
+
+    @keyframes blurFadeInOut {
+      0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
+      20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
+      100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); }
+    }
+
+    @keyframes blurFadeIn {
+      0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
+      50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); }
+      100% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
+    }
+
+    @keyframes fadeInBack {
+      0% { opacity: 0; transform: scale(0); }
+      50% { opacity: 0.4; transform: scale(2); }
+      100% { opacity: 0.2; transform: scale(5); }
+    }
+
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+  </style>
+
+  <script>
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        document.getElementById('loading-screen').style.opacity = '0';
+        setTimeout(() => {
+          document.getElementById('loading-screen').style.display = 'none';
+        }, 500);
+      }, 3000);
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file