cailean
/
beta-2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

removal of list js

graphics
Cailean Finn 3 months ago
parent
61b70b485e
commit
0fae43fca7
5 changed files with 252 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      public/css/styles.css
  2. 323
      public/js/list.js
  3. 3
      templates/base.html
  4. 6
      templates/index.html
  5. 9
      templates/list.html

82
public/css/styles.css
View File

@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Syne+Mono&display=swap');
html { html {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -22,7 +20,7 @@ body {
url('/public/images/skybox.png'); url('/public/images/skybox.png');
background-position: 0px calc(100vh / 2.2); background-position: 0px calc(100vh / 2.2);
background-size: cover; background-size: cover;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
p { p {
@ -49,6 +47,7 @@ hr {
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden;
} }
#nav-bar { #nav-bar {
@ -109,6 +108,30 @@ hr {
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
font-family: 'Syne Mono', monospace; font-family: 'Syne Mono', monospace;
color: white;
}
.hyperlink-header {
display: flex;
flex-direction: row;
gap: 20px;
width: fit-content;
background-color: #0075FF;
background-size: cover; /* or contain, depending on your preference */
background-repeat:repeat;
border-radius: 30px;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
font-family: 'Syne Mono', monospace;
color: white;
}
.active-page {
color: #0075FF;
background-color: white;
border-color: #0075FF;
border: 1px solid;
} }
#hyperlink-container a{ #hyperlink-container a{
@ -122,6 +145,7 @@ hr {
margin: 0; margin: 0;
padding: 0; padding: 0;
z-index: -999; z-index: -999;
opacity: 1;
} }
#list-container { #list-container {
@ -183,7 +207,7 @@ hr {
.list-details { .list-details {
font-size: 20px; font-size: 20px;
color: #0075FF; color: black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -196,7 +220,7 @@ hr {
.list-artists { .list-artists {
font-size: 20px; font-size: 20px;
font-family: 'Syne Mono', monospace; font-family: 'Syne Mono', monospace;
color: #0075FF; color: black;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -209,15 +233,23 @@ hr {
padding-bottom: 20px; padding-bottom: 20px;
padding-left: 50px; padding-left: 50px;
font-size: 30px; font-size: 30px;
gap: 50px; gap: 20px;
height: 100px; height: 100px;
font-family: 'Syne Mono', monospace; font-family: 'Syne Mono', monospace;
color: #0075FF; color: #0075FF;
align-items: center; align-items: center;
overflow-x: hidden; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
} }
#page-header::-webkit-scrollbar {
display: none;
}
#page-header a {
cursor: pointer;
}
.page-info-cont { .page-info-cont {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -337,11 +369,13 @@ hr {
} }
#page-header { #page-header {
overflow-y: scroll; overflow-y: hidden;
overflow-x: hidden; overflow-x: scroll;
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
white-space: nowrap; white-space: nowrap;
gap: 10px;
height: 40px;
} }
#container-article { #container-article {
@ -402,13 +436,18 @@ hr {
text-align: center; text-align: center;
} }
#list-container { .hyperlink-header {
padding-left: 20px; margin-left: 0px;
padding-right: 20px; margin-right: 0px;
}
.list-image {
height: 300px;
} }
.list{ .list{
width: 100%; width: 90vw;
height: auto;
} }
#page-header { #page-header {
@ -452,13 +491,14 @@ hr {
} }
#page-header { #page-header {
overflow-y: scroll; overflow-y: hidden;
overflow-x: hidden; overflow-x: scroll;
height: 20px; height: 40px;
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
white-space: nowrap; white-space: nowrap;
scroll-snap-align: center; scroll-snap-align: center;
gap: 5px;
} }
.page-info-title { .page-info-title {
@ -473,4 +513,14 @@ hr {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
}
@keyframes fadeInUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} }

323
public/js/list.js
View File

