Homepage js
This commit is contained in:
Michelle Aquilera
commit
e4567a39a4
235
2048.html
235
2048.html
@ -1,25 +1,238 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>2048</title>
|
<title>2048</title>
|
||||||
<link rel="stylesheet" href="2048.css">
|
<link rel="stylesheet" href="2048.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- ADD: ambient particle / neon background layer -->
|
<!-- Background Effects -->
|
||||||
<div class="particles" aria-hidden="true"></div>
|
<div class="particles" aria-hidden="true"></div>
|
||||||
<div class="starfield"></div>
|
<div class="starfield" aria-hidden="true"></div>
|
||||||
<div class="cursor-light"></div>
|
<div class="cursor-light" aria-hidden="true"></div>
|
||||||
<h1>2048</h1>
|
|
||||||
<div id="top-menu">
|
<!-- SOUND CONTROLS - KIRI ATAS -->
|
||||||
<button class="btn" onclick="restartGame()">Restart</button>
|
<!-- SOUND CONTROL - KIRI ATAS -->
|
||||||
<button class="btn" onclick="goHome()">Home</button>
|
<div class="sound-control-container">
|
||||||
|
<!-- Main Sound Button -->
|
||||||
|
<button class="icon-btn btn-sound-main" id="btn-sound-main" title="Sound Settings">
|
||||||
|
<!-- Icon Full Sound (all ON) -->
|
||||||
|
<svg class="sound-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
|
||||||
|
</svg>
|
||||||
|
<!-- Icon Medium Sound (some muted) -->
|
||||||
|
<svg class="sound-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
||||||
|
</svg>
|
||||||
|
<!-- Icon Low Sound (mostly muted) -->
|
||||||
|
<svg class="sound-low" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
|
</svg>
|
||||||
|
<!-- Icon Muted (all OFF) -->
|
||||||
|
<svg class="sound-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
|
<line x1="23" y1="9" x2="17" y2="15"/>
|
||||||
|
<line x1="17" y1="9" x2="23" y2="15"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Volume Sliders Panel (Hidden by default) -->
|
||||||
|
<div class="volume-panel" id="volume-panel" style="display: none;">
|
||||||
|
<!-- Music Volume -->
|
||||||
|
<div class="volume-item">
|
||||||
|
<div class="volume-header">
|
||||||
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="volume-label">Music</span>
|
||||||
|
<span class="volume-value" id="vol-music-display">25%</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" class="volume-slider" id="vol-music" min="0" max="100" value="25">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<!-- Pop SFX Volume -->
|
||||||
<h2>Score: <span id="score">0</span></h2>
|
<div class="volume-item">
|
||||||
<div id="board">
|
<div class="volume-header">
|
||||||
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<path d="M8 12h8M12 8v8"/>
|
||||||
|
</svg>
|
||||||
|
<span class="volume-label">Pop SFX</span>
|
||||||
|
<span class="volume-value" id="vol-pop-display">90%</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" class="volume-slider" id="vol-pop" min="0" max="100" value="90">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Merge SFX Volume -->
|
||||||
|
<div class="volume-item">
|
||||||
|
<div class="volume-header">
|
||||||
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="volume-label">Merge SFX</span>
|
||||||
|
<span class="volume-value" id="vol-merge-display">100%</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" class="volume-slider" id="vol-merge" min="0" max="100" value="100">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Top Right Controls -->
|
||||||
|
<div class="top-controls">
|
||||||
|
<button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
||||||
|
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Game Container -->
|
||||||
|
<div class="game-container">
|
||||||
|
<!-- Header: Title + Scores -->
|
||||||
|
<div class="game-header">
|
||||||
|
<h1>2048</h1>
|
||||||
|
<div class="score-container">
|
||||||
|
<div class="score-box">
|
||||||
|
<div class="score-label">SCORE</div>
|
||||||
|
<div class="score-value" id="score">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="score-box">
|
||||||
|
<div class="score-label">HIGH SCORE</div>
|
||||||
|
<div class="score-value" id="best-score">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Game Board -->
|
||||||
|
<div id="board"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tutorial Modal -->
|
||||||
|
<div class="tutorial-overlay" id="tutorial-overlay" style="display: none;">
|
||||||
|
<div class="tutorial-modal">
|
||||||
|
<button class="modal-close" id="close-tutorial">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<h2 class="tutorial-title">How to Play</h2>
|
||||||
|
|
||||||
|
<div class="tutorial-content">
|
||||||
|
<!-- PC Controls - Hidden on Mobile -->
|
||||||
|
<div class="tutorial-section pc-controls">
|
||||||
|
<h3>🖥️ PC Controls</h3>
|
||||||
|
<div class="keys-container">
|
||||||
|
<!-- WASD Keys -->
|
||||||
|
<div class="keys-group">
|
||||||
|
<div class="keys-grid-wasd">
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">W</div>
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">A</div>
|
||||||
|
<div class="key-box">S</div>
|
||||||
|
<div class="key-box">D</div>
|
||||||
|
</div>
|
||||||
|
<p class="keys-label">WASD</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="keys-separator">or</div>
|
||||||
|
|
||||||
|
<!-- Arrow Keys -->
|
||||||
|
<div class="keys-group">
|
||||||
|
<div class="keys-grid-arrow">
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">↑</div>
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">←</div>
|
||||||
|
<div class="key-box">↓</div>
|
||||||
|
<div class="key-box">→</div>
|
||||||
|
</div>
|
||||||
|
<p class="keys-label">Arrow Keys</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Controls - Hidden on PC -->
|
||||||
|
<div class="tutorial-section mobile-controls">
|
||||||
|
<h3>📱 Mobile Controls</h3>
|
||||||
|
<div class="swipe-demo">
|
||||||
|
<div class="swipe-icon">👆</div>
|
||||||
|
<p>Swipe in any direction</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tutorial-section">
|
||||||
|
<h3>🎯 Objective</h3>
|
||||||
|
<p class="objective-text">Combine tiles with the same numbers to reach <strong>2048</strong>!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Game Over Modal -->
|
||||||
|
<div class="game-over-overlay" id="game-over-overlay" style="display: none;">
|
||||||
|
<div class="game-over-modal">
|
||||||
|
<!-- Close Button (X) -->
|
||||||
|
<button class="game-over-close" id="game-over-close">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="game-over-title">No More Moves!</div>
|
||||||
|
<div class="game-over-subtitle">Game Over</div>
|
||||||
|
|
||||||
|
<!-- Score Section -->
|
||||||
|
<div class="game-over-score">
|
||||||
|
<div class="game-over-score-label">Your Score</div>
|
||||||
|
<div class="game-over-score-value" id="final-score">0</div>
|
||||||
|
|
||||||
|
<!-- New High Score Badge - show if new record -->
|
||||||
|
<div class="new-high-score" id="new-high-score-badge" style="display: none;">
|
||||||
|
New High Score
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Best Score Display - show if NOT new record -->
|
||||||
|
<div class="best-score-display" id="best-score-display" style="display: none;">
|
||||||
|
<div class="best-score-label">High Score</div>
|
||||||
|
<div class="best-score-value" id="modal-best-score">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Buttons - ICON ONLY -->
|
||||||
|
<div class="game-over-buttons">
|
||||||
|
<!-- Restart Button -->
|
||||||
|
<button class="btn-game-icon btn-restart-game" id="btn-play-again" title="Restart Game">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Home Button -->
|
||||||
|
<button class="btn-game-icon btn-home-game" id="btn-home" title="Back to Home">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||||
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="2048.js"></script>
|
<script src="2048.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
66
Animation_Homepage.js
Normal file
66
Animation_Homepage.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
// Neon Particles Animation - Optimized for Academic Project
|
||||||
|
const particlesContainer = document.getElementById('particles');
|
||||||
|
const particleCount = 25; // Reduced for better performance
|
||||||
|
|
||||||
|
function createParticle() {
|
||||||
|
const particle = document.createElement('div');
|
||||||
|
particle.className = 'particle';
|
||||||
|
|
||||||
|
// Random position
|
||||||
|
particle.style.left = Math.random() * 100 + '%';
|
||||||
|
particle.style.top = Math.random() * 100 + '%';
|
||||||
|
|
||||||
|
// Random animation duration
|
||||||
|
const duration = 20 + Math.random() * 20;
|
||||||
|
particle.style.animationDuration = duration + 's';
|
||||||
|
|
||||||
|
// Random delay
|
||||||
|
particle.style.animationDelay = Math.random() * 10 + 's';
|
||||||
|
|
||||||
|
// Random size variation (smaller)
|
||||||
|
const size = 3 + Math.random() * 3;
|
||||||
|
particle.style.width = size + 'px';
|
||||||
|
particle.style.height = size + 'px';
|
||||||
|
|
||||||
|
// Random colors (neon theme)
|
||||||
|
const colors = [
|
||||||
|
'radial-gradient(circle, #00ffff, #0099ff)',
|
||||||
|
'radial-gradient(circle, #ff00ff, #cc00ff)',
|
||||||
|
'radial-gradient(circle, #00ff99, #00cc77)'
|
||||||
|
];
|
||||||
|
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
|
||||||
|
|
||||||
|
// Add floating animation
|
||||||
|
particle.style.animation = `floatParticle ${duration}s ease-in-out infinite`;
|
||||||
|
|
||||||
|
particlesContainer.appendChild(particle);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create particles
|
||||||
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
createParticle();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add CSS animation dynamically
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes floatParticle {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(0, 0) scale(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(15px, -25px) scale(1.1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-10px, -50px) scale(0.9);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translate(20px, -35px) scale(1.05);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
BIN
Bgmusic.mp3
Normal file
BIN
Bgmusic.mp3
Normal file
Binary file not shown.
436
Homepage.css
Normal file
436
Homepage.css
Normal file
@ -0,0 +1,436 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
|
||||||
|
color: #fff;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neon Particles - MATCHING LOGIN/REGISTER */
|
||||||
|
#particles {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, #00ffff, #0099ff);
|
||||||
|
box-shadow: 0 0 10px #00eaff, 0 0 25px #0088ff;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header - MATCHING LOGIN/REGISTER THEME */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 20px 40px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 900;
|
||||||
|
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 12px 28px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #fff;
|
||||||
|
border: 2px solid rgba(0, 175, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-primary {
|
||||||
|
background: linear-gradient(90deg, #00eaff, #ff00ff);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 900;
|
||||||
|
box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
box-shadow: 0 8px 35px rgba(0, 217, 255, 0.7);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section - IMPROVED TITLE */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 20px 80px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 120px;
|
||||||
|
font-weight: 900;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
letter-spacing: 12px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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));
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.8))
|
||||||
|
drop-shadow(0 0 60px rgba(255, 0, 255, 0.5));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
margin-bottom: 45px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta {
|
||||||
|
padding: 16px 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-play {
|
||||||
|
background: linear-gradient(90deg, #ff00ff, #ff0066);
|
||||||
|
box-shadow: 0 5px 30px rgba(255, 0, 255, 0.5);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-play:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 45px rgba(255, 0, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-leaderboard {
|
||||||
|
background: linear-gradient(90deg, #ffd700, #ffaa00);
|
||||||
|
color: #0c001a;
|
||||||
|
box-shadow: 0 5px 30px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-leaderboard:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 45px rgba(255, 215, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Title - MATCHING THEME */
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
position: relative;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 90px;
|
||||||
|
letter-spacing: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
header {
|
||||||
|
padding: 15px 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 70px 20px 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 64px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta {
|
||||||
|
padding: 14px 32px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features,
|
||||||
|
.how-to-play {
|
||||||
|
padding: 0 20px;
|
||||||
|
margin: 60px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-grid,
|
||||||
|
.steps {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero {
|
||||||
|
padding: 50px 15px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 48px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 360px) {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 40px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
103
Homepage.html
103
Homepage.html
@ -1,6 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<<<<<<< HEAD
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>2048</title>
|
<title>2048</title>
|
||||||
@ -42,5 +43,107 @@
|
|||||||
<button class="btn" id="tryAgainBtn">Try Again</button>
|
<button class="btn" id="tryAgainBtn">Try Again</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Homepage - 2048</title>
|
||||||
|
<link rel="stylesheet" href="Homepage.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Neon Particles Background -->
|
||||||
|
<div id="particles"></div>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="logo">2048</div>
|
||||||
|
<div class="nav-buttons">
|
||||||
|
<a href="Login.html" class="btn btn-secondary">Login</a>
|
||||||
|
<a href="Register.html" class="btn btn-primary">Register</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-title">2048</div>
|
||||||
|
<p class="hero-subtitle">Join the tiles, reach 2048</p>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="2048.html" class="btn btn-cta btn-play">Play Now</a>
|
||||||
|
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features -->
|
||||||
|
<section class="features">
|
||||||
|
<h2 class="section-title">Game Features</h2>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #00eaff;">🎮</div>
|
||||||
|
<h3>Responsive Controls</h3>
|
||||||
|
<p>Play using arrow keys or WASD controls with smooth tile animations and instant feedback</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #ff00ff;">✨</div>
|
||||||
|
<h3>Visual Effects</h3>
|
||||||
|
<p>Neon-themed interface with particle effects, combo animations, and dynamic color schemes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #00ff99;">🎵</div>
|
||||||
|
<h3>Sound System</h3>
|
||||||
|
<p>Background music and sound effects with individual volume controls for complete customization</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #ffd700;">🏆</div>
|
||||||
|
<h3>Leaderboard</h3>
|
||||||
|
<p>Track high scores and compete with other players in a global ranking system</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #ff6b6b;">👤</div>
|
||||||
|
<h3>User System</h3>
|
||||||
|
<p>Register and login to save your progress and maintain your score history</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="feature-icon" style="color: #a855f7;">📱</div>
|
||||||
|
<h3>Mobile Support</h3>
|
||||||
|
<p>Fully responsive design with touch swipe controls for mobile devices</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How to Play -->
|
||||||
|
<section class="how-to-play">
|
||||||
|
<h2 class="section-title">How to Play</h2>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3>Move Tiles</h3>
|
||||||
|
<p>Use arrow keys, WASD, or swipe to move tiles in any direction</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3>Merge Numbers</h3>
|
||||||
|
<p>When two tiles with the same number touch, they merge into one</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3>Reach 2048</h3>
|
||||||
|
<p>Keep merging tiles to reach the 2048 tile and win the game</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<p>© 2024 2048 NEON Game Project. Final Project Assignment.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="Animation_Homepage.js"></script>
|
||||||
|
>>>>>>> 373b957e42992f6947521c3439b9e8fe29b6f827
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
11
Login.css
11
Login.css
@ -168,14 +168,19 @@ input::placeholder {
|
|||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
|
background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
|
||||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
/* Border diubah menjadi lebih terang */
|
||||||
|
border: 2px solid rgba(0, 217, 255, 0.3);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 40px 30px;
|
padding: 40px 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
/* Box shadow ditambahkan efek neon (luar dan dalam) */
|
||||||
animation: slideIn 0.3s ease;
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 40px rgba(0, 217, 255, 0.3),
|
||||||
|
inset 0 0 30px rgba(0, 217, 255, 0.1);
|
||||||
|
/* Animasi digabungkan: slideIn untuk muncul, glowBorder untuk efek neon berkedip */
|
||||||
|
animation: slideIn 0.3s ease, glowBorder 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-icon {
|
.modal-icon {
|
||||||
|
|||||||
@ -9,10 +9,10 @@ export function showModal(type, title, message) {
|
|||||||
|
|
||||||
if (type === "success") {
|
if (type === "success") {
|
||||||
modalIcon.classList.add("success");
|
modalIcon.classList.add("success");
|
||||||
modalTitle.textContent = title || "Register Berhasil!";
|
modalTitle.textContent = title || "Register Successful!";
|
||||||
} else {
|
} else {
|
||||||
modalIcon.classList.add("error");
|
modalIcon.classList.add("error");
|
||||||
modalTitle.textContent = title || "Register Gagal!";
|
modalTitle.textContent = title || "Register Failed!";
|
||||||
}
|
}
|
||||||
|
|
||||||
modalMessage.textContent = message;
|
modalMessage.textContent = message;
|
||||||
|
|||||||
147
Register.css
147
Register.css
@ -158,14 +158,18 @@ input::placeholder {
|
|||||||
text-shadow: 0 0 10px #00ddff;
|
text-shadow: 0 0 10px #00ddff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal */
|
/* Modal - CENTERED VERSION */
|
||||||
.modal {
|
.modal {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 999;
|
z-index: 1000;
|
||||||
inset: 0;
|
left: 0;
|
||||||
background-color: rgba(0, 0, 0, 0.75);
|
top: 0;
|
||||||
backdrop-filter: blur(8px);
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal.show {
|
.modal.show {
|
||||||
@ -175,75 +179,124 @@ input::placeholder {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: rgba(20, 0, 40, 0.95);
|
background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
|
||||||
|
border: 2px solid rgba(0, 217, 255, 0.3);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
border: 2px solid rgba(0, 255, 255, 0.4);
|
padding: 40px 30px;
|
||||||
padding: 35px 25px;
|
text-align: center;
|
||||||
width: 90%;
|
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 40px rgba(0, 217, 255, 0.3),
|
||||||
|
inset 0 0 30px rgba(0, 217, 255, 0.1);
|
||||||
|
animation: slideIn 0.3s ease, glowBorder 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
box-shadow:
|
@keyframes glowBorder {
|
||||||
0 0 30px #00eaff,
|
0%, 100% {
|
||||||
0 0 60px #ff00ff;
|
border-color: rgba(0, 217, 255, 0.4);
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 40px rgba(0, 217, 255, 0.3),
|
||||||
|
inset 0 0 30px rgba(0, 217, 255, 0.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
border-color: rgba(255, 0, 255, 0.5);
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
|
||||||
|
0 0 50px rgba(255, 0, 255, 0.4),
|
||||||
|
inset 0 0 40px rgba(255, 0, 255, 0.15);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-icon {
|
.modal-icon {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
margin: 0 auto 15px;
|
margin: 0 auto 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 38px;
|
font-size: 40px;
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-icon.success {
|
.modal-icon.success {
|
||||||
background: linear-gradient(135deg, #00eaff, #00ff88);
|
background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
|
||||||
box-shadow: 0 0 25px #00ffcc;
|
box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-icon.success::before {
|
||||||
|
content: "✓";
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-icon.error {
|
.modal-icon.error {
|
||||||
background: linear-gradient(135deg, #ff0066, #ff00ff);
|
background: linear-gradient(135deg, #ff0080 0%, #ff00ff 100%);
|
||||||
box-shadow: 0 0 25px #ff00aa;
|
box-shadow: 0 0 30px rgba(255, 0, 128, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-icon.error::before {
|
||||||
|
content: "✕";
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content h2 {
|
.modal-content h2 {
|
||||||
font-size: 1.7rem;
|
color: #fff;
|
||||||
margin-bottom: 10px;
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
background: linear-gradient(90deg, #00eaff, #ff00ff);
|
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text; /* FIX: properti standar */
|
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content p {
|
.modal-content p {
|
||||||
color: rgba(240, 240, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
margin-bottom: 25px;
|
font-size: 1rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-btn {
|
.modal-btn {
|
||||||
padding: 12px 55px;
|
padding: 12px 50px;
|
||||||
background: linear-gradient(90deg, #00eaff, #ff00ff);
|
background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
color: #fff;
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 0 20px #00d9ff;
|
transition: all 0.3s ease;
|
||||||
transition: 0.3s ease;
|
box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-btn:hover {
|
.modal-btn:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 0 30px #00eaff;
|
box-shadow: 0 8px 35px rgba(0, 217, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateY(-50px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Autocomplete/Datalist Styling */
|
/* Autocomplete/Datalist Styling */
|
||||||
@ -251,7 +304,7 @@ input::-webkit-calendar-picker-indicator {
|
|||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling untuk browser autocomplete */
|
/* Browser autocomplete styling */
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
input:-webkit-autofill:hover,
|
input:-webkit-autofill:hover,
|
||||||
input:-webkit-autofill:focus {
|
input:-webkit-autofill:focus {
|
||||||
@ -265,7 +318,7 @@ input:-webkit-autofill:focus {
|
|||||||
border-color: #00d9ff;
|
border-color: #00d9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
|
/* Datalist dropdown styling - limited due to browser restrictions */
|
||||||
datalist {
|
datalist {
|
||||||
background-color: rgba(30, 0, 50, 0.95);
|
background-color: rgba(30, 0, 50, 0.95);
|
||||||
}
|
}
|
||||||
@ -276,12 +329,12 @@ option {
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Untuk Firefox */
|
/* For Firefox */
|
||||||
input::-moz-list-thumbnail {
|
input::-moz-list-thumbnail {
|
||||||
background-color: rgba(30, 0, 50, 0.95);
|
background-color: rgba(30, 0, 50, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom styling untuk dropdown suggestion */
|
/* Custom styling for dropdown suggestion */
|
||||||
input[list]::-webkit-list-button {
|
input[list]::-webkit-list-button {
|
||||||
color: #00d9ff;
|
color: #00d9ff;
|
||||||
}
|
}
|
||||||
@ -305,4 +358,18 @@ input[list]::-webkit-list-button {
|
|||||||
padding: 13px;
|
padding: 13px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -62,9 +62,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="Register.js"></script>
|
<script type="module" src="Register.js"></script>
|
||||||
<script src="Animation Register.js"></script>
|
<script src="Animation_Register.js"></script>
|
||||||
<script src="Modal.js"></script>
|
|
||||||
<script src="API Register.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
14
Register.js
14
Register.js
@ -14,13 +14,13 @@ document.getElementById("registerForm").addEventListener("submit", async functio
|
|||||||
|
|
||||||
// Validasi kosong
|
// Validasi kosong
|
||||||
if (!username || !password || !confirmPassword) {
|
if (!username || !password || !confirmPassword) {
|
||||||
showModal("error", "Register Gagal!", "Semua field wajib diisi.");
|
showModal("error", "Register Failed!", "All fields are required.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validasi password tidak sama
|
// Validasi password tidak sama
|
||||||
if (password !== confirmPassword) {
|
if (password !== confirmPassword) {
|
||||||
showModal("error", "Password Tidak Cocok!", "Password dan Confirm Password harus sama.");
|
showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
|
||||||
setInputError("password");
|
setInputError("password");
|
||||||
setInputError("confirmPassword");
|
setInputError("confirmPassword");
|
||||||
return;
|
return;
|
||||||
@ -29,7 +29,7 @@ document.getElementById("registerForm").addEventListener("submit", async functio
|
|||||||
// Button loading state
|
// Button loading state
|
||||||
const submitBtn = this.querySelector("button[type='submit']");
|
const submitBtn = this.querySelector("button[type='submit']");
|
||||||
const originalText = submitBtn.textContent;
|
const originalText = submitBtn.textContent;
|
||||||
submitBtn.innerHTML = "<span>Memproses...</span>";
|
submitBtn.innerHTML = "<span>Loading...</span>";
|
||||||
submitBtn.disabled = true;
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@ -37,20 +37,20 @@ document.getElementById("registerForm").addEventListener("submit", async functio
|
|||||||
|
|
||||||
// API temenmu return: { status: "success", message: "..." }
|
// API temenmu return: { status: "success", message: "..." }
|
||||||
if (data.status === "success") {
|
if (data.status === "success") {
|
||||||
showModal("success", "Register Berhasil!", data.message);
|
showModal("success", "Register Successful!", data.message);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
showModal("error", "Register Gagal!", data.message || "Terjadi kesalahan.");
|
showModal("error", "Register Failed!", data.message || "An error occurred.");
|
||||||
setInputError("username");
|
setInputError("username");
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Register Error:", error);
|
console.error("Register Error:", error);
|
||||||
|
|
||||||
let msg = "Terjadi kesalahan koneksi.";
|
let msg = "A connection error occurred.";
|
||||||
|
|
||||||
if (error.message === "Failed to fetch") {
|
if (error.message === "Failed to fetch") {
|
||||||
msg = "Tidak dapat terhubung ke server.";
|
msg = "Unable to connect to server.";
|
||||||
}
|
}
|
||||||
|
|
||||||
showModal("error", "Error!", msg);
|
showModal("error", "Error!", msg);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user