diff --git a/3d-menu-loader.js b/3d-menu-loader.js
new file mode 100644
index 0000000..65782b8
--- /dev/null
+++ b/3d-menu-loader.js
@@ -0,0 +1,235 @@
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+// Global state for pause/resume
+let isMenuActive = true;
+let animationFrameId = null;
+let isLaunching = false;
+let launchSpeed = 0;
+let startPivotRef = null;
+
+function init3DMenu() {
+ console.log("Initializing 3D Menu...");
+ const container = document.getElementById('modelContainer');
+ if (!container) {
+ console.error('modelContainer element not found in DOM');
+ return;
+ }
+
+ // --- Loading UI ---
+ const loadingDiv = document.createElement('div');
+ loadingDiv.style.cssText = `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: #00eaff;
+ font-family: 'Orbitron', sans-serif;
+ font-size: 20px;
+ text-align: center;
+ z-index: 100;
+ text-shadow: 0 0 10px #00eaff;
+ pointer-events: none;
+ `;
+ loadingDiv.innerHTML = 'INITIALIZING SYSTEM...
0%';
+ container.appendChild(loadingDiv);
+ container.style.position = 'relative';
+
+ // --- Scene Setup ---
+ const scene = new THREE.Scene();
+
+ // Create a pivot group to handle the spinning independently of the model's orientation
+ const startPivot = new THREE.Group();
+ scene.add(startPivot);
+ startPivotRef = startPivot; // Store reference for launch animation
+
+ // Camera
+ const aspect = container.clientWidth / container.clientHeight;
+ const camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000);
+ camera.position.set(0, 0, 7);
+
+ // Renderer
+ const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+ renderer.setSize(container.clientWidth, container.clientHeight);
+ renderer.setPixelRatio(window.devicePixelRatio);
+ renderer.outputColorSpace = THREE.SRGBColorSpace;
+ container.appendChild(renderer.domElement);
+
+ // --- Lighting ---
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+ scene.add(ambientLight);
+
+ const dirLight = new THREE.DirectionalLight(0xffffff, 2);
+ dirLight.position.set(5, 10, 7);
+ scene.add(dirLight);
+
+ const blueLight = new THREE.PointLight(0x00eaff, 3, 20);
+ blueLight.position.set(-2, 2, 2);
+ scene.add(blueLight);
+
+ // --- Model Loading ---
+ const loader = new GLTFLoader();
+
+ console.log("Attempting to load: img/3D.glb");
+
+ loader.load(
+ 'img/3D.glb',
+ (gltf) => {
+ console.log("Model loaded successfully!");
+ const model = gltf.scene;
+ loadingDiv.remove();
+
+ // Auto-Scaling
+ const box = new THREE.Box3().setFromObject(model);
+ const size = box.getSize(new THREE.Vector3());
+ const maxDim = Math.max(size.x, size.y, size.z);
+
+ if (maxDim > 0) {
+ const scale = 3.8 / maxDim;
+ model.scale.set(scale, scale, scale);
+ }
+
+ // Re-centering
+ const newBox = new THREE.Box3().setFromObject(model);
+ const center = newBox.getCenter(new THREE.Vector3());
+ model.position.sub(center);
+
+ // ORIENTATION CORRECTION
+ model.rotation.x = -Math.PI / 2;
+ model.rotation.z = Math.PI;
+
+ // Add the oriented model to the pivot group
+ startPivot.add(model);
+ },
+ (xhr) => {
+ if (xhr.lengthComputable) {
+ const percent = Math.round((xhr.loaded / xhr.total) * 100);
+ const span = loadingDiv.querySelector('span');
+ if (span) span.textContent = percent + '%';
+ }
+ },
+ (error) => {
+ console.error('Error loading model:', error);
+ loadingDiv.innerHTML = 'ERROR
Check Console (F12)';
+
+ const geometry = new THREE.BoxGeometry(2, 2, 2);
+ const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+ const cube = new THREE.Mesh(geometry, material);
+ startPivot.add(cube);
+ }
+ );
+
+ // --- Animation Loop ---
+ function animate() {
+ if (!isMenuActive && !isLaunching) {
+ animationFrameId = null;
+ return;
+ }
+
+ animationFrameId = requestAnimationFrame(animate);
+
+ if (isLaunching) {
+ // LAUNCH MODE: Fly upward at accelerating speed
+ launchSpeed += 0.015; // Acceleration
+ startPivot.position.y += launchSpeed;
+
+ // Straighten the ship during launch (reduce banking)
+ startPivot.rotation.y *= 0.95;
+ startPivot.rotation.z *= 0.95;
+
+ // Check if ship is out of view (Y > 15 is well off screen)
+ if (startPivot.position.y > 15) {
+ console.log("Ship has left the screen!");
+ isLaunching = false;
+ isMenuActive = false;
+
+ // Trigger callback if set
+ if (window._onLaunchComplete) {
+ window._onLaunchComplete();
+ }
+ return;
+ }
+ } else {
+ // NORMAL MODE: Oscillate (Roll/Bank) Left and Right
+ startPivot.rotation.y = Math.sin(Date.now() * 0.0015) * (Math.PI / 6);
+ // Gentle float with UPWARD offset (0.5)
+ startPivot.position.y = 0.5 + (Math.sin(Date.now() * 0.001) * 0.1);
+ }
+
+ renderer.render(scene, camera);
+ }
+
+ window._menu3DAnimate = animate;
+ animate();
+
+ // --- Resize Handler ---
+ window.addEventListener('resize', () => {
+ if (!container || (!isMenuActive && !isLaunching)) return;
+ const newAspect = container.clientWidth / container.clientHeight;
+ camera.aspect = newAspect;
+ camera.updateProjectionMatrix();
+ renderer.setSize(container.clientWidth, container.clientHeight);
+ });
+}
+
+// === GLOBAL PAUSE/RESUME FUNCTIONS ===
+
+window.pauseMenu3D = function () {
+ isMenuActive = false;
+ console.log("3D Menu rendering PAUSED");
+
+ const mainTitle = document.querySelector('.main-title');
+ const bgTiles = document.querySelectorAll('.bg-tile');
+
+ if (mainTitle) {
+ mainTitle.style.animationPlayState = 'paused';
+ }
+ bgTiles.forEach(tile => {
+ tile.style.animationPlayState = 'paused';
+ });
+};
+
+window.resumeMenu3D = function () {
+ isMenuActive = true;
+ isLaunching = false;
+ launchSpeed = 0;
+
+ // Reset ship position
+ if (startPivotRef) {
+ startPivotRef.position.y = 0.5;
+ startPivotRef.rotation.y = 0;
+ }
+
+ console.log("3D Menu rendering RESUMED");
+
+ const mainTitle = document.querySelector('.main-title');
+ const bgTiles = document.querySelectorAll('.bg-tile');
+
+ if (mainTitle) {
+ mainTitle.style.animationPlayState = 'running';
+ }
+ bgTiles.forEach(tile => {
+ tile.style.animationPlayState = 'running';
+ });
+
+ if (animationFrameId === null && window._menu3DAnimate) {
+ window._menu3DAnimate();
+ }
+};
+
+// === LAUNCH SHIP ANIMATION ===
+// Call this to make the ship fly off screen, then execute callback
+window.launchShip = function (onComplete) {
+ console.log("LAUNCHING SHIP!");
+ isLaunching = true;
+ launchSpeed = 0.05; // Initial speed
+ window._onLaunchComplete = onComplete;
+
+ // Ensure animation loop is running
+ if (animationFrameId === null && window._menu3DAnimate) {
+ window._menu3DAnimate();
+ }
+};
+
+// Start
+init3DMenu();
diff --git a/Login1.css b/Login1.css
index 8a81b31..db1479c 100644
--- a/Login1.css
+++ b/Login1.css
@@ -1,326 +1,362 @@
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
- body {
- font-family: 'Orbitron', sans-serif;
- background: #0a0a0a;
- overflow: hidden;
- position: relative;
- }
+body {
+ font-family: 'Orbitron', sans-serif;
+ background: #0a0a0a;
+ overflow: hidden;
+ position: relative;
+ cursor: url('img/Custom cursor/Arrow.cur'), auto;
+}
- .stars {
- position: fixed;
- width: 100%;
- height: 100%;
- background: radial-gradient(2px 2px at 20% 30%, white, transparent),
- radial-gradient(2px 2px at 60% 70%, white, transparent),
- radial-gradient(1px 1px at 50% 50%, white, transparent),
- radial-gradient(1px 1px at 80% 10%, white, transparent),
- radial-gradient(2px 2px at 90% 60%, white, transparent);
- background-size: 200% 200%;
- animation: twinkle 8s ease-in-out infinite;
- opacity: 0.5;
- }
+a,
+button,
+input[type="submit"],
+input[type="button"],
+.toggle-link,
+.btn-send,
+.btn-reset,
+.toggle-btn,
+.back-btn {
+ cursor: url('img/Custom cursor/Stone.cur'), pointer;
+}
- @keyframes twinkle {
- 0%, 100% { opacity: 0.5; }
- 50% { opacity: 0.8; }
- }
+.stars {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(2px 2px at 20% 30%, white, transparent),
+ radial-gradient(2px 2px at 60% 70%, white, transparent),
+ radial-gradient(1px 1px at 50% 50%, white, transparent),
+ radial-gradient(1px 1px at 80% 10%, white, transparent),
+ radial-gradient(2px 2px at 90% 60%, white, transparent);
+ background-size: 200% 200%;
+ animation: twinkle 8s ease-in-out infinite;
+ opacity: 0.5;
+}
- .neon-grid {
- position: fixed;
- width: 100%;
- height: 100%;
- background-image: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 1px, transparent 1px);
- background-size: 50px 50px;
- }
+@keyframes twinkle {
- .layout {
- position: relative;
- display: flex;
- height: 100vh;
- width: 100vw;
- z-index: 1;
- }
+ 0%,
+ 100% {
+ opacity: 0.5;
+ }
- .left-panel {
- width: 55%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 40px;
- }
+ 50% {
+ opacity: 0.8;
+ }
+}
- .title-container {
- text-align: center;
- }
+.neon-grid {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background-image: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 1px, transparent 1px);
+ background-size: 50px 50px;
+}
- .main-title {
- font-size: clamp(55px, 10vw, 140px);
- font-weight: 900;
- line-height: 0.9;
- background: linear-gradient(45deg, #FF006E, #8338EC, #00F5FF);
- background-size: 200% 200%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- animation: gradientShift 3s ease infinite;
- text-shadow: 0 0 80px rgba(255, 0, 110, 0.5);
- filter: drop-shadow(0 0 20px rgba(131, 56, 236, 0.8));
- }
+.layout {
+ position: relative;
+ display: flex;
+ height: 100vh;
+ width: 100vw;
+ z-index: 1;
+}
- @keyframes gradientShift {
- 0%, 100% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- }
+.left-panel {
+ width: 55%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+}
- .subtitle {
- font-size: clamp(14px, 2vw, 20px);
- color: #00F5FF;
- letter-spacing: 8px;
- margin-top: 20px;
- opacity: 0.8;
- animation: pulse 2s ease-in-out infinite;
- }
+.title-container {
+ text-align: center;
+}
- @keyframes pulse {
- 0%, 100% { opacity: 0.6; }
- 50% { opacity: 1; }
- }
+.main-title {
+ font-size: clamp(55px, 10vw, 140px);
+ font-weight: 900;
+ line-height: 0.9;
+ background: linear-gradient(45deg, #FF006E, #8338EC, #00F5FF);
+ background-size: 200% 200%;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: gradientShift 3s ease infinite;
+ text-shadow: 0 0 80px rgba(255, 0, 110, 0.5);
+ filter: drop-shadow(0 0 20px rgba(131, 56, 236, 0.8));
+}
- .right-panel {
- width: 45%;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 40px;
- }
+@keyframes gradientShift {
- .form-box {
- width: 100%;
- max-width: 420px;
- background: rgba(20, 20, 40, 0.8);
- border-radius: 20px;
- padding: 40px;
- border: 2px solid rgba(255, 0, 110, 0.3);
- box-shadow:
- 0 0 40px rgba(255, 0, 110, 0.3),
- 0 0 80px rgba(131, 56, 236, 0.2),
- inset 0 0 60px rgba(0, 245, 255, 0.05);
- backdrop-filter: blur(10px);
- position: relative;
- }
+ 0%,
+ 100% {
+ background-position: 0% 50%;
+ }
- .form-content {
- position: relative;
- z-index: 1;
- }
+ 50% {
+ background-position: 100% 50%;
+ }
+}
- .form-title {
- font-size: 28px;
- color: #00F5FF;
- text-align: center;
- margin-bottom: 30px;
- text-transform: uppercase;
- letter-spacing: 3px;
- text-shadow: 0 0 20px rgba(0, 245, 255, 0.8);
- }
+.subtitle {
+ font-size: clamp(14px, 2vw, 20px);
+ color: #00F5FF;
+ letter-spacing: 8px;
+ margin-top: 20px;
+ opacity: 0.8;
+ animation: pulse 2s ease-in-out infinite;
+}
- label {
- display: block;
- color: #FF006E;
- font-size: 14px;
- margin-bottom: 8px;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-weight: 700;
- }
+@keyframes pulse {
- input[type="text"],
- input[type="password"] {
- width: 100%;
- padding: 15px 20px;
- margin-bottom: 25px;
- background: rgba(0, 0, 0, 0.5);
- border: 2px solid rgba(0, 245, 255, 0.3);
- border-radius: 10px;
- color: #00F5FF;
- font-size: 16px;
- font-family: 'Orbitron', sans-serif;
- transition: all 0.3s ease;
- box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
- }
+ 0%,
+ 100% {
+ opacity: 0.6;
+ }
- input[type="text"]:focus,
- input[type="password"]:focus {
- outline: none;
- border-color: #FF006E;
- box-shadow:
- 0 0 20px rgba(255, 0, 110, 0.5),
- inset 0 0 20px rgba(255, 0, 110, 0.1);
- background: rgba(0, 0, 0, 0.7);
- }
+ 50% {
+ opacity: 1;
+ }
+}
- input::placeholder {
- color: rgba(0, 245, 255, 0.4);
- font-size: 14px;
- }
+.right-panel {
+ width: 45%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+}
- .button-group {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
- margin-top: 30px;
- }
+.form-box {
+ width: 100%;
+ max-width: 420px;
+ background: rgba(20, 20, 40, 0.8);
+ border-radius: 20px;
+ padding: 40px;
+ border: 2px solid rgba(255, 0, 110, 0.3);
+ box-shadow:
+ 0 0 40px rgba(255, 0, 110, 0.3),
+ 0 0 80px rgba(131, 56, 236, 0.2),
+ inset 0 0 60px rgba(0, 245, 255, 0.05);
+ backdrop-filter: blur(10px);
+ position: relative;
+}
- button {
- width: 100%;
- max-width: 250px;
- padding: 15px;
- font-family: 'Orbitron', sans-serif;
- font-size: 14px;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 2px;
- border: none;
- border-radius: 10px;
- cursor: pointer;
- transition: all 0.3s ease;
- position: relative;
- overflow: hidden;
- }
+.form-content {
+ position: relative;
+ z-index: 1;
+}
- .btn-send {
- background: linear-gradient(45deg, #FF006E, #8338EC);
- color: white;
- box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
- }
+.form-title {
+ font-size: 28px;
+ color: #00F5FF;
+ text-align: center;
+ margin-bottom: 30px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ text-shadow: 0 0 20px rgba(0, 245, 255, 0.8);
+}
- .btn-send:hover {
- box-shadow: 0 0 40px rgba(255, 0, 110, 0.8);
- transform: translateY(-2px);
- }
+label {
+ display: block;
+ color: #FF006E;
+ font-size: 14px;
+ margin-bottom: 8px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-weight: 700;
+}
- .btn-reset {
- background: linear-gradient(45deg, #8338EC, #00F5FF);
- color: white;
- box-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
- }
+input[type="text"],
+input[type="password"] {
+ width: 100%;
+ padding: 15px 20px;
+ margin-bottom: 25px;
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(0, 245, 255, 0.3);
+ border-radius: 10px;
+ color: #00F5FF;
+ font-size: 16px;
+ font-family: 'Orbitron', sans-serif;
+ transition: all 0.3s ease;
+ box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+}
- .btn-reset:hover {
- box-shadow: 0 0 40px rgba(0, 245, 255, 0.8);
- transform: translateY(-2px);
- }
+input[type="text"]:focus,
+input[type="password"]:focus {
+ outline: none;
+ border-color: #FF006E;
+ box-shadow:
+ 0 0 20px rgba(255, 0, 110, 0.5),
+ inset 0 0 20px rgba(255, 0, 110, 0.1);
+ background: rgba(0, 0, 0, 0.7);
+}
- .signup-text {
- color: rgba(0, 245, 255, 0.7);
- font-size: 13px;
- text-align: center;
- letter-spacing: 1px;
- }
+input::placeholder {
+ color: rgba(0, 245, 255, 0.4);
+ font-size: 14px;
+}
- .signup-text a {
- color: #FF006E;
- text-decoration: none;
- font-weight: 700;
- transition: all 0.3s ease;
- text-shadow: 0 0 10px rgba(255, 0, 110, 0.3);
- }
+.button-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ margin-top: 30px;
+}
- .signup-text a:hover {
- color: #00F5FF;
- text-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
- }
+button {
+ width: 100%;
+ max-width: 250px;
+ padding: 15px;
+ font-family: 'Orbitron', sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
- button::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.3);
- transform: translate(-50%, -50%);
- transition: width 0.6s, height 0.6s;
- }
+.btn-send {
+ background: linear-gradient(45deg, #FF006E, #8338EC);
+ color: white;
+ box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
+}
- button:active::before {
- width: 300px;
- height: 300px;
- }
+.btn-send:hover {
+ box-shadow: 0 0 40px rgba(255, 0, 110, 0.8);
+ transform: translateY(-2px);
+}
- .user-list {
- position: absolute;
- bottom: 30px;
- left: 50%;
- transform: translateX(-50%);
- width: 90%;
- max-width: 500px;
- max-height: 200px;
- overflow-y: auto;
- z-index: 10;
- }
+.btn-reset {
+ background: linear-gradient(45deg, #8338EC, #00F5FF);
+ color: white;
+ box-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
+}
- .user-card {
- background: rgba(20, 20, 40, 0.9);
- border: 1px solid rgba(0, 245, 255, 0.4);
- border-radius: 10px;
- padding: 20px 25px;
- margin-bottom: 10px;
- text-align: center;
- box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
- animation: slideIn 0.4s ease;
- opacity: 1;
- transition: opacity 1.5s ease;
+.btn-reset:hover {
+ box-shadow: 0 0 40px rgba(0, 245, 255, 0.8);
+ transform: translateY(-2px);
+}
- }
+.signup-text {
+ color: rgba(0, 245, 255, 0.7);
+ font-size: 13px;
+ text-align: center;
+ letter-spacing: 1px;
+}
- .usercardfade-out {
+.signup-text a {
+ color: #FF006E;
+ text-decoration: none;
+ font-weight: 700;
+ transition: all 0.3s ease;
+ text-shadow: 0 0 10px rgba(255, 0, 110, 0.3);
+}
+
+.signup-text a:hover {
+ color: #00F5FF;
+ text-shadow: 0 0 15px rgba(0, 245, 255, 0.8);
+}
+
+button::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.3);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+}
+
+button:active::before {
+ width: 300px;
+ height: 300px;
+}
+
+.user-list {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 90%;
+ max-width: 500px;
+ max-height: 200px;
+ overflow-y: auto;
+ z-index: 10;
+}
+
+.user-card {
+ background: rgba(20, 20, 40, 0.9);
+ border: 1px solid rgba(0, 245, 255, 0.4);
+ border-radius: 10px;
+ padding: 20px 25px;
+ margin-bottom: 10px;
+ text-align: center;
+ box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
+ animation: slideIn 0.4s ease;
+ opacity: 1;
+ transition: opacity 1.5s ease;
+
+}
+
+.usercardfade-out {
+ opacity: 0;
+}
+
+
+@keyframes slideIn {
+ from {
opacity: 0;
- }
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
- @keyframes slideIn {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
+.user-name {
+ color: #00F5FF;
+ font-size: 16px;
+ font-weight: 400;
+ text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
+ line-height: 1.6;
+}
- .user-name {
- color: #00F5FF;
- font-size: 16px;
- font-weight: 400;
- text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
- line-height: 1.6;
- }
+.user-name strong {
+ color: #FF006E;
+ font-weight: 700;
+}
- .user-name strong {
- color: #FF006E;
- font-weight: 700;
- }
+.user-list::-webkit-scrollbar {
+ width: 8px;
+}
- .user-list::-webkit-scrollbar {
- width: 8px;
- }
+.user-list::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+}
- .user-list::-webkit-scrollbar-track {
- background: rgba(0, 0, 0, 0.3);
- border-radius: 10px;
- }
-
- .user-list::-webkit-scrollbar-thumb {
- background: linear-gradient(45deg, #FF006E, #8338EC);
- border-radius: 10px;
- }
\ No newline at end of file
+.user-list::-webkit-scrollbar-thumb {
+ background: linear-gradient(45deg, #FF006E, #8338EC);
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/Main.html b/Main.html
index 795aac7..e63d06a 100644
--- a/Main.html
+++ b/Main.html
@@ -4,46 +4,54 @@
- Space Game
+ Space ODYSSEY
+
+
-
+
+
+
+
+
+
+
+