added background

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;
+    };
+
+}

innovate/templates/innovate/index.html

@@ -1,28 +1,48 @@
 {% extends "launchx/base.html" %}
 {% load static %}
-
+<script src="{% static 'innovate/starfield.js' %}"></script>
 {% block styles %}
-    <link rel="stylesheet" href="{% static 'innovate/index.css' %}">
+<link rel="stylesheet" href="{% static 'innovate/index.css' %}">
 {% endblock %}
 
 {% block content %}
+<div class="star"></div>
+<div class="meteor-1"></div>
+<div class="meteor-2"></div>
+<div class="meteor-3"></div>
+<div class="meteor-4"></div>
+<div class="meteor-5"></div>
+<div class="meteor-6"></div>
+<div class="meteor-7"></div>
+<div class="meteor-8"></div>
+<div class="meteor-9"></div>
+<div class="meteor-10"></div>
+<div class="meteor-11"></div>
+<div class="meteor-12"></div>
+<div class="meteor-13"></div>
+<div class="meteor-14"></div>
+<div class="meteor-15"></div>
+<div class="container">
     <header class="header">
         <h1><small>It's time to</small><br>InnovateTJ!</h1>
         <h3>TJ's very own entrpreneurial pitch and workshop event!</h3>
     </header>
-    <section class="basic-info row mt-sm-5">
+</div>
-        <div class="col-sm-8">
+<section class="basic-info row mt-sm-5">
-            <ul>
+    <div class="col-sm-8">
-                <li>Who: <span class="list-text">Teams of 2-4 high school students</span></li>
+        <ul>
-                <li>What: <span class="list-text">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!</span></li>
+            <li>Who: <span class="list-text">Teams 2-4 high school students</span></li>
-                <li>When: <span class="list-text">Feb 20th, 2021 @ 9AM - 5PM</span></li>
+            <li>What: <span class="list-text">A collaborative event where you and other innovators will develop a
-                <li>Where: <span class="list-text">Online</span></li>
+                    business pitch for real entrepreneurs with the chance of winning real money and other prizes!</span>
-                <li>How: <span class="list-text">$20 per team </span></li>
+            </li>
-            </ul>
+            <li>When: <span class="list-text">Feb 20th, 2021 @ 9AM - 5PM</span></li>
-        </div>
+            <li>Where: <span class="list-text">Online</span></li>
-        <div class="col-sm-4 sign-up">
+            <li>How: <span class="list-text">$20 per team </span></li>
-            <h1>Sign up </h>
+        </ul>
-            <a href="{% url 'competitor-signup' %}" class="btn btn-light signup">Here</a> 
+    </div>
-        </div>
+    <div class="col-sm-4 sign-up">
-    </section>
+        <h1>Sign up </h>
+            <a href="{% url 'competitor-signup' %}" class="btn btn-light signup">Here</a>
+    </div>
+</section>
 {% endblock %}

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;
   }
-}
+}

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();

launchx/templates/launchx/landing.html

@@ -2,17 +2,20 @@
 {% load static %}
 
 {% block styles %}
-    <link rel="stylesheet" type="text/css" href="{% static 'launchx/landing.css' %}">
+<link rel="stylesheet" type="text/css" href="{% static 'launchx/landing.css' %}">
+<script src="{% static 'launchx/landing.js' %}"></script>
 {% endblock %}
 
 {% block content %}
-    <main class="hero">
+<canvas></canvas>
-        <div class="img">
+<main class="hero">
-            <div class="bulb">
+    <div class="img">
-                <img src="{% static 'launchx/img/lightbulb.png' %}" class="on"></img>
+        <div class="bulb">
-                <img src="{% static 'launchx/img/lightbulb-bw.png' %}" class="off"></img>
+            <img src="{% static 'launchx/img/lightbulb.png' %}" class="on"></img>
-            </div>
+            <img src="{% static 'launchx/img/lightbulb-bw.png' %}" class="off"></img>
-            <div class="text"></div>
         </div>
-    </main>
+        <div class="text"></div>
+    </div>
+</main>
+
 {% endblock %}