mirror of
https://github.com/multipleofnpm/qtmodal.git
synced 2026-01-13 16:17:57 +00:00
377 lines
10 KiB
HTML
377 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mie - Steam Game</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
background-color: #0a0e1a;
|
|
color: #ffffff;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Open Source Bar */
|
|
.open-source-bar {
|
|
background-color: #1a1f2e;
|
|
padding: 12px 0;
|
|
text-align: center;
|
|
border-bottom: 2px solid #2a3f5f;
|
|
}
|
|
|
|
.open-source-bar a {
|
|
color: #66c0f4;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.open-source-bar a:hover {
|
|
color: #9cc9e8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Main Container */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-section {
|
|
display: flex;
|
|
gap: 40px;
|
|
margin-bottom: 60px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.game-cover {
|
|
flex: 0 0 400px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.game-cover img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.game-info {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.game-info h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 20px;
|
|
color: #ffffff;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.game-status {
|
|
display: inline-block;
|
|
background-color: #5ba32a;
|
|
color: white;
|
|
padding: 6px 16px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.game-description {
|
|
font-size: 1.1em;
|
|
line-height: 1.8;
|
|
color: #c7d5e0;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Newsletter Section */
|
|
.newsletter-section {
|
|
background-color: #171a21;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
margin-bottom: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-section h2 {
|
|
margin-bottom: 20px;
|
|
color: #66c0f4;
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.newsletter-form input[type="email"] {
|
|
flex: 1;
|
|
padding: 12px 20px;
|
|
border: 2px solid #2a3f5f;
|
|
border-radius: 4px;
|
|
background-color: #0e1621;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.newsletter-form input[type="email"]:focus {
|
|
outline: none;
|
|
border-color: #66c0f4;
|
|
}
|
|
|
|
.newsletter-form button {
|
|
padding: 12px 30px;
|
|
background-color: #5ba32a;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.newsletter-form button:hover {
|
|
background-color: #4c8b22;
|
|
}
|
|
|
|
/* hCaptcha style to keep layout clean */
|
|
.newsletter-form .h-captcha {
|
|
margin: 0 auto;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* Video Section */
|
|
.video-section {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.video-section h2 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #66c0f4;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.video-container {
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.video-container iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Gallery Section */
|
|
.gallery-section {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.gallery-section h2 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #66c0f4;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.gallery-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.game-cover {
|
|
flex: 0 0 auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.game-info h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.newsletter-form input[type="email"] {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<!-- hCaptcha JS -->
|
|
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
|
|
<script src="index.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Open Source Bar -->
|
|
<div class="open-source-bar">
|
|
<p>🎮 This game is open source! Contribute to development at
|
|
<a href="https://github.com/PlanetRenox/Mie" target="_blank">github.com/PlanetRenox/Mie</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="container">
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div class="game-cover">
|
|
<img src="img1.png" alt="Mie Game Cover">
|
|
</div>
|
|
<div class="game-info">
|
|
<h1>Mie</h1>
|
|
<span class="game-status">NEW RELEASE</span>
|
|
<p class="game-description">
|
|
An open source movement focused first-person game, built around bunny-hopping and ramp bouncing.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Newsletter Section -->
|
|
<section class="newsletter-section">
|
|
<h2>Subscribe to Our Newsletter</h2>
|
|
<p style="margin-bottom: 20px; color: #c7d5e0;">Get exclusive updates, early access, and special offers!</p>
|
|
<form class="newsletter-form" id="newsletterForm">
|
|
<input type="email" placeholder="Enter your email address" required>
|
|
<!-- hCaptcha widget -->
|
|
<div class="h-captcha" data-sitekey="12ee6f8a-b45c-4022-9944-bf68a06c4ab0"></div>
|
|
<button type="submit">Subscribe</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Video Section -->
|
|
<section class="video-section">
|
|
<h2>Gameplay Trailer</h2>
|
|
<div class="video-container">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|
title="Mie Gameplay Trailer"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section class="gallery-section">
|
|
<h2>Concept Art Gallery</h2>
|
|
<div class="gallery-grid">
|
|
<div class="gallery-item">
|
|
<img src="img2.png" alt="Concept Art 1">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
QTModal.show()
|
|
document.getElementById('newsletterForm').addEventListener('submit', async function(event) {
|
|
event.preventDefault();
|
|
|
|
const emailInput = this.querySelector('input[type="email"]');
|
|
const emailValue = emailInput.value;
|
|
|
|
// hCaptcha response
|
|
const hcaptchaResponse = window.hcaptcha && window.hcaptcha.getResponse
|
|
? window.hcaptcha.getResponse(this.querySelector('.h-captcha'))
|
|
: '';
|
|
|
|
if (!hcaptchaResponse) {
|
|
alert("Please complete the CAPTCHA.");
|
|
return;
|
|
}
|
|
|
|
// Show loading
|
|
QTModal.show()
|
|
|
|
try {
|
|
const response = await fetch('https://mie.awww.workers.dev/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: emailValue,
|
|
"h-captcha-response": hcaptchaResponse
|
|
})
|
|
});
|
|
|
|
const data = await response.text();
|
|
|
|
// Hide loading overlay
|
|
//QTModal.hide()
|
|
|
|
// Show response
|
|
alert(data);
|
|
|
|
// Clear the email input and reset hCaptcha on success
|
|
if (response.ok) {
|
|
emailInput.value = '';
|
|
if (window.hcaptcha && window.hcaptcha.reset) {
|
|
window.hcaptcha.reset(this.querySelector('.h-captcha'));
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
// Hide loading overlay
|
|
loadingOverlay.style.display = 'none';
|
|
|
|
// Show error
|
|
alert(error.message || JSON.stringify(error));
|
|
console.error('Error:', error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|