From 9779d737e4b34f10e1f9787509ba48ffc66582fe Mon Sep 17 00:00:00 2001 From: Cedric Rische Date: Fri, 22 Nov 2024 09:15:00 +0100 Subject: [PATCH 1/2] Moved sponsoring Added new Team Added new Header Updated to health --- next-env.d.ts | 2 +- src/app/layout.tsx | 6 +- src/app/page.tsx | 9 +- .../CTH-Logo-vertical_2000px-white.png | Bin .../{ => 2024}/CTH-logo-vertical_white.svg | 0 .../sponsors/{ => 2024}/DreesSommer.webp | Bin .../sponsors/{ => 2024}/axelspringer.webp | Bin .../{ => 2024}/berta-rudi_logo_negativ_sw.svg | 214 +++---- .../{ => 2024}/cropped-logo-starwit-white.png | Bin .../{ => 2024}/cropped-logo-starwit.png | Bin src/assets/images/sponsors/{ => 2024}/db.svg | 0 .../images/sponsors/{ => 2024}/e-school.svg | 0 .../images/sponsors/{ => 2024}/holySquad.png | Bin .../images/sponsors/{ => 2024}/potsdam.webp | Bin src/assets/images/sponsors/2025/engine.svg | 12 + src/components/Faq/Faq.jsx | 4 +- src/components/Features/Features.jsx | 7 +- src/components/Gallery/Gallery.jsx | 37 +- src/components/LandingImage/LandingImage.jsx | 146 ++--- .../LandingImage/MeshContainer/Gradient.js | 550 ++++++++++++++++++ .../MeshContainer/MeshContainer.tsx | 42 ++ .../LandingImage/MeshContainer/gradient.css | 8 + .../Sponsors/{Sponsors.jsx => Sponsors24.jsx} | 22 +- src/components/Sponsors/Sponsors25.jsx | 46 ++ src/components/Team/Team.jsx | 72 ++- src/components/Theme/HackHpiTheme.js | 4 +- src/components/WhatToExpect/WhatToExpect.jsx | 4 +- 27 files changed, 958 insertions(+), 227 deletions(-) rename src/assets/images/sponsors/{ => 2024}/CTH-Logo-vertical_2000px-white.png (100%) rename src/assets/images/sponsors/{ => 2024}/CTH-logo-vertical_white.svg (100%) rename src/assets/images/sponsors/{ => 2024}/DreesSommer.webp (100%) rename src/assets/images/sponsors/{ => 2024}/axelspringer.webp (100%) rename src/assets/images/sponsors/{ => 2024}/berta-rudi_logo_negativ_sw.svg (98%) rename src/assets/images/sponsors/{ => 2024}/cropped-logo-starwit-white.png (100%) rename src/assets/images/sponsors/{ => 2024}/cropped-logo-starwit.png (100%) rename src/assets/images/sponsors/{ => 2024}/db.svg (100%) rename src/assets/images/sponsors/{ => 2024}/e-school.svg (100%) rename src/assets/images/sponsors/{ => 2024}/holySquad.png (100%) rename src/assets/images/sponsors/{ => 2024}/potsdam.webp (100%) create mode 100644 src/assets/images/sponsors/2025/engine.svg create mode 100644 src/components/LandingImage/MeshContainer/Gradient.js create mode 100644 src/components/LandingImage/MeshContainer/MeshContainer.tsx create mode 100644 src/components/LandingImage/MeshContainer/gradient.css rename src/components/Sponsors/{Sponsors.jsx => Sponsors24.jsx} (78%) create mode 100644 src/components/Sponsors/Sponsors25.jsx diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03..40c3d68 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c47f7ad..d65c7b6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,13 +11,13 @@ export default function RootLayout({children,}: { children: React.ReactNode }) { - + - HackHPI 2024 | tomorrow's reality, today's vision. smart cities edition. + HackHPI 2025 | Health Edition. + content={"Explore the future of health at HPI in Potsdam. Join motivated students for two days of innovation, workshops, and collaboration with top-notch sponsors offering support and expertise. Tackle a challenge and dive into the world of health."}/> diff --git a/src/app/page.tsx b/src/app/page.tsx index 996fd5a..2bbbdae 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,8 +1,7 @@ import {VerifiedChecker} from "../components/VerifiedChecker/VerifiedChecker"; import WhatToExpect from "../components/WhatToExpect/WhatToExpect"; -import Sponsors from "../components/Sponsors/Sponsors"; +import Sponsors25 from "../components/Sponsors/Sponsors25"; import Newsletter from "../components/Newsletter/Newsletter"; -import {TimeTable} from "../components/TimeTable/TimeTable"; import {Faq} from "../components/Faq/Faq"; import Team from "../components/Team/Team"; import Speakers from "../components/Speakers/Speakers"; @@ -18,14 +17,16 @@ export default function Page() { - + {/* */} - + {/* + + */} diff --git a/src/assets/images/sponsors/CTH-Logo-vertical_2000px-white.png b/src/assets/images/sponsors/2024/CTH-Logo-vertical_2000px-white.png similarity index 100% rename from src/assets/images/sponsors/CTH-Logo-vertical_2000px-white.png rename to src/assets/images/sponsors/2024/CTH-Logo-vertical_2000px-white.png diff --git a/src/assets/images/sponsors/CTH-logo-vertical_white.svg b/src/assets/images/sponsors/2024/CTH-logo-vertical_white.svg similarity index 100% rename from src/assets/images/sponsors/CTH-logo-vertical_white.svg rename to src/assets/images/sponsors/2024/CTH-logo-vertical_white.svg diff --git a/src/assets/images/sponsors/DreesSommer.webp b/src/assets/images/sponsors/2024/DreesSommer.webp similarity index 100% rename from src/assets/images/sponsors/DreesSommer.webp rename to src/assets/images/sponsors/2024/DreesSommer.webp diff --git a/src/assets/images/sponsors/axelspringer.webp b/src/assets/images/sponsors/2024/axelspringer.webp similarity index 100% rename from src/assets/images/sponsors/axelspringer.webp rename to src/assets/images/sponsors/2024/axelspringer.webp diff --git a/src/assets/images/sponsors/berta-rudi_logo_negativ_sw.svg b/src/assets/images/sponsors/2024/berta-rudi_logo_negativ_sw.svg similarity index 98% rename from src/assets/images/sponsors/berta-rudi_logo_negativ_sw.svg rename to src/assets/images/sponsors/2024/berta-rudi_logo_negativ_sw.svg index cf0bcdc..75e5b68 100644 --- a/src/assets/images/sponsors/berta-rudi_logo_negativ_sw.svg +++ b/src/assets/images/sponsors/2024/berta-rudi_logo_negativ_sw.svg @@ -1,107 +1,107 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/sponsors/cropped-logo-starwit-white.png b/src/assets/images/sponsors/2024/cropped-logo-starwit-white.png similarity index 100% rename from src/assets/images/sponsors/cropped-logo-starwit-white.png rename to src/assets/images/sponsors/2024/cropped-logo-starwit-white.png diff --git a/src/assets/images/sponsors/cropped-logo-starwit.png b/src/assets/images/sponsors/2024/cropped-logo-starwit.png similarity index 100% rename from src/assets/images/sponsors/cropped-logo-starwit.png rename to src/assets/images/sponsors/2024/cropped-logo-starwit.png diff --git a/src/assets/images/sponsors/db.svg b/src/assets/images/sponsors/2024/db.svg similarity index 100% rename from src/assets/images/sponsors/db.svg rename to src/assets/images/sponsors/2024/db.svg diff --git a/src/assets/images/sponsors/e-school.svg b/src/assets/images/sponsors/2024/e-school.svg similarity index 100% rename from src/assets/images/sponsors/e-school.svg rename to src/assets/images/sponsors/2024/e-school.svg diff --git a/src/assets/images/sponsors/holySquad.png b/src/assets/images/sponsors/2024/holySquad.png similarity index 100% rename from src/assets/images/sponsors/holySquad.png rename to src/assets/images/sponsors/2024/holySquad.png diff --git a/src/assets/images/sponsors/potsdam.webp b/src/assets/images/sponsors/2024/potsdam.webp similarity index 100% rename from src/assets/images/sponsors/potsdam.webp rename to src/assets/images/sponsors/2024/potsdam.webp diff --git a/src/assets/images/sponsors/2025/engine.svg b/src/assets/images/sponsors/2025/engine.svg new file mode 100644 index 0000000..9653143 --- /dev/null +++ b/src/assets/images/sponsors/2025/engine.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx index 279c610..fba97aa 100644 --- a/src/components/Faq/Faq.jsx +++ b/src/components/Faq/Faq.jsx @@ -47,7 +47,7 @@ let faqs = [ text: "Take S7 from Berlin Central Station (\"Hauptbahnhof\") towards Potsdam and exit at Griebnitzsee." }, { title: "How should I prepare?", - text: "Bring your laptop and a charger, comfortable clothes, and, above all, motivation to hack! You can dive into the topic of Smart Cities in advance, but there will be introductory sessions as well." + text: "Bring your laptop and a charger, comfortable clothes, and, above all, motivation to hack! You can dive into the topic of health in advance, but there will be introductory sessions as well." } ] }, @@ -82,7 +82,7 @@ let faqs = [ items: [ { title: "What are the challenges?", - text: "All challenges are connected to the subject of Smart Cities, but we cannot tell you what awaits you. And honestly, who wants to miss the thrill of a surprise challenge? Anyway, the exact challenges will be announced at the event, so stay tuned!" + text: "All challenges are connected to the subject of health, but we cannot tell you what awaits you. And honestly, who wants to miss the thrill of a surprise challenge? Anyway, the exact challenges will be announced at the event, so stay tuned!" }, { title: "What are the prizes?", diff --git a/src/components/Features/Features.jsx b/src/components/Features/Features.jsx index 907072d..e4e0d40 100644 --- a/src/components/Features/Features.jsx +++ b/src/components/Features/Features.jsx @@ -27,9 +27,10 @@ export function Features() { }, { icon: , - title: "Cash prizes totaling up to €3500", - subtitle: "Up for grabs are cash prizes totaling up to €3500, and among other things, €100 for the best meme of the event." + title: "Cash prizes", + subtitle: "Up for grabs are cash prizes for the best result, and among other things, prices for the best meme of the event." }, + /* { icon: , title: "Free tickets for the Urban Innovation Forum in Berlin", @@ -40,6 +41,8 @@ export function Features() { title: "Pitch your idea at the Greentech Festival in Berlin", subtitle: "Two of this year’s HackHPI winning team, will have the opportunity to pitch the results at the startup stage of the Greentech Festival in Berlin on May 18th." } + + */ ] return ( diff --git a/src/components/Gallery/Gallery.jsx b/src/components/Gallery/Gallery.jsx index bc49c3a..4328186 100644 --- a/src/components/Gallery/Gallery.jsx +++ b/src/components/Gallery/Gallery.jsx @@ -29,21 +29,28 @@ export function Gallery() { margin: "0.5em", display: "flex" }}> - {imageList.map(image => )} - {imageList.map(image => )} + {imageList.map(image => )} + {imageList.map(image => + )} } diff --git a/src/components/LandingImage/LandingImage.jsx b/src/components/LandingImage/LandingImage.jsx index b3cc274..f6acc55 100644 --- a/src/components/LandingImage/LandingImage.jsx +++ b/src/components/LandingImage/LandingImage.jsx @@ -3,85 +3,87 @@ import {Box, Button, Card, Container, Stack, Typography} from "@mui/material"; import {TypeAnimation} from "react-type-animation"; import Countdown from "./Countdown.jsx"; import {CalendarMonthOutlined, Camera, CameraAlt, LocationOn} from "@mui/icons-material"; +import {useEffect, useState} from "react"; +import {MeshContainer} from "./MeshContainer/MeshContainer"; function LandingImage() { + const [timeLeft, setTimeLeft] = useState(calculateTimeDiff()) + + function calculateTimeDiff() { + return new Date(new Date(2025, 2, 21) - new Date()) + } + + useEffect(() => { + const i = setInterval(() => { + setTimeLeft(calculateTimeDiff()) + }, 1000); + return () => clearInterval(i); + }, []); //dependency, if end changes remount + return ( - - - + - {"HackHPI -
- {/**/} - - Thank you, - - - - -
- - - - - - - 5th - 6th April 2024 - - - - - + + {"HackHPI +
+ + Medical Edition + + + + +
+ + + + + + + 21th - 22th March 2025 + + + + - + ) + } export default LandingImage \ No newline at end of file diff --git a/src/components/LandingImage/MeshContainer/Gradient.js b/src/components/LandingImage/MeshContainer/Gradient.js new file mode 100644 index 0000000..0837dc1 --- /dev/null +++ b/src/components/LandingImage/MeshContainer/Gradient.js @@ -0,0 +1,550 @@ +/* +* Stripe WebGl Gradient Animation +* All Credits to Stripe.com +* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and +* commented out for now. +* https://kevinhufnagl.com +*/ + + +//Converting colors to proper format +function normalizeColor(hexCode) { + return [(hexCode >> 16 & 255) / 255, (hexCode >> 8 & 255) / 255, (255 & hexCode) / 255] +} + +["SCREEN", "LINEAR_LIGHT"].reduce((hexCode, t, n) => Object.assign(hexCode, { + [t]: n +}), {}); + +//Essential functionality of WebGl +//t = width +//n = height +class MiniGl { + constructor(canvas, width, height, debug = false) { + const _miniGl = this, + debug_output = -1 !== document.location.search.toLowerCase().indexOf("debug=webgl"); + _miniGl.canvas = canvas, _miniGl.gl = _miniGl.canvas.getContext("webgl", { + antialias: true + }), _miniGl.meshes = []; + const context = _miniGl.gl; + width && height && this.setSize(width, height), _miniGl.lastDebugMsg, _miniGl.debug = debug && debug_output ? function (e) { + const t = new Date; + t - _miniGl.lastDebugMsg > 1e3 && console.log("---"), console.log(t.toLocaleTimeString() + Array(Math.max(0, 32 - e.length)).join(" ") + e + ": ", ...Array.from(arguments).slice(1)), _miniGl.lastDebugMsg = t + } : () => { + }, Object.defineProperties(_miniGl, { + Material: { + enumerable: false, + value: class { + constructor(vertexShaders, fragments, uniforms = {}) { + const material = this; + + function getShaderByType(type, source) { + const shader = context.createShader(type); + return context.shaderSource(shader, source), context.compileShader(shader), context.getShaderParameter(shader, context.COMPILE_STATUS) || console.error(context.getShaderInfoLog(shader)), _miniGl.debug("Material.compileShaderSource", { + source: source + }), shader + } + + function getUniformVariableDeclarations(uniforms, type) { + return Object.entries(uniforms).map(([uniform, value]) => value.getDeclaration(uniform, type)).join("\n") + } + + material.uniforms = uniforms, material.uniformInstances = []; + + const prefix = "\n precision highp float;\n "; + material.vertexSource = `\n ${prefix}\n attribute vec4 position;\n attribute vec2 uv;\n attribute vec2 uvNorm;\n ${getUniformVariableDeclarations(_miniGl.commonUniforms, "vertex")}\n ${getUniformVariableDeclarations(uniforms, "vertex")}\n ${vertexShaders}\n `, + material.Source = `\n ${prefix}\n ${getUniformVariableDeclarations(_miniGl.commonUniforms, "fragment")}\n ${getUniformVariableDeclarations(uniforms, "fragment")}\n ${fragments}\n `, + material.vertexShader = getShaderByType(context.VERTEX_SHADER, material.vertexSource), + material.fragmentShader = getShaderByType(context.FRAGMENT_SHADER, material.Source), + material.program = context.createProgram(), + context.attachShader(material.program, material.vertexShader), + context.attachShader(material.program, material.fragmentShader), + context.linkProgram(material.program), + context.getProgramParameter(material.program, context.LINK_STATUS) || console.error(context.getProgramInfoLog(material.program)), + context.useProgram(material.program), + material.attachUniforms(void 0, _miniGl.commonUniforms), + material.attachUniforms(void 0, material.uniforms) + } + + //t = uniform + attachUniforms(name, uniforms) { + //n = material + const material = this; + void 0 === name ? Object.entries(uniforms).forEach(([name, uniform]) => { + material.attachUniforms(name, uniform) + }) : "array" == uniforms.type ? uniforms.value.forEach((uniform, i) => material.attachUniforms(`${name}[${i}]`, uniform)) : "struct" == uniforms.type ? Object.entries(uniforms.value).forEach(([uniform, i]) => material.attachUniforms(`${name}.${uniform}`, i)) : (_miniGl.debug("Material.attachUniforms", { + name: name, + uniform: uniforms + }), material.uniformInstances.push({ + uniform: uniforms, + location: context.getUniformLocation(material.program, name) + })) + } + } + }, + Uniform: { + enumerable: !1, + value: class { + constructor(e) { + this.type = "float", Object.assign(this, e); + this.typeFn = { + float: "1f", + int: "1i", + vec2: "2fv", + vec3: "3fv", + vec4: "4fv", + mat4: "Matrix4fv" + } [this.type] || "1f", this.update() + } + + update(value) { + void 0 !== this.value && context[`uniform${this.typeFn}`](value, 0 === this.typeFn.indexOf("Matrix") ? this.transpose : this.value, 0 === this.typeFn.indexOf("Matrix") ? this.value : null) + } + + //e - name + //t - type + //n - length + getDeclaration(name, type, length) { + const uniform = this; + if (uniform.excludeFrom !== type) { + if ("array" === uniform.type) return uniform.value[0].getDeclaration(name, type, uniform.value.length) + `\nconst int ${name}_length = ${uniform.value.length};`; + if ("struct" === uniform.type) { + let name_no_prefix = name.replace("u_", ""); + return name_no_prefix = + name_no_prefix.charAt(0).toUpperCase() + + name_no_prefix.slice(1), + `uniform struct ${name_no_prefix} + {\n` + + Object.entries(uniform.value).map(([name, uniform]) => + uniform.getDeclaration(name, type) + .replace(/^uniform/, "")) + .join("") + + `\n} ${name}${length > 0 ? `[${length}]` : ""};` + } + return `uniform ${uniform.type} ${name}${length > 0 ? `[${length}]` : ""};` + } + } + } + }, + PlaneGeometry: { + enumerable: !1, + value: class { + constructor(width, height, n, i, orientation) { + context.createBuffer(), this.attributes = { + position: new _miniGl.Attribute({ + target: context.ARRAY_BUFFER, + size: 3 + }), + uv: new _miniGl.Attribute({ + target: context.ARRAY_BUFFER, + size: 2 + }), + uvNorm: new _miniGl.Attribute({ + target: context.ARRAY_BUFFER, + size: 2 + }), + index: new _miniGl.Attribute({ + target: context.ELEMENT_ARRAY_BUFFER, + size: 3, + type: context.UNSIGNED_SHORT + }) + }, this.setTopology(n, i), this.setSize(width, height, orientation) + } + + setTopology(e = 1, t = 1) { + const n = this; + n.xSegCount = e, n.ySegCount = t, n.vertexCount = (n.xSegCount + 1) * (n.ySegCount + 1), n.quadCount = n.xSegCount * n.ySegCount * 2, n.attributes.uv.values = new Float32Array(2 * n.vertexCount), n.attributes.uvNorm.values = new Float32Array(2 * n.vertexCount), n.attributes.index.values = new Uint16Array(3 * n.quadCount); + for (let e = 0; e <= n.ySegCount; e++) + for (let t = 0; t <= n.xSegCount; t++) { + const i = e * (n.xSegCount + 1) + t; + if (n.attributes.uv.values[2 * i] = t / n.xSegCount, n.attributes.uv.values[2 * i + 1] = 1 - e / n.ySegCount, n.attributes.uvNorm.values[2 * i] = t / n.xSegCount * 2 - 1, n.attributes.uvNorm.values[2 * i + 1] = 1 - e / n.ySegCount * 2, t < n.xSegCount && e < n.ySegCount) { + const s = e * n.xSegCount + t; + n.attributes.index.values[6 * s] = i, n.attributes.index.values[6 * s + 1] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 2] = i + 1, n.attributes.index.values[6 * s + 3] = i + 1, n.attributes.index.values[6 * s + 4] = i + 1 + n.xSegCount, n.attributes.index.values[6 * s + 5] = i + 2 + n.xSegCount + } + } + n.attributes.uv.update(), n.attributes.uvNorm.update(), n.attributes.index.update(), _miniGl.debug("Geometry.setTopology", { + uv: n.attributes.uv, + uvNorm: n.attributes.uvNorm, + index: n.attributes.index + }) + } + + setSize(width = 1, height = 1, orientation = "xz") { + const geometry = this; + geometry.width = width, + geometry.height = height, + geometry.orientation = orientation, + geometry.attributes.position.values && geometry.attributes.position.values.length === 3 * geometry.vertexCount + || (geometry.attributes.position.values = new Float32Array(3 * geometry.vertexCount)); + const o = width / -2, + r = height / -2, + segment_width = width / geometry.xSegCount, + segment_height = height / geometry.ySegCount; + for (let yIndex = 0; yIndex <= geometry.ySegCount; yIndex++) { + const t = r + yIndex * segment_height; + for (let xIndex = 0; xIndex <= geometry.xSegCount; xIndex++) { + const r = o + xIndex * segment_width, + l = yIndex * (geometry.xSegCount + 1) + xIndex; + geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[0])] = r, + geometry.attributes.position.values[3 * l + "xyz".indexOf(orientation[1])] = -t + } + } + geometry.attributes.position.update(), _miniGl.debug("Geometry.setSize", { + position: geometry.attributes.position + }) + } + } + }, + Mesh: { + enumerable: !1, + value: class { + constructor(geometry, material) { + const mesh = this; + mesh.geometry = geometry, mesh.material = material, mesh.wireframe = !1, mesh.attributeInstances = [], Object.entries(mesh.geometry.attributes).forEach(([e, attribute]) => { + mesh.attributeInstances.push({ + attribute: attribute, + location: attribute.attach(e, mesh.material.program) + }) + }), _miniGl.meshes.push(mesh), _miniGl.debug("Mesh.constructor", { + mesh: mesh + }) + } + + draw() { + context.useProgram(this.material.program), this.material.uniformInstances.forEach(({ + uniform: e, + location: t + }) => e.update(t)), this.attributeInstances.forEach(({ + attribute: e, + location: t + }) => e.use(t)), context.drawElements(this.wireframe ? context.LINES : context.TRIANGLES, this.geometry.attributes.index.values.length, context.UNSIGNED_SHORT, 0) + } + + remove() { + _miniGl.meshes = _miniGl.meshes.filter(e => e != this) + } + } + }, + Attribute: { + enumerable: !1, + value: class { + constructor(e) { + this.type = context.FLOAT, this.normalized = !1, this.buffer = context.createBuffer(), Object.assign(this, e), this.update() + } + + update() { + void 0 !== this.values && (context.bindBuffer(this.target, this.buffer), context.bufferData(this.target, this.values, context.STATIC_DRAW)) + } + + attach(e, t) { + const n = context.getAttribLocation(t, e); + return this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(n), context.vertexAttribPointer(n, this.size, this.type, this.normalized, 0, 0)), n + } + + use(e) { + context.bindBuffer(this.target, this.buffer), this.target === context.ARRAY_BUFFER && (context.enableVertexAttribArray(e), context.vertexAttribPointer(e, this.size, this.type, this.normalized, 0, 0)) + } + } + } + }); + const a = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; + _miniGl.commonUniforms = { + projectionMatrix: new _miniGl.Uniform({ + type: "mat4", + value: a + }), + modelViewMatrix: new _miniGl.Uniform({ + type: "mat4", + value: a + }), + resolution: new _miniGl.Uniform({ + type: "vec2", + value: [1, 1] + }), + aspectRatio: new _miniGl.Uniform({ + type: "float", + value: 1 + }) + } + } + + setSize(e = 640, t = 480) { + this.width = e, this.height = t, this.canvas.width = e, this.canvas.height = t, this.gl.viewport(0, 0, e, t), this.commonUniforms.resolution.value = [e, t], this.commonUniforms.aspectRatio.value = e / t, this.debug("MiniGL.setSize", { + width: e, + height: t + }) + } + + //left, right, top, bottom, near, far + setOrthographicCamera(e = 0, t = 0, n = 0, i = -2e3, s = 2e3) { + this.commonUniforms.projectionMatrix.value = [2 / this.width, 0, 0, 0, 0, 2 / this.height, 0, 0, 0, 0, 2 / (i - s), 0, e, t, n, 1], this.debug("setOrthographicCamera", this.commonUniforms.projectionMatrix.value) + } + + render() { + this.gl.clearColor(0, 0, 0, 0), this.gl.clearDepth(1), this.meshes.forEach(e => e.draw()) + } +} + + +//Sets initial properties +function e(object, propertyName, val) { + return propertyName in object ? Object.defineProperty(object, propertyName, { + value: val, + enumerable: !0, + configurable: !0, + writable: !0 + }) : object[propertyName] = val, object +} + +//Gradient object +class Gradient { + constructor(...t) { + e(this, "el", void 0), e(this, "cssVarRetries", 0), e(this, "maxCssVarRetries", 200), e(this, "angle", 0), e(this, "isLoadedClass", !1), e(this, "isScrolling", !1), /*e(this, "isStatic", o.disableAmbientAnimations()),*/ e(this, "scrollingTimeout", void 0), e(this, "scrollingRefreshDelay", 200), e(this, "isIntersecting", !1), e(this, "shaderFiles", void 0), e(this, "vertexShader", void 0), e(this, "sectionColors", void 0), e(this, "computedCanvasStyle", void 0), e(this, "conf", void 0), e(this, "uniforms", void 0), e(this, "t", 1253106), e(this, "last", 0), e(this, "width", void 0), e(this, "minWidth", 1111), e(this, "height", 600), e(this, "xSegCount", void 0), e(this, "ySegCount", void 0), e(this, "mesh", void 0), e(this, "material", void 0), e(this, "geometry", void 0), e(this, "minigl", void 0), e(this, "scrollObserver", void 0), e(this, "amp", 320), e(this, "seed", 5), e(this, "freqX", 14e-5), e(this, "freqY", 29e-5), e(this, "freqDelta", 1e-5), e(this, "activeColors", [1, 1, 1, 1]), e(this, "isMetaKey", !1), e(this, "isGradientLegendVisible", !1), e(this, "isMouseDown", !1), e(this, "handleScroll", () => { + clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause()) + }), e(this, "handleScrollEnd", () => { + this.isScrolling = !1, this.isIntersecting && this.play() + }), e(this, "resize", () => { + this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthographicCamera(), this.xSegCount = Math.ceil(this.width * this.conf.density[0]), this.ySegCount = Math.ceil(this.height * this.conf.density[1]), this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount), this.mesh.geometry.setSize(this.width, this.height), this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6 + }), e(this, "handleMouseDown", e => { + this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate)) + }), e(this, "handleMouseUp", () => { + this.isMouseDown = !1 + }), e(this, "animate", e => { + if (!this.shouldSkipFrame(e) || this.isMouseDown) { + if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) { + let e = 160; + this.isMetaKey && (e = -160), this.t += e + } + this.mesh.material.uniforms.u_time.value = this.t, this.minigl.render() + + } + if (0 !== this.last && this.isStatic) return this.minigl.render(), void this.disconnect(); + (/*this.isIntersecting && */this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate) + }), e(this, "addIsLoadedClass", () => { + /*this.isIntersecting && */ + !this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(() => { + this.el.parentElement.classList.add("isLoaded") + }, 3e3)) + }), e(this, "pause", () => { + this.conf.playing = false + }), e(this, "play", () => { + requestAnimationFrame(this.animate), this.conf.playing = true + }), e(this, "initGradient", (selector) => { + this.el = document.querySelector(selector); + this.connect(); + return this; + }) + } + + async connect() { + this.shaderFiles = { + vertex: "varying vec3 v_color;\n\nvoid main() {\n float time = u_time * u_global.noiseSpeed;\n\n vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq;\n\n vec2 st = 1. - uvNorm.xy;\n\n //\n // Tilting the plane\n //\n\n // Front-to-back tilt\n float tilt = resolution.y / 2.0 * uvNorm.y;\n\n // Left-to-right angle\n float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline;\n\n // Up-down shift to offset incline\n float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y);\n\n //\n // Vertex noise\n //\n\n float noise = snoise(vec3(\n noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow,\n noiseCoord.y * u_vertDeform.noiseFreq.y,\n time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed\n )) * u_vertDeform.noiseAmp;\n\n // Fade noise to zero at edges\n noise *= 1.0 - pow(abs(uvNorm.y), 2.0);\n\n // Clamp to 0\n noise = max(0.0, noise);\n\n vec3 pos = vec3(\n position.x,\n position.y + tilt + incline + noise - offset,\n position.z\n );\n\n //\n // Vertex color, to be passed to fragment shader\n //\n\n if (u_active_colors[0] == 1.) {\n v_color = u_baseColor;\n }\n\n for (int i = 0; i < u_waveLayers_length; i++) {\n if (u_active_colors[i + 1] == 1.) {\n WaveLayers layer = u_waveLayers[i];\n\n float noise = smoothstep(\n layer.noiseFloor,\n layer.noiseCeil,\n snoise(vec3(\n noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow,\n noiseCoord.y * layer.noiseFreq.y,\n time * layer.noiseSpeed + layer.noiseSeed\n )) / 2.0 + 0.5\n );\n\n v_color = blendNormal(v_color, layer.color, pow(noise, 4.));\n }\n }\n\n //\n // Finish\n //\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n}", + noise: "//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : stegu\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n// https://github.com/stegu/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nfloat snoise(vec3 v)\n{\n const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;\n const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n// First corner\n vec3 i = floor(v + dot(v, C.yyy) );\n vec3 x0 = v - i + dot(i, C.xxx) ;\n\n// Other corners\n vec3 g = step(x0.yzx, x0.xyz);\n vec3 l = 1.0 - g;\n vec3 i1 = min( g.xyz, l.zxy );\n vec3 i2 = max( g.xyz, l.zxy );\n\n // x0 = x0 - 0.0 + 0.0 * C.xxx;\n // x1 = x0 - i1 + 1.0 * C.xxx;\n // x2 = x0 - i2 + 2.0 * C.xxx;\n // x3 = x0 - 1.0 + 3.0 * C.xxx;\n vec3 x1 = x0 - i1 + C.xxx;\n vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y\n\n// Permutations\n i = mod289(i);\n vec4 p = permute( permute( permute(\n i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n// Gradients: 7x7 points over a square, mapped onto an octahedron.\n// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n float n_ = 0.142857142857; // 1.0/7.0\n vec3 ns = n_ * D.wyz - D.xzx;\n\n vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)\n\n vec4 x_ = floor(j * ns.z);\n vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)\n\n vec4 x = x_ *ns.x + ns.yyyy;\n vec4 y = y_ *ns.x + ns.yyyy;\n vec4 h = 1.0 - abs(x) - abs(y);\n\n vec4 b0 = vec4( x.xy, y.xy );\n vec4 b1 = vec4( x.zw, y.zw );\n\n //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n vec4 s0 = floor(b0)*2.0 + 1.0;\n vec4 s1 = floor(b1)*2.0 + 1.0;\n vec4 sh = -step(h, vec4(0.0));\n\n vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n vec3 p0 = vec3(a0.xy,h.x);\n vec3 p1 = vec3(a0.zw,h.y);\n vec3 p2 = vec3(a1.xy,h.z);\n vec3 p3 = vec3(a1.zw,h.w);\n\n//Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n\n// Mix final noise value\n vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n m = m * m;\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}", + blend: "//\n// https://github.com/jamieowen/glsl-blend\n//\n\n// Normal\n\nvec3 blendNormal(vec3 base, vec3 blend) {\n\treturn blend;\n}\n\nvec3 blendNormal(vec3 base, vec3 blend, float opacity) {\n\treturn (blendNormal(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Screen\n\nfloat blendScreen(float base, float blend) {\n\treturn 1.0-((1.0-base)*(1.0-blend));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend) {\n\treturn vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));\n}\n\nvec3 blendScreen(vec3 base, vec3 blend, float opacity) {\n\treturn (blendScreen(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Multiply\n\nvec3 blendMultiply(vec3 base, vec3 blend) {\n\treturn base*blend;\n}\n\nvec3 blendMultiply(vec3 base, vec3 blend, float opacity) {\n\treturn (blendMultiply(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Overlay\n\nfloat blendOverlay(float base, float blend) {\n\treturn base<0.5?(2.0*base*blend):(1.0-2.0*(1.0-base)*(1.0-blend));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend) {\n\treturn vec3(blendOverlay(base.r,blend.r),blendOverlay(base.g,blend.g),blendOverlay(base.b,blend.b));\n}\n\nvec3 blendOverlay(vec3 base, vec3 blend, float opacity) {\n\treturn (blendOverlay(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Hard light\n\nvec3 blendHardLight(vec3 base, vec3 blend) {\n\treturn blendOverlay(blend,base);\n}\n\nvec3 blendHardLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendHardLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Soft light\n\nfloat blendSoftLight(float base, float blend) {\n\treturn (blend<0.5)?(2.0*base*blend+base*base*(1.0-2.0*blend)):(sqrt(base)*(2.0*blend-1.0)+2.0*base*(1.0-blend));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend) {\n\treturn vec3(blendSoftLight(base.r,blend.r),blendSoftLight(base.g,blend.g),blendSoftLight(base.b,blend.b));\n}\n\nvec3 blendSoftLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendSoftLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color dodge\n\nfloat blendColorDodge(float base, float blend) {\n\treturn (blend==1.0)?blend:min(base/(1.0-blend),1.0);\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend) {\n\treturn vec3(blendColorDodge(base.r,blend.r),blendColorDodge(base.g,blend.g),blendColorDodge(base.b,blend.b));\n}\n\nvec3 blendColorDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Color burn\n\nfloat blendColorBurn(float base, float blend) {\n\treturn (blend==0.0)?blend:max((1.0-((1.0-base)/blend)),0.0);\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend) {\n\treturn vec3(blendColorBurn(base.r,blend.r),blendColorBurn(base.g,blend.g),blendColorBurn(base.b,blend.b));\n}\n\nvec3 blendColorBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendColorBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Vivid Light\n\nfloat blendVividLight(float base, float blend) {\n\treturn (blend<0.5)?blendColorBurn(base,(2.0*blend)):blendColorDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend) {\n\treturn vec3(blendVividLight(base.r,blend.r),blendVividLight(base.g,blend.g),blendVividLight(base.b,blend.b));\n}\n\nvec3 blendVividLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendVividLight(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Lighten\n\nfloat blendLighten(float base, float blend) {\n\treturn max(blend,base);\n}\n\nvec3 blendLighten(vec3 base, vec3 blend) {\n\treturn vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));\n}\n\nvec3 blendLighten(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLighten(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear burn\n\nfloat blendLinearBurn(float base, float blend) {\n\t// Note : Same implementation as BlendSubtractf\n\treturn max(base+blend-1.0,0.0);\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendSubtract\n\treturn max(base+blend-vec3(1.0),vec3(0.0));\n}\n\nvec3 blendLinearBurn(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearBurn(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear dodge\n\nfloat blendLinearDodge(float base, float blend) {\n\t// Note : Same implementation as BlendAddf\n\treturn min(base+blend,1.0);\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend) {\n\t// Note : Same implementation as BlendAdd\n\treturn min(base+blend,vec3(1.0));\n}\n\nvec3 blendLinearDodge(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearDodge(base, blend) * opacity + base * (1.0 - opacity));\n}\n\n// Linear light\n\nfloat blendLinearLight(float base, float blend) {\n\treturn blend<0.5?blendLinearBurn(base,(2.0*blend)):blendLinearDodge(base,(2.0*(blend-0.5)));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend) {\n\treturn vec3(blendLinearLight(base.r,blend.r),blendLinearLight(base.g,blend.g),blendLinearLight(base.b,blend.b));\n}\n\nvec3 blendLinearLight(vec3 base, vec3 blend, float opacity) {\n\treturn (blendLinearLight(base, blend) * opacity + base * (1.0 - opacity));\n}", + fragment: "varying vec3 v_color;\n\nvoid main() {\n vec3 color = v_color;\n if (u_darken_top == 1.0) {\n vec2 st = gl_FragCoord.xy/resolution.xy;\n color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4;\n }\n gl_FragColor = vec4(color, 1.0);\n}" + }, + this.conf = { + presetName: "", + wireframe: false, + density: [.06, .16], + zoom: 1, + rotation: 0, + playing: true + }, + document.querySelectorAll("canvas").length < 1 ? console.log("DID NOT LOAD HERO STRIPE CANVAS") : ( + + this.minigl = new MiniGl(this.el, null, null, !0), + requestAnimationFrame(() => { + this.el && (this.computedCanvasStyle = getComputedStyle(this.el), this.waitForCssVars()) + }) + /* + this.scrollObserver = await s.create(.1, !1), + this.scrollObserver.observe(this.el), + this.scrollObserver.onSeparate(() => { + window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.isIntersecting = !1, this.conf.playing && this.pause() + }), + this.scrollObserver.onIntersect(() => { + window.addEventListener("scroll", this.handleScroll), window.addEventListener("mousedown", this.handleMouseDown), window.addEventListener("mouseup", this.handleMouseUp), window.addEventListener("keydown", this.handleKeyDown), this.isIntersecting = !0, this.addIsLoadedClass(), this.play() + })*/ + + ) + } + + disconnect() { + this.scrollObserver && (window.removeEventListener("scroll", this.handleScroll), window.removeEventListener("mousedown", this.handleMouseDown), window.removeEventListener("mouseup", this.handleMouseUp), window.removeEventListener("keydown", this.handleKeyDown), this.scrollObserver.disconnect()), window.removeEventListener("resize", this.resize) + } + + initMaterial() { + this.uniforms = { + u_time: new this.minigl.Uniform({ + value: 0 + }), + u_shadow_power: new this.minigl.Uniform({ + value: 5 + }), + u_darken_top: new this.minigl.Uniform({ + value: "" === this.el.dataset.jsDarkenTop ? 1 : 0 + }), + u_active_colors: new this.minigl.Uniform({ + value: this.activeColors, + type: "vec4" + }), + u_global: new this.minigl.Uniform({ + value: { + noiseFreq: new this.minigl.Uniform({ + value: [this.freqX, this.freqY], + type: "vec2" + }), + noiseSpeed: new this.minigl.Uniform({ + value: 5e-6 + }) + }, + type: "struct" + }), + u_vertDeform: new this.minigl.Uniform({ + value: { + incline: new this.minigl.Uniform({ + value: Math.sin(this.angle) / Math.cos(this.angle) + }), + offsetTop: new this.minigl.Uniform({ + value: -.5 + }), + offsetBottom: new this.minigl.Uniform({ + value: -.5 + }), + noiseFreq: new this.minigl.Uniform({ + value: [3, 4], + type: "vec2" + }), + noiseAmp: new this.minigl.Uniform({ + value: this.amp + }), + noiseSpeed: new this.minigl.Uniform({ + value: 10 + }), + noiseFlow: new this.minigl.Uniform({ + value: 3 + }), + noiseSeed: new this.minigl.Uniform({ + value: this.seed + }) + }, + type: "struct", + excludeFrom: "fragment" + }), + u_baseColor: new this.minigl.Uniform({ + value: this.sectionColors[0], + type: "vec3", + excludeFrom: "fragment" + }), + u_waveLayers: new this.minigl.Uniform({ + value: [], + excludeFrom: "fragment", + type: "array" + }) + }; + for (let e = 1; e < this.sectionColors.length; e += 1) this.uniforms.u_waveLayers.value.push(new this.minigl.Uniform({ + value: { + color: new this.minigl.Uniform({ + value: this.sectionColors[e], + type: "vec3" + }), + noiseFreq: new this.minigl.Uniform({ + value: [2 + e / this.sectionColors.length, 3 + e / this.sectionColors.length], + type: "vec2" + }), + noiseSpeed: new this.minigl.Uniform({ + value: 11 + .3 * e + }), + noiseFlow: new this.minigl.Uniform({ + value: 6.5 + .3 * e + }), + noiseSeed: new this.minigl.Uniform({ + value: this.seed + 10 * e + }), + noiseFloor: new this.minigl.Uniform({ + value: .1 + }), + noiseCeil: new this.minigl.Uniform({ + value: .63 + .07 * e + }) + }, + type: "struct" + })); + return this.vertexShader = [this.shaderFiles.noise, this.shaderFiles.blend, this.shaderFiles.vertex].join("\n\n"), new this.minigl.Material(this.vertexShader, this.shaderFiles.fragment, this.uniforms) + } + + initMesh() { + this.material = this.initMaterial(), this.geometry = new this.minigl.PlaneGeometry, this.mesh = new this.minigl.Mesh(this.geometry, this.material) + } + + shouldSkipFrame(e) { + return !!window.document.hidden || (!this.conf.playing || (parseInt(e, 10) % 2 == 0 || void 0)) + } + + updateFrequency(e) { + this.freqX += e, this.freqY += e + } + + toggleColor(index) { + this.activeColors[index] = 0 === this.activeColors[index] ? 1 : 0 + } + + showGradientLegend() { + this.width > this.minWidth && (this.isGradientLegendVisible = !0, document.body.classList.add("isGradientLegendVisible")) + } + + hideGradientLegend() { + this.isGradientLegendVisible = !1, document.body.classList.remove("isGradientLegendVisible") + } + + init() { + this.initGradientColors(), this.initMesh(), this.resize(), requestAnimationFrame(this.animate), window.addEventListener("resize", this.resize) + } + + /* + * Waiting for the css variables to become available, usually on page load before we can continue. + * Using default colors assigned below if no variables have been found after maxCssVarRetries + */ + waitForCssVars() { + if (this.computedCanvasStyle && -1 !== this.computedCanvasStyle.getPropertyValue("--gradient-color-1").indexOf("#")) this.init(), this.addIsLoadedClass(); + else { + if (this.cssVarRetries += 1, this.cssVarRetries > this.maxCssVarRetries) { + return this.sectionColors = [16711680, 16711680, 16711935, 65280, 255], void this.init(); + } + requestAnimationFrame(() => this.waitForCssVars()) + } + } + + /* + * Initializes the four section colors by retrieving them from css variables. + */ + initGradientColors() { + this.sectionColors = ["--gradient-color-1", "--gradient-color-2", "--gradient-color-3", "--gradient-color-4"].map(cssPropertyName => { + let hex = this.computedCanvasStyle.getPropertyValue(cssPropertyName).trim(); + //Check if shorthand hex value was used and double the length so the conversion in normalizeColor will work. + if (4 === hex.length) { + const hexTemp = hex.substr(1).split("").map(hexTemp => hexTemp + hexTemp).join(""); + hex = `#${hexTemp}` + } + return hex && `0x${hex.substr(1)}` + }).filter(Boolean).map(normalizeColor) + } +} + + +/* +*Finally initializing the Gradient class, assigning a canvas to it and calling Gradient.connect() which initializes everything, +* Use Gradient.pause() and Gradient.play() for controls. +* +* Here are some default property values you can change anytime: +* Amplitude: Gradient.amp = 0 +* Colors: Gradient.sectionColors (if you change colors, use normalizeColor(#hexValue)) before you assign it. +* +* +* Useful functions +* Gradient.toggleColor(index) +* Gradient.updateFrequency(freq) +*/ + +export {Gradient} \ No newline at end of file diff --git a/src/components/LandingImage/MeshContainer/MeshContainer.tsx b/src/components/LandingImage/MeshContainer/MeshContainer.tsx new file mode 100644 index 0000000..8c3dab4 --- /dev/null +++ b/src/components/LandingImage/MeshContainer/MeshContainer.tsx @@ -0,0 +1,42 @@ +import {Box} from "@mui/material"; +import "./gradient.css" + +import {Gradient} from './Gradient.js' +import {useEffect} from "react"; + + +export function MeshContainer(props) { + + useEffect(() => { + // Create your instance + const gradient = new Gradient() + + // Call `initGradient` with the selector to your canvas + // @ts-ignore + gradient.initGradient('#gradient-canvas') + + }, []) + + + return ( + + + {props.children} + + + + + + ) +} \ No newline at end of file diff --git a/src/components/LandingImage/MeshContainer/gradient.css b/src/components/LandingImage/MeshContainer/gradient.css new file mode 100644 index 0000000..c03d4c7 --- /dev/null +++ b/src/components/LandingImage/MeshContainer/gradient.css @@ -0,0 +1,8 @@ +#gradient-canvas { + width:100%; + height:100%; + --gradient-color-1: #13101b; + --gradient-color-2: #4cc9f0; + --gradient-color-3: #3a0ca3; + --gradient-color-4: #3DA4AB; +} \ No newline at end of file diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors24.jsx similarity index 78% rename from src/components/Sponsors/Sponsors.jsx rename to src/components/Sponsors/Sponsors24.jsx index 22732a7..52e2686 100644 --- a/src/components/Sponsors/Sponsors.jsx +++ b/src/components/Sponsors/Sponsors24.jsx @@ -1,18 +1,18 @@ import {Box, Container, Grid, Link} from "@mui/material"; -import ESchool from "../../assets/images/sponsors/e-school.svg" +import ESchool from "../../assets/images/sponsors/2024/e-school.svg" import React from "react"; import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx"; -import ClimateTechHub from "../../assets/images/sponsors/CTH-logo-vertical_white.svg"; -import HolySquad from "../../assets/images/sponsors/holySquad.png"; -import DB from "../../assets/images/sponsors/db.svg"; -import Potsdam from "../../assets/images/sponsors/potsdam.webp"; -import AxelSpringer from "../../assets/images/sponsors/axelspringer.webp"; -import BertaRudi from "../../assets/images/sponsors/berta-rudi_logo_negativ_sw.svg"; -import Starwit from "../../assets/images/sponsors/cropped-logo-starwit-white.png"; -import DreesSommer from "../../assets/images/sponsors/DreesSommer.webp"; +import ClimateTechHub from "../../assets/images/sponsors/2024/CTH-logo-vertical_white.svg"; +import HolySquad from "../../assets/images/sponsors/2024/holySquad.png"; +import DB from "../../assets/images/sponsors/2024/db.svg"; +import Potsdam from "../../assets/images/sponsors/2024/potsdam.webp"; +import AxelSpringer from "../../assets/images/sponsors/2024/axelspringer.webp"; +import BertaRudi from "../../assets/images/sponsors/2024/berta-rudi_logo_negativ_sw.svg"; +import Starwit from "../../assets/images/sponsors/2024/cropped-logo-starwit-white.png"; +import DreesSommer from "../../assets/images/sponsors/2024/DreesSommer.webp"; -function Sponsors() { +function Sponsors24() { const sponsors = [ { @@ -90,4 +90,4 @@ function Sponsors() { } -export default Sponsors; \ No newline at end of file +export default Sponsors24; \ No newline at end of file diff --git a/src/components/Sponsors/Sponsors25.jsx b/src/components/Sponsors/Sponsors25.jsx new file mode 100644 index 0000000..85d470e --- /dev/null +++ b/src/components/Sponsors/Sponsors25.jsx @@ -0,0 +1,46 @@ +import {Box, Container, Grid, Link} from "@mui/material"; +import Engine from "../../assets/images/sponsors/2025/engine.svg" +import React from "react"; +import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx"; + + +function Sponsors() { + + const sponsors = [ + { + logo: Engine.src, + alt: "Logo of HPI Engine", + link: "https://engine.hpi.de" + }, + + ] + + return ( + + + + + {sponsors.map((sponsor, idx) => ( + + + + + + ))} + + + + + + + ) + +} + +export default Sponsors; \ No newline at end of file diff --git a/src/components/Team/Team.jsx b/src/components/Team/Team.jsx index fbd43b8..7631120 100644 --- a/src/components/Team/Team.jsx +++ b/src/components/Team/Team.jsx @@ -13,7 +13,7 @@ import {LinkedIn, Mail} from "@mui/icons-material"; import {useEffect, useState} from "react"; -const teamMembers = [ +const teamMembers24 = [ { name: "Cedric Rische", position: "Team Member", @@ -68,8 +68,69 @@ const teamMembers = [ profilePicture: UliPrantzProfile, linkedIn: "uli-prantz-100234227" }, - - +] +const teamMembers25 = [ + { + name: "Cedric Rische", + position: "Team Member", + linkedIn: "cedric-rische", + profilePicture: CedricRischeProfile + }, + { + name: "Mathilda Heise", + position: "Team Member", + linkedIn: "mathilda-heise-9203a3258", + profilePicture: MathildaHeiseProfile + }, + { + name: "Grit Manssen", + linkedIn: "grit-manssen-0270b023a", + profilePicture: "" + }, { + name: "Lennard Schulze", + linkedIn: "lennard-s-8a8389255", + profilePicture: "" + }, + { + name: "Nikolas Rieger", + position: "Team Member", + profilePicture: NikolasRiegerProfile, + linkedIn: "nikolas-rieger" + }, + { + name: "Tanja Lehmann", + position: "Team Member", + linkedIn: "tanja-lehmann-36713a265", + profilePicture: TanjaLehmannProfile + }, + { + name: "Viktor Kalvoda", + position: "Team Member", + profilePicture: ViktorKalvodaProfile, + linkedIn: "viktor-kalvoda-3ab0b62a2", + }, { + name: "Max Pieper", + position: "Team Member", + linkedIn: "maximilian-piper-101088229", + profilePicture: "" + }, + { + name: "Daniel Kiss", + position: "Team Member", + profilePicture: "", + linkedIn: "kdaniel21", + }, + { + name: "Gerome Quantmeyer", + position: "Team Member", + profilePicture: GeromeQuantmeyerProfile, + linkedIn: "gerome-quantmeyer-44a90322b" + }, { + name: "Jeanne Aue", + position: "Team Member", + profilePicture: "", + linkedIn: "jeanne-aue" + }, ] @@ -96,7 +157,7 @@ function stringToColor(string) { function stringAvatar(name) { return { sx: { - bgcolor: stringToColor(name), + fontSize: "2rem", }, children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`, }; @@ -115,7 +176,7 @@ function Team() { Meet the team - {teamMembers.sort((a, b) => { + {teamMembers25.sort((a, b) => { const nameA = a.name.toUpperCase(); // ignore upper and lowercase const nameB = b.name.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { @@ -153,7 +214,6 @@ function Team() { }} alt={"Image of " + teamMember.name} > - {avatarPrep.children} diff --git a/src/components/Theme/HackHpiTheme.js b/src/components/Theme/HackHpiTheme.js index f59f934..3d357bb 100644 --- a/src/components/Theme/HackHpiTheme.js +++ b/src/components/Theme/HackHpiTheme.js @@ -10,13 +10,13 @@ const hackHpiTheme = responsiveFontSizes(createTheme(theme, { mode: "dark", primary: theme.palette.augmentColor({ color: { - main: "#3A0CA3", + main: "#f5f5f5", }, name: "primary" }), secondary: theme.palette.augmentColor({ color: { - main: "#B1063A", + main: "#3A0CA3", }, name: "primary" }), diff --git a/src/components/WhatToExpect/WhatToExpect.jsx b/src/components/WhatToExpect/WhatToExpect.jsx index 94f4395..e4b6d8d 100644 --- a/src/components/WhatToExpect/WhatToExpect.jsx +++ b/src/components/WhatToExpect/WhatToExpect.jsx @@ -20,14 +20,14 @@ function WhatToExpect() { What to expect - Explore the future of urban living at HPI in Potsdam. + Explore the future of health at HPI in Potsdam. Join motivated students for two days of innovation, workshops, and collaboration with top-notch sponsors offering support and expertise. - Tackle a challenge and dive into the world of smart cities. + Tackle a challenge and dive into the world of health. From f567f4d94ea3dfcb579863a1a897311996488e9b Mon Sep 17 00:00:00 2001 From: Cedric Rische Date: Fri, 22 Nov 2024 21:12:41 +0100 Subject: [PATCH 2/2] Fixed word --- src/components/Features/Features.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Features/Features.jsx b/src/components/Features/Features.jsx index e4e0d40..7d4105c 100644 --- a/src/components/Features/Features.jsx +++ b/src/components/Features/Features.jsx @@ -28,7 +28,7 @@ export function Features() { { icon: , title: "Cash prizes", - subtitle: "Up for grabs are cash prizes for the best result, and among other things, prices for the best meme of the event." + subtitle: "Up for grabs are cash prizes for the best solution, and among other things, prices for the best meme of the event." }, /* {