diff --git a/Homepage.css b/Homepage.css
index b0f8a2d..ebc9326 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -38,12 +38,8 @@ body::before {
}
@keyframes gridMove {
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(50px, 50px);
- }
+ 0% { transform: translate(0, 0); }
+ 100% { transform: translate(50px, 50px); }
}
/* Neon Particles */
@@ -77,628 +73,4 @@ body::before {
transform: translateY(-30px) translateX(15px) scale(1.2);
opacity: 1;
}
-}
-
-/* Header */
-header {
- position: relative;
- z-index: 10;
- padding: 25px 50px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: rgba(20, 0, 40, 0.7);
- backdrop-filter: blur(15px);
- border-bottom: 3px solid rgba(0, 234, 255, 0.4);
- box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
-}
-
-.logo {
- font-size: 36px;
- font-weight: 900;
- font-family: 'Orbitron', sans-serif;
- background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
- background-size: 200% 200%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- letter-spacing: 5px;
- text-transform: uppercase;
- animation: gradientShift 4s ease infinite;
- filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
-}
-
-@keyframes gradientShift {
- 0%, 100% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
-}
-
-.btn {
- padding: 14px 35px;
- border: none;
- border-radius: 15px;
- font-weight: 700;
- font-size: 16px;
- cursor: pointer;
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- text-decoration: none;
- display: inline-block;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 2.5px;
- font-family: 'Orbitron', sans-serif;
- position: relative;
- overflow: hidden;
-}
-
-.btn::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.2);
- transform: translate(-50%, -50%);
- transition: width 0.6s, height 0.6s;
-}
-
-.btn:hover::before {
- width: 300px;
- height: 300px;
-}
-
-.btn-primary {
- background: linear-gradient(135deg, #00eaff, #ff00ff);
- color: #fff;
- font-weight: 900;
- box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
- position: relative;
- z-index: 1;
-}
-
-.btn-primary:hover {
- box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
- transform: translateY(-4px) scale(1.05);
-}
-
-.btn-login {
- background: linear-gradient(135deg, #00eaff, #0099ff);
- color: #fff;
- font-weight: 900;
- box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
- border: 2px solid rgba(0, 234, 255, 0.5);
- position: relative;
- z-index: 1;
- animation: loginPulse 2s ease-in-out infinite;
-}
-
-@keyframes loginPulse {
- 0%, 100% {
- box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
- }
- 50% {
- box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7);
- }
-}
-
-.btn-login:hover {
- background: linear-gradient(135deg, #7d0dde, #00aaff);
- box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9);
- transform: translateY(-5px) scale(1.1);
- border-color: rgba(0, 255, 255, 0.8);
-}
-
-/* Hero Section */
-.hero {
- position: relative;
- z-index: 10;
- text-align: center;
- padding: 140px 20px 120px;
- max-width: 100%;
- width: 100%;
- margin: 0 auto;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 70vh;
- overflow: hidden;
-}
-
-.hero-title {
- font-size: 140px;
- font-weight: 900;
- margin-bottom: 25px;
- font-family: 'Orbitron', sans-serif;
- background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
- background-size: 200% 200%;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- letter-spacing: 18px;
- text-transform: uppercase;
- animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
- line-height: 1.1;
- position: relative;
-}
-
-.hero-title::after {
- content: '2048';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- filter: blur(20px);
- opacity: 0.5;
- z-index: -1;
- animation: titleBlur 3s ease-in-out infinite alternate;
-}
-
-@keyframes titleAnimation {
- 0%, 100% {
- background-position: 0% 50%;
- transform: scale(1);
- }
- 50% {
- background-position: 100% 50%;
- transform: scale(1.02);
- }
-}
-
-@keyframes titleGlow {
- 0% {
- filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7))
- drop-shadow(0 0 50px rgba(0, 234, 255, 0.5));
- }
- 100% {
- filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9))
- drop-shadow(0 0 80px rgba(255, 0, 255, 0.6));
- }
-}
-
-@keyframes titleBlur {
- 0% {
- opacity: 0.3;
- }
- 100% {
- opacity: 0.7;
- }
-}
-
-.hero-subtitle {
- font-size: 24px;
- color: rgba(255, 255, 255, 0.8);
- margin-bottom: 55px;
- font-weight: 400;
- letter-spacing: 6px;
- text-transform: uppercase;
- font-family: 'Exo 2', sans-serif;
- animation: subtitleFade 2s ease-in-out infinite alternate;
-}
-
-@keyframes subtitleFade {
- 0% {
- opacity: 0.7;
- transform: translateY(0);
- }
- 100% {
- opacity: 1;
- transform: translateY(-3px);
- }
-}
-
-.cta-buttons {
- display: flex;
- gap: 25px;
- justify-content: center;
- flex-wrap: wrap;
- animation: buttonsSlideUp 1s ease-out;
-}
-
-@keyframes buttonsSlideUp {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.btn-cta {
- padding: 18px 45px;
- font-size: 19px;
- border-radius: 15px;
- font-weight: 900;
- text-transform: uppercase;
- letter-spacing: 3px;
- border: none;
- font-family: 'Orbitron', sans-serif;
- position: relative;
- overflow: hidden;
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.btn-cta::after {
- content: '';
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transform: rotate(45deg);
- animation: buttonShine 3s infinite;
-}
-
-@keyframes buttonShine {
- 0% {
- transform: translateX(-100%) translateY(-100%) rotate(45deg);
- }
- 100% {
- transform: translateX(100%) translateY(100%) rotate(45deg);
- }
-}
-
-.btn-play {
- background: linear-gradient(135deg, #ff00ff, #ff0066);
- box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
- color: #fff;
-}
-
-.btn-play:hover {
- transform: translateY(-5px) scale(1.08);
- box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
-}
-
-.btn-leaderboard {
- background: linear-gradient(135deg, #ffd700, #ffaa00);
- color: #0c001a;
- box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
-}
-
-.btn-leaderboard:hover {
- transform: translateY(-5px) scale(1.08);
- box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
-}
-
-/* Floating Decoration Elements */
-.hero::before {
- content: '';
- position: absolute;
- top: 50%;
- left: -100px;
- width: 300px;
- height: 300px;
- background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
- border-radius: 50%;
- filter: blur(60px);
- animation: floatLeft 8s ease-in-out infinite;
- z-index: -1;
-}
-
-.hero::after {
- content: '';
- position: absolute;
- top: 30%;
- right: -100px;
- width: 350px;
- height: 350px;
- background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
- border-radius: 50%;
- filter: blur(60px);
- animation: floatRight 10s ease-in-out infinite;
- z-index: -1;
-}
-
-@keyframes floatLeft {
- 0%, 100% {
- transform: translate(0, 0) scale(1);
- }
- 50% {
- transform: translate(30px, -30px) scale(1.1);
- }
-}
-
-@keyframes floatRight {
- 0%, 100% {
- transform: translate(0, 0) scale(1);
- }
- 50% {
- transform: translate(-30px, 30px) scale(1.1);
- }
-}
-
-/* ===========================
- LOGOUT BUTTON STYLES
-=========================== */
-.btn-logout {
- background: linear-gradient(135deg, #ff0066, #cc0033) !important;
- color: #fff !important;
- font-weight: 900;
- box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
- border: 2px solid rgba(255, 0, 102, 0.5);
- position: relative;
- z-index: 1;
- animation: logoutPulse 2s ease-in-out infinite;
-}
-
-@keyframes logoutPulse {
- 0%, 100% {
- box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
- }
- 50% {
- box-shadow: 0 8px 40px rgba(255, 0, 102, 0.9), 0 0 35px rgba(204, 0, 51, 0.7);
- }
-}
-
-.btn-logout:hover {
- background: linear-gradient(135deg, #ff0088, #dd0044) !important;
- box-shadow: 0 12px 50px rgba(255, 0, 102, 1), 0 0 50px rgba(204, 0, 51, 0.9);
- transform: translateY(-5px) scale(1.1);
- border-color: rgba(255, 0, 102, 0.8);
-}
-
-/* ===========================
- LOGOUT CONFIRMATION MODAL
-=========================== */
-.logout-overlay {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.85);
- backdrop-filter: blur(12px);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 9999;
- opacity: 0;
- transition: opacity 0.3s ease;
-}
-
-.logout-overlay.active {
- opacity: 1;
-}
-
-.logout-modal {
- background: linear-gradient(145deg, rgba(30, 0, 50, 0.98), rgba(45, 0, 70, 0.98));
- backdrop-filter: blur(30px);
- border: 3px solid rgba(255, 0, 102, 0.5);
- border-radius: 28px;
- padding: 50px 45px 40px;
- max-width: 440px;
- width: 90%;
- text-align: center;
- box-shadow:
- 0 40px 100px rgba(0, 0, 0, 0.8),
- 0 0 80px rgba(255, 0, 102, 0.4),
- inset 0 2px 60px rgba(255, 0, 102, 0.08);
- animation: modalSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-@keyframes modalSlideUp {
- from {
- opacity: 0;
- transform: translateY(50px) scale(0.9);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-.logout-icon {
- width: 80px;
- height: 80px;
- margin: 0 auto 25px;
- background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(204, 0, 51, 0.2));
- border: 3px solid rgba(255, 0, 102, 0.6);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow:
- 0 0 30px rgba(255, 0, 102, 0.4),
- inset 0 0 20px rgba(255, 0, 102, 0.1);
- animation: iconPulse 2s ease-in-out infinite;
-}
-
-@keyframes iconPulse {
- 0%, 100% {
- transform: scale(1);
- box-shadow: 0 0 30px rgba(255, 0, 102, 0.4);
- }
- 50% {
- transform: scale(1.05);
- box-shadow: 0 0 45px rgba(255, 0, 102, 0.6);
- }
-}
-
-.logout-icon svg {
- width: 40px;
- height: 40px;
- color: #ff0066;
- filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.6));
-}
-
-.logout-title {
- font-size: 28px;
- font-weight: 900;
- font-family: 'Orbitron', sans-serif;
- background: linear-gradient(135deg, #ff0066 0%, #ff0088 50%, #ff0066 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- margin-bottom: 15px;
- letter-spacing: 2px;
- filter: drop-shadow(0 0 20px rgba(255, 0, 102, 0.5));
-}
-
-.logout-message {
- color: rgba(255, 255, 255, 0.8);
- font-size: 16px;
- margin-bottom: 35px;
- line-height: 1.6;
- font-family: 'Exo 2', sans-serif;
-}
-
-.logout-buttons {
- display: flex;
- gap: 15px;
- justify-content: center;
-}
-
-.btn-logout-cancel,
-.btn-logout-confirm {
- padding: 14px 32px;
- border: none;
- border-radius: 12px;
- font-weight: 800;
- font-size: 15px;
- font-family: 'Orbitron', sans-serif;
- cursor: pointer;
- text-transform: uppercase;
- letter-spacing: 2px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.btn-logout-cancel {
- background: rgba(255, 255, 255, 0.1);
- color: rgba(255, 255, 255, 0.9);
- border: 2px solid rgba(255, 255, 255, 0.3);
-}
-
-.btn-logout-cancel:hover {
- background: rgba(255, 255, 255, 0.15);
- border-color: rgba(255, 255, 255, 0.5);
- transform: translateY(-2px);
- box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
-}
-
-.btn-logout-confirm {
- background: linear-gradient(135deg, #ff0066, #cc0033);
- color: #fff;
- border: 2px solid rgba(255, 0, 102, 0.6);
- box-shadow: 0 4px 20px rgba(255, 0, 102, 0.5);
-}
-
-.btn-logout-confirm:hover {
- background: linear-gradient(135deg, #ff0088, #dd0044);
- transform: translateY(-2px);
- box-shadow: 0 8px 30px rgba(255, 0, 102, 0.7);
- border-color: rgba(255, 0, 102, 0.9);
-}
-
-/* ===========================
- LOGOUT SUCCESS MODAL
-=========================== */
-.logout-success-overlay {
- position: fixed;
- inset: 0;
- background: rgba(0, 0, 0, 0.9);
- backdrop-filter: blur(15px);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- opacity: 0;
- transition: opacity 0.3s ease;
-}
-
-.logout-success-overlay.active {
- opacity: 1;
-}
-
-.logout-success-modal {
- background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(35, 0, 60, 0.98));
- backdrop-filter: blur(30px);
- border: 3px solid rgba(0, 255, 136, 0.5);
- border-radius: 28px;
- padding: 50px 45px;
- max-width: 400px;
- width: 90%;
- text-align: center;
- box-shadow:
- 0 40px 100px rgba(0, 0, 0, 0.8),
- 0 0 80px rgba(0, 255, 136, 0.4),
- inset 0 2px 60px rgba(0, 255, 136, 0.08);
- animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes successBounce {
- 0% {
- opacity: 0;
- transform: scale(0.3) rotate(-10deg);
- }
- 50% {
- transform: scale(1.1) rotate(5deg);
- }
- 100% {
- opacity: 1;
- transform: scale(1) rotate(0deg);
- }
-}
-
-.success-icon {
- width: 90px;
- height: 90px;
- margin: 0 auto 25px;
- background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.2));
- border: 3px solid rgba(0, 255, 136, 0.6);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow:
- 0 0 40px rgba(0, 255, 136, 0.5),
- inset 0 0 25px rgba(0, 255, 136, 0.1);
- animation: successIconPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes successIconPulse {
- 0%, 100% {
- transform: scale(1);
- box-shadow: 0 0 40px rgba(0, 255, 136, 0.5);
- }
- 50% {
- transform: scale(1.08);
- box-shadow: 0 0 60px rgba(0, 255, 136, 0.7);
- }
-}
-
-.success-icon svg {
- width: 50px;
- height: 50px;
- color: #00ff88;
- filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
-}
-
-.success-title {
- font-size: 26px;
- font-weight: 900;
- font-family: 'Orbitron', sans-serif;
- background: linear-gradient(135deg, #00ff88 0%, #00cc66 50%, #00ff88 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- margin-bottom: 12px;
- letter-spacing: 2px;
- filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.5));
-}
-
-.success-message {
- color: rgba(255, 255, 255, 0.85);
- font-size: 15px;
- line-height: 1.6;
- font-family: 'Exo 2', sans-serif;
}
\ No newline at end of file
diff --git a/Homepage.html b/Homepage.html
index b73ae04..7b94191 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -5,8 +5,12 @@
Homepage
-
+
+
+
+
+
diff --git a/Homepage_Button.css b/Homepage_Button.css
new file mode 100644
index 0000000..b7c9c78
--- /dev/null
+++ b/Homepage_Button.css
@@ -0,0 +1,192 @@
+/* General Button Styles */
+.btn {
+ padding: 14px 35px;
+ border: none;
+ border-radius: 15px;
+ font-weight: 700;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ text-decoration: none;
+ display: inline-block;
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 2.5px;
+ font-family: 'Orbitron', sans-serif;
+ position: relative;
+ overflow: hidden;
+}
+
+.btn::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.2);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+}
+
+.btn:hover::before {
+ width: 300px;
+ height: 300px;
+}
+
+/* Primary & Login Buttons */
+.btn-primary {
+ background: linear-gradient(135deg, #00eaff, #ff00ff);
+ color: #fff;
+ font-weight: 900;
+ box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
+ position: relative;
+ z-index: 1;
+}
+
+.btn-primary:hover {
+ box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
+ transform: translateY(-4px) scale(1.05);
+}
+
+.btn-login {
+ background: linear-gradient(135deg, #00eaff, #0099ff);
+ color: #fff;
+ font-weight: 900;
+ box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
+ border: 2px solid rgba(0, 234, 255, 0.5);
+ position: relative;
+ z-index: 1;
+ animation: loginPulse 2s ease-in-out infinite;
+}
+
+@keyframes loginPulse {
+ 0%, 100% { box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5); }
+ 50% { box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7); }
+}
+
+.btn-login:hover {
+ background: linear-gradient(135deg, #7d0dde, #00aaff);
+ box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9);
+ transform: translateY(-5px) scale(1.1);
+ border-color: rgba(0, 255, 255, 0.8);
+}
+
+/* CTA Buttons (Play & Leaderboard) */
+.btn-cta {
+ padding: 18px 45px;
+ font-size: 19px;
+ border-radius: 15px;
+ font-weight: 900;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ border: none;
+ font-family: 'Orbitron', sans-serif;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-cta::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transform: rotate(45deg);
+ animation: buttonShine 3s infinite;
+}
+
+@keyframes buttonShine {
+ 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+ 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+}
+
+.btn-play {
+ background: linear-gradient(135deg, #ff00ff, #ff0066);
+ box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
+ color: #fff;
+}
+
+.btn-play:hover {
+ transform: translateY(-5px) scale(1.08);
+ box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
+}
+
+.btn-leaderboard {
+ background: linear-gradient(135deg, #ffd700, #ffaa00);
+ color: #0c001a;
+ box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
+}
+
+.btn-leaderboard:hover {
+ transform: translateY(-5px) scale(1.08);
+ box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
+}
+
+/* Logout Specific Buttons */
+.btn-logout {
+ background: linear-gradient(135deg, #ff0066, #cc0033) !important;
+ color: #fff !important;
+ font-weight: 900;
+ box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
+ border: 2px solid rgba(255, 0, 102, 0.5);
+ position: relative;
+ z-index: 1;
+ animation: logoutPulse 2s ease-in-out infinite;
+}
+
+@keyframes logoutPulse {
+ 0%, 100% { box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5); }
+ 50% { box-shadow: 0 8px 40px rgba(255, 0, 102, 0.9), 0 0 35px rgba(204, 0, 51, 0.7); }
+}
+
+.btn-logout:hover {
+ background: linear-gradient(135deg, #ff0088, #dd0044) !important;
+ box-shadow: 0 12px 50px rgba(255, 0, 102, 1), 0 0 50px rgba(204, 0, 51, 0.9);
+ transform: translateY(-5px) scale(1.1);
+ border-color: rgba(255, 0, 102, 0.8);
+}
+
+.btn-logout-cancel, .btn-logout-confirm {
+ padding: 14px 32px;
+ border: none;
+ border-radius: 12px;
+ font-weight: 800;
+ font-size: 15px;
+ font-family: 'Orbitron', sans-serif;
+ cursor: pointer;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-logout-cancel {
+ background: rgba(255, 255, 255, 0.1);
+ color: rgba(255, 255, 255, 0.9);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-logout-cancel:hover {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
+}
+
+.btn-logout-confirm {
+ background: linear-gradient(135deg, #ff0066, #cc0033);
+ color: #fff;
+ border: 2px solid rgba(255, 0, 102, 0.6);
+ box-shadow: 0 4px 20px rgba(255, 0, 102, 0.5);
+}
+
+.btn-logout-confirm:hover {
+ background: linear-gradient(135deg, #ff0088, #dd0044);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 30px rgba(255, 0, 102, 0.7);
+ border-color: rgba(255, 0, 102, 0.9);
+}
\ No newline at end of file
diff --git a/Homepage_Header.css b/Homepage_Header.css
new file mode 100644
index 0000000..1394ab0
--- /dev/null
+++ b/Homepage_Header.css
@@ -0,0 +1,34 @@
+/* Header Container */
+header {
+ position: relative;
+ z-index: 10;
+ padding: 25px 50px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: rgba(20, 0, 40, 0.7);
+ backdrop-filter: blur(15px);
+ border-bottom: 3px solid rgba(0, 234, 255, 0.4);
+ box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
+}
+
+/* Logo Styles */
+.logo {
+ font-size: 36px;
+ font-weight: 900;
+ font-family: 'Orbitron', sans-serif;
+ background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+ background-size: 200% 200%;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: 5px;
+ text-transform: uppercase;
+ animation: gradientShift 4s ease infinite;
+ filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
+}
+
+@keyframes gradientShift {
+ 0%, 100% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+}
\ No newline at end of file
diff --git a/Homepage_Hero.css b/Homepage_Hero.css
new file mode 100644
index 0000000..8bc5b12
--- /dev/null
+++ b/Homepage_Hero.css
@@ -0,0 +1,131 @@
+.hero {
+ position: relative;
+ z-index: 10;
+ text-align: center;
+ padding: 140px 20px 120px;
+ max-width: 100%;
+ width: 100%;
+ margin: 0 auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 70vh;
+ overflow: hidden;
+}
+
+.hero-title {
+ font-size: 140px;
+ font-weight: 900;
+ margin-bottom: 25px;
+ font-family: 'Orbitron', sans-serif;
+ background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+ background-size: 200% 200%;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: 18px;
+ text-transform: uppercase;
+ animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
+ line-height: 1.1;
+ position: relative;
+}
+
+.hero-title::after {
+ content: '2048';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ filter: blur(20px);
+ opacity: 0.5;
+ z-index: -1;
+ animation: titleBlur 3s ease-in-out infinite alternate;
+}
+
+@keyframes titleAnimation {
+ 0%, 100% { background-position: 0% 50%; transform: scale(1); }
+ 50% { background-position: 100% 50%; transform: scale(1.02); }
+}
+
+@keyframes titleGlow {
+ 0% { filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 234, 255, 0.5)); }
+ 100% { filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) drop-shadow(0 0 80px rgba(255, 0, 255, 0.6)); }
+}
+
+@keyframes titleBlur {
+ 0% { opacity: 0.3; }
+ 100% { opacity: 0.7; }
+}
+
+.hero-subtitle {
+ font-size: 24px;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 55px;
+ font-weight: 400;
+ letter-spacing: 6px;
+ text-transform: uppercase;
+ font-family: 'Exo 2', sans-serif;
+ animation: subtitleFade 2s ease-in-out infinite alternate;
+}
+
+@keyframes subtitleFade {
+ 0% { opacity: 0.7; transform: translateY(0); }
+ 100% { opacity: 1; transform: translateY(-3px); }
+}
+
+.cta-buttons {
+ display: flex;
+ gap: 25px;
+ justify-content: center;
+ flex-wrap: wrap;
+ animation: buttonsSlideUp 1s ease-out;
+}
+
+@keyframes buttonsSlideUp {
+ from { opacity: 0; transform: translateY(30px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Floating Decoration Elements */
+.hero::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: -100px;
+ width: 300px;
+ height: 300px;
+ background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
+ border-radius: 50%;
+ filter: blur(60px);
+ animation: floatLeft 8s ease-in-out infinite;
+ z-index: -1;
+}
+
+.hero::after {
+ content: '';
+ position: absolute;
+ top: 30%;
+ right: -100px;
+ width: 350px;
+ height: 350px;
+ background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
+ border-radius: 50%;
+ filter: blur(60px);
+ animation: floatRight 10s ease-in-out infinite;
+ z-index: -1;
+}
+
+@keyframes floatLeft {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(30px, -30px) scale(1.1); }
+}
+
+@keyframes floatRight {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(-30px, 30px) scale(1.1); }
+}
\ No newline at end of file
diff --git a/Homepage_Modal.css b/Homepage_Modal.css
new file mode 100644
index 0000000..7050e93
--- /dev/null
+++ b/Homepage_Modal.css
@@ -0,0 +1,177 @@
+/* Logout Confirmation Modal */
+.logout-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.85);
+ backdrop-filter: blur(12px);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.logout-overlay.active { display: flex; opacity: 1; }
+
+.logout-modal {
+ background: linear-gradient(145deg, rgba(30, 0, 50, 0.98), rgba(45, 0, 70, 0.98));
+ backdrop-filter: blur(30px);
+ border: 3px solid rgba(255, 0, 102, 0.5);
+ border-radius: 28px;
+ padding: 50px 45px 40px;
+ max-width: 440px;
+ width: 90%;
+ text-align: center;
+ box-shadow:
+ 0 40px 100px rgba(0, 0, 0, 0.8),
+ 0 0 80px rgba(255, 0, 102, 0.4),
+ inset 0 2px 60px rgba(255, 0, 102, 0.08);
+ animation: modalSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes modalSlideUp {
+ from { opacity: 0; transform: translateY(50px) scale(0.9); }
+ to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.logout-icon {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 25px;
+ background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(204, 0, 51, 0.2));
+ border: 3px solid rgba(255, 0, 102, 0.6);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow:
+ 0 0 30px rgba(255, 0, 102, 0.4),
+ inset 0 0 20px rgba(255, 0, 102, 0.1);
+ animation: iconPulse 2s ease-in-out infinite;
+}
+
+@keyframes iconPulse {
+ 0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 0, 102, 0.4); }
+ 50% { transform: scale(1.05); box-shadow: 0 0 45px rgba(255, 0, 102, 0.6); }
+}
+
+.logout-icon svg {
+ width: 40px;
+ height: 40px;
+ color: #ff0066;
+ filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.6));
+}
+
+.logout-title {
+ font-size: 28px;
+ font-weight: 900;
+ font-family: 'Orbitron', sans-serif;
+ background: linear-gradient(135deg, #ff0066 0%, #ff0088 50%, #ff0066 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 15px;
+ letter-spacing: 2px;
+ filter: drop-shadow(0 0 20px rgba(255, 0, 102, 0.5));
+}
+
+.logout-message {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 16px;
+ margin-bottom: 35px;
+ line-height: 1.6;
+ font-family: 'Exo 2', sans-serif;
+}
+
+.logout-buttons {
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+}
+
+/* Logout Success Modal */
+.logout-success-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.9);
+ backdrop-filter: blur(15px);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.logout-success-overlay.active { display: flex; opacity: 1; }
+
+.logout-success-modal {
+ background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(35, 0, 60, 0.98));
+ backdrop-filter: blur(30px);
+ border: 3px solid rgba(0, 255, 136, 0.5);
+ border-radius: 28px;
+ padding: 50px 45px;
+ max-width: 400px;
+ width: 90%;
+ text-align: center;
+ box-shadow:
+ 0 40px 100px rgba(0, 0, 0, 0.8),
+ 0 0 80px rgba(0, 255, 136, 0.4),
+ inset 0 2px 60px rgba(0, 255, 136, 0.08);
+ animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes successBounce {
+ 0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
+ 50% { transform: scale(1.1) rotate(5deg); }
+ 100% { opacity: 1; transform: scale(1) rotate(0deg); }
+}
+
+.success-icon {
+ width: 90px;
+ height: 90px;
+ margin: 0 auto 25px;
+ background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.2));
+ border: 3px solid rgba(0, 255, 136, 0.6);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow:
+ 0 0 40px rgba(0, 255, 136, 0.5),
+ inset 0 0 25px rgba(0, 255, 136, 0.1);
+ animation: successIconPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes successIconPulse {
+ 0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(0, 255, 136, 0.5); }
+ 50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(0, 255, 136, 0.7); }
+}
+
+.success-icon svg {
+ width: 50px;
+ height: 50px;
+ color: #00ff88;
+ filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
+}
+
+.success-title {
+ font-size: 26px;
+ font-weight: 900;
+ font-family: 'Orbitron', sans-serif;
+ background: linear-gradient(135deg, #00ff88 0%, #00cc66 50%, #00ff88 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 12px;
+ letter-spacing: 2px;
+ filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.5));
+}
+
+.success-message {
+ color: rgba(255, 255, 255, 0.85);
+ font-size: 15px;
+ line-height: 1.6;
+ font-family: 'Exo 2', sans-serif;
+}
\ No newline at end of file