Surprise!
<!DOCTYPE html>
<html lang="auto" dir="auto">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page Generator</title>
<link id="googleFontsLink" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
<style>
body {
background: linear-gradient(135deg, #00010d, #040f1f);
color: #60a5fa;
font-family: 'Montserrat', sans-serif; font-weight: 300;
padding: 2rem;
margin: 0;
}
h1 { text-align: center; color: #60a5fa; }
label { display: inline-block; min-width: 180px; margin-top: 1rem; font-weight: bold; vertical-align: top; }
input, select, textarea {
width: calc(100% - 200px);
padding: 0.6rem;
margin-top: 0.3rem;
border-radius: 8px;
border: 1px solid #60a5fa;
background: #0a0f1a;
color: #e0e7ff;
display: inline-block;
vertical-align: top;
}
.pickr { margin-top: 0.5rem; }
.flex-row { display: flex; gap: 1rem; flex-wrap: wrap; }
button {
margin-top: 1.5rem; padding: 0.75rem 1.5rem;
background: #60a5fa; color: #1a2634;
border: none; border-radius: 25px; font-size: 1rem;
cursor: pointer;
}
button:hover { background: #1a2634; color: #60a5fa; }
iframe, textarea#outputCode {
width: 100%; height: 400px; margin-top: 2rem;
border: 2px solid #60a5fa; border-radius: 10px;
background: white; color: #111;
}
textarea#outputCode { background: #fff; color: #000; font-family: monospace; padding: 1rem; }
</style>
<link rel="icon" href="https://www.w3.org/favicon.ico" type="image/x-icon">
<style>
body.light-mode {
background: #f9f9f9;
color: #222;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
background: #fff;
color: #000;
border-color: #ccc;
}
.cta {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 rgba(96, 165, 250, 0.4); }
70% { transform: scale(1.05); box-shadow: 0 0 15px rgba(96, 165, 250, 0.8); }
100% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 229, 255, 0.4); }
}
</style>
</head>
<body>
<button onclick="toggleMode()">🌗 Toggle Light/Dark Mode</button>
<h1>Landing Page Generator</h1>
<label>Page Type</label>
<select id="pageType" onchange="togglePageType()">
<option value="universal">Universal Landing Page</option>
<option value="domain">Domain Name Landing Page</option>
</select>
<label>Mode</label>
<select id="modeSelect">
<option value="download">Download HTML</option>
<option value="blogger">Blogger Copy Mode</option>
</select>
$1
$1
<label>TikTok Video URL</label>
<input type="text" id="tiktokURL" placeholder="e.g. https://www.tiktok.com/@user/video/123456789" />
$1
$1
<label>Twitter Video URL</label>
<input type="text" id="twitterURL" placeholder="e.g. https://twitter.com/username/status/123456789" />
<label>Facebook Video URL</label>
<input type="text" id="facebookURL" placeholder="e.g. https://www.facebook.com/user/videos/123456789" />
<label>Page Headline</label>
<input type="text" id="pageHeadline" placeholder="e.g. Launch Your Product Today!" />
<label>Subheadline / Description</label>
<textarea id="pageDescription" placeholder="A short description of your product, service, event, or idea."></textarea>
<label>Primary Call to Action Text</label>
<input type="text" id="ctaText" placeholder="e.g. Get Started, Join Now, Learn More" />
<label>Call to Action Link</label>
<input type="text" id="ctaLink" placeholder="e.g. https://yourproduct.com/signup" />
</div>
<div id="domainInputs" style="display:none">
<label>Domain Logo (URL)</label>
<input type="text" id="domainLogo" placeholder="e.g. https://yourcdn.com/logo.png" />
<img id="tldFlag" style="width: 28px; height: 20px; vertical-align: middle; display: none; margin-right: 8px; border: 1px solid #ccc; border-radius: 3px;" alt="Country Flag" />
<label>Domain Name</label>
<input type="text" id="domainName" placeholder="e.g. www.example.com" />
<label>SEO Description</label>
<textarea id="domainDescription" placeholder="A premium domain name now available for acquisition."></textarea>
<label>Suggested Domain Price</label>
<div class="flex-row">
<input type="text" id="domainPriceSuggestion" placeholder="Auto-estimated price will show here" disabled style="background: #0a0f1a; color: #60a5fa; font-weight: bold; width: 60%;" />
<select id="priceCurrency" style="width: 20%;">
<option value="$">$ USD</option>
<option value="€">€ EUR</option>
<option value="£">£ GBP</option>
<option value="₹">₹ INR</option>
<option value="¥">¥ JPY</option>
</select>
<input type="text" id="customPrice" placeholder="Or enter your price" style="width: 20%;" />
</div>
</div>
<label>Include Contact Form?</label>
<select id="contactOption">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label>Layout</label>
<select id="layoutStyle">
<option value="classic">Classic Centered</option>
<option value="hero">Hero with Video</option>
<option value="headline-only">Headline Only</option>
</select>
<label>Choose Font</label>
<select id="fontPicker">
<option value="Roboto">Roboto</option>
<option value="Open+Sans">Open Sans</option>
<option value="Poppins">Poppins</option>
<option value="Lato">Lato</option>
<option value="Montserrat">Montserrat</option>
<option value="Raleway">Raleway</option>
<option value="Oswald">Oswald</option>
<option value="Playfair+Display">Playfair Display</option>
<option value="Merriweather">Merriweather</option>
<option value="Inter">Inter</option>
<option value="Nunito">Nunito</option>
<option value="Quicksand">Quicksand</option>
<option value="Source+Sans+Pro">Source Sans Pro</option>
<option value="Bebas+Neue">Bebas Neue</option>
<option value="Fira+Sans">Fira Sans</option>
<option value="DM+Sans">DM Sans</option>
<option value="Ubuntu">Ubuntu</option>
<option value="Cabin">Cabin</option>
<option value="Rubik">Rubik</option>
<option value="Titillium+Web">Titillium Web</option>
<option value="Barlow">Barlow</option>
<option value="Mulish">Mulish</option>
<option value="PT+Sans">PT Sans</option>
<option value="Assistant">Assistant</option>
<option value="Karla">Karla</option>
<option value="Arimo">Arimo</option>
<option value="Tajawal">Tajawal</option>
<option value="Work+Sans">Work Sans</option>
<option value="Manrope">Manrope</option>
<option value="Signika">Signika</option>
<option value="Heebo">Heebo</option>
<option value="Space+Grotesk">Space Grotesk</option>
<option value="Zilla+Slab">Zilla Slab</option>
<option value="Muli">Muli</option>
<option value="Exo+2">Exo 2</option>
<option value="IBM+Plex+Sans">IBM Plex Sans</option>
<option value="Varela+Round">Varela Round</option>
<option value="Cairo">Cairo</option>
<option value="Questrial">Questrial</option>
<option value="Overpass">Overpass</option>
<option value="Chivo">Chivo</option>
<option value="Hind">Hind</option>
<option value="Noto+Sans">Noto Sans</option>
<option value="Asap">Asap</option>
<option value="DM+Serif+Display">DM Serif Display</option>
<option value="Anton">Anton</option>
<option value="Lexend">Lexend</option>
<option value="Josefin+Sans">Josefin Sans</option>
<option value="Alata">Alata</option>
<option value="Ysabeau">Ysabeau</option>
</select>
<label>Font Size</label>
<input type="range" id="fontSize" min="12" max="72" value="24" oninput="this.nextElementSibling.value=this.value">
<output>24</output>
<label>Share This Tool</label>
<div class="flex-row">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://yourwebsite.com" target="_blank"><button>Facebook</button></a>
<a href="https://twitter.com/intent/tweet?url=https://yourwebsite.com&text=Check%20out%20this%20amazing%20landing%20page%20builder!" target="_blank"><button>Twitter</button></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://yourwebsite.com" target="_blank"><button>LinkedIn</button></a>
<a href="https://wa.me/?text=Check%20out%20this%20awesome%20landing%20page%20builder:%20https://yourwebsite.com" target="_blank"><button>WhatsApp</button></a>
<a href="https://www.reddit.com/submit?url=https://yourwebsite.com&title=Check%20this%20tool" target="_blank"><button>Reddit</button></a>
<a href="mailto:?subject=Check%20this%20out&body=I%20found%20a%20great%20landing%20page%20generator:%20https://yourwebsite.com" target="_blank"><button>Email</button></a>
<a href="https://t.me/share/url?url=https://yourwebsite.com&text=Check%20out%20this%20landing%20page%20builder!" target="_blank"><button>Telegram</button></a>
<a href="https://pinterest.com/pin/create/button/?url=https://yourwebsite.com&description=Amazing%20landing%20page%20builder" target="_blank"><button>Pinterest</button></a>
<a href="https://www.tumblr.com/widgets/share/tool?canonicalUrl=https://yourwebsite.com" target="_blank"><button>Tumblr</button></a>
<a href="https://www.xing.com/app/user?op=share&url=https://yourwebsite.com" target="_blank"><button>Xing</button></a>
</div>
<label>Choose Language</label>
<select id="languageSelect">
<option value="auto">Auto Detect</option>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="ur">Urdu</option>
<option value="ar">Arabic</option>
<option value="zh">Chinese</option>
<option value="hi">Hindi</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="pt">Portuguese</option>
<option value="ru">Russian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
</select>
<script>
document.getElementById('languageSelect').addEventListener('change', (e) => {
const html = document.documentElement;
const lang = e.target.value;
html.setAttribute('lang', lang);
html.setAttribute('dir', ['ar', 'ur', 'he'].includes(lang) ? 'rtl' : 'ltr');
});
</script>
<script>
function speak(text, voiceLang = 'auto') {
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
const selectedLang = document.getElementById('languageSelect').value;
utterance.lang = selectedLang !== 'auto' ? selectedLang : document.documentElement.lang || 'en';
const voices = speechSynthesis.getVoices();
const match = voices.find(v => v.lang.startsWith(utterance.lang));
if (match) utterance.voice = match;
speechSynthesis.speak(utterance);
}
}
</script>
<label>Speak Preview</label>
<div class="flex-row">
<button onclick="speak(document.getElementById('domainName').value)">🔊 Speak Domain</button>
<button onclick="speak('This is a sample landing page built for multilingual audiences.')">🔊 Speak Sample Description</button>
</div>
<button onclick="speak(document.getElementById('domainName').value)">🔊 Speak Domain</button>
<script src="https://unpkg.com/i18next@21.6.16/dist/umd/i18next.min.js"></script>
<script>
i18next.init({
lng: 'en',
resources: {
en: { translation: { "Landing Page Generator": "Landing Page Generator", "Mode": "Mode", "Download HTML": "Download HTML", "Blogger Copy Mode": "Blogger Copy Mode" } },
es: { translation: { "Landing Page Generator": "Generador de Páginas de Aterrizaje", "Mode": "Modo", "Download HTML": "Descargar HTML", "Blogger Copy Mode": "Modo Blogger" } },
ur: { translation: { "Landing Page Generator": "لینڈنگ پیج جنریٹر", "Mode": "موڈ", "Download HTML": "ایچ ٹی ایم ایل ڈاؤن لوڈ کریں", "Blogger Copy Mode": "بلاگر موڈ" } },
fr: { translation: { "Landing Page Generator": "Générateur de Pages d'Atterrissage", "Mode": "Mode", "Download HTML": "Télécharger HTML", "Blogger Copy Mode": "Mode Blogger" } },
de: { translation: { "Landing Page Generator": "Landing Page Generator", "Mode": "Modus", "Download HTML": "HTML Herunterladen", "Blogger Copy Mode": "Blogger Modus" } },
pt: { translation: { "Landing Page Generator": "Gerador de Página de Destino", "Mode": "Modo", "Download HTML": "Baixar HTML", "Blogger Copy Mode": "Modo Blogger" } },
ru: { translation: { "Landing Page Generator": "Генератор Целевых Страниц", "Mode": "Режим", "Download HTML": "Скачать HTML", "Blogger Copy Mode": "Режим Blogger" } },
zh: { translation: { "Landing Page Generator": "登陆页面生成器", "Mode": "模式", "Download HTML": "下载 HTML", "Blogger Copy Mode": "Blogger 模式" } },
hi: { translation: { "Landing Page Generator": "लैंडिंग पेज जनरेटर", "Mode": "मोड", "Download HTML": "HTML डाउनलोड करें", "Blogger Copy Mode": "ब्लॉगर मोड" } },
ar: { translation: { "Landing Page Generator": "مولد صفحة الهبوط", "Mode": "الوضع", "Download HTML": "تحميل HTML", "Blogger Copy Mode": "وضع بلوجر" } },
ja: { translation: { "Landing Page Generator": "ランディングページジェネレーター", "Mode": "モード", "Download HTML": "HTMLをダウンロード", "Blogger Copy Mode": "ブロガーモード" } },
ko: { translation: { "Landing Page Generator": "랜딩 페이지 생성기", "Mode": "모드", "Download HTML": "HTML 다운로드", "Blogger Copy Mode": "블로거 모드" } }
} },
es: { translation: { "Landing Page Generator": "Generador de Páginas de Aterrizaje", "Mode": "Modo", "Download HTML": "Descargar HTML", "Blogger Copy Mode": "Modo Blogger" } },
ur: { translation: { "Landing Page Generator": "لینڈنگ پیج جنریٹر", "Mode": "موڈ", "Download HTML": "ایچ ٹی ایم ایل ڈاؤن لوڈ کریں", "Blogger Copy Mode": "بلاگر موڈ" } }
}
}, function(err, t) {
document.querySelectorAll('label, h1, button').forEach(el => {
const key = el.textContent.trim();
if (i18next.exists(key)) el.textContent = i18next.t(key);
});
});
</script>
<script>
function generateLanding() {
const mode = document.getElementById('modeSelect').value;
const pageType = document.getElementById('pageType').value;
const layout = document.getElementById('layoutStyle').value;
const contact = document.getElementById('contactOption').value;
const fontSize = document.getElementById('fontSize').value;
const font = document.getElementById('fontPicker').value;
const bgColor = window.bgColor || '#1a2634';
const textColor = window.textColor || '#e0e7ff';
const accentColor = window.accentColor || '#00e5ff';
let content = "";
if (pageType === 'universal') {
const headline = document.getElementById('pageHeadline').value.trim();
const description = document.getElementById('pageDescription').value.trim();
const ctaText = document.getElementById('ctaText').value.trim();
const ctaLink = document.getElementById('ctaLink').value.trim();
content = `<h1>${headline}</h1><p>${description}</p>`;
if (ctaText && ctaLink) {
content += `<a href="${ctaLink}" class="cta">${ctaText}</a>`;
}
const youtube = document.getElementById('youtubeURL')?.value.trim();
let videoId = '';
if (youtube.includes('youtube.com')) {
videoId = youtube.split('v=')[1]?.split('&')[0];
} else if (youtube.includes('youtu.be/')) {
videoId = youtube.split('youtu.be/')[1]?.split('?')[0];
} else if (youtube.includes('/shorts/')) {
videoId = youtube.split('/shorts/')[1]?.split('?')[0];
}
if (videoId) {
content += `<div style='margin-top:2rem'><iframe width='560' height='315' src='https://www.youtube.com/embed/${videoId}' frameborder='0' allowfullscreen></iframe></div>`;
}
const tiktok = document.getElementById('tiktokURL')?.value.trim();
if (tiktok.includes('tiktok.com')) {
content += `<div style='margin-top:2rem'><blockquote class='tiktok-embed' cite='${tiktok}' data-video-id='' style='max-width: 605px;min-width: 325px;'><section>Loading TikTok...</section></blockquote><script async src='https://www.tiktok.com/embed.js'></script></div>`;
}
const instagram = document.getElementById('instagramURL')?.value.trim();
if (instagram.includes('instagram.com/reel')) {
content += `<div style='margin-top:2rem'><blockquote class='instagram-media' data-instgrm-permalink='${instagram}' data-instgrm-version='14'></blockquote><script async src='https://www.instagram.com/embed.js'></script></div>`;
}
const vimeo = document.getElementById('vimeoURL')?.value.trim();
if (vimeo.includes('vimeo.com')) {
const vimeoId = vimeo.split('/').pop();
content += `<div style='margin-top:2rem'><iframe src='https://player.vimeo.com/video/${vimeoId}' width='640' height='360' frameborder='0' allow='autoplay; fullscreen' allowfullscreen></iframe></div>`;
}
const twitter = document.getElementById('twitterURL')?.value.trim();
if (twitter.includes('twitter.com')) {
content += `<div style='margin-top:2rem'><blockquote class='twitter-tweet'><a href='${twitter}'></a></blockquote><script async src='https://platform.twitter.com/widgets.js' charset='utf-8'></script></div>`;
}
const facebook = document.getElementById('facebookURL')?.value.trim();
if (facebook.includes('facebook.com')) {
content += `<div style='margin-top:2rem'><iframe src='https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebook)}' width='500' height='280' style='border:none;overflow:hidden' scrolling='no' frameborder='0' allowfullscreen='true'></iframe></div>`;
}
} else {
const domain = document.getElementById('domainName').value.trim();
const description = document.getElementById('domainDescription').value.trim();
const price = document.getElementById('customPrice').value.trim() || document.getElementById('domainPriceSuggestion').value.trim();
content = `<h1>${domain}</h1><p>${description}</p><div style='margin: 1.5rem auto; padding: 1rem 1.5rem; background: #00e5ff; color: #1a2634; font-weight: bold; border-radius: 8px; display: inline-block; font-size: 1.2em;'>Estimated Price: ${price}</div>`;
content += `<a class="cta" href="mailto:owner@${domain.replace('www.', '')}">Contact Owner</a>`;
}
if (contact === 'yes') {
content += `<form style='margin-top:2rem'><input type='text' placeholder='Your Name'><br><input type='email' placeholder='Your Email'><br><textarea placeholder='Message'></textarea><br><button type='submit'>Send</button></form>`;
}
const html = `<!DOCTYPE html><html lang='auto'><head><meta charset='UTF-8'><title>Landing Page</title><meta name='viewport' content='width=device-width, initial-scale=1.0'><link href='https://fonts.googleapis.com/css2?family=${font}&display=swap' rel='stylesheet'><style>body{background:${bgColor};color:${textColor};font-family:'${font.replace('+', ' ')}',sans-serif;text-align:center;padding:2rem;font-size:${fontSize}px;}a.cta{display:inline-block;padding:1rem 2rem;margin-top:1.5rem;background:${accentColor};color:#1a2634;text-decoration:none;border-radius:8px;font-weight:bold;}a.cta:hover{background:#1a2634;color:${accentColor};}</style></head><body>${content}</body></html>`;
const previewFrame = document.getElementById('previewFrame');
const outputCode = document.getElementById('outputCode');
const copyBtn = document.querySelector("button[onclick='copyToClipboard()']");
const downloadBtn = document.getElementById('downloadBtn');
if (mode === 'download') {
previewFrame.src = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
previewFrame.style.display = 'block';
outputCode.style.display = 'none';
downloadBtn.style.display = 'inline-block';
copyBtn.style.display = 'none';
} else {
outputCode.value = html;
outputCode.style.display = 'block';
previewFrame.style.display = 'none';
downloadBtn.style.display = 'none';
copyBtn.style.display = 'inline-block';
}
window.generatedHTML = html;
}
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const h1 = document.querySelector("h1");
if (h1) {
h1.style.opacity = 0;
h1.style.transition = "opacity 1s ease-in-out";
setTimeout(() => { h1.style.opacity = 1; }, 300);
}
});
</script>
<script>
function toggleMode() {
document.body.classList.toggle('light-mode');
}
function togglePageType() {
const type = document.getElementById('pageType').value;
document.getElementById('universalInputs').style.display = type === 'universal' ? 'block' : 'none';
document.getElementById('domainInputs').style.display = type === 'domain' ? 'block' : 'none';
if (type === 'domain') {
const input = document.getElementById('domainName');
input.addEventListener('input', () => {
const domain = input.value.trim();
const ext = domain.split('.').pop();
const baseName = domain.replace(/^www\./, '').split('.')[0];
const isShort = baseName.length <= 6;
const isKeyword = /shop|tech|ai|app|pro|web|cloud|data/i.test(baseName);
const hasHyphen = baseName.includes('-');
let estimate = 1000;
if (isShort) estimate += 500;
if (isKeyword) estimate += 300;
if (ccTLDs.includes(ext)) estimate += 200;
if (hasHyphen) estimate -= 200;
const currency = document.getElementById('priceCurrency').value || '$';
document.getElementById('domainPriceSuggestion').value = `${currency}${estimate.toLocaleString()}`;
const insight = {
ai: 'Popular in AI startups',
com: 'Classic and most trusted',
io: 'Favored by tech startups',
xyz: 'Trendy and creative',
net: 'Great for networks',
org: 'Used by nonprofits',
app: 'Great for software and apps'
};
const ccTLDs = [
'uk', 'us', 'de', 'fr', 'cn', 'jp', 'in', 'ru', 'br', 'za', 'au', 'ca', 'ae', 'kr', 'it', 'es', 'nl', 'se', 'no', 'ch'
];
let message = '';
if (insight[ext]) {
message = `You're using .${ext} — ${insight[ext]}`;
} else if (ccTLDs.includes(ext)) {
message = `You're using .${ext} — Country Code Top-Level Domain (ccTLD)`;
} else {
message = `You're using .${ext} — Modern or niche TLD`;
}
document.getElementById('domainExtensionMessage').textContent = message;
const flag = document.getElementById('tldFlag');
if (ccTLDs.includes(ext)) {
flag.src = `https://flagcdn.com/h20/${ext.toLowerCase()}.png`;
flag.style.display = 'inline-block';
} else {
flag.style.display = 'none';
}
});
}
}
</script>
</body>
</html>
Comments
Post a Comment