<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PlayStation Store Clone 🎮</title>
<style>
/* 🌌 Body styling with animated background */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #121212, #1f1f1f, #4da6ff);
background-size: 400% 400%;
animation: gradientBG 8s ease infinite;
color: #fff;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 🔥 Header styling */
header {
background-color: #1f1f1f;
padding: 20px;
text-align: center;
}
h1 {
color: #4da6ff;
animation: slideDown 1s ease-out;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
#search {
width: 60%;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
border: none;
}
/* 🎮 Game Card styling */
.games {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.game-card {
background-color: #1f1f1f;
width: 200px;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
transform: translateY(50px);
opacity: 0;
animation: fadeInUp 0.8s forwards;
}
.game-card img {
width: 100%;
border-radius: 10px;
}
.game-card h3 {
margin: 10px 0;
}
.game-card button {
background-color: #4da6ff;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease;
}
.game-card button:hover {
background-color: #3a8fd8;
transform: scale(1.1);
box-shadow: 0 0 15px #4da6ff;
}
@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}
/* 🛒 Cart Styling */
#cart {
text-align: center;
margin: 20px 0;
padding: 10px;
background-color: #1f1f1f;
border-radius: 5px;
}
#checkout-button {
background-color: #4da6ff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease;
}
#checkout-button:hover {
background-color: #3a8fd8;
transform: scale(1.1);
}
#checkout-button:disabled {
background-color: #555;
cursor: not-allowed;
}
/* 💳 Payment Form Styling */
#payment-form {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #1f1f1f;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 10;
}
#payment-form input {
width: 80%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: none;
}
/* 🎉 Success Animation */
#success-animation {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #4da6ff;
font-size: 50px;
animation: pulse 1s infinite alternate ease-in-out;
z-index: 100;
}
#success-animation img {
width: 200px;
animation: bounce 1s ease-in-out infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
</style>
</head>
<body>
<header>
<h1>PlayStation Store Clone 🎮</h1>
<input type="text" id="search" placeholder="Search games...">
</header>
<section class="games">
<div class="game-card">
<img src="game1.jpg" alt="Game 1">
<h3>Spider-Man 2</h3>
<p>$59.99</p>
<button onclick="addToCart('Spider-Man 2', 59.99)">Add to Cart</button>
</div>
</section>
<section id="cart">
<h2>🛒 Cart: <span id="cart-count">0</span> items</h2>
<h3>Total: $<span id="cart-total">0.00</span></h3>
<button id="checkout-button" onclick="openPaymentForm()"
disabled>Checkout</button>
</section>
<!-- Payment Form -->
<div id="payment-form">
<h2>Enter Payment Details 💳</h2>
<input type="text" id="card-number" placeholder="Card Number (16 digits)"
maxlength="16">
<button id="confirm-button" onclick="processPayment()">Confirm
Purchase</button>
</div>
<!-- Success Animation -->
<div id="success-animation">
<img src="playstation.png" alt="PlayStation Logo">
<h1>🎮 Game On! 🎮</h1>
</div>
<script>
let cart = [];
function addToCart(game, price) {
cart.push({ game, price });
updateCart();
}
function updateCart() {
document.getElementById('cart-count').innerText = cart.length;
document.getElementById('cart-total').innerText = cart.reduce((total,
item) => total + item.price, 0).toFixed(2);
document.getElementById('checkout-button').disabled = cart.length ===
0;
}
function openPaymentForm() {
document.getElementById('payment-form').style.display = 'block';
}
function processPayment() {
document.getElementById('payment-form').style.display = 'none';
document.getElementById('success-animation').style.display = 'block';
setTimeout(() => {
document.getElementById('success-animation').style.display =
'none';
cart = [];
updateCart();
}, 4000);
}
</script>
</body>
</html>
