<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quantum Glass Tech Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Main Product Container -->
<div class="quantum-card">
<!-- Top section: Visual emphasis -->
<div class="card-glare"></div>
<div class="product-badge">New Arrival</div>
<!-- Product Details -->
<h2 class="product-title">Titanium X-Pro Smartphone</h2>
<p class="product-desc">Next-generation physical hardware with ultra-responsive display.</p>
<div class="product-price">$999.00</div>
<!-- The Interactive Button -->
<button class="action-btn" onclick="handlePurchase(this)">
Add to Cart
</button>
</div>
<script src="script.js"></script>
</body>
</html>
/* Base setup for a premium dark theme */
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #050505;
background-image: radial-gradient(circle at 50% 0%, #1a1a2e 0%, #050505 70%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
/* The Quantum Glass Card */
.quantum-card {
position: relative;
width: 320px;
padding: 40px 30px;
background: rgba(255, 255, 255, 0.03); /* Extremely sheer background */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
/* The Glassmorphism Magic */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
/* Soft shadow for depth */
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
/* Smooth transition for when we hover over it */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.4s ease;
text-align: center;
}
/* 3D Hover Effect */
.quantum-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 40px 80px rgba(0, 240, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
border-color: rgba(0, 240, 255, 0.4);
}
/* Text Styling */
.product-badge {
display: inline-block;
color: #00f0ff;
font-size: 0.75rem;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}
.product-title {
color: #ffffff;
font-size: 1.8rem;
margin: 0 0 10px 0;
font-weight: 300;
}
.product-desc {
color: #a0a0a0;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 25px;
}
.product-price {
color: #fff;
font-size: 2rem;
font-weight: bold;
margin-bottom: 30px;
}
/* The Button Styling */
.action-btn {
background: transparent;
color: #00f0ff;
border: 2px solid #00f0ff;
padding: 12px 30px;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
letter-spacing: 1px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.action-btn:hover {
background: #00f0ff;
color: #000;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}
// This function is triggered by the onclick="handlePurchase(this)" in the HTML
function handlePurchase(buttonElement) {
// 1. Change the text to show it's processing
buttonElement.innerHTML = "Processing...";
// 2. Change the styles temporarily to a "loading" state
buttonElement.style.background = "#ff007f"; // A hot pink color for contrast
buttonElement.style.borderColor = "#ff007f";
buttonElement.style.color = "#ffffff";
buttonElement.style.boxShadow = "0 0 20px rgba(255, 0, 127, 0.6)";
// 3. Use setTimeout to wait for 2 seconds (2000 milliseconds)
// This simulates the time it takes to connect to a cart or payment processor
setTimeout(function() {
// 4. Update the button to show success
buttonElement.innerHTML = "Added to Cart!";
buttonElement.style.background = "#00ff66"; // Neon green for success
buttonElement.style.borderColor = "#00ff66";
buttonElement.style.color = "#000000";
buttonElement.style.boxShadow = "0 0 20px rgba(0, 255, 102, 0.6)";
}, 2000); // 2000 milliseconds = 2 seconds
}
No comments yet. Be the first!