diff --git a/2048.js b/2048.js
index 589f60c..5b858c8 100644
--- a/2048.js
+++ b/2048.js
@@ -14,7 +14,7 @@ let mergesInCurrentMove = 0;
Audio Setup
------------------------ */
const audio = {
- bg: new Audio("Bgmusic.mp3"),
+ bg: new Audio("Background_Music.mp3"),
pop: new Audio("Pop.mp3"),
merge: new Audio("Merge.mp3")
};
diff --git a/Bgmusic.mp3 b/Background_Music.mp3
similarity index 100%
rename from Bgmusic.mp3
rename to Background_Music.mp3
diff --git a/Homepage.css b/Homepage.css
index 386cf74..03dc6e0 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap');
+
* {
margin: 0;
padding: 0;
@@ -5,318 +7,594 @@
}
body {
- font-family: 'Arial', sans-serif;
+ font-family: 'Exo 2', sans-serif;
background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
color: #fff;
overflow-x: hidden;
min-height: 100vh;
position: relative;
+ display: flex;
+ flex-direction: column;
}
-/* Neon Particles - MATCHING LOGIN/REGISTER */
+/* Animated Background Grid */
+body::before {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ linear-gradient(rgba(0, 234, 255, 0.04) 2px, transparent 2px),
+ linear-gradient(90deg, rgba(255, 0, 255, 0.04) 2px, transparent 2px);
+ background-size: 60px 60px;
+ animation: gridMove 25s linear infinite;
+ z-index: 1;
+ pointer-events: none;
+}
+
+@keyframes gridMove {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(60px, 60px);
+ }
+}
+
+/* Floating Orbs */
+.orb {
+ position: fixed;
+ border-radius: 50%;
+ filter: blur(80px);
+ opacity: 0.3;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.orb-1 {
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, #00eaff, transparent);
+ top: 10%;
+ left: 5%;
+ animation: float1 15s ease-in-out infinite;
+}
+
+.orb-2 {
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, #ff00ff, transparent);
+ top: 50%;
+ right: 10%;
+ animation: float2 18s ease-in-out infinite;
+}
+
+.orb-3 {
+ width: 350px;
+ height: 350px;
+ background: radial-gradient(circle, #ffd700, transparent);
+ bottom: 10%;
+ left: 50%;
+ animation: float3 20s ease-in-out infinite;
+}
+
+@keyframes float1 {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(50px, -80px) scale(1.1);
+ }
+ 66% {
+ transform: translate(-30px, 50px) scale(0.9);
+ }
+}
+
+@keyframes float2 {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(-60px, 70px) scale(1.15);
+ }
+ 66% {
+ transform: translate(40px, -40px) scale(0.95);
+ }
+}
+
+@keyframes float3 {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(80px, -60px) scale(1.2);
+ }
+}
+
+/* Neon Particles */
#particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
- z-index: 1;
+ z-index: 2;
pointer-events: none;
}
.particle {
position: absolute;
- width: 5px;
- height: 5px;
+ width: 8px;
+ height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #00ffff, #0099ff);
- box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
+ box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
pointer-events: none;
+ animation: particleFloat 10s ease-in-out infinite;
}
-/* Header - MATCHING LOGIN/REGISTER THEME */
+@keyframes particleFloat {
+ 0%, 100% {
+ transform: translateY(0) translateX(0) scale(1) rotate(0deg);
+ opacity: 0.7;
+ }
+ 25% {
+ transform: translateY(-40px) translateX(20px) scale(1.3) rotate(90deg);
+ opacity: 1;
+ }
+ 50% {
+ transform: translateY(-20px) translateX(-15px) scale(0.9) rotate(180deg);
+ opacity: 0.8;
+ }
+ 75% {
+ transform: translateY(10px) translateX(30px) scale(1.1) rotate(270deg);
+ opacity: 0.9;
+ }
+}
+
+/* Header */
header {
position: relative;
z-index: 10;
- padding: 20px 40px;
+ padding: 25px 50px;
display: flex;
justify-content: space-between;
align-items: center;
- background: rgba(20, 0, 40, 0.65);
- backdrop-filter: blur(10px);
- border-bottom: 2px solid rgba(0, 234, 255, 0.3);
+ background: rgba(20, 0, 40, 0.75);
+ backdrop-filter: blur(20px);
+ border-bottom: 3px solid rgba(0, 234, 255, 0.5);
+ box-shadow: 0 4px 40px rgba(0, 234, 255, 0.25);
}
.logo {
- font-size: 28px;
+ font-size: 42px;
font-weight: 900;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ 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: 3px;
+ letter-spacing: 6px;
text-transform: uppercase;
+ animation: gradientShift 4s ease infinite;
+ filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7));
+ cursor: pointer;
+ transition: transform 0.3s ease;
}
-.nav-buttons {
- display: flex;
- gap: 15px;
+.logo:hover {
+ transform: scale(1.05);
+}
+
+@keyframes gradientShift {
+ 0%, 100% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
}
.btn {
- padding: 12px 28px;
+ padding: 14px 35px;
border: none;
- border-radius: 12px;
+ border-radius: 15px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
- transition: all 0.3s ease;
+ 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: 2px;
+ letter-spacing: 2.5px;
+ font-family: 'Orbitron', sans-serif;
+ position: relative;
+ overflow: hidden;
}
-.btn-secondary {
- background: rgba(255, 255, 255, 0.08);
- color: #fff;
- border: 2px solid rgba(0, 175, 255, 0.3);
+.btn::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.25);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
}
-.btn-secondary:hover {
- background: rgba(255, 255, 255, 0.15);
- border-color: #00eaff;
- box-shadow: 0 0 20px rgba(0, 234, 255, 0.4);
- transform: translateY(-2px);
+.btn:hover::before {
+ width: 350px;
+ height: 350px;
}
.btn-primary {
- background: linear-gradient(90deg, #00eaff, #ff00ff);
+ background: linear-gradient(135deg, #00eaff, #ff00ff);
color: #fff;
font-weight: 900;
- box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
+ box-shadow: 0 6px 35px rgba(0, 217, 255, 0.6);
+ position: relative;
+ z-index: 1;
}
.btn-primary:hover {
- box-shadow: 0 8px 35px rgba(0, 217, 255, 0.7);
- transform: translateY(-3px);
+ box-shadow: 0 12px 50px rgba(0, 217, 255, 0.9), 0 0 35px rgba(255, 0, 255, 0.7);
+ transform: translateY(-4px) scale(1.08);
}
-/* Hero Section - IMPROVED TITLE */
+/* Hero Section */
.hero {
position: relative;
z-index: 10;
text-align: center;
- padding: 100px 20px 80px;
- max-width: 1000px;
+ padding: 80px 20px 60px;
+ max-width: 1200px;
margin: 0 auto;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+}
+
+/* Title Wrapper with Rings */
+.title-wrapper {
+ position: relative;
+ display: inline-block;
+ margin-bottom: 35px;
}
.hero-title {
- font-size: 120px;
+ font-size: 160px;
font-weight: 900;
- margin-bottom: 15px;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ 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: 12px;
+ letter-spacing: 20px;
text-transform: uppercase;
- font-family: 'Arial Black', 'Arial Bold', sans-serif;
- text-shadow: 0 0 80px rgba(0, 234, 255, 0.4);
- filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.6));
- animation: titleGlow 3s ease-in-out infinite alternate;
- line-height: 1.1;
+ animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
+ line-height: 1;
+ position: relative;
+ z-index: 2;
+}
+
+.hero-title::before {
+ 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(30px);
+ opacity: 0.6;
+ z-index: -1;
+ animation: titleBlur 3s ease-in-out infinite alternate;
+}
+
+/* Rings Around Title */
+.title-rings {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.ring {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border-radius: 50%;
+ border: 2px solid;
+ transform: translate(-50%, -50%);
+ opacity: 0.3;
+}
+
+.ring-1 {
+ width: 120%;
+ height: 120%;
+ border-color: #00eaff;
+ animation: ringPulse 4s ease-in-out infinite;
+}
+
+.ring-2 {
+ width: 140%;
+ height: 140%;
+ border-color: #ff00ff;
+ animation: ringPulse 4s ease-in-out infinite 0.5s;
+}
+
+.ring-3 {
+ width: 160%;
+ height: 160%;
+ border-color: #ffd700;
+ animation: ringPulse 4s ease-in-out infinite 1s;
+}
+
+@keyframes ringPulse {
+ 0%, 100% {
+ transform: translate(-50%, -50%) scale(1);
+ opacity: 0.3;
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(1.1);
+ opacity: 0.6;
+ }
+}
+
+@keyframes titleAnimation {
+ 0%, 100% {
+ background-position: 0% 50%;
+ transform: scale(1);
+ }
+ 50% {
+ background-position: 100% 50%;
+ transform: scale(1.03);
+ }
}
@keyframes titleGlow {
0% {
- filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6))
- drop-shadow(0 0 40px rgba(0, 234, 255, 0.4));
+ filter: drop-shadow(0 0 30px rgba(0, 234, 255, 0.8))
+ drop-shadow(0 0 60px rgba(0, 234, 255, 0.6));
}
100% {
- filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.8))
- drop-shadow(0 0 60px rgba(255, 0, 255, 0.5));
+ filter: drop-shadow(0 0 45px rgba(255, 0, 255, 1))
+ drop-shadow(0 0 90px rgba(255, 0, 255, 0.7));
}
}
-.hero-subtitle {
- font-size: 20px;
- color: rgba(255, 255, 255, 0.7);
- margin-bottom: 45px;
- font-weight: 400;
- letter-spacing: 4px;
- text-transform: uppercase;
+@keyframes titleBlur {
+ 0% {
+ opacity: 0.4;
+ }
+ 100% {
+ opacity: 0.8;
+ }
}
-.cta-buttons {
+/* Subtitle with Word Animation */
+.hero-subtitle {
+ font-size: 28px;
+ color: rgba(255, 255, 255, 0.85);
+ margin-bottom: 60px;
+ font-weight: 500;
+ letter-spacing: 7px;
+ text-transform: uppercase;
+ font-family: 'Rajdhani', sans-serif;
display: flex;
- gap: 20px;
+ gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
+.subtitle-word {
+ display: inline-block;
+ animation: wordFloat 3s ease-in-out infinite;
+}
+
+.subtitle-word:nth-child(1) { animation-delay: 0s; }
+.subtitle-word:nth-child(2) { animation-delay: 0.2s; }
+.subtitle-word:nth-child(3) { animation-delay: 0.4s; }
+.subtitle-word:nth-child(4) { animation-delay: 0.6s; }
+.subtitle-word:nth-child(5) {
+ animation-delay: 0.8s;
+ background: linear-gradient(135deg, #ffd700, #ffaa00);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-weight: 700;
+}
+
+@keyframes wordFloat {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-8px);
+ }
+}
+
+/* CTA Buttons */
+.cta-buttons {
+ display: flex;
+ gap: 30px;
+ justify-content: center;
+ flex-wrap: wrap;
+ animation: buttonsSlideUp 1.2s ease-out;
+ margin-bottom: 80px;
+}
+
+@keyframes buttonsSlideUp {
+ from {
+ opacity: 0;
+ transform: translateY(40px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
.btn-cta {
- padding: 16px 40px;
- font-size: 18px;
- border-radius: 12px;
+ padding: 20px 50px;
+ font-size: 20px;
+ border-radius: 18px;
font-weight: 900;
text-transform: uppercase;
- letter-spacing: 2px;
+ 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);
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.btn-icon {
+ font-size: 24px;
+ transition: transform 0.3s ease;
+}
+
+.btn-cta:hover .btn-icon {
+ transform: scale(1.3) rotate(15deg);
+}
+
+.btn-cta::after {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+ transform: rotate(45deg);
+ animation: buttonShine 4s infinite;
+}
+
+@keyframes buttonShine {
+ 0% {
+ transform: translateX(-100%) translateY(-100%) rotate(45deg);
+ }
+ 100% {
+ transform: translateX(100%) translateY(100%) rotate(45deg);
+ }
}
.btn-play {
- background: linear-gradient(90deg, #ff00ff, #ff0066);
- box-shadow: 0 5px 30px rgba(255, 0, 255, 0.5);
+ background: linear-gradient(135deg, #ff00ff, #ff0066);
+ box-shadow: 0 8px 40px rgba(255, 0, 255, 0.7);
color: #fff;
}
.btn-play:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 45px rgba(255, 0, 255, 0.8);
+ transform: translateY(-6px) scale(1.1);
+ box-shadow: 0 15px 60px rgba(255, 0, 255, 1), 0 0 50px rgba(255, 0, 102, 0.8);
}
.btn-leaderboard {
- background: linear-gradient(90deg, #ffd700, #ffaa00);
+ background: linear-gradient(135deg, #ffd700, #ffaa00);
color: #0c001a;
- box-shadow: 0 5px 30px rgba(255, 215, 0, 0.5);
+ box-shadow: 0 8px 40px rgba(255, 215, 0, 0.7);
}
.btn-leaderboard:hover {
- transform: translateY(-3px);
- box-shadow: 0 8px 45px rgba(255, 215, 0, 0.8);
+ transform: translateY(-6px) scale(1.1);
+ box-shadow: 0 15px 60px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 170, 0, 0.8);
}
-/* Section Title - MATCHING THEME */
-.section-title {
- position: relative;
- z-index: 10;
+/* Stats Container */
+.stats-container {
+ display: flex;
+ gap: 40px;
+ justify-content: center;
+ flex-wrap: wrap;
+ animation: statsSlideUp 1.5s ease-out;
+}
+
+@keyframes statsSlideUp {
+ from {
+ opacity: 0;
+ transform: translateY(50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.stat-card {
+ background: rgba(30, 0, 50, 0.6);
+ border: 2px solid rgba(0, 234, 255, 0.4);
+ border-radius: 20px;
+ padding: 25px 40px;
text-align: center;
- font-size: 36px;
- margin-bottom: 50px;
- background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ backdrop-filter: blur(15px);
+ min-width: 150px;
+ position: relative;
+ overflow: hidden;
+}
+
+.stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.2), transparent);
+ transition: left 0.6s ease;
+}
+
+.stat-card:hover::before {
+ left: 100%;
+}
+
+.stat-card:hover {
+ transform: translateY(-10px) scale(1.05);
+ border-color: #00eaff;
+ box-shadow: 0 15px 45px rgba(0, 234, 255, 0.5);
+ background: rgba(30, 0, 50, 0.8);
+}
+
+.stat-number {
+ font-size: 48px;
+ font-weight: 900;
+ font-family: 'Orbitron', sans-serif;
+ background: linear-gradient(135deg, #00eaff, #ff00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
- text-transform: uppercase;
- letter-spacing: 3px;
- font-weight: 900;
+ margin-bottom: 10px;
+ line-height: 1;
}
-/* Features Section */
-.features {
- position: relative;
- z-index: 10;
- max-width: 1200px;
- margin: 80px auto;
- padding: 0 40px;
-}
-
-.features-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 25px;
-}
-
-.feature-card {
- background: rgba(30, 0, 50, 0.5);
- border: 2px solid rgba(0, 234, 255, 0.25);
- border-radius: 20px;
- padding: 35px 25px;
- text-align: center;
- transition: all 0.3s ease;
- backdrop-filter: blur(10px);
-}
-
-.feature-card:hover {
- transform: translateY(-8px);
- border-color: #00eaff;
- box-shadow: 0 10px 35px rgba(0, 234, 255, 0.4);
- background: rgba(30, 0, 50, 0.7);
-}
-
-.feature-icon {
- font-size: 50px;
- margin-bottom: 18px;
- filter: drop-shadow(0 0 15px currentColor);
-}
-
-.feature-card h3 {
- font-size: 20px;
- margin-bottom: 12px;
- font-weight: 800;
- color: #00eaff;
- text-transform: uppercase;
- letter-spacing: 1px;
-}
-
-.feature-card p {
- font-size: 15px;
+.stat-label {
+ font-size: 14px;
color: rgba(255, 255, 255, 0.7);
- line-height: 1.6;
-}
-
-/* How to Play Section */
-.how-to-play {
- position: relative;
- z-index: 10;
- max-width: 1200px;
- margin: 80px auto;
- padding: 0 40px;
-}
-
-.steps {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 25px;
-}
-
-.step {
- background: rgba(30, 0, 50, 0.5);
- border: 2px solid rgba(0, 234, 255, 0.25);
- border-radius: 20px;
- padding: 35px 25px;
- text-align: center;
- transition: all 0.3s ease;
- backdrop-filter: blur(10px);
-}
-
-.step:hover {
- transform: translateY(-8px);
- border-color: #00eaff;
- box-shadow: 0 10px 35px rgba(0, 234, 255, 0.4);
-}
-
-.step-number {
- width: 60px;
- height: 60px;
- margin: 0 auto 20px;
- border-radius: 50%;
- background: linear-gradient(135deg, #00eaff, #ff00ff);
- color: #fff;
- font-size: 28px;
- font-weight: 900;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 0 25px rgba(0, 234, 255, 0.6);
-}
-
-.step h3 {
- font-size: 20px;
- margin-bottom: 12px;
- color: #00eaff;
text-transform: uppercase;
- letter-spacing: 1px;
- font-weight: 800;
-}
-
-.step p {
- font-size: 15px;
- color: rgba(255, 255, 255, 0.7);
- line-height: 1.6;
+ letter-spacing: 2px;
+ font-family: 'Rajdhani', sans-serif;
+ font-weight: 600;
}
/* Footer */
@@ -325,38 +603,104 @@ footer {
z-index: 10;
text-align: center;
padding: 40px 20px;
- margin-top: 100px;
- background: rgba(20, 0, 40, 0.65);
- backdrop-filter: blur(10px);
- border-top: 2px solid rgba(0, 234, 255, 0.3);
+ margin-top: auto;
+ background: rgba(20, 0, 40, 0.75);
+ backdrop-filter: blur(20px);
+ border-top: 3px solid rgba(0, 234, 255, 0.5);
+ box-shadow: 0 -4px 40px rgba(0, 234, 255, 0.25);
}
footer p {
- color: rgba(255, 255, 255, 0.6);
+ color: rgba(255, 255, 255, 0.7);
font-size: 15px;
+ font-family: 'Exo 2', sans-serif;
+ letter-spacing: 2px;
}
/* Responsive */
+@media (max-width: 1200px) {
+ .hero-title {
+ font-size: 130px;
+ letter-spacing: 16px;
+ }
+}
+
@media (max-width: 1024px) {
.hero-title {
- font-size: 90px;
- letter-spacing: 8px;
+ font-size: 110px;
+ letter-spacing: 12px;
+ }
+
+ .hero-subtitle {
+ font-size: 24px;
+ letter-spacing: 5px;
+ }
+
+ .stat-card {
+ min-width: 130px;
+ padding: 20px 30px;
+ }
+
+ .stat-number {
+ font-size: 40px;
}
}
@media (max-width: 768px) {
header {
- padding: 15px 20px;
- flex-direction: column;
- gap: 15px;
+ padding: 20px 30px;
}
.logo {
- font-size: 24px;
+ font-size: 32px;
+ letter-spacing: 4px;
}
.hero {
- padding: 70px 20px 60px;
+ padding: 60px 20px 40px;
+ }
+
+ .hero-title {
+ font-size: 85px;
+ letter-spacing: 10px;
+ }
+
+ .hero-subtitle {
+ font-size: 20px;
+ letter-spacing: 4px;
+ margin-bottom: 50px;
+ }
+
+ .btn-cta {
+ padding: 18px 40px;
+ font-size: 18px;
+ }
+
+ .stats-container {
+ gap: 25px;
+ }
+
+ .stat-card {
+ min-width: 120px;
+ padding: 18px 25px;
+ }
+
+ .stat-number {
+ font-size: 36px;
+ }
+}
+
+@media (max-width: 480px) {
+ header {
+ padding: 18px 20px;
+ }
+
+ .logo {
+ font-size: 28px;
+ }
+
+ .hero {
+ padding: 50px 15px 35px;
}
.hero-title {
@@ -366,71 +710,68 @@ footer p {
.hero-subtitle {
font-size: 16px;
- letter-spacing: 2px;
+ letter-spacing: 3px;
+ margin-bottom: 40px;
+ gap: 8px;
}
.btn-cta {
- padding: 14px 32px;
- font-size: 16px;
+ padding: 16px 35px;
+ font-size: 17px;
+ letter-spacing: 2px;
}
- .features,
- .how-to-play {
- padding: 0 20px;
- margin: 60px auto;
+ .btn-icon {
+ font-size: 20px;
}
- .section-title {
- font-size: 28px;
- margin-bottom: 35px;
+ .cta-buttons {
+ gap: 20px;
+ margin-bottom: 60px;
}
- .features-grid,
- .steps {
- grid-template-columns: 1fr;
+ .stats-container {
gap: 20px;
}
-}
-@media (max-width: 480px) {
- .hero {
- padding: 50px 15px 40px;
+ .stat-card {
+ min-width: 100px;
+ padding: 15px 20px;
}
- .hero-title {
- font-size: 48px;
- letter-spacing: 4px;
+ .stat-number {
+ font-size: 32px;
}
- .hero-subtitle {
- font-size: 14px;
- letter-spacing: 2px;
- margin-bottom: 35px;
- }
-
- .btn-cta {
- padding: 13px 28px;
- font-size: 15px;
- }
-
- .section-title {
- font-size: 24px;
- letter-spacing: 2px;
- }
-
- .feature-card,
- .step {
- padding: 28px 20px;
- }
-
- .feature-icon {
- font-size: 45px;
+ .stat-label {
+ font-size: 12px;
}
}
@media (max-width: 360px) {
.hero-title {
- font-size: 40px;
- letter-spacing: 3px;
+ font-size: 52px;
+ letter-spacing: 5px;
+ }
+
+ .hero-subtitle {
+ font-size: 14px;
+ letter-spacing: 2px;
+ }
+
+ .btn-cta {
+ padding: 14px 30px;
+ font-size: 16px;
+ }
+
+ .stat-number {
+ font-size: 28px;
+ }
+}
+
+/* Center All Content */
+@media (min-height: 800px) {
+ .hero {
+ min-height: calc(100vh - 250px);
}
}
\ No newline at end of file
diff --git a/Homepage.html b/Homepage.html
index 8525e36..77bfb9d 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -1,46 +1,34 @@
-
-
-
2048
+
+
+
Homepage - 2048
+
-
-
+
+
-
-
-
- New Game
- Undo
-
-
-
-
-
-
How to Play
-
Use arrow keys (↑ ↓ ← →) or swipe to move tiles. When two tiles with the same number touch, they merge into one! Join the numbers to reach the 2048 tile !
-
+
+
-
-
-
Game Over!
-
Your score: 0
-
Try Again
-
+
+
+ 2048
+ Join the tiles, reach 2048
+
+
+
+
+
\ No newline at end of file
diff --git a/Homepage.js b/Homepage.js
index e69de29..49642cf 100644
--- a/Homepage.js
+++ b/Homepage.js
@@ -0,0 +1,233 @@
+(function() {
+ 'use strict';
+
+ // ==================== DOM ELEMENTS ====================
+ const elements = {
+ logo: null,
+ loginBtn: null,
+ playBtn: null,
+ leaderboardBtn: null,
+ heroTitle: null,
+ heroSubtitle: null
+ };
+
+ // ==================== INITIALIZE ====================
+ function init() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initAll);
+ } else {
+ initAll();
+ }
+ }
+
+ function initAll() {
+ try {
+ // Cache DOM elements
+ cacheElements();
+
+ // Validate elements
+ if (!validateElements()) {
+ console.error('Some required elements are missing');
+ return;
+ }
+
+ // Setup event listeners
+ setupEventListeners();
+
+ // Initialize smooth scroll
+ initSmoothScroll();
+
+ console.log('✅ Homepage initialized successfully');
+ } catch (error) {
+ console.error('Error initializing homepage:', error);
+ }
+ }
+
+ // ==================== CACHE ELEMENTS ====================
+ function cacheElements() {
+ elements.logo = document.querySelector('.logo');
+ elements.loginBtn = document.querySelector('a[href="Login.html"]');
+ elements.playBtn = document.querySelector('a[href="2048.html"]');
+ elements.leaderboardBtn = document.querySelector('a[href="leaderboard.html"]');
+ elements.heroTitle = document.querySelector('.hero-title');
+ elements.heroSubtitle = document.querySelector('.hero-subtitle');
+ }
+
+ // ==================== VALIDATE ELEMENTS ====================
+ function validateElements() {
+ const requiredElements = ['logo', 'playBtn'];
+ const missingElements = requiredElements.filter(key => !elements[key]);
+
+ if (missingElements.length > 0) {
+ console.warn('Missing elements:', missingElements);
+ return false;
+ }
+
+ return true;
+ }
+
+ // ==================== EVENT LISTENERS ====================
+ function setupEventListeners() {
+ // Logo click - reload page
+ if (elements.logo) {
+ elements.logo.addEventListener('click', handleLogoClick);
+ }
+
+ // Login button
+ if (elements.loginBtn) {
+ elements.loginBtn.addEventListener('click', handleLoginClick);
+ }
+
+ // Play button
+ if (elements.playBtn) {
+ elements.playBtn.addEventListener('click', handlePlayClick);
+ }
+
+ // Leaderboard button
+ if (elements.leaderboardBtn) {
+ elements.leaderboardBtn.addEventListener('click', handleLeaderboardClick);
+ }
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', handleKeyPress);
+
+ // Window events
+ window.addEventListener('resize', handleResize);
+ window.addEventListener('beforeunload', handleBeforeUnload);
+ }
+
+ // ==================== EVENT HANDLERS ====================
+ function handleLogoClick(e) {
+ e.preventDefault();
+ window.location.href = 'index.html';
+ }
+
+ function handleLoginClick(e) {
+ // Allow default behavior (navigate to Login.html)
+ console.log('Navigating to Login page...');
+ }
+
+ function handlePlayClick(e) {
+ // Allow default behavior (navigate to 2048.html)
+ console.log('Starting game...');
+ }
+
+ function handleLeaderboardClick(e) {
+ // Allow default behavior (navigate to leaderboard.html)
+ console.log('Opening leaderboard...');
+ }
+
+ function handleKeyPress(e) {
+ // Press 'P' to play
+ if (e.key === 'p' || e.key === 'P') {
+ if (elements.playBtn) {
+ elements.playBtn.click();
+ }
+ }
+
+ // Press 'L' to login
+ if (e.key === 'l' || e.key === 'L') {
+ if (elements.loginBtn) {
+ elements.loginBtn.click();
+ }
+ }
+
+ // Press 'B' for leaderboard
+ if (e.key === 'b' || e.key === 'B') {
+ if (elements.leaderboardBtn) {
+ elements.leaderboardBtn.click();
+ }
+ }
+ }
+
+ function handleResize() {
+ // Handle responsive behavior if needed
+ const width = window.innerWidth;
+
+ if (width < 768) {
+ console.log('Mobile view');
+ } else if (width < 1024) {
+ console.log('Tablet view');
+ } else {
+ console.log('Desktop view');
+ }
+ }
+
+ function handleBeforeUnload(e) {
+ // Cleanup before page unload
+ console.log('Page unloading...');
+ }
+
+ // ==================== SMOOTH SCROLL ====================
+ function initSmoothScroll() {
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ const href = this.getAttribute('href');
+ if (href === '#' || !href) return;
+
+ e.preventDefault();
+ const target = document.querySelector(href);
+
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+ }
+
+ // ==================== UTILITY FUNCTIONS ====================
+ function checkBrowserSupport() {
+ const features = {
+ localStorage: typeof(Storage) !== 'undefined',
+ flexbox: CSS.supports('display', 'flex'),
+ grid: CSS.supports('display', 'grid')
+ };
+
+ console.log('Browser support:', features);
+ return features;
+ }
+
+ function isMobile() {
+ return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+ }
+
+ // ==================== PUBLIC API ====================
+ window.Homepage = {
+ init: initAll,
+ isMobile: isMobile,
+ checkSupport: checkBrowserSupport
+ };
+
+ // ==================== CLEANUP ====================
+ window.cleanupHomepage = function() {
+ // Remove event listeners
+ if (elements.logo) {
+ elements.logo.removeEventListener('click', handleLogoClick);
+ }
+
+ if (elements.loginBtn) {
+ elements.loginBtn.removeEventListener('click', handleLoginClick);
+ }
+
+ if (elements.playBtn) {
+ elements.playBtn.removeEventListener('click', handlePlayClick);
+ }
+
+ if (elements.leaderboardBtn) {
+ elements.leaderboardBtn.removeEventListener('click', handleLeaderboardClick);
+ }
+
+ document.removeEventListener('keydown', handleKeyPress);
+ window.removeEventListener('resize', handleResize);
+ window.removeEventListener('beforeunload', handleBeforeUnload);
+
+ console.log('Homepage cleaned up');
+ };
+
+ // Start initialization
+ init();
+
+})();
\ No newline at end of file