mirror of
https://github.com/Rushilwiz/neurosecure.git
synced 2025-04-08 14: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 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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
|
@ -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 = {
|
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();
|
Loading…
Reference in New Issue
Block a user