feat: fixed for build, refactored structure

This commit is contained in:
Rushil Umaretiya 2021-09-07 02:36:02 -04:00
parent e017ba9fb4
commit 57628bef00
No known key found for this signature in database
GPG Key ID: 4E8FAF9C926AF959
8 changed files with 244 additions and 49821 deletions

View File

@ -5,16 +5,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NeuroSecure</title> <title>NeuroSecure</title>
<link rel="stylesheet" href="css/index.css" /> <link rel="stylesheet" href="/css/index.css" />
</head> </head>
<body> <body>
<div class="nav"> <div class="nav">
<nav> <nav>
<div class="logo"> <div class="logo">
<h4> <h4>
<img src="css/res/brain.svg" /> <img src="/css/res/brain.svg" />
<img src="css/res/plus.svg" /> <img src="/css/res/plus.svg" />
<img src="css/res/lock.svg" /> <img src="/css/res/lock.svg" />
<span>NeuroSecure</span> <span>NeuroSecure</span>
</h4> </h4>
</div> </div>
@ -184,23 +184,23 @@
<div class="columns"> <div class="columns">
<div class="logo"> <div class="logo">
<h4> <h4>
<img src="css/res/brain.svg" /> <img src="/css/res/brain.svg" />
<img src="css/res/plus.svg" /> <img src="/css/res/plus.svg" />
<img src="css/res/lock.svg" /> <img src="/css/res/lock.svg" />
<span>NeuroSecure</span> <span>NeuroSecure</span>
</h4> </h4>
</div> </div>
<ul> <ul>
<li>Important Links</li> <li>Important Links</li>
<li>Link</li> <li><a href="">Link</a></li>
<li>Another Link</li> <li><a href="">Another Link</a></li>
<li>Yet another link</li> <li><a href="">Yet another link</a></li>
</ul> </ul>
<ul> <ul>
<li>More Links</li> <li>More Links</li>
<li>Link</li> <li><a href="">Link</a></li>
<li>Another Link</li> <li><a href="">Another Link</a></li>
<li>Yet another link</li> <li><a href="">Yet another link</a></li>
</ul> </ul>
</div> </div>
<div class="copyright"> <div class="copyright">
@ -227,6 +227,5 @@
gl_FragColor = vec4( color, 1.0 ); gl_FragColor = vec4( color, 1.0 );
} }
</script> </script>
<script src="/js/app.js" type="module"></script> <script src="/src/app.js" type="module"></script>
<script src="/js/particles.js" type="module"></script>
</html> </html>

View File

