<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shade, Reimagined</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
/* Animated background elements */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-element {
position: absolute;
color: rgba(255, 255, 255, 0.1);
font-size: 2rem;
animation: float 20s infinite linear;
}
.floating-element:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.floating-element:nth-child(2) { top: 60%; right: 15%; animation-delay: -7s; }
.floating-element:nth-child(3) { bottom: 30%; left: 20%; animation-delay: -14s; }
.floating-element:nth-child(4) { top: 40%; right: 30%; animation-delay: -21s; }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
25% { transform: translateY(-20px) rotate(90deg); opacity: 0.2; }
50% { transform: translateY(-10px) rotate(180deg); opacity: 0.1; }
75% { transform: translateY(-30px) rotate(270deg); opacity: 0.15; }
100% { transform: translateY(0px) rotate(360deg); opacity: 0.1; }
}
/* Main content */
main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
z-index: 10;
position: relative;
}
.content-container {
text-align: center;
max-width: 800px;
width: 100%;
}
.header-copy {
margin-bottom: 60px;
}
.sun-emoji {
font-size: 4rem;
margin-bottom: 20px;
display: block;
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.main-title {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 30px;
background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); }
to { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)); }
}
.subtitle {
font-size: 1.4rem;
color: #e0e0e0;
margin-bottom: 50px;
font-weight: 300;
}
.buttons-container {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 80px;
align-items: center;
}
.choice-button {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 20px 40px;
border-radius: 15px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
width: 100%;
max-width: 500px;
text-align: left;
position: relative;
overflow: hidden;
}
.choice-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.choice-button:hover::before {
left: 100%;
}
.future-button {
border-color: #00ff88;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}
.future-button:hover {
background: rgba(0, 255, 136, 0.1);
border-color: #00ff88;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
}
.traditional-button {
border-color: #ff6b6b;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.2);
}
.traditional-button:hover {
background: rgba(255, 107, 107, 0.1);
border-color: #ff6b6b;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}
.button-text {
display: block;
margin-bottom: 5px;
}
.button-description {
font-size: 0.9rem;
opacity: 0.8;
font-style: italic;
font-weight: normal;
}
/* Password Modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.modal-content {
background: linear-gradient(135deg, #1a1a2e, #16213e);
margin: 15% auto;
padding: 40px;
border: 2px solid #00ff88;
border-radius: 20px;
width: 90%;
max-width: 500px;
text-align: center;
box-shadow: 0 0 50px rgba(0, 255, 136, 0.3);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
margin-top: -20px;
}
.close:hover {
color: #00ff88;
}
.modal h2 {
color: #00ff88;
margin-bottom: 20px;
font-size: 1.8rem;
}
.password-input {
width: 100%;
padding: 15px;
margin: 20px 0;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
color: white;
font-size: 1.1rem;
text-align: center;
}
.password-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.password-submit {
background: #00ff88;
color: #1a1a2e;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.password-submit:hover {
background: #00cc6a;
transform: translateY(-2px);
}
/* Contact and Footer */
.contact-link {
color: #ffd700;
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
}
.contact-link:hover {
border-bottom-color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
footer {
text-align: center;
padding: 30px 20px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
z-index: 10;
position: relative;
}
/* Responsive */
@media (max-width: 768px) {
.main-title {
font-size: 2.5rem;
}
.subtitle {
font-size: 1.2rem;
}
.choice-button {
font-size: 1rem;
padding: 18px 30px;
}
.modal-content {
margin: 30% auto;
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="bg-animation">
<div class="floating-element">☂</div>
<div class="floating-element">🌞</div>
<div class="floating-element">☂</div>
<div class="floating-element">🌞</div>
</div>
<main>
<div class="content-container">
<div class="header-copy">
<span class="sun-emoji">🌞</span>
<h1 class="main-title">Shade, Reimagined.</h1>
<p class="subtitle">Are you ready to see sun coverage reimagined?</p>
</div>
<div class="buttons-container">
<button class="choice-button future-button" onclick="showPasswordModal()">
<span class="button-text" valign="center">▶ Yes: I am ready for the future</span>
</button>
<button class="choice-button traditional-button" onclick="goTraditional()">
<span class="button-text">▶ No: I want to do things the way they've been done for 4000 years</span>
</button>
</div>
<div>
<a href="mailto:hello@shadereimagined.com" class="contact-link">Contact Us</a>
</div>
</div>
</main>
<!-- Password Modal -->
<div id="passwordModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h2>🔐 Secure Access</h2>
<p>Enter the password to access the future of shade:</p>
<input type="password" id="passwordInput" class="password-input" placeholder="Enter password..." />
<br><br>
<button class="password-submit" onclick="checkPassword()">Access Secure Site</button>
</div>
</div>
<footer>
<p>© 2025 Shade Reimagined. The future is bright, but we've got you covered.</p>
</footer>
<script>
function showPasswordModal() {
document.getElementById('passwordModal').style.display = 'block';
document.getElementById('passwordInput').focus();
}
function closeModal() {
document.getElementById('passwordModal').style.display = 'none';
}
function checkPassword() {
const password = document.getElementById('passwordInput').value;
// You can change this password to whatever you want
if (password === 'reimagined2025' || password === 'futureShade' || password === 'password123') {
alert('🎉 Welcome to the future! \n\n(This would normally redirect to your secure site. For now, it just shows this message.)');
closeModal();
} else {
alert('❌ Incorrect password. The future remains locked.');
document.getElementById('passwordInput').value = '';
document.getElementById('passwordInput').focus();
}
}
function goTraditional() {
// Array of traditional parasol sites for random selection
const traditionalSites = [
'https://www.amazon.com/s?k=paper+parasol+umbrella',
'https://www.etsy.com/search?q=vintage+parasol',
'https://www.alibaba.com/trade/search?fsb=y&IndexArea=product_en&CatId=&SearchText=paper+parasol'
];
// Show a playful message first
const confirmLeave = confirm('🏛️ Ah, a traditionalist! \n\nYou\'re about to be redirected. \n\nAre you sure you don\'t want to see what the future holds?');
if (confirmLeave) {
// Randomly select one of the traditional sites
const randomSite = traditionalSites[Math.floor(Math.random() * traditionalSites.length)];
window.open(randomSite, '_blank');
}
}
// Close modal when clicking outside of it
window.onclick = function(event) {
const modal = document.getElementById('passwordModal');
if (event.target === modal) {
closeModal();
}
}
// Handle Enter key in password input
document.getElementById('passwordInput').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
checkPassword();
}
});
// Close modal with Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
});
</script>
</body>
</html>