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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      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

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 {
padding: 0;
margin: 0;
@ -49,6 +47,7 @@ hr {
flex-direction: column;
height: 100vh;
overflow-y: hidden;
overflow-x: hidden;
}
#nav-bar {
@ -109,6 +108,30 @@ hr {
padding-left: 25px;
padding-right: 25px;
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{
@ -122,6 +145,7 @@ hr {
margin: 0;
padding: 0;
z-index: -999;
opacity: 1;
}
#list-container {
@ -183,7 +207,7 @@ hr {
.list-details {
font-size: 20px;
color: #0075FF;
color: black;
display: flex;
flex-direction: row;
justify-content: flex-start;
@ -196,7 +220,7 @@ hr {
.list-artists {
font-size: 20px;
font-family: 'Syne Mono', monospace;
color: #0075FF;
color: black;
display: flex;
flex-wrap: wrap;
flex-direction: row;
@ -209,15 +233,23 @@ hr {
padding-bottom: 20px;
padding-left: 50px;
font-size: 30px;
gap: 50px;
gap: 20px;
height: 100px;
font-family: 'Syne Mono', monospace;
color: #0075FF;
align-items: center;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: hidden;
}
#page-header::-webkit-scrollbar {
display: none;
}
#page-header a {
cursor: pointer;
}
.page-info-cont {
display: flex;
flex-direction: row;
@ -337,11 +369,13 @@ hr {
}
#page-header {
overflow-y: scroll;
overflow-x: hidden;
overflow-y: hidden;
overflow-x: scroll;
padding-right: 20px;
padding-left: 20px;
white-space: nowrap;
gap: 10px;
height: 40px;
}
#container-article {
@ -402,13 +436,18 @@ hr {
text-align: center;
}
#list-container {
padding-left: 20px;
padding-right: 20px;
.hyperlink-header {
margin-left: 0px;
margin-right: 0px;
}
.list-image {
height: 300px;
}
.list{
width: 100%;
width: 90vw;
height: auto;
}
#page-header {
@ -452,13 +491,14 @@ hr {
}
#page-header {
overflow-y: scroll;
overflow-x: hidden;
height: 20px;
overflow-y: hidden;
overflow-x: scroll;
height: 40px;
padding-right: 20px;
padding-left: 20px;
white-space: nowrap;
scroll-snap-align: center;
gap: 5px;
}
.page-info-title {
@ -474,3 +514,13 @@ hr {
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 { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { randFloat } from 'three/src/math/MathUtils.js';
let scene, camera, renderer
let aspect, frustumSize
let time = 0
let lastTime = 0
let controls
let mesh
let composer
let cubeGroup = []
let instancedMesh, dummy, count
const texture = new THREE.TextureLoader().load("public/images/blue-and-white.png")
texture.minFilter = THREE.NearestFilter
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
function init(){
SetupRenderer()
scene = new THREE.Scene()
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 = 80;
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)
})
init()
// import * as THREE from 'three';
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
// import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
// import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
// import { randFloat } from 'three/src/math/MathUtils.js';
// let scene, camera, renderer;
// let aspect, frustumSize;
// let time = 0;
// let lastTime = 0;
// let controls;
// let mesh;
// let composer;
// let cubeGroup = [];
// let instancedMesh, dummy, count;
// const cont = document.getElementById("container")
// //cont.style.opacity = "1"
// cont.style.filter = "blur(50px)"
// // Initialize loading manager
// const loadingManager = new THREE.LoadingManager();
// loadingManager.onLoad = function() {
// // Run init after all resources are loaded
// init();
// };
// // Load texture with loading manager
// const textureLoader = new THREE.TextureLoader(loadingManager);
// const texture = textureLoader.load("public/images/blue-and-white.png");
// texture.minFilter = THREE.NearestFilter;
// texture.colorSpace = THREE.SRGBColorSpace;
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// function init() {
// SetupRenderer();
// scene = new THREE.Scene();
// 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
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="language" content="en-ie" />
<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="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">

6
templates/index.html
View File

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

9
templates/list.html
View File

@ -6,7 +6,9 @@
<div id="main-wrapper">
{% include '_nav.html' %}
<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>
<hr>
<div id="main-container">
@ -15,10 +17,10 @@
<a href='/{{ title.lower() }}/{{ event.title }}'>
<div class="list">
<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>
<div class="list-title">→ {{ event.title }}</div>
<div class="list-title">☉ {{ event.title }}</div>
<div class="list-artists">
<p>[{{ event.artists | join(', ') }}]</p>
</div>
@ -40,4 +42,5 @@
</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/skybox.js') }}"></script>
{% endblock content %}
Write Preview
Loading…
Cancel
Save