diff --git a/innovate/static/innovate/index.css b/innovate/static/innovate/index.css index 7eb8a0d..426be29 100644 --- a/innovate/static/innovate/index.css +++ b/innovate/static/innovate/index.css @@ -1,5 +1,11 @@ .header { text-align: center; + padding-top: 7%; +} + +.container { + height: 75%; + } .header h1 { @@ -39,4 +45,373 @@ li:before { .sign-up { margin: auto auto; text-align: center; +} + +html, +body { + height: 100%; + background-image: radial-gradient(ellipse at top, #080e21 0%, #1b2735 95%); +} + +body::-webkit-scrollbar { + display: none; +} + +.star { + width: 1px; + height: 1px; + background: transparent; + box-shadow: 292px 877px #fff, 1618px 31px #fff, 1569px 330px #fff, 22px 88px #fff, 1771px 649px #fff, 491px 940px #fff, 1231px 859px #fff, 75px 592px #fff, 597px 105px #fff, 852px 768px #fff, 1777px 151px #fff, 496px 5px #fff, 475px 264px #fff, 1179px 31px #fff, 1245px 455px #fff, 1640px 170px #fff, 93px 611px #fff, 1713px 568px #fff, 860px 275px #fff, 1217px 24px #fff, 541px 718px #fff, 1512px 99px #fff, 1267px 873px #fff, 80px 31px #fff, 194px 682px #fff, 1377px 517px #fff, 530px 926px #fff, 625px 679px #fff, 567px 792px #fff, 1893px 174px #fff, 1320px 298px #fff, 875px 235px #fff, 124px 997px #fff, 1492px 978px #fff, 238px 602px #fff, 1355px 744px #fff, 1464px 263px #fff, 511px 815px #fff, 1131px 175px #fff, 1857px 965px #fff, 398px 371px #fff, 444px 690px #fff, 604px 318px #fff, 1661px 643px #fff, 788px 770px #fff, 371px 540px #fff, 243px 578px #fff, 1601px 543px #fff, 1245px 71px #fff, 138px 494px #fff, 789px 326px #fff, 1358px 901px #fff, 851px 68px #fff, 1890px 120px #fff, 920px 807px #fff, 261px 861px #fff, 134px 323px #fff, 368px 67px #fff, 1868px 451px #fff, 379px 121px #fff, 1061px 645px #fff, 34px 434px #fff, 817px 2px #fff, 11px 283px #fff, 1385px 803px #fff, 848px 245px #fff, 21px 531px #fff, 1325px 728px #fff, 12px 536px #fff, 1684px 669px #fff, 1491px 557px #fff, 1244px 740px #fff, 1450px 707px #fff, 258px 356px #fff, 1418px 97px #fff, 1548px 169px #fff, 1648px 849px #fff, 345px 473px #fff, 376px 320px #fff, 315px 679px #fff, 1704px 189px #fff, 1432px 444px #fff, 1717px 154px #fff, 445px 690px #fff, 389px 850px #fff, 1401px 915px #fff, 682px 936px #fff, 350px 761px #fff, 507px 78px #fff, 751px 55px #fff, 1852px 3px #fff, 1701px 312px #fff, 1049px 405px #fff, 579px 761px #fff, 880px 545px #fff, 1767px 727px #fff, 1844px 706px #fff, 538px 955px #fff, 579px 666px #fff, 1534px 146px #fff, 1524px 735px #fff, 96px 281px #fff, 612px 532px #fff, 317px 467px #fff, 506px 391px #fff, 1368px 847px #fff, 1204px 461px #fff, 668px 889px #fff, 1367px 92px #fff, 810px 277px #fff, 405px 496px #fff, 1432px 292px #fff, 1289px 483px #fff, 869px 384px #fff, 717px 780px #fff, 1777px 369px #fff, 1896px 518px #fff, 3px 138px #fff, 219px 728px #fff, 570px 176px #fff, 558px 228px #fff, 428px 490px #fff, 1579px 387px #fff, 1328px 271px #fff, 18px 878px #fff, 1216px 704px #fff, 1146px 681px #fff, 779px 540px #fff, 1201px 260px #fff, 1200px 264px #fff, 1674px 569px #fff, 318px 324px #fff, 724px 598px #fff, 1641px 363px #fff, 1001px 597px #fff, 1335px 115px #fff, 166px 947px #fff, 817px 169px #fff, 710px 517px #fff, 1667px 414px #fff, 416px 937px #fff, 39px 300px #fff, 1344px 960px #fff, 282px 788px #fff, 1099px 348px #fff, 191px 958px #fff, 1556px 160px #fff, 837px 418px #fff, 1305px 631px #fff, 1690px 713px #fff, 166px 245px #fff, 559px 752px #fff, 1811px 188px #fff, 1808px 160px #fff, 449px 210px #fff, 16px 460px #fff, 304px 610px #fff, 1589px 732px #fff, 1303px 19px #fff, 769px 471px #fff, 1626px 165px #fff, 538px 813px #fff, 1891px 123px #fff, 582px 171px #fff, 1688px 95px #fff, 561px 792px #fff, 878px 854px #fff, 958px 33px #fff, 1534px 786px #fff, 1437px 232px #fff, 1564px 790px #fff, 503px 788px #fff, 1580px 327px #fff, 80px 377px #fff, 1596px 480px #fff, 1493px 584px #fff, 1586px 462px #fff, 602px 8px #fff, 1337px 767px #fff, 97px 916px #fff, 1598px 420px #fff, 573px 649px #fff, 1360px 306px #fff, 727px 791px #fff, 685px 737px #fff, 1358px 904px #fff, 107px 215px #fff, 337px 378px #fff, 1571px 937px #fff, 48px 995px #fff, 583px 467px #fff, 1168px 703px #fff, 906px 506px #fff, 1722px 93px #fff, 1507px 536px #fff, 1048px 322px #fff, 302px 5px #fff, 665px 845px #fff, 502px 170px #fff, 1035px 905px #fff, 1316px 976px #fff, 1754px 929px #fff, 61px 367px #fff, 750px 797px #fff, 770px 33px #fff, 607px 706px #fff, 1233px 755px #fff, 1433px 349px #fff, 1545px 912px #fff, 1487px 466px #fff, 470px 481px #fff, 1422px 555px #fff, 1146px 858px #fff, 1830px 679px #fff, 1263px 162px #fff, 1719px 689px #fff, 1215px 340px #fff, 969px 261px #fff, 372px 69px #fff, 1310px 45px #fff, 1906px 95px #fff, 1701px 878px #fff, 1183px 75px #fff, 1706px 389px #fff, 1656px 248px #fff, 1275px 278px #fff, 1890px 640px #fff, 610px 986px #fff, 1729px 783px #fff, 1790px 902px #fff, 1874px 353px #fff, 1620px 938px #fff, 557px 615px #fff, 97px 530px #fff, 1302px 391px #fff, 1439px 668px #fff, 1028px 915px #fff, 1476px 852px #fff, 192px 77px #fff, 907px 523px #fff, 977px 220px #fff, 748px 120px #fff, 1840px 163px #fff, 389px 691px #fff, 1469px 255px #fff, 213px 665px #fff, 859px 375px #fff, 783px 701px #fff, 1698px 594px #fff, 228px 656px #fff, 1003px 779px #fff, 68px 60px #fff, 4px 656px #fff, 1128px 530px #fff, 559px 549px #fff, 625px 173px #fff, 412px 15px #fff, 363px 627px #fff, 1847px 165px #fff, 102px 809px #fff, 808px 666px #fff, 476px 621px #fff, 330px 122px #fff, 1645px 688px #fff, 161px 360px #fff, 692px 366px #fff, 110px 499px #fff, 803px 261px #fff, 800px 352px #fff, 706px 395px #fff, 1620px 90px #fff, 1603px 39px #fff, 1150px 298px #fff, 228px 445px #fff, 1056px 317px #fff, 1535px 728px #fff, 1321px 559px #fff, 1719px 65px #fff, 194px 586px #fff, 678px 505px #fff, 1373px 472px #fff, 163px 946px #fff, 1833px 393px #fff, 330px 673px #fff, 798px 534px #fff, 1668px 889px #fff, 1415px 390px #fff, 754px 470px #fff, 1537px 227px #fff, 543px 65px #fff, 1295px 359px #fff, 135px 143px #fff, 623px 347px #fff, 1891px 535px #fff, 753px 425px #fff, 808px 407px #fff, 314px 85px #fff, 47px 712px #fff, 791px 110px #fff, 836px 113px #fff; +} + +.meteor-1 { + position: absolute; + top: 72px; + left: 89%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 7.7s linear infinite; +} + +.meteor-1:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-2 { + position: absolute; + top: 145px; + left: 70%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 7.9s linear infinite; +} + +.meteor-2:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-3 { + position: absolute; + top: 210px; + left: 49%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 6.3s linear infinite; +} + +.meteor-3:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-4 { + position: absolute; + top: 75px; + left: 20%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 6.9s linear infinite; +} + +.meteor-4:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-5 { + position: absolute; + top: 239px; + left: 10%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 4.8s linear infinite; +} + +.meteor-5:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-6 { + position: absolute; + top: 218px; + left: 49%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 4s linear infinite; +} + +.meteor-6:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-7 { + position: absolute; + top: 152px; + left: 43%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 8.9s linear infinite; +} + +.meteor-7:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-8 { + position: absolute; + top: 260px; + left: 85%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 4.3s linear infinite; +} + +.meteor-8:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-9 { + position: absolute; + top: 203px; + left: 24%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 8.1s linear infinite; +} + +.meteor-9:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-10 { + position: absolute; + top: 90px; + left: 33%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 6.9s linear infinite; +} + +.meteor-10:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-11 { + position: absolute; + top: 182px; + left: 72%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 8.9s linear infinite; +} + +.meteor-11:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-12 { + position: absolute; + top: 100px; + left: 44%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 6.9s linear infinite; +} + +.meteor-12:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-13 { + position: absolute; + top: 82px; + left: 87%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 6.5s linear infinite; +} + +.meteor-13:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-14 { + position: absolute; + top: 248px; + left: 73%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 3.6s linear infinite; +} + +.meteor-14:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +.meteor-15 { + position: absolute; + top: 231px; + left: 73%; + width: 300px; + height: 1px; + transform: rotate(-45deg); + background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + animation: meteor 5.8s linear infinite; +} + +.meteor-15:before { + content: ""; + position: absolute; + width: 4px; + height: 5px; + border-radius: 50%; + margin-top: -2px; + background: rgba(255, 255, 255, 0.7); + box-shadow: 0 0 15px 3px #fff; +} + +@keyframes meteor { + 0% { + opacity: 1; + margin-top: -300px; + margin-right: -300px; + } + + 12% { + opacity: 0; + } + + 15% { + margin-top: 300px; + margin-left: -600px; + opacity: 0; + } + + 100% { + opacity: 0; + } } \ No newline at end of file diff --git a/innovate/static/innovate/starfield.js b/innovate/static/innovate/starfield.js new file mode 100644 index 0000000..e189f52 --- /dev/null +++ b/innovate/static/innovate/starfield.js @@ -0,0 +1,261 @@ +"use strict"; +window.onload = function () { + setTimeout(start, 200); +}; + +function start() { + + //Helpers + function lineToAngle(x1, y1, length, radians) { + var x2 = x1 + length * Math.cos(radians), + y2 = y1 + length * Math.sin(radians); + return { + x: x2, + y: y2 + }; + } + + function randomRange(min, max) { + return min + Math.random() * (max - min); + } + + function degreesToRads(degrees) { + return degrees / 180 * Math.PI; + } + + //Particle + var particle = { + x: 0, + y: 0, + vx: 0, + vy: 0, + radius: 0, + + create: function (x, y, speed, direction) { + var obj = Object.create(this); + obj.x = x; + obj.y = y; + obj.vx = Math.cos(direction) * speed; + obj.vy = Math.sin(direction) * speed; + return obj; + }, + + getSpeed: function () { + return Math.sqrt(this.vx * this.vx + this.vy * this.vy); + }, + + setSpeed: function (speed) { + var heading = this.getHeading(); + this.vx = Math.cos(heading) * speed; + this.vy = Math.sin(heading) * speed; + }, + + getHeading: function () { + return Math.atan2(this.vy, this.vx); + }, + + setHeading: function (heading) { + var speed = this.getSpeed(); + this.vx = Math.cos(heading) * speed; + this.vy = Math.sin(heading) * speed; + }, + + update: function () { + this.x += this.vx; + this.y += this.vy; + } + }; + + //Canvas and settings + var canvas = document.getElementById("canvas"), + context = canvas.getContext("2d"), + width = canvas.width = window.innerWidth, + height = canvas.height = window.innerHeight, + stars = [], + shootingStars = [], + layers = [{ + speed: 0.015, + scale: 0.2, + count: 320 + }, + { + speed: 0.03, + scale: 0.5, + count: 50 + }, + { + speed: 0.05, + scale: 0.75, + count: 30 + } + ], + starsAngle = 145, + shootingStarSpeed = { + min: 15, + max: 20 + }, + shootingStarOpacityDelta = 0.01, + trailLengthDelta = 0.01, + shootingStarEmittingInterval = 2000, + shootingStarLifeTime = 500, + maxTrailLength = 300, + starBaseRadius = 2, + shootingStarRadius = 3, + paused = false; + + //Create all stars + for (var j = 0; j < layers.length; j += 1) { + var layer = layers[j]; + for (var i = 0; i < layer.count; i += 1) { + var star = particle.create(randomRange(0, width), randomRange(0, height), 0, 0); + star.radius = starBaseRadius * layer.scale; + star.setSpeed(layer.speed); + star.setHeading(degreesToRads(starsAngle)); + stars.push(star); + } + } + + function createShootingStar() { + var shootingStar = particle.create(randomRange(width / 2, width), randomRange(0, height / 2), 0, 0); + shootingStar.setSpeed(randomRange(shootingStarSpeed.min, shootingStarSpeed.max)); + shootingStar.setHeading(degreesToRads(starsAngle)); + shootingStar.radius = shootingStarRadius; + shootingStar.opacity = 0; + shootingStar.trailLengthDelta = 0; + shootingStar.isSpawning = true; + shootingStar.isDying = false; + shootingStars.push(shootingStar); + } + + function killShootingStar(shootingStar) { + setTimeout(function () { + shootingStar.isDying = true; + }, shootingStarLifeTime); + } + + function update() { + if (!paused) { + context.clearRect(0, 0, width, height); + context.fillStyle = "#282a3a"; + context.fillRect(0, 0, width, height); + context.fill(); + + for (var i = 0; i < stars.length; i += 1) { + var star = stars[i]; + star.update(); + drawStar(star); + if (star.x > width) { + star.x = 0; + } + if (star.x < 0) { + star.x = width; + } + if (star.y > height) { + star.y = 0; + } + if (star.y < 0) { + star.y = height; + } + } + + for (i = 0; i < shootingStars.length; i += 1) { + var shootingStar = shootingStars[i]; + if (shootingStar.isSpawning) { + shootingStar.opacity += shootingStarOpacityDelta; + if (shootingStar.opacity >= 1.0) { + shootingStar.isSpawning = false; + killShootingStar(shootingStar); + } + } + if (shootingStar.isDying) { + shootingStar.opacity -= shootingStarOpacityDelta; + if (shootingStar.opacity <= 0.0) { + shootingStar.isDying = false; + shootingStar.isDead = true; + } + } + shootingStar.trailLengthDelta += trailLengthDelta; + + shootingStar.update(); + if (shootingStar.opacity > 0.0) { + drawShootingStar(shootingStar); + } + } + + //Delete dead shooting shootingStars + for (i = shootingStars.length - 1; i >= 0; i--) { + if (shootingStars[i].isDead) { + shootingStars.splice(i, 1); + } + } + } + requestAnimationFrame(update); + } + + function drawStar(star) { + context.fillStyle = "rgb(255, 221, 157)"; + context.beginPath(); + context.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false); + context.fill(); + } + + function drawShootingStar(p) { + var x = p.x, + y = p.y, + currentTrailLength = (maxTrailLength * p.trailLengthDelta), + pos = lineToAngle(x, y, -currentTrailLength, p.getHeading()); + + context.fillStyle = "rgba(255, 255, 255, " + p.opacity + ")"; + // context.beginPath(); + // context.arc(x, y, p.radius, 0, Math.PI * 2, false); + // context.fill(); + var starLength = 5; + context.beginPath(); + context.moveTo(x - 1, y + 1); + + context.lineTo(x, y + starLength); + context.lineTo(x + 1, y + 1); + + context.lineTo(x + starLength, y); + context.lineTo(x + 1, y - 1); + + context.lineTo(x, y + 1); + context.lineTo(x, y - starLength); + + context.lineTo(x - 1, y - 1); + context.lineTo(x - starLength, y); + + context.lineTo(x - 1, y + 1); + context.lineTo(x - starLength, y); + + context.closePath(); + context.fill(); + + //trail + context.fillStyle = "rgba(255, 221, 157, " + p.opacity + ")"; + context.beginPath(); + context.moveTo(x - 1, y - 1); + context.lineTo(pos.x, pos.y); + context.lineTo(x + 1, y + 1); + context.closePath(); + context.fill(); + } + + //Run + update(); + + //Shooting stars + setInterval(function () { + if (paused) return; + createShootingStar(); + }, shootingStarEmittingInterval); + + window.onfocus = function () { + paused = false; + }; + + window.onblur = function () { + paused = true; + }; + +} \ No newline at end of file diff --git a/innovate/templates/innovate/index.html b/innovate/templates/innovate/index.html index 0c0ebda..9910949 100644 --- a/innovate/templates/innovate/index.html +++ b/innovate/templates/innovate/index.html @@ -1,28 +1,48 @@ {% extends "launchx/base.html" %} {% load static %} - + {% block styles %} - + {% endblock %} {% block content %} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

It's time to
InnovateTJ!

TJ's very own entrpreneurial pitch and workshop event!

-
-
-
    -
  • Who: Teams of 2-4 high school students
    • -
  • What: A collaborative event where you and other innovators will develop a business pitch for real entrepreneurs with the chance of winning real money and other prizes!
    • -
  • When: Feb 20th, 2021 @ 9AM - 5PM
    • -
  • Where: Online
    • -
  • How: $20 per team
    • -
-
- -
+
+
+
+ +
+
+

Sign up + +

+
{% endblock %} \ No newline at end of file diff --git a/launchx/static/launchx/landing.css b/launchx/static/launchx/landing.css index cbb61ff..0b39619 100644 --- a/launchx/static/launchx/landing.css +++ b/launchx/static/launchx/landing.css @@ -5,6 +5,10 @@ transform: translate(-50%, -50%); } +body { + overflow: hidden; +} + .bulb { margin-left: 25%; margin-bottom: 5vh; @@ -39,6 +43,7 @@ 0% { opacity: 1; } + 100% { opacity: 0; } @@ -48,7 +53,7 @@ from { opacity: 0; } - + to { opacity: 1; } @@ -64,4 +69,4 @@ .text { display: none; } -} +} \ No newline at end of file diff --git a/launchx/static/launchx/landing.js b/launchx/static/launchx/landing.js new file mode 100644 index 0000000..69c2851 --- /dev/null +++ b/launchx/static/launchx/landing.js @@ -0,0 +1,263 @@ +var canvas = document.querySelector('canvas'); +var c = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +window.addEventListener("resize", function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +}); + + +/* + * ------------------------------------------ + * *----------------------------- + * Design + * *----------------------------- + * ------------------------------------------ + */ + +function Star() { + this.radius = (Math.random() * 10) + 5; + this.x = this.radius + (canvas.width - this.radius * 2) * Math.random(); + this.y = -10; + this.dx = (Math.random() - 0.5) * 20; + this.dy = 30; + this.gravity = .5; + this.friction = .54; + + this.update = function () { + + // Bounce particles off the floor of the canvas + if (this.y + this.radius + this.dy >= canvas.height - groundHeight) { + this.dy = -this.dy * this.friction; + this.dx *= this.friction; + this.radius -= 3; + + explosions.push(new Explosion(this)); + } else { + this.dy += this.gravity; + } + + // Bounce particles off left and right sides of canvas + if (this.x + this.radius + this.dx >= canvas.width || this.x - this.radius + this.dx < 0) { + this.dx = -this.dx; + this.dx *= this.friction; + explosions.push(new Explosion(this)); + }; + + // Move particles by velocity + this.x += this.dx; + this.y += this.dy; + + this.draw(); + + // Draw particles from explosion + for (var i = 0; i < explosions.length; i++) { + explosions[i].update(); + } + + } + this.draw = function () { + c.save(); + c.beginPath(); + c.arc(this.x, this.y, Math.abs(this.radius), 0, Math.PI * 2, false); + + c.shadowColor = '#E3EAEF'; + c.shadowBlur = 20; + c.shadowOffsetX = 0; + c.shadowOffsetY = 0; + + c.fillStyle = "#E3EAEF"; + c.fill(); + c.closePath(); + c.restore(); + } +} + +function Particle(x, y, dx, dy) { + this.x = x; + this.y = y; + this.size = { + width: 2, + height: 2 + }; + this.dx = dx; + this.dy = dy; + this.gravity = .09; + this.friction = 0.88; + this.timeToLive = 3; + this.opacity = 1; + + this.update = function () { + if (this.y + this.size.height + this.dy >= canvas.height - groundHeight) { + this.dy = -this.dy * this.friction; + this.dx *= this.friction; + } else { + this.dy += this.gravity; + } + + if (this.x + this.size.width + this.dx >= canvas.width || this.x + this.dx < 0) { + this.dx = -this.dx; + this.dx *= this.friction; + }; + this.x += this.dx; + this.y += this.dy; + + this.draw(); + + this.timeToLive -= 0.01; + this.opacity -= 1 / (this.timeToLive / 0.01); + } + this.draw = function () { + c.save(); + c.fillStyle = "rgba(227, 234, 239," + this.opacity + ")"; + c.shadowColor = '#E3EAEF'; + c.shadowBlur = 20; + c.shadowOffsetX = 0; + c.shadowOffsetY = 0; + c.fillRect(this.x, this.y, this.size.width, this.size.height); + c.restore(); + } + + this.isAlive = function () { + return 0 <= this.timeToLive; + } +} + +function Explosion(star) { + this.particles = []; + + this.init = function (parentStar) { + for (var i = 0; i < 8; i++) { + var velocity = { + x: (Math.random() - 0.5) * 5, + y: (Math.random() - 0.5) * 15, + } + this.particles.push(new Particle(parentStar.x, parentStar.y, velocity.x, velocity.y)); + } + } + + this.init(star); + + this.update = function () { + for (var i = 0; i < this.particles.length; i++) { + this.particles[i].update(); + if (this.particles[i].isAlive() == false) { + this.particles.splice(i, 1); + } + } + } +} + + +function createMountainRange(mountainAmount, height, color) { + for (var i = 0; i < mountainAmount; i++) { + var mountainWidth = canvas.width / mountainAmount; + + // Draw triangle + c.beginPath(); + c.moveTo(i * mountainWidth, canvas.height); + c.lineTo(i * mountainWidth + mountainWidth + 325, canvas.height); + + // Triangle peak + c.lineTo(i * mountainWidth + mountainWidth / 2, canvas.height - height); + c.lineTo(i * mountainWidth - 325, canvas.height); + c.fillStyle = color; + c.fill(); + c.closePath(); + } +} + +function MiniStar() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.radius = Math.random() * 3; + + this.draw = function () { + c.save(); + c.beginPath(); + c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); + + c.shadowColor = '#E3EAEF'; + c.shadowBlur = (Math.random() * 10) + 10; + c.shadowOffsetX = 0; + c.shadowOffsetY = 0; + + c.fillStyle = "white"; + c.fill(); + + c.closePath(); + c.restore(); + } +} + + +/* + * ------------------------------------------ + * *----------------------------- + * Implementation + * *----------------------------- + * ------------------------------------------ + */ + +var timer = 0; +var stars = []; +var explosions = []; +var groundHeight = canvas.height * 0.15; +var randomSpawnRate = Math.floor((Math.random() * 25) + 60) +var backgroundGradient = c.createLinearGradient(0, 0, 0, canvas.height); +backgroundGradient.addColorStop(0, "#171e26"); +backgroundGradient.addColorStop(1, "#3f586b"); + +var miniStars = []; +for (var i = 0; i < 150; i++) { + miniStars.push(new MiniStar()); +} + + + + +function animate() { + window.requestAnimationFrame(animate); + c.fillStyle = backgroundGradient; + c.fillRect(0, 0, canvas.width, canvas.height); + + for (var i = 0; i < miniStars.length; i++) { + miniStars[i].draw(); + } + createMountainRange(1, canvas.height - 50, "#384551"); + createMountainRange(2, canvas.height - 100, "#2B3843"); + createMountainRange(3, canvas.height - 300, "#26333E"); + + c.fillStyle = "#182028"; + c.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight); + + + + for (var i = 0; i < stars.length; i++) { + stars[i].update(); + // console.log(stars[0].isAlive()); + + if (stars[i].radius <= 0) { + stars.splice(i, 1); + } + } + + for (var i = 0; i < explosions.length; i++) { + if (explosions[i].length <= 0) { + explosions.splice(i, 1); + } + } + + timer++; + // console.log(timer); + if (timer % randomSpawnRate == 0) { + stars.push(new Star()); + randomSpawnRate = Math.floor((Math.random() * 10) + 75) + } + +} + +animate(); \ No newline at end of file diff --git a/launchx/templates/launchx/landing.html b/launchx/templates/launchx/landing.html index 560effe..5d21dbb 100644 --- a/launchx/templates/launchx/landing.html +++ b/launchx/templates/launchx/landing.html @@ -2,17 +2,20 @@ {% load static %} {% block styles %} - + + {% endblock %} {% block content %} -
-
-
- - -
-
+ +
+
+
+ +
-
+
+
+
+ {% endblock %} \ No newline at end of file