mirror of
https://github.com/Rushilwiz/neurosecure.git
synced 2025-04-06 13:20:18 -04:00
feat: fixed for build, refactored structure
This commit is contained in:
parent
e017ba9fb4
commit
57628bef00
29
index.html
29
index.html
|
|
@ -5,16 +5,16 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NeuroSecure</title>
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
<link rel="stylesheet" href="/css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
<nav>
|
||||
<div class="logo">
|
||||
<h4>
|
||||
<img src="css/res/brain.svg" />
|
||||
<img src="css/res/plus.svg" />
|
||||
<img src="css/res/lock.svg" />
|
||||
<img src="/css/res/brain.svg" />
|
||||
<img src="/css/res/plus.svg" />
|
||||
<img src="/css/res/lock.svg" />
|
||||
<span>NeuroSecure</span>
|
||||
</h4>
|
||||
</div>
|
||||
|
|
@ -184,23 +184,23 @@
|
|||
<div class="columns">
|
||||
<div class="logo">
|
||||
<h4>
|
||||
<img src="css/res/brain.svg" />
|
||||
<img src="css/res/plus.svg" />
|
||||
<img src="css/res/lock.svg" />
|
||||
<img src="/css/res/brain.svg" />
|
||||
<img src="/css/res/plus.svg" />
|
||||
<img src="/css/res/lock.svg" />
|
||||
<span>NeuroSecure</span>
|
||||
</h4>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Important Links</li>
|
||||
<li>Link</li>
|
||||
<li>Another Link</li>
|
||||
<li>Yet another link</li>
|
||||
<li><a href="">Link</a></li>
|
||||
<li><a href="">Another Link</a></li>
|
||||
<li><a href="">Yet another link</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>More Links</li>
|
||||
<li>Link</li>
|
||||
<li>Another Link</li>
|
||||
<li>Yet another link</li>
|
||||
<li><a href="">Link</a></li>
|
||||
<li><a href="">Another Link</a></li>
|
||||
<li><a href="">Yet another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
|
|
@ -227,6 +227,5 @@
|
|||
gl_FragColor = vec4( color, 1.0 );
|
||||
}
|
||||
</script>
|
||||
<script src="/js/app.js" type="module"></script>
|
||||
<script src="/js/particles.js" type="module"></script>
|
||||
<script src="/src/app.js" type="module"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -570,7 +570,7 @@ body {
|
|||
|
||||
footer {
|
||||
position: relative;
|
||||
margin-top: 5%;
|
||||
margin-top: 10%;
|
||||
height: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -606,6 +606,20 @@ footer .footer .columns {
|
|||
|
||||
footer .footer .columns .logo {
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
|
|
@ -625,16 +639,26 @@ footer .footer .columns ul li {
|
|||
}
|
||||
|
||||
footer .footer .columns ul li:first-child {
|
||||
font-size: 1.4em;
|
||||
font-size: 1.2em;
|
||||
padding: 5px 0;
|
||||
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 {
|
||||
color: #797979;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
margin: 20px 0;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
footer .footer .copyright a {
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ body
|
|||
|
||||
footer
|
||||
position: relative
|
||||
margin-top: 5%
|
||||
margin-top: 10%
|
||||
height: 10vh
|
||||
width: 100%
|
||||
|
||||
|
|
@ -493,12 +493,18 @@ footer
|
|||
flex-direction: row
|
||||
justify-content: space-around
|
||||
|
||||
.logo
|
||||
.logo
|
||||
margin: auto 0
|
||||
color: $light
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.2em
|
||||
|
||||
h4
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
margin: auto 0
|
||||
color: $light
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.2em
|
||||
|
||||
span
|
||||
padding-left: 10px
|
||||
|
|
@ -510,15 +516,23 @@ footer
|
|||
color: lighten($dark, 45%)
|
||||
|
||||
&:first-child
|
||||
font-size: 1.4em
|
||||
font-size: 1.2em
|
||||
padding: 5px 0
|
||||
color: lighten($dark, 50%)
|
||||
|
||||
a
|
||||
padding: 4px 0
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
color: lighten($dark, 60%)
|
||||
|
||||
.copyright
|
||||
color: lighten($dark, 40%)
|
||||
text-align: center
|
||||
font-size: 0.9em
|
||||
margin: 20px 0
|
||||
margin: 50px 0
|
||||
|
||||
a
|
||||
color: inherit
|
||||
|
|
@ -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();
|
||||
|
|
@ -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
|
|
@ -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 = {
|
||||
Player: function () {
|
||||
|
|
@ -151,7 +154,6 @@ var APP = {
|
|||
console.error(e.message || e, e.stack || "");
|
||||
}
|
||||
|
||||
|
||||
renderer.render(scene, camera);
|
||||
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();
|
||||
Loading…
Reference in New Issue
Block a user