Cailean Finn
5 months ago
5 changed files with 252 additions and 171 deletions
@ -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; |
||||
|
} |
||||
|
|
||||
} |
} |
@ -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"); |
||||
|
} |
||||
|
}); |
||||
|
@ -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"> |
||||
|
Loading…
Reference in new issue