@ -1,149 +1,174 @@
import * as THREE from 'three' // import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js'; // import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; // import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { randFloat } from 'three/src/math/MathUtils.js'; // import { randFloat } from 'three/src/math/MathUtils.js';
// let scene, camera, renderer;
let scene, camera, renderer // let aspect, frustumSize;
let aspect, frustumSize // let time = 0;
let time = 0 // let lastTime = 0;
let lastTime = 0 // let controls;
let controls // let mesh;
let mesh // let composer;
let composer // let cubeGroup = [];
let cubeGroup = [] // let instancedMesh, dummy, count;
let instancedMesh, dummy, count
// const cont = document.getElementById("container")
const texture = new THREE.TextureLoader().load("public/images/blue-and-white.png") // //cont.style.opacity = "1"
texture.minFilter = THREE.NearestFilter // cont.style.filter = "blur(50px)"
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping; // // Initialize loading manager
// const loadingManager = new THREE.LoadingManager();
// loadingManager.onLoad = function() {
function init(){ // // Run init after all resources are loaded
SetupRenderer() // init();
scene = new THREE.Scene() // };
SetupCamera()
SetupControls() // // Load texture with loading manager
composer = new EffectComposer( renderer ); // const textureLoader = new THREE.TextureLoader(loadingManager);
const renderPixelatedPass = new RenderPixelatedPass( 8, scene, camera ); // const texture = textureLoader.load("public/images/blue-and-white.png");
renderPixelatedPass.normalEdgeStrength = 0; // texture.minFilter = THREE.NearestFilter;
renderPixelatedPass.depthEdgeStrength = 1; // texture.colorSpace = THREE.SRGBColorSpace;
renderPixelatedPass.pixelAlignedPanning = false; // texture.wrapS = THREE.RepeatWrapping;
composer.addPass( renderPixelatedPass ); // texture.wrapT = THREE.RepeatWrapping;
const outputPass = new OutputPass();
composer.addPass( outputPass ); // function init() {
SetupCubes() // SetupRenderer();
AddLights() // scene = new THREE.Scene();
animate() // SetupCamera();
} // SetupControls();
// composer = new EffectComposer(renderer);
// const renderPixelatedPass = new RenderPixelatedPass(8, scene, camera);
function SetupCubes() { // renderPixelatedPass.normalEdgeStrength = 0;
const cubeGeometry = new THREE.BoxGeometry(); // renderPixelatedPass.depthEdgeStrength = 1;
const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture }); // renderPixelatedPass.pixelAlignedPanning = false;
// composer.addPass(renderPixelatedPass);
// Create an InstancedMesh // const outputPass = new OutputPass();
count = 80; // composer.addPass(outputPass);
instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count); // SetupCubes();
scene.add(instancedMesh) // AddLights();
dummy = new THREE.Object3D(); // animate();
// }
for (let i = 0; i < count; i++) {
let size = randFloat(5, 8); // function SetupCubes() {
dummy.scale.set(size, size, size); // const cubeGeometry = new THREE.BoxGeometry();
dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0); // const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix); // // Create an InstancedMesh
} // count = 4;
// instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count);
} // scene.add(instancedMesh);
// dummy = new THREE.Object3D();
function SetupRenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) // for (let i = 0; i < count; i++) {
renderer.setClearColor(0xffffff, 0); // let size = randFloat(5, 8);
renderer.setSize(window.innerWidth, window.innerHeight) // dummy.scale.set(size, size, size);
document.getElementById('container').appendChild(renderer.domElement) // dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0);
} // dummy.updateMatrix();
// instancedMesh.setMatrixAt(i, dummy.matrix);
function SetupCamera(){ // }
aspect = (window.innerWidth) / (window.innerHeight) // }
frustumSize = 10
camera = new THREE.OrthographicCamera( // function SetupRenderer() {
frustumSize * aspect / -2, // renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
frustumSize * aspect / 2, // renderer.setClearColor(0xffffff, 0);
frustumSize / 2, // renderer.setSize(window.innerWidth, window.innerHeight);
frustumSize / -2, // document.getElementById('container').appendChild(renderer.domElement);
0.01, // }
5000
) // function SetupCamera() {
// aspect = window.innerWidth / window.innerHeight;
camera.position.x = 5 // frustumSize = 10;
} // camera = new THREE.OrthographicCamera(
// (frustumSize * aspect) / -2,
function SetupControls(){ // (frustumSize * aspect) / 2,
controls = new OrbitControls(camera, renderer.domElement) // frustumSize / 2,
controls.enableRotate = false; // frustumSize / -2,
controls.enablePan = false // 0.01,
controls.zoomToCursor = false; // 5000
controls.mouseButtons = { // );
RIGHT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY, // camera.position.x = 5;
LEFT: THREE.MOUSE.PAN // }
}
camera.position.set(0, 0, 20) // function SetupControls() {
controls.update() // controls = new OrbitControls(camera, renderer.domElement);
} // controls.enableRotate = false;
// controls.enablePan = false;
function AddLights() { // controls.zoomToCursor = false;
// Add Ambient Light // controls.mouseButtons = {
const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light // RIGHT: THREE.MOUSE.ROTATE,
scene.add(ambientLight); // MIDDLE: THREE.MOUSE.DOLLY,
// LEFT: THREE.MOUSE.PAN
// Add Directional Light // };
const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light // camera.position.set(0, 0, 20);
directionalLight.position.set(-5, 0, 5).normalize(); // controls.update();
scene.add(directionalLight); // }
}
// function AddLights() {
const matrix = new THREE.Matrix4() // // Add Ambient Light
function animate(){ // const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light
requestAnimationFrame(animate) // scene.add(ambientLight);
// Rotate instanced meshes
const time = performance.now() * 0.001; // // Add Directional Light
const rotationSpeedX = 0.02; // const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
const rotationSpeedY = 0.01; // directionalLight.position.set(-5, 0, 5).normalize();
lastTime = time // scene.add(directionalLight);
// }
for (let i = 0; i < count; i++) { // const matrix = new THREE.Matrix4();
instancedMesh.getMatrixAt(i, matrix) // function animate() {
matrix.decompose(dummy.position, dummy.rotation, dummy.scale) // requestAnimationFrame(animate);
dummy.rotation.set(i/1000 * time, i/1000 * time, i/1000 * time); // // Rotate instanced meshes
dummy.updateMatrix(); // const time = performance.now() * 0.001;
instancedMesh.setMatrixAt(i, dummy.matrix); // const rotationSpeedX = 0.02;
} // const rotationSpeedY = 0.01;
instancedMesh.instanceMatrix.needsUpdate = true // lastTime = time;
composer.render() // for (let i = 0; i < count; i++) {
//renderer.render(scene, camera) // instancedMesh.getMatrixAt(i, matrix);
} // matrix.decompose(dummy.position, dummy.rotation, dummy.scale);
// dummy.rotation.set((i / 1000) * time, (i / 1000) * time, (i / 1000) * time);
window.addEventListener('resize', () => { // dummy.updateMatrix();
aspect = (window.innerWidth) / (window.innerHeight) // instancedMesh.setMatrixAt(i, dummy.matrix);
camera.left = -frustumSize * aspect / 2 // }
camera.right = frustumSize * aspect / 2 // instancedMesh.instanceMatrix.needsUpdate = true;
camera.top = frustumSize / 2
camera.bottom = -frustumSize / 2 // composer.render();
camera.updateProjectionMatrix() // //renderer.render(scene, camera)
renderer.setPixelRatio(window.devicePixelRatio) // }
renderer.setSize(window.innerWidth, window.innerHeight)
}) // window.addEventListener('resize', () => {
// aspect = window.innerWidth / window.innerHeight;
// camera.left = (-frustumSize * aspect) / 2;
init() // camera.right = (frustumSize * aspect) / 2;
// camera.top = frustumSize / 2;
// camera.bottom = -frustumSize / 2;
// camera.updateProjectionMatrix();
// renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setSize(window.innerWidth, window.innerHeight);
// });
document.addEventListener("DOMContentLoaded", function() {
// Check if the current URL contains the path "events"
if (window.location.pathname.includes("events")) {
// Select the element you want to change
const myElement = document.getElementById("events");
// Add a class to change its style
myElement.classList.add("active-page");
}
else if (window.location.pathname.includes("exhibitions")) {
// Select the element you want to change
const myElement = document.getElementById("exhibitions");
// Add a class to change its style
myElement.classList.add("active-page");
} else if (window.location.pathname.includes("conferences")) {
// Select the element you want to change
const myElement = document.getElementById("conferences");
// Add a class to change its style
myElement.classList.add("active-page");
}
});

