tool
hearth
Home
Calculators
Converters
Dev Tools
Home
/
Html Preview
🛠️ HTML Preview Sandbox
▶ Run
📄 Sample
🗑️ Clear
HTML Input
0 lines
Preview
Ready
<h3 style="color:#8b949e;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;">Related Tools</h3> <div style="display:flex;flex-wrap:wrap;gap:.25rem;"> <a href="/json-formatter" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">JSON Formatter & Validator — Format, Validate, Minify JSON</a> <a href="/base64" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">Base64 Encoder & Decoder — Encode Text to Base64 Online</a> <a href="/uuid-generator" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">UUID Generator — Generate UUID v4 Identifiers Online</a> <a href="/lorem-ipsum" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">Lorem Ipsum Generator — Generate Placeholder Text</a> <a href="/regex-tester" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">Regex Tester — Test Regular Expressions Online</a> <a href="/jwt-decoder" style="display:inline-block;background:#161b22;border:1px solid #30363d;border-radius:6px;padding:.4rem .8rem;margin:.25rem;color:#58a6ff;text-decoration:none;font-size:.85rem;">JWT Decoder — Decode JSON Web Tokens Online</a> </div> </div> </div> </div><!-- /container --> <!-- Ad unit - bottom (placeholder, uncomment when approved) --> <!-- <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins> --> <!-- <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> --> <footer class="site-footer"> <div class="container"> <p>© 2026 toolhearth. All rights reserved.</p> </div> </footer> <!-- email capture popup -- toolhearth.com --> <div id="email-capture-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;"> <div id="email-capture-modal" style="background:#0f0f1a;border:1px solid #30363d;border-radius:12px;padding:32px;max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.5);text-align:center;"> <h2 style="color:#e6edf3;margin:0 0 8px 0;font-size:22px;font-weight:700;">Build better tools</h2> <p style="color:#8b949e;margin:0 0 24px 0;font-size:14px;line-height:1.5;"> Get notified when we ship new tools -- no spam, unsubscribe anytime. </p> <form id="email-capture-form" style="display:flex;flex-direction:column;gap:12px;"> <input id="email-capture-input" type="email" placeholder="your@email.com" required style="padding:10px 14px;border-radius:8px;border:1px solid #30363d;background:#161b22;color:#e6edf3;font-size:14px;outline:none;transition:border-color 0.2s;" /> <button id="email-capture-submit" type="submit" style="padding:10px 14px;border-radius:8px;border:none;background:#58a6ff;color:#0f0f1a;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s;">Notify Me</button> </form> <div id="email-capture-success" style="display:none;color:#3fb950;font-size:14px;font-weight:500;padding:8px 0;">You're on the list!</div> <div id="email-capture-error" style="display:none;color:#f85149;font-size:13px;padding:8px 0;"></div> <button id="email-capture-dismiss" style="background:none;border:none;color:#484f58;font-size:13px;cursor:pointer;margin-top:16px;text-decoration:underline;padding:4px;">No thanks</button> </div> </div> <style> #email-capture-input:focus { border-color: #58a6ff !important; box-shadow: 0 0 0 2px rgba(88,166,255,0.3) !important; } #email-capture-submit:hover { background: #79b8ff !important; } #email-capture-submit:disabled { opacity: 0.6; cursor: not-allowed !important; } #email-capture-dismiss:hover { color: #8b949e !important; } </style> <script> (function() { var OVERLAY = document.getElementById('email-capture-overlay'); var FORM = document.getElementById('email-capture-form'); var INPUT = document.getElementById('email-capture-input'); var SUBMIT = document.getElementById('email-capture-submit'); var SUCCESS = document.getElementById('email-capture-success'); var ERROR = document.getElementById('email-capture-error'); var DISMISS = document.getElementById('email-capture-dismiss'); window.emailCaptureReady = true; function getTodayKey() { var d = new Date(); return 'email_captured_' + d.getFullYear() + String(d.getMonth()+1).padStart(2,'0') + String(d.getDate()).padStart(2,'0'); } if (localStorage.getItem(getTodayKey())) { return; } setTimeout(function() { OVERLAY.style.display = 'flex'; }, 3000); FORM.addEventListener('submit', function(e) { e.preventDefault(); var email = INPUT.value.trim(); if (!email) return; SUBMIT.disabled = true; SUBMIT.textContent = 'Sending...'; ERROR.style.display = 'none'; SUCCESS.style.display = 'none'; var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://shemika2.tail0661ca.ts.net/signup', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { SUBMIT.disabled = false; SUBMIT.textContent = 'Notify Me'; if (xhr.status >= 200 && xhr.status < 300) { SUCCESS.style.display = 'block'; FORM.style.display = 'none'; localStorage.setItem(getTodayKey(), '1'); setTimeout(function() { OVERLAY.style.display = 'none'; }, 2000); } else { var msg = 'Something went wrong.'; try { var r = JSON.parse(xhr.responseText); msg = r.message || msg; } catch(e) {} if (xhr.status === 409) { msg = "You're already signed up!"; localStorage.setItem(getTodayKey(), '1'); } SUCCESS.style.display = 'block'; SUCCESS.textContent = msg; FORM.style.display = 'none'; if (xhr.status === 409) { localStorage.setItem(getTodayKey(), '1'); setTimeout(function() { OVERLAY.style.display = 'none'; }, 2000); } } }; xhr.onerror = function() { SUBMIT.disabled = false; SUBMIT.textContent = 'Notify Me'; ERROR.style.display = 'block'; ERROR.textContent = 'Network error. Please try again.'; }; xhr.send(JSON.stringify({ email: email, source: window.location.pathname })); }); DISMISS.addEventListener('click', function() { OVERLAY.style.display = 'none'; localStorage.setItem(getTodayKey(), '1'); }); OVERLAY.addEventListener('click', function(e) { if (e.target === OVERLAY) { OVERLAY.style.display = 'none'; } }); })(); </script> </body> </html>