Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Nexus Newsletter
ID	5570005649440768
Created	9 days ago, 1744221074663
Updated	3 days ago, 1744728336438
Code	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Nexus Newsletter</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f9; color: #333; line-height: 1.6; } header { background-color: #007acc; padding: 15px 0; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-size: 1rem; } nav { max-width: 900px; margin: 0 auto; text-align: center; } nav a { color: #fff; text-decoration: none; margin: 0 10px; padding: 5px 10px; transition: color 0.3s, background-color 0.3s; border-radius: 4px; cursor: pointer; } nav a:hover { background-color: #005f99; } #content { position: relative; max-width: 900px; margin: 100px auto 40px; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: height 0.4s ease; overflow: hidden; min-height: 400px; } .page { position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; padding: 20px; } .page.active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Page Titles & Paragraphs / .page h1 { color: #007acc; margin-bottom: 15px; } .page p { margin-bottom: 15px; } / About Page: Accordion Styling / .accordion { margin-top: 20px; } .accordion-item { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; background: #fafafa; overflow: hidden; } .accordion-header { padding: 15px; background-color: #007acc; color: #fff; cursor: pointer; user-select: none; font-weight: bold; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 15px; background: #fff; } .accordion-content p { padding: 15px 0; color: #333; } .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .gallery-item { width: 200px; text-align: center; } .gallery-item img { width: 100%; height: auto; border-radius: 4px; cursor: pointer; } .gallery-item-title { margin-top: 8px; font-weight: bold; color: #007acc; } .ellipse-logo { width: 50px; / Adjust as needed / height: 50px; / Adjust as needed / border-radius: 100%; border: 2px solid black; object-fit: cover; display: block; margin-bottom: -37px; margin-top: -37px; margin-left: 11px; } #viewClassIssuesBtn { display: block; margin: 30px auto 10px auto; padding: 10px 20px; font-size: 1em; background-color: #007acc; color: #fff; border: none; border-radius: 4px; cursor: pointer; } #viewClassIssuesBtn:hover { background-color: #005f99; } #classIssuesContent { margin-top: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; } .kp-container { text-align: center; margin-top: 20px; } .kp-display, .kp-streak { font-size: 1.4em; color: #007acc; margin: 10px 0; } .kp-btn { padding: 10px 20px; font-size: 1em; background-color: #007acc; color: #fff; border: none; border-radius: 4px; margin: 10px 5px; cursor: pointer; transition: background-color 0.3s; } .kp-btn:hover { background-color: #005f99; } / Code Page Styling / #code form { margin-top: 15px; } #code input[type="text"] { padding: 8px; font-size: 1em; width: 60%; margin-right: 10px; } #code button { padding: 8px 14px; font-size: 1em; background-color: #007acc; color: #fff; border: none; border-radius: 4px; cursor: pointer; } #code button:hover { background-color: #005f99; } / Class Page Styling / #class .class-item { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 20px; } #class .class-btn { padding: 8px 12px; font-size: 1em; background-color: #007acc; color: #fff; border: none; border-radius: 4px; cursor: pointer; } #class .class-btn:hover { background-color: #005f99; } </style> </head> <body> <header> <nav> <a data-page="sub"> <img src="https://www.khanacademy.org/computer-programming/news-logo/6741085323902976/4571491452698624.png" alt="Logo" class="ellipse-logo"> </a> <a data-page="home">Home</a> <a data-page="about">About</a> <a data-page="issues">Issues</a> <a data-page="khanpoints">KhanPoints</a> <a data-page="code">Code</a> <a data-page="class">Class</a> </nav> </header> <div id="content"> <div id="sub" class="page"> <img src="https://www.khanacademy.org/computer-programming/news-logo/6741085323902976/4571491452698624.png" alt="Logo" style="height: auto;"> <h1><b>Hey there!</b></h1> <p> We are team Nexus! We would like to encourage you to sub to us! We guarantee good and fresh info all for you to read and see! Get whats happening all around the KA Community! </p> <p> We would love it if you did! It would very much help us!<br> It would keep you updated all throughout the week! You'll get news as soon as its released! All you have to do is place a single period. A small price to pay, for notifications that will rock you off your seat! </p> <p> Or, if you want more info and more KhanPoints, join us! You'll get a bonus of 20 KhanPoints daily and you get all classes opened to you! Be apart of the team! </p> <p>If you don't quite fully understand how to sub, just go down into the Tips & Thanks section, find the comment with the text "<b>Newsletter thread</b>" and place just a single period "." in the comments. Every week on monday you'll recieve a notification of our latest release! It'll fill you up with all the latest news thats out.</p> </div> <div id="home" class="page active"> <h1>Nexus' Home</h1> <p> <b>Welcome!</b> Welcome to the Nexus Newsletter homepage! Learn about us in the <b>About Page</b> and, most of all, look at the current issue released in the <b>Issues Page</b>! </p> <p> We have a way to gain class and earn <b>KhanPoints</b>! Every day you log on to Nexus, the computer gives you points based on how many days in a row you've logged in! Every day you log in, you earn 5 points! Every week you're on, you earn a bonus of 10 points! </p> <p> Join us! Be a part of the team gathering info! You'll receive a code that only you'll know and once put in the <b>Code Page</b> you'll get 20 KhanPoints and the top tier class for the best info we're releasing! Don't miss out! </p> </div> <div id="about" class="page"> <h1>About</h1> <p>Learn more about us by clicking these sections! There's not much because we're still a young team! Let's write some more about our adventure!</p> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">Our Mission</div> <div class="accordion-content"> <p> Our mission is to release Newsletters weekly all for you! Purchase Classes by KhanPoints for more info every week!<br><br>Please join us! You will get 20 KhanPoints daily and all classes purchased for free if you join us! All you got to do is daily put in a code and submit and poof! 20 KhanPoints and all classes all yours! </p> </div> </div> <div class="accordion-item"> <div class="accordion-header">How it happened</div> <div class="accordion-content"> <p> We happened when the other 3 newsletters were created. A little inspiration here and there and then poof! We happened!<br> Our story isn't the thing this page is focused on though! Get KhanPoints! Get Classes! </p> </div> </div> </div> </div> <div id="issues" class="page"> <button id="viewClassIssuesBtn">View Class Issues</button> <div id="classIssuesContent"></div> <h1>Issues</h1> <p>Click on an image below to view the details of that issue:</p> <div id="gallery" class="gallery"></div> </div> <div id="khanpoints" class="page"> <h1>KhanPoints</h1> <p> Earn KhanPoints by checking in daily! Your points are rewarded only through a consecutive login streak. Each day you claim earns 5 points. Complete a 7‑day streak and receive an extra 10-point bonus! </p> <div class="kp-container"> <div class="kp-display" id="kpPointsDisplay">KhanPoints: 0</div> <div class="kp-streak" id="kpStreakDisplay">Streak: 0 day(s)</div> <button class="kp-btn" id="kp-claim">Claim Daily KhanPoints</button> </div> </div> <div id="code" class="page"> <h1>Code</h1> <p> Enter code given by the Manager to unlock bonus KhanPoints and access the top-tier class info! </p> <form id="codeForm"> <input type="text" id="codeInput" placeholder="Enter code given by the Manager" /> <button type="submit" id="codeSubmit">Submit Code</button> </form> <div id="codeResult"></div> </div> <div id="class" class="page"> <h1>Class</h1> <p> Purchase classes with your KhanPoints to unlock advanced content in the Issues page. Each class can only be purchased once. </p> <div id="classList"> <div class="class-item"> <h3>Beginner Class</h3> <p>For small amount of info (Cost: 20 points)</p> <button class="class-btn" id="btnBeginner" onclick="purchaseClass('Beginner Class', 20)">Purchase for 20 points</button> </div> <div class="class-item"> <h3>Intermediate Class</h3> <p>Recommended for all users that want good information (Cost: 50 points)</p> <button class="class-btn" id="btnIntermediate" onclick="purchaseClass('Intermediate Class', 50)">Purchase for 50 points</button> </div> <div class="class-item"> <h3>Gold Class</h3> <p>The best class to get the most and best information (Cost: 80 points)</p> <button class="class-btn" id="btnGold" onclick="purchaseClass('Gold Class', 80)">Purchase for 80 points</button> </div> </div> </div> </div> <script type> function simpleHash(str) { var hash = 0, i, chr; if (str.length === 0) return hash; for (i = 0; i < str.length; i++) { chr = str.charCodeAt(i); hash = (hash << 5) - hash + chr; hash = hash & hash; } return hash; } // Returns today's date as "YYYY-MM-DD" function getTodayDate() { var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear(); if (dd < 10) { dd = "0" + dd; } if (mm < 10) { mm = "0" + mm; } return yyyy + "-" + mm + "-" + dd; } // Update content container height based on active page's scrollHeight function updateContentHeight() { var activePage = document.querySelector(".page.active"); if (activePage) { document.getElementById("content").style.height = activePage.scrollHeight + "px"; } } // Navigation: Switch pages var navLinks = document.querySelectorAll("nav a"); var pages = document.querySelectorAll(".page"); function switchPage(pageId) { var i; for (i = 0; i < pages.length; i++) { if (pages[i].id === pageId) { pages[i].classList.add("active"); } else { pages[i].classList.remove("active"); } } if (pageId === "khanpoints") { updateKhanPointsDisplay(); } if (pageId === "class") { updateClassPage(); } updateContentHeight(); } for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener("click", function () { var target = this.getAttribute("data-page"); switchPage(target); }); } // Accordion logic for About page with dynamic sizing var accordionHeaders = document.querySelectorAll(".accordion-header"); for (i = 0; i < accordionHeaders.length; i++) { accordionHeaders[i].addEventListener("click", function () { var parentItem = this.parentElement; var content = this.nextElementSibling; if (parentItem.classList.contains("active")) { parentItem.classList.remove("active"); content.style.maxHeight = "0px"; } else { parentItem.classList.add("active"); content.style.maxHeight = content.scrollHeight + "px"; } setTimeout(function () { updateContentHeight(); }, 450); }); } function updateKhanPointsHash(points, streak, lastDate) { // Compute the new hash using the current values var newHash = simpleHash(points + "" + streak + lastDate + "secretSalt"); localStorage.setItem("kpHash", newHash.toString()); } function updateKhanPointsDisplay() { var points = localStorage.getItem("kpPoints"); var streak = localStorage.getItem("kpStreak"); if (!points) { points = "0"; } if (!streak) { streak = "0"; } document.getElementById("kpPointsDisplay").textContent = "KhanPoints: " + points; document.getElementById("kpStreakDisplay").textContent = "Streak: " + streak + " day" + (streak === "1" ? "" : "s"); } function updateDailyKhanPoints() { var storedPoints = localStorage.getItem("kpPoints"); var storedStreak = localStorage.getItem("kpStreak"); var storedLastDate = localStorage.getItem("kpLastDate"); var bonusUnlocked = localStorage.getItem("bonusUnlocked"); if (!storedPoints) storedPoints = "0"; if (!storedStreak) storedStreak = "0"; if (!storedLastDate) storedLastDate = ""; storedPoints = parseInt(storedPoints, 10); storedStreak = parseInt(storedStreak, 10); var today = getTodayDate(); if (storedLastDate === today) { alert("You have already claimed your KhanPoints for today."); return; } var yesterdayDate = new Date(); yesterdayDate.setDate(yesterdayDate.getDate() - 1); var d = yesterdayDate.getDate(); var m = yesterdayDate.getMonth() + 1; var y = yesterdayDate.getFullYear(); if (d < 10) d = "0" + d; if (m < 10) m = "0" + m; var yesterdayString = y + "-" + m + "-" + d; if (storedLastDate === yesterdayString) { storedStreak += 1; } else { storedStreak = 1; } var dailyAward = 5; if (storedStreak % 7 === 0) { dailyAward += 5; // Weekly streak bonus } if (bonusUnlocked === "true") { dailyAward += 20; // Extra bonus for unlocking the code } storedPoints += dailyAward; // Update all localStorage values localStorage.setItem("kpPoints", storedPoints.toString()); localStorage.setItem("kpStreak", storedStreak.toString()); localStorage.setItem("kpLastDate", today); // Recalculate and store the hash updateKhanPointsHash(storedPoints, storedStreak, today); alert("Daily claim successful! You earned " + dailyAward + " points."); updateKhanPointsDisplay(); } var kpClaimButton = document.getElementById("kp-claim"); kpClaimButton.addEventListener("click", function () { updateDailyKhanPoints(); }); var issuesData = [ { title: "Nexus Newsletter #1", image: "https://www.khanacademy.org/computer-programming/nexus-newsletter-1-release/4719856333209600/6703401280847872.png", url: "https://www.khanacademy.org/computer-programming/nexus-newsletter-1-release/4719856333209600" }, ]; function renderGallery() { var galleryContainer = document.getElementById("gallery"); if (issuesData.length === 0) { galleryContainer.innerHTML = "<p style='text-align:center; font-size:1.2em; color:#555;'>No articles have been released yet!</p>"; return; } var html = ""; for (var i = 0; i < issuesData.length; i++) { html += '<div class="gallery-item">' + '<a href="' + issuesData[i].url + '" target="_blank">' + '<img src="' + issuesData[i].image + '" alt="' + issuesData[i].title + '">' + "</a>" + '<div class="gallery-item-title">' + issuesData[i].title + "</div>" + "</div>"; } galleryContainer.innerHTML = html; } renderGallery(); function getDailyCode() { var today = getTodayDate(); return "NEXUS" + today.replace(/-/g, ""); } var codeForm = document.getElementById("codeForm"); codeForm.addEventListener("submit", function(e) { e.preventDefault(); var enteredCode = document.getElementById("codeInput").value; var resultDiv = document.getElementById("codeResult"); var today = getTodayDate(); // Check if the daily code bonus was already claimed. var codeClaimed = localStorage.getItem("codeBonusClaimed"); if (codeClaimed === today) { resultDiv.innerHTML = "<p style='color:red;'>You've already claimed today's code bonus.</p>"; return; } if (enteredCode === getDailyCode()) { var currentPoints = localStorage.getItem("kpPoints"); if (!currentPoints) { currentPoints = "0"; } currentPoints = parseInt(currentPoints, 10) + 20; localStorage.setItem("kpPoints", currentPoints.toString()); var newHash = simpleHash(currentPoints + "" + (localStorage.getItem("kpStreak") \|\| "0") + getTodayDate() + "secretSalt"); localStorage.setItem("kpHash", newHash.toString()); resultDiv.innerHTML = "<p style='color:green;'>Correct code! You've unlocked 20 bonus KhanPoints and top tier class info!</p> <p style='color:red;'>Do <b>NOT</b> share this code to <b>ANYONE</b>! Otherwise you will be kicked out.</p>"; purchaseClass("Gold Class", 0); purchaseClass("Intermediate Class", 0); purchaseClass("Beginner Class", 0); localStorage.setItem("codeBonusClaimed", today); updateKhanPointsDisplay(); localStorage.setItem("bonusUnlocked", "true"); } else { resultDiv.innerHTML = "<p style='color:red;'>Incorrect code. Please try again.</p>"; } }); function purchaseClass(className, cost) { var purchased = localStorage.getItem("purchasedClasses"); var purchasedObj = purchased ? JSON.parse(purchased) : {}; if (purchasedObj[className]) { alert("You have already purchased " + className + "."); return; } var currentPoints = localStorage.getItem("kpPoints"); if (!currentPoints) { currentPoints = "0"; } currentPoints = parseInt(currentPoints, 10); if (currentPoints < cost) { alert("Not enough KhanPoints to purchase " + className + "."); return; } currentPoints = currentPoints - cost; localStorage.setItem("kpPoints", currentPoints.toString()); var streak = localStorage.getItem("kpStreak") \|\| "0"; var newHash = simpleHash(currentPoints + "" + streak + getTodayDate() + "secretSalt"); localStorage.setItem("kpHash", newHash.toString()); purchasedObj[className] = true; localStorage.setItem("purchasedClasses", JSON.stringify(purchasedObj)); alert("You successfully purchased " + className + "!"); updateKhanPointsDisplay(); updateClassPage(); } // Update Class Page button states based on purchased classes. function updateClassPage() { var purchased = localStorage.getItem("purchasedClasses"); var purchasedObj = purchased ? JSON.parse(purchased) : {}; var btnBeginner = document.getElementById("btnBeginner"); var btnIntermediate = document.getElementById("btnIntermediate"); var btnGold = document.getElementById("btnGold"); if (purchasedObj["Beginner Class"]) { btnBeginner.innerHTML = "Purchased"; btnBeginner.disabled = true; btnBeginner.style.backgroundColor = "#aaa"; } if (purchasedObj["Intermediate Class"]) { btnIntermediate.innerHTML = "Purchased"; btnIntermediate.disabled = true; btnIntermediate.style.backgroundColor = "#aaa"; } if (purchasedObj["Gold Class"]) { btnGold.innerHTML = "Purchased"; btnGold.disabled = true; btnGold.style.backgroundColor = "#aaa"; } } / Issues Page: Class Issues Content When the "View Class Issues" button is clicked, extra content is shown based on purchased classes. */ function viewClassIssues() { var container = document.getElementById("classIssuesContent"); var purchased = localStorage.getItem("purchasedClasses"); var purchasedObj = purchased ? JSON.parse(purchased) : {}; var html = ""; if (!purchased \|\| Object.keys(purchasedObj).length === 0) { html = "<p style='text-align:center; color:#555;'>Purchase a class to unlock additional issue content.</p>"; } else { if (purchasedObj["Beginner Class"]) { html += "<h3 style='font-size: 1.5em;'>Beginner Class</h3>"; html += "<p>Hello Beginner Class! Here is your info brought to you by SwankyMan!</p>"; html += "<p>Orange Soda has created a studio named <strong>Foundry Studio</strong>! Check out the growing team as they build and create programs!</p>"; html += "<p>The Nexus Newsletter Organization is starting interviews with famous coders! Each class will have its own featured coder. Stay tuned for updates!</p>"; } if (purchasedObj["Intermediate Class"]) { html += "<h3 style='font-size: 1.75em;'>Intermediate Class</h3>"; html += "<p><strong>Hello Intermediate Class!</strong> Your news is brought to you by SwankyMan!</p>"; html += "<p>ASBackup is unveiling exciting creations this week: <strong>a graphic on Tuesday, an animation on Wednesday, and a game/video on Friday</strong>!</p>"; html += "<p><strong>Gael F</strong> shares his whereabouts in the HL and announces that <em>Hooked v0.7</em> will be released soon. Don't miss it!</p>"; html += "<p>Bob Lyon introduces <em>Voronoi Diagrams</em>, a program where you can create diagrams and explore its creative possibilities!</p>"; html += "<p>The Nexus Newsletter Organization is starting interviews with famous coders! Each class will have its own featured coder. Stay tuned for updates!</p>"; } if (purchasedObj["Gold Class"]) { html += "<h3 style='font-size: 2em; color: gold;'>Gold Class</h3>"; html += "<p><strong>Welcome, Gold Class!</strong> Here’s your premium news brought to you by SwankyMan!</p>"; html += "<p><em>Witch Hunt</em>, released by estherasikhia, invites you to hunt the witch in this thrilling new game!</p>"; html += "<p><strong>Khan The Movie</strong> is coming soon! Prepare for groundbreaking updates on this highly anticipated release.</p>"; html += "<p>Ground breaking news is told by Sparta! Sparta apears to be alive! Ask Sparta questions in his <em>Q&A program</em>!</p>"; html += "<p>Obsta07 is preparing to launch <strong>Dragon Adventure V3</strong>. Keep your eyes peeled for its epic arrival!</p>"; html += "<p>The Nexus Newsletter Organization is starting interviews with famous coders! Each class will have its own featured coder. Stay tuned for updates!</p>"; } } container.innerHTML = html; updateContentHeight(); } var viewCIbtn = document.getElementById("viewClassIssuesBtn"); viewCIbtn.addEventListener("click", function () { viewClassIssues(); }); // Update the container height on page load. updateContentHeight(); </script> </body> </html> <!-- Hello there! This is the Nexus Newsletter Organization! Have a look around! Please tell me if there's any bugs with the purchasing or any of that sort. Place a period to know when the weekly news is released! Please join us! You get all the classes and you get a 20 KhanPoints Bonus every single day! -->
Folds	1,649
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIeBwLzyCQw
Votes	22
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	𝓢𝔀𝓪𝓷𝓴𝔂𝓜𝓪𝓷
Author Name	Agent0fChaos
Author ID	kaid_82898098000024228278987
Author Profile Access	PUBLIC

Archive Data

Added	2 days ago, 1744844915358
Updated	2 days ago, 1744844915358
Source Deleted	unknown