3
templates/base.html
View File

@ -12,6 +12,9 @@
<meta name="robots" content="all" /> <meta name="robots" content="all" />
<meta name="language" content="en-ie" /> <meta name="language" content="en-ie" />
<title>Beta Festival 2024 {% block title %}{% endblock %}</title> <title>Beta Festival 2024 {% block title %}{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Syne+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon/beta-favicon-32x32.png') }}" sizes="32x32"> <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon/beta-favicon-32x32.png') }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon/beta-favicon-192x192.png') }}" sizes="192x192"> <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon/beta-favicon-192x192.png') }}" sizes="192x192">

6
templates/index.html
View File

@ -13,15 +13,15 @@
</div> </div>
<div id="hyperlink-container"> <div id="hyperlink-container">
<a href="/exhibitions"><div class="hyperlink"> <a href="/exhibitions"><div class="hyperlink">
<div>↗</div> <div>/</div>
<div>Exhibitions</div> <div>Exhibitions</div>
</div></a> </div></a>
<a href="/events"><div class="hyperlink"> <a href="/events"><div class="hyperlink">
<div>↗</div> <div>/</div>
<div>Events</div> <div>Events</div>
</div></a> </div></a>
<a href="/conferences"><div class="hyperlink"> <a href="/conferences"><div class="hyperlink">
<div>↗</div> <div>/</div>
<div>Conferences</div> <div>Conferences</div>
</div></a> </div></a>
</div> </div>

