diff --git a/nti.html b/nti.html new file mode 100644 index 0000000..b2a7587 --- /dev/null +++ b/nti.html @@ -0,0 +1,36 @@ + + + + NTI counter. + + + + + + + + + + + + +
+ + + + +

+ + + + + +
+

Loading...

+
+ +
+ diff --git a/static/nti/scripts/conditional.js b/static/nti/scripts/conditional.js new file mode 100644 index 0000000..bc4ec5b --- /dev/null +++ b/static/nti/scripts/conditional.js @@ -0,0 +1,34 @@ +var currentDate = new Date(); +var currentYear = new Date().getFullYear(); +var targetCountdownDay = new Date("Feb 14, " + currentYear + " 12:00:00 AM GMT+1 (CET)"); +var stopDay = new Date("Feb 14, " + currentYear + " 11:59:59 PM GMT+1 (CET)"); +var scriptAdded = false; + +function checkDate() { + currentDate = new Date(); + if (currentDate > targetCountdownDay && currentDate < stopDay&& !scriptAdded) { + scriptAdded = true; + var fireworks = document.createElement("script"); + fireworks.src = "static/scripts/fireworks.js"; + fireworks.id = "fireworks"; + document.body.appendChild(fireworks); + + var confetti = document.createElement("script"); + confetti.src = "confetti.js"; + confetti.id = "confetti"; + document.body.appendChild(confetti); + } + if (currentDate > stopDay) { + scriptAdded = false; + try { + document.getElementById("fireworks").remove(); + document.getElementById("confetti").remove(); + document.getElementById("fireworksCanvas").remove(); + document.getElementById("confettiCanvas").remove(); + } catch (error) { + // pass + } + } +} + +var checkDateInterval = setInterval(checkDate, 1000); \ No newline at end of file diff --git a/static/nti/scripts/confetti.js b/static/nti/scripts/confetti.js new file mode 100644 index 0000000..0b2d9be --- /dev/null +++ b/static/nti/scripts/confetti.js @@ -0,0 +1,232 @@ + +(function () { + // globals + var canvas; + var ctx; + var W; + var H; + var mp = 150; //max particles + var particles = []; + var angle = 0; + var tiltAngle = 0; + var confettiActive = true; + var animationComplete = true; + var deactivationTimerHandler; + var reactivationTimerHandler; + var animationHandler; + var SCREEN_WIDTH = window.innerWidth; + var SCREEN_HEIGHT = window.innerHeight; + // objects + + var particleColors = { + colorOptions: ["DodgerBlue", "OliveDrab", "Gold", "pink", "SlateBlue", "lightblue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"], + colorIndex: 0, + colorIncrementer: 0, + colorThreshold: 10, + getColor: function () { + if (this.colorIncrementer >= 10) { + this.colorIncrementer = 0; + this.colorIndex++; + if (this.colorIndex >= this.colorOptions.length) { + this.colorIndex = 0; + } + } + this.colorIncrementer++; + return this.colorOptions[this.colorIndex]; + } + } + + function confettiParticle(color) { + this.x = Math.random() * W; // x-coordinate + this.y = (Math.random() * H) - H; //y-coordinate + this.r = RandomFromTo(10, 30); //radius; + this.d = (Math.random() * mp) + 10; //density; + this.color = color; + this.tilt = Math.floor(Math.random() * 10) - 10; + this.tiltAngleIncremental = (Math.random() * 0.07) + .05; + this.tiltAngle = 0; + + this.draw = function () { + ctx.beginPath(); + ctx.lineWidth = this.r / 2; + ctx.strokeStyle = this.color; + ctx.moveTo(this.x + this.tilt + (this.r / 4), this.y); + ctx.lineTo(this.x + this.tilt, this.y + this.tilt + (this.r / 4)); + return ctx.stroke(); + } + } + + + + function InitializeButton() { + $('#stopButton').click(DeactivateConfetti); + $('#startButton').click(RestartConfetti); + } + + function SetGlobals() { + ctx = canvas.getContext("2d"); + W = window.innerWidth; + H = window.innerHeight; + canvas.width = W; + canvas.height = H; + } + + + function InitializeConfetti() { + particles = []; + animationComplete = false; + for (var i = 0; i < mp; i++) { + var particleColor = particleColors.getColor(); + particles.push(new confettiParticle(particleColor)); + } + StartConfetti(); + } + +$(document).ready(function() { + canvas = document.createElement("canvas"); + canvas.id = "confettiCanvas"; + document.body.appendChild(canvas); + SetGlobals(); + InitializeConfetti(); + canvas.width = SCREEN_WIDTH; + canvas.height = SCREEN_HEIGHT; + + $(window).resize(function() { + W = window.innerWidth; + H = window.innerHeight; + canvas.width = W; + canvas.height = H; + }); +}); + + function Draw() { + ctx.clearRect(0, 0, W, H); + var results = []; + for (var i = 0; i < mp; i++) { + (function (j) { + results.push(particles[j].draw()); + })(i); + } + Update(); + + return results; + } + + function RandomFromTo(from, to) { + return Math.floor(Math.random() * (to - from + 1) + from); + } + + + function Update() { + var remainingFlakes = 0; + var particle; + angle += 0.01; + tiltAngle += 0.1; + + for (var i = 0; i < mp; i++) { + particle = particles[i]; + if (animationComplete) return; + + if (!confettiActive && particle.y < -15) { + particle.y = H + 100; + continue; + } + + stepParticle(particle, i); + + if (particle.y <= H) { + remainingFlakes++; + } + CheckForReposition(particle, i); + } + + if (remainingFlakes === 0) { + StopConfetti(); + } + } + + function CheckForReposition(particle, index) { + if ((particle.x > W + 20 || particle.x < -20 || particle.y > H) && confettiActive) { + if (index % 5 > 0 || index % 2 == 0) //66.67% of the flakes + { + repositionParticle(particle, Math.random() * W, -10, Math.floor(Math.random() * 10) - 20); + } else { + if (Math.sin(angle) > 0) { + //Enter from the left + repositionParticle(particle, -20, Math.random() * H, Math.floor(Math.random() * 10) - 20); + } else { + //Enter from the right + repositionParticle(particle, W + 20, Math.random() * H, Math.floor(Math.random() * 10) - 20); + } + } + } + } + function stepParticle(particle, particleIndex) { + particle.tiltAngle += particle.tiltAngleIncremental; + particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 10; + particle.x += Math.sin(angle); + particle.tilt = (Math.sin(particle.tiltAngle - (particleIndex / 3))) * 15; + } + + function repositionParticle(particle, xCoordinate, yCoordinate, tilt) { + particle.x = xCoordinate; + particle.y = yCoordinate; + particle.tilt = tilt; + } + + function StartConfetti() { + W = window.innerWidth; + H = window.innerHeight; + canvas.width = W; + canvas.height = H; + (function animloop() { + if (SCREEN_WIDTH != window.innerWidth) { + canvas.width = SCREEN_WIDTH = window.innerWidth; + } + if (SCREEN_HEIGHT != window.innerHeight) { + canvas.height = SCREEN_HEIGHT = window.innerHeight; + } + if (animationComplete) return null; + animationHandler = requestAnimFrame(animloop); + return Draw(); + })(); + } + + function ClearTimers() { + clearTimeout(reactivationTimerHandler); + clearTimeout(animationHandler); + } + + function DeactivateConfetti() { + confettiActive = false; + ClearTimers(); + } + + function StopConfetti() { + animationComplete = true; + if (ctx == undefined) return; + ctx.clearRect(0, 0, W, H); + } + + function RestartConfetti() { + ClearTimers(); + StopConfetti(); + reactivationTimerHandler = setTimeout(function () { + confettiActive = true; + animationComplete = false; + InitializeConfetti(); + }, 100); + + } + + window.requestAnimFrame = (function () { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function (callback) { + return window.setTimeout(callback, 1000 / 60); + }; + })(); +})(); \ No newline at end of file diff --git a/static/nti/scripts/fireworks.js b/static/nti/scripts/fireworks.js new file mode 100644 index 0000000..c1da127 --- /dev/null +++ b/static/nti/scripts/fireworks.js @@ -0,0 +1,260 @@ +var SCREEN_WIDTH = window.innerWidth, + SCREEN_HEIGHT = window.innerHeight, + mousePos = { + x: 400, + y: 300 + }, + + // create canvas + canvas = document.createElement('canvas'), + context = canvas.getContext('2d'), + particles = [], + rockets = [], + MAX_PARTICLES = 400, + colorCode = 0; + + +// init +$(document).ready(function() { + canvas.id = "fireworksCanvas"; + document.body.appendChild(canvas); + canvas.width = SCREEN_WIDTH; + canvas.height = SCREEN_HEIGHT; + setInterval(launch, 800); + setInterval(loop, 1000 / 50); +}); + +// update mouse position +$(document).mousemove(function(e) { + e.preventDefault(); + mousePos = { + x: e.clientX, + y: e.clientY + }; +}); + +// launch more rockets!!! +$(document).mousedown(function(e) { + for (var i = 0; i < 5; i++) { + var x = Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6; + launchFrom(x); + } +}); + +function launch() { + var x = Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6; + launchFrom(x); +} + +function launchFrom(x) { + if (rockets.length < 20) { + var rocket = new Rocket(x); + rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10; + rocket.vel.y = Math.random() * -3 - 4; + rocket.vel.x = Math.random() * 6 - 3; + rocket.size = 8; + rocket.shrink = 0.999; + rocket.gravity = 0.01; + rockets.push(rocket); + } +} + +function loop() { + // update screen size + if (SCREEN_WIDTH != window.innerWidth) { + canvas.width = SCREEN_WIDTH = window.innerWidth; + } + if (SCREEN_HEIGHT != window.innerHeight) { + canvas.height = SCREEN_HEIGHT = window.innerHeight; + } + + // clear canvas + context.fillStyle = "rgba(0, 0, 0, 0.05)"; + context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); + + var existingRockets = []; + + for (var i = 0; i < rockets.length; i++) { + // update and render + rockets[i].update(); + rockets[i].render(context); + + // calculate distance with Pythagoras + var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2)); + + // random chance of 1% if rockets is above the middle + var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false; + +/* Explosion rules + - 80% of screen + - going down + - close to the mouse + - 1% chance of random explosion + */ + if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) { + var audio = new Audio('https://cdn.discordapp.com/attachments/382404542245109772/1070757097177894994/yt1s.com_-_Firework_Explosion_Sound_Effect.mp3'); + audio.play(); + rockets[i].explode(); + } else { + existingRockets.push(rockets[i]); + } + } + + rockets = existingRockets; + + var existingParticles = []; + + for (var i = 0; i < particles.length; i++) { + particles[i].update(); + + // render and save particles that can be rendered + if (particles[i].exists()) { + particles[i].render(context); + existingParticles.push(particles[i]); + } + } + + // update array with existing particles - old particles should be garbage collected + particles = existingParticles; + + while (particles.length > MAX_PARTICLES) { + particles.shift(); + } +} + +function Particle(pos) { + this.pos = { + x: pos ? pos.x : 0, + y: pos ? pos.y : 0 + }; + this.vel = { + x: 0, + y: 0 + }; + this.shrink = .97; + this.size = 2; + + this.resistance = 1; + this.gravity = 0; + + this.flick = false; + + this.alpha = 1; + this.fade = 0; + this.color = 0; +} + +Particle.prototype.update = function() { + // apply resistance + this.vel.x *= this.resistance; + this.vel.y *= this.resistance; + + // gravity down + this.vel.y += this.gravity; + + // update position based on speed + this.pos.x += this.vel.x; + this.pos.y += this.vel.y; + + // shrink + this.size *= this.shrink; + + // fade out + this.alpha -= this.fade; +}; + +Particle.prototype.render = function(c) { + if (!this.exists()) { + return; + } + + c.save(); + + c.globalCompositeOperation = 'lighter'; + + var x = this.pos.x, + y = this.pos.y, + r = this.size / 2; + + var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); + gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); + gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); + gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); + + c.fillStyle = gradient; + + c.beginPath(); + c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); + c.closePath(); + c.fill(); + + c.restore(); +}; + +Particle.prototype.exists = function() { + return this.alpha >= 0.1 && this.size >= 1; +}; + +function Rocket(x) { + Particle.apply(this, [{ + x: x, + y: SCREEN_HEIGHT}]); + + this.explosionColor = 0; +} + +Rocket.prototype = new Particle(); +Rocket.prototype.constructor = Rocket; + +Rocket.prototype.explode = function() { + var count = Math.random() * 10 + 80; + + for (var i = 0; i < count; i++) { + var particle = new Particle(this.pos); + var angle = Math.random() * Math.PI * 2; + + // emulate 3D effect by using cosine and put more particles in the middle + var speed = Math.cos(Math.random() * Math.PI / 2) * 15; + + particle.vel.x = Math.cos(angle) * speed; + particle.vel.y = Math.sin(angle) * speed; + + particle.size = 10; + + particle.gravity = 0.2; + particle.resistance = 0.92; + particle.shrink = Math.random() * 0.05 + 0.93; + + particle.flick = true; + particle.color = this.explosionColor; + + particles.push(particle); + } +}; + +Rocket.prototype.render = function(c) { + if (!this.exists()) { + return; + } + + c.save(); + + c.globalCompositeOperation = 'lighter'; + + var x = this.pos.x, + y = this.pos.y, + r = this.size / 2; + + var gradient = c.createRadialGradient(x, y, 0.1, x, y, r); + gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")"); + gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")"); + + c.fillStyle = gradient; + + c.beginPath(); + c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true); + c.closePath(); + c.fill(); + + c.restore(); +}; \ No newline at end of file diff --git a/static/nti/scripts/music.js b/static/nti/scripts/music.js new file mode 100644 index 0000000..3b40ee9 --- /dev/null +++ b/static/nti/scripts/music.js @@ -0,0 +1,15 @@ +try { + var audio = document.getElementById("bgmusic"); + audio.volume = 0.2; + var hasInit = false; + function playMusic() + { + if(!hasInit) + { + hasInit = true; + audio.play(); + } + } + } catch (error) { + console.log("error lol") + } \ No newline at end of file diff --git a/static/nti/scripts/timer.js b/static/nti/scripts/timer.js new file mode 100644 index 0000000..e8b473e --- /dev/null +++ b/static/nti/scripts/timer.js @@ -0,0 +1,91 @@ +// Set the date we're counting down to +var currentYear = new Date().getFullYear(); +var countDownDate = new Date("Feb 14, " + currentYear + " 12:00:00 AM GMT+1 (CET)").getTime(); +var now = new Date().getTime(); +if (countDownDate < now) { + var currentYear = new Date().getFullYear()+1; + var countDownDate = new Date("Feb 14, " + currentYear + " 12:00:00 AM GMT+1 (CET)").getTime(); +} +// Update the count down every 1 second +var x = setInterval(function() { + + // Get today's date and time + var now = new Date().getTime(); + var distance = countDownDate - now; + if (countDownDate < now) { + currentYear = new Date().getFullYear()+1; + countDownDate = new Date("Feb 14, " + currentYear + " 12:00:00 AM GMT+1 (CET)").getTime(); + } + // Calculate the number of days until the countdown date + var days = Math.floor(distance / (1000 * 60 * 60 * 24)); + + // Calculate the number of years until the countdown date + var startDate = new Date(); + var endDate = new Date(countDownDate); + var years = endDate.getFullYear() - startDate.getFullYear(); + if (startDate.getMonth() > endDate.getMonth() || (startDate.getMonth() == endDate.getMonth() && startDate.getDate() > endDate.getDate())) { + years--; + } + // Calculate the number of days until the countdown date + var days = Math.floor(distance / (1000 * 60 * 60 * 24)); + + // Subtract the number of days in previous years + days -= years * 365; + + // Adjust for any leap years that have occurred + for (var i = startDate.getFullYear(); i < endDate.getFullYear(); i++) { + if (isLeapYear(i)) { + days--; + } + } + + // Check if a year is a leap year + function isLeapYear(year) { + if (year % 4 != 0) { + return false; + } else if (year % 400 == 0) { + return true; + } else if (year % 100 == 0) { + return false; + } else { + return true; + } + } + + // Calculate the number of hours, minutes, and seconds until the countdown date + var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + var seconds = Math.floor((distance % (1000 * 60)) / 1000); + if (years != 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = years + " y\r\n"; + if (days > 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent += days + " d\r\n"; + } else { + // pass + } + document.getElementsByClassName("rainbow_text_animated")[0].textContent += hours + " h\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += minutes + " m\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += seconds + " s\r\n"; + } else if (days != 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = days + " d\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += hours + " h\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += minutes + " m\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += seconds + " s\r\n"; + } else if (hours != 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = hours + " h\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += minutes + " m\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += seconds + " s\r\n"; + } else if (minutes != 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = minutes + " m\r\n"; + document.getElementsByClassName("rainbow_text_animated")[0].textContent += seconds + " s\r\n"; + } else if (seconds != 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent += seconds + " s\r\n"; + } else if (seconds == 0) { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = " Expired\r\n"; + } else { + document.getElementsByClassName("rainbow_text_animated")[0].textContent = "Error\r\n"; + currentYear = new Date().getFullYear()+1; + countDownDate = new Date("Feb 14, " + currentYear + " 12:00:00 AM GMT+1 (CET)").getTime(); + } + // code written up by chatgpt xx love you mwah +}, 1000); \ No newline at end of file diff --git a/static/nti/styles/style.css b/static/nti/styles/style.css new file mode 100644 index 0000000..17f7977 --- /dev/null +++ b/static/nti/styles/style.css @@ -0,0 +1,133 @@ +body { + background-color: black; + } + #buttons { + position: absolute; + left:0; + bottom:0; + } +#flexWrapper { + position: fixed; + width: 100%; +height: 40%; + bottom: 0; + left: 0; + margin: 5px; +} +.flex { + position: absolute; + display: inline-block; /* displays flex-items (children) inline */ + flex-wrap: wrap; + bottom: 0; + left: 0; + grid-template-columns: auto auto auto; + width: 30%; + gap: 15px; + padding: 10px; +} +#gridcontainer { + border-radius: 5px; + text-align: center; + width: 43%; + height:10%; +} +#softbutton { + border-radius:20px; + border: 12px solid #111111; + background-color: #3e3e3e; + padding: 16px; + display:inline-block; + color:white; + font-weight:bold; + font-family:'ProtoPixel'; + font-size: 30px; + box-sizing: border-box; + transition: 0.5s; + font-family: 'Lexend'; + margin: 20px; + text-align: center; +} +#softbutton:link { + text-decoration: none; +} +#wholeThing { + width: 500px; + height: 100px; + + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + margin: auto; + } + #shadowBox { + display: flex; + justify-content: center; + align-items: center; + + background-color: rgba(0, 0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.2); + /* Black w/opacity/see-through */ + width: 500px; + height: 100px; + + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + margin: auto; + } + + .rainbow { + text-align: center; + text-decoration: underline; + font-size: 62px; + background-color: white; + font-family: monospace; + letter-spacing: 5px; + } + .rainbow_text_animated { + + background: linear-gradient(to right, rgb(150,0,200), rgb(180,0,200) , rgb(90,0,100), rgb(90,0,150), rgb(120,0,170)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-size: 12em; + font-family: 'Lexend'; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; + white-space: pre; + } + + @keyframes rainbow_animation { + 0%,100% { + background-position: 0 0; + } + + 50% { + background-position: 100% 0; + } + } +canvas { +position: absolute; +top: 0; +left: 0; +z-index: 0; +} +#confettiCanvas { +position: absolute; +top: 0; +left: 0; +z-index: 1; +} +#fireworkCanvas { +position: absolute; +top: 0; +left: 0; +z-index: -2; +} \ No newline at end of file