@ -570,7 +570,7 @@ body {
footer { footer {
position: relative; position: relative;
margin-top: 5%; margin-top: 10%;
height: 10vh; height: 10vh;
width: 100%; width: 100%;
} }
@ -606,6 +606,20 @@ footer .footer .columns {
footer .footer .columns .logo { footer .footer .columns .logo {
margin: auto 0; margin: auto 0;
}
footer .footer .columns .logo h4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto 0;
color: #d4d4d4; color: #d4d4d4;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
@ -625,16 +639,26 @@ footer .footer .columns ul li {
} }
footer .footer .columns ul li:first-child { footer .footer .columns ul li:first-child {
font-size: 1.4em; font-size: 1.2em;
padding: 5px 0; padding: 5px 0;
color: #939393; color: #939393;
} }
footer .footer .columns ul li a {
padding: 4px 0;
color: inherit;
text-decoration: none;
}
footer .footer .columns ul li a:hover {
color: #acacac;
}
footer .footer .copyright { footer .footer .copyright {
color: #797979; color: #797979;
text-align: center; text-align: center;
font-size: 0.9em; font-size: 0.9em;
margin: 20px 0; margin: 50px 0;
} }
footer .footer .copyright a { footer .footer .copyright a {

View File

@ -475,7 +475,7 @@ body
footer footer
position: relative position: relative
margin-top: 5% margin-top: 10%
height: 10vh height: 10vh
width: 100% width: 100%
@ -493,12 +493,18 @@ footer
flex-direction: row flex-direction: row
justify-content: space-around justify-content: space-around
.logo .logo
margin: auto 0 margin: auto 0
color: $light
text-transform: uppercase h4
letter-spacing: 3px display: flex
font-size: 1.2em flex-direction: row
align-items: center
margin: auto 0
color: $light
text-transform: uppercase
letter-spacing: 3px
font-size: 1.2em
span span
padding-left: 10px padding-left: 10px
@ -510,15 +516,23 @@ footer
color: lighten($dark, 45%) color: lighten($dark, 45%)
&:first-child &:first-child
font-size: 1.4em font-size: 1.2em
padding: 5px 0 padding: 5px 0
color: lighten($dark, 50%) color: lighten($dark, 50%)
a
padding: 4px 0
color: inherit
text-decoration: none
&:hover
color: lighten($dark, 60%)
.copyright .copyright
color: lighten($dark, 40%) color: lighten($dark, 40%)
text-align: center text-align: center
font-size: 0.9em font-size: 0.9em
margin: 20px 0 margin: 50px 0
a a
color: inherit color: inherit

View File

@ -1,32 +0,0 @@
import * as THREE from "../node_modules/three/build/three.module.js";
import { APP } from "./landing.js";
window.THREE = THREE; // Used by APP Scripts.
var loader = new THREE.FileLoader();
loader.load("./js/scenes/brain.json", function (text) {
var player = new APP.Player();
player.load(JSON.parse(text));
player.setSize(window.innerWidth, window.innerHeight);
player.play();
const hero = document.getElementById("hero");
hero.after(player.dom);
window.addEventListener("resize", function () {
player.setSize(window.innerWidth, window.innerHeight);
});
});
const nav = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector("nav ul");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
burger.classList.toggle("toggle");
});
};
nav();

View File

@ -1,149 +0,0 @@
const SEPARATION = 100,
AMOUNTX = 50,
AMOUNTY = 50;
let container;
let camera, scene, renderer;
let particles,
count = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement("div");
const about = document.getElementsByClassName("about")[0];
about.appendChild(container);
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
500,
10000
);
camera.position.z = 1000;
camera.position.y = 250;
scene = new THREE.Scene();
scene.background = new THREE.Color(0x131313);
//
const numParticles = AMOUNTX * AMOUNTY;
const positions = new Float32Array(numParticles * 3);
const scales = new Float32Array(numParticles);
let i = 0,
j = 0;
for (let ix = 0; ix < AMOUNTX; ix++) {
for (let iy = 0; iy < AMOUNTY; iy++) {
positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2; // x
positions[i + 1] = 0; // y
positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2; // z
scales[j] = 1;
i += 3;
j++;
}
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));
const material = new THREE.ShaderMaterial({
uniforms: {
color: { value: new THREE.Color(0xffffff) },
},
vertexShader: document.getElementById("vertexshader").textContent,
fragmentShader: document.getElementById("fragmentshader").textContent,
});
//
particles = new THREE.Points(geometry, material);
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight / 2);
container.appendChild(renderer.domElement);
container.style.touchAction = "none";
//
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onPointerMove(event) {
if (event.isPrimary === false) return;
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
//camera.lookAt(scene.position);
const positions = particles.geometry.attributes.position.array;
const scales = particles.geometry.attributes.scale.array;
let i = 0,
j = 0;
for (let ix = 0; ix < AMOUNTX; ix++) {
for (let iy = 0; iy < AMOUNTY; iy++) {
positions[i + 1] =
Math.sin((ix + count) * 0.3) * 50 + Math.sin((iy + count) * 0.5) * 50;
scales[j] =
(Math.sin((ix + count) * 0.3) + 1) * 20 +
(Math.sin((iy + count) * 0.5) + 1) * 20;
i += 3;
j++;
}
}
particles.geometry.attributes.position.needsUpdate = true;
particles.geometry.attributes.scale.needsUpdate = true;
renderer.render(scene, camera);
count += 0.1;
}

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,7 @@
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js"; import * as THREE from "three/build/three.module.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
window.THREE = THREE; // Used by APP Scripts.
var APP = { var APP = {
Player: function () { Player: function () {
@ -151,7 +154,6 @@ var APP = {
console.error(e.message || e, e.stack || ""); console.error(e.message || e, e.stack || "");
} }
renderer.render(scene, camera); renderer.render(scene, camera);
prevTime = time; prevTime = time;
} }
@ -219,4 +221,180 @@ var APP = {
}, },
}; };
export { APP }; const SEPARATION = 100,
AMOUNTX = 50,
AMOUNTY = 50;
let container;
let camera, scene, renderer;
let particles,
count = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement("div");
const about = document.getElementsByClassName("about")[0];
about.appendChild(container);
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
500,
10000
);
camera.position.z = 1000;
camera.position.y = 250;
scene = new THREE.Scene();
scene.background = new THREE.Color(0x131313);
//
const numParticles = AMOUNTX * AMOUNTY;
const positions = new Float32Array(numParticles * 3);
const scales = new Float32Array(numParticles);
let i = 0,
j = 0;
for (let ix = 0; ix < AMOUNTX; ix++) {
for (let iy = 0; iy < AMOUNTY; iy++) {
positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2; // x
positions[i + 1] = 0; // y
positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2; // z
scales[j] = 1;
i += 3;
j++;
}
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));
const material = new THREE.ShaderMaterial({
uniforms: {
color: { value: new THREE.Color(0xffffff) },
},
vertexShader: document.getElementById("vertexshader").textContent,
fragmentShader: document.getElementById("fragmentshader").textContent,
});
//
particles = new THREE.Points(geometry, material);
scene.add(particles);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight / 2);
container.appendChild(renderer.domElement);
container.style.touchAction = "none";
//
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onPointerMove(event) {
if (event.isPrimary === false) return;
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
//camera.lookAt(scene.position);
const positions = particles.geometry.attributes.position.array;
const scales = particles.geometry.attributes.scale.array;
let i = 0,
j = 0;
for (let ix = 0; ix < AMOUNTX; ix++) {
for (let iy = 0; iy < AMOUNTY; iy++) {
positions[i + 1] =
Math.sin((ix + count) * 0.3) * 50 + Math.sin((iy + count) * 0.5) * 50;
scales[j] =
(Math.sin((ix + count) * 0.3) + 1) * 20 +
(Math.sin((iy + count) * 0.5) + 1) * 20;
i += 3;
j++;
}
}
particles.geometry.attributes.position.needsUpdate = true;
particles.geometry.attributes.scale.needsUpdate = true;
renderer.render(scene, camera);
count += 0.1;
}
var loader = new THREE.FileLoader();
loader.load("brain.json", function (text) {
var player = new APP.Player();
player.load(JSON.parse(text));
player.setSize(window.innerWidth, window.innerHeight);
player.play();
const hero = document.getElementById("hero");
hero.after(player.dom);
window.addEventListener("resize", function () {
player.setSize(window.innerWidth, window.innerHeight);
});
});
const nav = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector("nav ul");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
burger.classList.toggle("toggle");
});
};
nav();