Bundle

<!– PASTE THIS ENTIRE CODE INTO A WORDPRESS CUSTOM HTML BLOCK –>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

color: #e0e0e0;

min-height: 100vh;

padding: 20px;

}

.password-screen {

max-width: 500px;

margin: 50px auto;

background: rgba(0, 0, 0, 0.3);

border: 2px solid #00d4ff;

border-radius: 16px;

padding: 50px 40px;

text-align: center;

box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);

}

.password-screen.hidden {

display: none;

}

.app-screen {

display: none;

}

.app-screen.visible {

display: block;

}

.password-screen h1 {

font-size: 36px;

color: #00d4ff;

margin-bottom: 10px;

text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);

font-weight: 700;

letter-spacing: 2px;

}

.password-screen p {

color: #b0b0b0;

margin-bottom: 30px;

font-size: 14px;

}

.password-input-group {

margin-bottom: 25px;

}

.password-input-group label {

display: block;

color: #b0b0b0;

font-size: 12px;

font-weight: 600;

margin-bottom: 10px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.password-input-group input {

width: 100%;

padding: 14px 16px;

background: #0f3460;

border: 2px solid #16213e;

border-radius: 8px;

color: #ffffff;

font-size: 16px;

}

.password-input-group input:focus {

outline: none;

border-color: #00d4ff;

box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);

background: #16213e;

}

.password-btn {

width: 100%;

padding: 14px;

background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);

color: white;

border: none;

border-radius: 8px;

font-size: 15px;

font-weight: 600;

cursor: pointer;

text-transform: uppercase;

letter-spacing: 1px;

box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);

}

.password-error {

background: rgba(255, 59, 48, 0.1);

border: 1px solid rgba(255, 59, 48, 0.3);

color: #ff3b30;

padding: 12px 16px;

border-radius: 6px;

font-size: 13px;

margin-bottom: 20px;

display: none;

}

.password-error.show {

display: block;

}

.container {

max-width: 900px;

margin: 0 auto;

}

header {

text-align: center;

margin-bottom: 40px;

padding-top: 30px;

}

h1 {

font-size: 48px;

color: #00d4ff;

margin-bottom: 10px;

text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);

font-weight: 700;

letter-spacing: 2px;

}

.subtitle {

font-size: 18px;

color: #b0b0b0;

margin-bottom: 10px;

}

.badge {

display: inline-block;

background: rgba(52, 211, 153, 0.2);

border: 1px solid rgba(52, 211, 153, 0.5);

color: #34d399;

padding: 8px 16px;

border-radius: 20px;

font-size: 12px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.5px;

margin-bottom: 20px;

}

.content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

margin-bottom: 60px;

align-items: center;

}

.cover-image {

width: 100%;

max-width: 300px;

border: 3px solid #00d4ff;

border-radius: 12px;

box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);

margin: 0 auto 20px;

}

.form-section h2 {

font-size: 28px;

color: #00d4ff;

margin-bottom: 10px;

text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

color: #b0b0b0;

font-size: 13px;

font-weight: 600;

margin-bottom: 8px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

input[type=”text”],

input[type=”email”] {

width: 100%;

padding: 14px 16px;

background: #0f3460;

border: 2px solid #16213e;

border-radius: 8px;

color: #ffffff;

font-size: 14px;

}

input:focus {

outline: none;

border-color: #00d4ff;

box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);

background: #16213e;

}

.submit-btn {

width: 100%;

padding: 16px;

background: linear-gradient(135deg, #34d399 0%, #10b981 100%);

color: white;

border: none;

border-radius: 8px;

font-size: 15px;

font-weight: 600;

cursor: pointer;

text-transform: uppercase;

letter-spacing: 1px;

box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);

}

.includes-list {

background: rgba(0, 212, 255, 0.05);

border: 1px solid rgba(0, 212, 255, 0.2);

border-radius: 8px;

padding: 20px;

margin-bottom: 20px;

}

.include-item {

margin-bottom: 10px;

font-size: 14px;

color: #b0b0b0;

}

