mirror of
https://github.com/multipleofnpm/qtmodal.git
synced 2026-01-13 16:17:57 +00:00
ontop
This commit is contained in:
369
index.html
369
index.html
@@ -2,14 +2,375 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/qtmodal@0.2"></script>
|
||||
<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>
|
||||
|
||||
<script type="module">
|
||||
<!-- 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()
|
||||
</script>
|
||||
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>
|
||||
|
||||
4
index.js
4
index.js
@@ -2,7 +2,7 @@ const $ = (selector) =>
|
||||
{
|
||||
const el = document.querySelector(selector)
|
||||
el.render = (html) => el.innerHTML = html
|
||||
el.inject = (html) => el.insertAdjacentHTML('beforeend', html)
|
||||
el.ontop = (html) => el.insertAdjacentHTML('beforebegin', html)
|
||||
return el;
|
||||
};
|
||||
|
||||
@@ -13,6 +13,6 @@ var QTModal = {
|
||||
Loading...
|
||||
</div>
|
||||
</div>`,
|
||||
show: () => $(`body`).inject(QTModal.html),
|
||||
show: () => $(`body`).ontop(QTModal.html),
|
||||
hide: () => $('#qtmodal')?.remove()
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "qtmodal",
|
||||
"version": "0.2.0",
|
||||
"version": "0.3.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
|
||||
Reference in New Issue
Block a user