https://www.completenoobs.com/noobs/index.php?action=history&feed=atom&title=Html_JavaScript_Cookies_PopUP_Accept_BasicHtml JavaScript Cookies PopUP Accept Basic - Revision history2026-04-20T17:17:01ZRevision history for this page on the wikiMediaWiki 1.43.1https://www.completenoobs.com/noobs/index.php?title=Html_JavaScript_Cookies_PopUP_Accept_Basic&diff=731&oldid=prevAwesomO: Created page with "3 parts ==Part one== * This is placed in the <head> </head> at the top of index.html contains css <pre> <style> #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); color: white; z-index: 10000; display: flex; align-items: center; justify-content: center; text-align: center; } .popup-box { background: #222; padding: 30px; border-radius: 10px; border: 1px solid #444; } button { padding: 10px 20px; curso..."2026-04-16T15:14:19Z<p>Created page with "3 parts ==Part one== * This is placed in the <head> </head> at the top of index.html contains css <pre> <style> #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); color: white; z-index: 10000; display: flex; align-items: center; justify-content: center; text-align: center; } .popup-box { background: #222; padding: 30px; border-radius: 10px; border: 1px solid #444; } button { padding: 10px 20px; curso..."</p>
<p><b>New page</b></p><div>3 parts<br />
<br />
==Part one==<br />
* This is placed in the <head> </head> at the top of index.html contains css<br />
<pre><br />
<style><br />
#overlay {<br />
position: fixed; top: 0; left: 0; width: 100%; height: 100%;<br />
background: rgba(0,0,0,0.85); color: white; z-index: 10000;<br />
display: flex; align-items: center; justify-content: center; text-align: center;<br />
}<br />
.popup-box { background: #222; padding: 30px; border-radius: 10px; border: 1px solid #444; }<br />
button { padding: 10px 20px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; }<br />
.hidden { display: none !important; }<br />
</style><br />
</pre><br />
<br />
<br />
==part two==<br />
* This is placed in/at the top of the <body> </body> section, contains message.<br />
<pre><br />
<!-- pop up cookies and other 2/3--><br />
<div id="overlay"><br />
<div class="popup-box"><br />
<h2>Welcome to Complete Noobs!</h2><br />
<p>We use cookies to track traffic. Are you 21 or older?</p><br />
<p>By accepting you are entering at your own risk</p><br />
<button onclick="acceptAndHide()">Yes, I Accept & I'm Over 21 & am aware you are noobs and are still learning i enter at my own risk</button><br />
<p>→ <a href="https://www.google.com" >No Thank You - take me to Google</a></p><br />
</div><br />
</div><br />
</pre><br />
<br />
==part 3==<br />
* This is placed in/at the bottom of the <body> </body> section, contains js script.<br />
<br />
<pre><br />
<!-- pop up cookies and other 3/3--><br />
<script><br />
function acceptAndHide() {<br />
// Save the choice in the browser's "localStorage" so it doesn't pop up again<br />
localStorage.setItem('gate_passed', 'true');<br />
document.getElementById('overlay').classList.add('hidden');<br />
}<br />
<br />
// On page load, check if they already clicked "Yes"<br />
window.onload = function() {<br />
if (localStorage.getItem('gate_passed') === 'true') {<br />
document.getElementById('overlay').classList.add('hidden');<br />
}<br />
};<br />
</script><br />
</pre><br />
<br />
<br />
==use case==<br />
* Sample use case<br />
<br />
<pre><br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>My Projects - Status Update</title><br />
<style><br />
body {<br />
font-family: Arial, Helvetica, sans-serif;<br />
max-width: 800px;<br />
margin: 40px auto;<br />
padding: 20px;<br />
line-height: 1.6;<br />
color: #333;<br />
}<br />
h1 {<br />
text-align: center;<br />
color: #222;<br />
}<br />
h2 {<br />
color: #444;<br />
border-bottom: 2px solid #eee;<br />
padding-bottom: 8px;<br />
}<br />
a {<br />
color: #0066cc;<br />
text-decoration: none;<br />
}<br />
a:hover {<br />
text-decoration: underline;<br />
}<br />
.status {<br />
font-style: italic;<br />
color: #555;<br />
}<br />
</style><br />
<!-- pop up cookies and other 1/3--><br />
<style><br />
#overlay {<br />
position: fixed; top: 0; left: 0; width: 100%; height: 100%;<br />
background: rgba(0,0,0,0.85); color: white; z-index: 10000;<br />
display: flex; align-items: center; justify-content: center; text-align: center;<br />
}<br />
.popup-box { background: #222; padding: 30px; border-radius: 10px; border: 1px solid #444; }<br />
button { padding: 10px 20px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; }<br />
.hidden { display: none !important; }<br />
</style><br />
<br />
</head><br />
<!--24-06-25 adding google analytic --><br />
<!-- Google tag (gtag.js) --><br />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YXYQE65XY1"></script><br />
<script><br />
window.dataLayer = window.dataLayer || [];<br />
function gtag(){dataLayer.push(arguments);}<br />
gtag('js', new Date());<br />
<br />
gtag('config', 'G-YXYQE65XY1');<br />
</script><br />
<br />
<body><br />
<!-- pop up cookies and other 2/3--><br />
<div id="overlay"><br />
<div class="popup-box"><br />
<h2>Welcome to Complete Noobs!</h2><br />
<p>We use cookies to track traffic. Are you 21 or older?</p><br />
<p>By accepting you are entering at your own risk</p><br />
<button onclick="acceptAndHide()">Yes, I Accept & I'm Over 21 & am aware you are noobs and are still learning i enter at my own risk</button><br />
<p>→ <a href="https://www.google.com" >No Thank You - take me to Google</a></p><br />
</div><br />
</div><br />
<br />
<h1>Project Status</h1><br />
<br />
<h2>CompleteNoobs</h2><br />
<p class="status">Currently on hold due to lack of free time.</p><br />
<p>It will be relaunched as <strong>cnoobs.com</strong> running inside a Docker container.</p><br />
<p>Future plans include a possible soft-fork of MediaWiki that allows Hive accounts holding a certain amount of CNOOBS coins to post and edit pages. <br />
I'm also interested in integrating the Hive rewards system for content creators and exploring reward splits between users.</p><br />
<p>Additional custom features being considered:</p><br />
<ul><br />
<li>Custom tags for embedding IPFS content to keep the wiki database smaller and more portable:</li><br />
<ul><br />
<li><code>&lt;ipfs_video&gt;ipfs_addr&lt;/ipfs_video&gt;</code></li><br />
<li><code>&lt;ipfs_pic&gt;ipfs_addr&lt;/ipfs_pic&gt;</code></li><br />
<li><code>&lt;ipfs_audio&gt;ipfs_addr&lt;/ipfs_audio&gt;</code></li><br />
<li><code>&lt;ipfs_file&gt;ipfs_addr&lt;/ipfs_file&gt;</code></li><br />
</ul><br />
</ul><br />
<p>The old draft remains available but is unmaintained:</p><br />
<p>→ <a href="https://www.completenoobs.com/noobs/Main_Page" target="_blank">CompleteNoobs.com (old wiki)</a></p><br />
<p>→ <a href="https://xml.completenoobs.com" target="_blank">xml.CompleteNoobs.com (old xml downloads)</a></p><br />
<br />
<h2>n33b.com</h2><br />
<p class="status">Currently on hold.</p><br />
<p>It will <strong>not</strong> become a coin project. It will return to its original purpose: a purely educational site for people who like to learn by tinkering and hands-on experimentation.</p><br />
<br />
<h2>v4call.com</h2><br />
<p>→ <a href="https://v4call.com" target="_blank">v4call.com</a></p><br />
<p class="status">idk — tinker gonna tinker 😄</p><br />
<br />
<hr><br />
<p style="text-align:center; color:#777; font-size:0.9em;"><br />
Last updated: April 2026<br />
</p><br />
<!-- pop up cookies and other 3/3--><br />
<script><br />
function acceptAndHide() {<br />
// Save the choice in the browser's "localStorage" so it doesn't pop up again<br />
localStorage.setItem('gate_passed', 'true');<br />
document.getElementById('overlay').classList.add('hidden');<br />
}<br />
<br />
// On page load, check if they already clicked "Yes"<br />
window.onload = function() {<br />
if (localStorage.getItem('gate_passed') === 'true') {<br />
document.getElementById('overlay').classList.add('hidden');<br />
}<br />
};<br />
</script><br />
<br />
<br />
</body><br />
</html><br />
</pre></div>AwesomO