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

removal of list js

graphics
Cailean Finn 5 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. 80
      public/css/styles.css
  2. 319
      public/js/list.js
  3. 3
      templates/base.html
  4. 6
      templates/index.html
  5. 9
      templates/list.html

80
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;
@ -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 {
@ -474,3 +514,13 @@ hr {
height: 100%; height: 100%;
} }
} }
@keyframes fadeInUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

319
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);
// renderPixelatedPass.normalEdgeStrength = 0;
// renderPixelatedPass.depthEdgeStrength = 1;
// renderPixelatedPass.pixelAlignedPanning = false;
// composer.addPass(renderPixelatedPass);
// const outputPass = new OutputPass();
// composer.addPass(outputPass);
// SetupCubes();
// AddLights();
// animate();
// }
// function SetupCubes() {
// const cubeGeometry = new THREE.BoxGeometry();
// const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
// // Create an InstancedMesh
// count = 4;
// instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count);
// scene.add(instancedMesh);
// dummy = new THREE.Object3D();
// for (let i = 0; i < count; i++) {
// let size = randFloat(5, 8);
// dummy.scale.set(size, size, size);
// dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0);
// dummy.updateMatrix();
// instancedMesh.setMatrixAt(i, dummy.matrix);
// }
// }
// function SetupRenderer() {
// renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
// renderer.setClearColor(0xffffff, 0);
// renderer.setSize(window.innerWidth, window.innerHeight);
// document.getElementById('container').appendChild(renderer.domElement);
// }
// function SetupCamera() {
// aspect = window.innerWidth / window.innerHeight;
// frustumSize = 10;
// camera = new THREE.OrthographicCamera(
// (frustumSize * aspect) / -2,
// (frustumSize * aspect) / 2,
// frustumSize / 2,
// frustumSize / -2,
// 0.01,
// 5000
// );
// camera.position.x = 5;
// }
// function SetupControls() {
// controls = new OrbitControls(camera, renderer.domElement);
// controls.enableRotate = false;
// controls.enablePan = false;
// controls.zoomToCursor = false;
// controls.mouseButtons = {
// RIGHT: THREE.MOUSE.ROTATE,
// MIDDLE: THREE.MOUSE.DOLLY,
// LEFT: THREE.MOUSE.PAN
// };
// camera.position.set(0, 0, 20);
// controls.update();
// }
// function AddLights() {
// // Add Ambient Light
// const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light
// scene.add(ambientLight);
// // Add Directional Light
// const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
// directionalLight.position.set(-5, 0, 5).normalize();
// scene.add(directionalLight);
// }
// const matrix = new THREE.Matrix4();
// function animate() {
// requestAnimationFrame(animate);
// // Rotate instanced meshes
// const time = performance.now() * 0.001;
// const rotationSpeedX = 0.02;
// const rotationSpeedY = 0.01;
// lastTime = time;
// for (let i = 0; i < count; i++) {
// instancedMesh.getMatrixAt(i, matrix);
// matrix.decompose(dummy.position, dummy.rotation, dummy.scale);
// dummy.rotation.set((i / 1000) * time, (i / 1000) * time, (i / 1000) * time);
// dummy.updateMatrix();
// instancedMesh.setMatrixAt(i, dummy.matrix);
// }
// instancedMesh.instanceMatrix.needsUpdate = true;
// composer.render();
// //renderer.render(scene, camera)
// }
// window.addEventListener('resize', () => {
// aspect = window.innerWidth / window.innerHeight;
// camera.left = (-frustumSize * aspect) / 2;
// 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
function SetupCubes() { const myElement = document.getElementById("exhibitions");
const cubeGeometry = new THREE.BoxGeometry(); // Add a class to change its style
const cubeMaterial = new THREE.MeshPhongMaterial({ map: texture }); myElement.classList.add("active-page");
} else if (window.location.pathname.includes("conferences")) {
// Create an InstancedMesh // Select the element you want to change
count = 80; const myElement = document.getElementById("conferences");
instancedMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, count); // Add a class to change its style
scene.add(instancedMesh) myElement.classList.add("active-page");
dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
let size = randFloat(5, 8);
dummy.scale.set(size, size, size);
dummy.position.set(randFloat(-10, 10), randFloat(-8, 8), 0);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
}
function SetupRenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setClearColor(0xffffff, 0);
renderer.setSize(window.innerWidth, window.innerHeight)
document.getElementById('container').appendChild(renderer.domElement)
}
function SetupCamera(){
aspect = (window.innerWidth) / (window.innerHeight)
frustumSize = 10
camera = new THREE.OrthographicCamera(
frustumSize * aspect / -2,
frustumSize * aspect / 2,
frustumSize / 2,
frustumSize / -2,
0.01,
5000
)
camera.position.x = 5
}
function SetupControls(){
controls = new OrbitControls(camera, renderer.domElement)
controls.enableRotate = false;
controls.enablePan = false
controls.zoomToCursor = false;
controls.mouseButtons = {
RIGHT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
LEFT: THREE.MOUSE.PAN
}
camera.position.set(0, 0, 20)
controls.update()
} }
});
function AddLights() {
// Add Ambient Light
const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light
scene.add(ambientLight);
// Add Directional Light
const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
directionalLight.position.set(-5, 0, 5).normalize();
scene.add(directionalLight);
}
const matrix = new THREE.Matrix4()
function animate(){
requestAnimationFrame(animate)
// Rotate instanced meshes
const time = performance.now() * 0.001;
const rotationSpeedX = 0.02;
const rotationSpeedY = 0.01;
lastTime = time
for (let i = 0; i < count; i++) {
instancedMesh.getMatrixAt(i, matrix)
matrix.decompose(dummy.position, dummy.rotation, dummy.scale)
dummy.rotation.set(i/1000 * time, i/1000 * time, i/1000 * time);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true
composer.render()
//renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
aspect = (window.innerWidth) / (window.innerHeight)
camera.left = -frustumSize * aspect / 2
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)
})
init()

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