.success-message {

background: rgba(52, 211, 153, 0.1);

border: 1px solid rgba(52, 211, 153, 0.3);

color: #34d399;

padding: 16px;

border-radius: 8px;

font-size: 14px;

margin-bottom: 20px;

display: none;

}

.success-message.show {

display: block;

}

@media (max-width: 768px) {

.content {

grid-template-columns: 1fr;

}

}

</style>

<!– PASSWORD SCREEN –>

<div id=”password-screen” class=”password-screen”>

<h1>BROKEN HARMONY</h1>

<p>Enter the access code to unlock your free bundle</p>

<div id=”password-error” class=”password-error”></div>

<div class=”password-input-group”>

<label for=”password-input”>Access Code</label>

<input

type=”password”

id=”password-input”

placeholder=”Enter code”

onkeypress=”if(event.key===’Enter’) checkPassword()”

/>

</div>

<button class=”password-btn” onclick=”checkPassword()”>🔓 Unlock</button>

</div>

<!– APP SCREEN –>

<div id=”app-screen” class=”app-screen”>

<div class=”container”>

<header>

<h1>BROKEN HARMONY</h1>

<p class=”subtitle”>Issue 2: The Ghost Signal</p>

<div class=”badge”>✨ FREE – No Payment Required</div>

</header>

<div class=”content”>

<div style=”text-align: center;”>

<img src=”https://d2xsxph8kpxj0f.cloudfront.net/310519663635245300/EG7awc8wtcQFT3uSGJXmos/Broken_Harmony_Audiobook_Cover-3000×3000-2024.png&#8221; alt=”Broken Harmony Cover” class=”cover-image”>

</div>

<div class=”form-section”>

<h2>Get Your Free Bundle</h2>

<p class=”subtitle”>Enter your email to receive the complete collection</p>

<div id=”success-message” class=”success-message”></div>

<form id=”email-form” onsubmit=”handleSubmit(event)”>

<div class=”form-group”>

<label for=”name”>Your Name</label>

<input type=”text” id=”name” name=”name” placeholder=”John Doe” required />

</div>

<div class=”form-group”>

<label for=”email”>Email Address</label>

<input type=”email” id=”email” name=”email” placeholder=”your@email.com” required />

</div>

<div class=”includes-list”>

<strong style=”color: #00d4ff;”>📦 You’ll Receive:</strong>

<div class=”include-item”>✓ 20-Page Comic Book (PDF)</div>

<div class=”include-item”>✓ 25-Min Audiobook (MP3)</div>

<div class=”include-item”>✓ Complete Ebook (EPUB/MOBI)</div>

</div>

<button type=”submit” class=”submit-btn”>📧 Send Me the Bundle</button>

</form>

</div>

</div>

</div>

</div>

<script>

const CORRECT_PASSWORD = “lov3″;

function checkPassword() {

const passwordInput = document.getElementById(‘password-input’);

const password = passwordInput.value.trim().toLowerCase();

const errorDiv = document.getElementById(‘password-error’);

if (password === CORRECT_PASSWORD.toLowerCase()) {

document.getElementById(‘password-screen’).classList.add(‘hidden’);

document.getElementById(‘app-screen’).classList.add(‘visible’);

} else {

errorDiv.textContent = ‘❌ Incorrect access code. Try again.’;

errorDiv.classList.add(‘show’);

passwordInput.value = ”;

passwordInput.focus();

}

}

function handleSubmit(event) {

event.preventDefault();

const name = document.getElementById(‘name’).value.trim();

const email = document.getElementById(’email’).value.trim();

const successDiv = document.getElementById(‘success-message’);

const form = document.getElementById(’email-form’);

if (!name || !email) {

alert(‘Please fill in all fields’);

return;

}

form.style.display = ‘none’;

successDiv.innerHTML = `

<strong>✓ Success!</strong><br>

Check your email (${email}) for your download links.

`;

successDiv.classList.add(‘show’);

console.log(‘Submitted:’, { name, email });

}

document.addEventListener(‘DOMContentLoaded’, function() {

document.getElementById(‘password-input’).focus();

});

</script>