9
templates/list.html
View File

@ -6,7 +6,9 @@
<div id="main-wrapper"> <div id="main-wrapper">
{% include '_nav.html' %} {% include '_nav.html' %}
<div id="page-header"> <div id="page-header">
<div>/{{ title }}</div> <a href="/events"><div class="hyperlink-header" id="events">/ Events</div></a>
<a href="/exhibitions"><div class="hyperlink-header" id="exhibitions">/ Exhibitions</div></a>
<a href="/conferences"><div class="hyperlink-header" id="conferences">/ Conferences</div></a>
</div> </div>
<hr> <hr>
<div id="main-container"> <div id="main-container">
@ -15,10 +17,10 @@
<a href='/{{ title.lower() }}/{{ event.title }}'> <a href='/{{ title.lower() }}/{{ event.title }}'>
<div class="list"> <div class="list">
<div class="list-image"> <div class="list-image">
<img src="{{ event.image }}" alt="{{ event.title }}"> <img src="{{ event.image }}" alt="{{ event.title }}" loading="lazy">
<div class="list-image-overlay"></div> <div class="list-image-overlay"></div>
</div> </div>
<div class="list-title">→ {{ event.title }}</div> <div class="list-title">☉ {{ event.title }}</div>
<div class="list-artists"> <div class="list-artists">
<p>[{{ event.artists | join(', ') }}]</p> <p>[{{ event.artists | join(', ') }}]</p>
</div> </div>
@ -40,4 +42,5 @@
</div> </div>
<div id="container"></div> <div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/list.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/list.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
{% endblock content %} {% endblock content %}
Write Preview
Loading…
Cancel
Save