Skip to content
GitLab
Commit 2d5c8ea3 authored by Lukas Böhm's avatar Lukas Böhm 🎱
Browse files

replace cover

parent 91574286
Pipeline #59181 failed with stages
in 9 seconds
Hide whitespace changes
Inline Side-by-side
web/src/components/LandingHome.vue
View file @ 2d5c8ea3
<template>
<article class="container">
<span style="font-size: 5vw">CHIEFSEND</span>
<div class="row">
<search class="d-flex" />
</div>
<div class="row py-2">
<router-link :to="{ name: 'Upload' }" class="btn btn-primary btn-block">
Upload
</router-link>
</div>
<article>
<h1>Share files.</h1>
<p class="lead">
ChiefSend allows you to anonymously share files and send them via link or email.
No Account needed. Uploads up to 2500MB.
</p>
<p class="lead">
<router-link class="btn btn-lg btn-secondary fw-bold border-white bg-white" :to="{ name: 'Upload' }">Upload</router-link>
</p>
</article>
</template>
<script>
import Search from './Search.vue';
export default {
components: { Search },
name: "LandingHome",
name: "LandingHome"
};
</script>
\ No newline at end of file
web/src/router/index.js
View file @ 2d5c8ea3
......@@ -15,7 +15,7 @@ const routes = [
{
path: '',
name: 'LandingHome',
component: () => import(/* webpackChunkName: "landingHome" */ '../components/LandingHome.vue')
component: () => import(/* webpackChunkName: "landing-home" */ '../components/LandingHome.vue')
},
{
path: 'upload',
......@@ -44,11 +44,6 @@ const routes = [
name: 'Privacy',
component: () => import(/* webpackChunkName: "privacy" */ '../views/Privacy.vue')
},
{
path: '/test',
name: 'Test',
component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
},
{
path: '*',
name: 'Error',
......
web/src/views/Landing.vue
View file @ 2d5c8ea3
<template>
<div class="landing d-flex h-100 text-center text-white bg-dark">
<!-- <header class="particle-header">yee</header> -->
<main class="particle-container">
<div style="position: relative">
<vue-page-transition name="fade">
<router-view />
</vue-page-transition>
<div>
<canvas width="1900" height="900" id="particle-canvas">your browser does not support canvas.</canvas>
<div class="cover d-flex h-100 text-center text-white">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">ChiefSend</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<router-link class="nav-link active" :to="{ name: 'Landing' }">Home</router-link>
<router-link class="nav-link" :to="{ name: 'Public' }">Public</router-link>
<router-link class="nav-link" :to="{ name: 'About' }">About</router-link>
</nav>
</div>
</header>
<main class="px-3">
<vue-page-transition name="fade">
<router-view />
</vue-page-transition>
</main>
<footer class="mt-auto text-white-50">
<p>
Cover template for
<a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>,
by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.
</p>
</footer>
</div>
</main>
<!-- <footer class="particle-footer">yee</footer> -->
<canvas id="particle-canvas">Your browser does not support canvas</canvas>
</div>
</div>
</template>
......@@ -18,11 +41,7 @@ export default {
name: "Landing",
mounted() {
var canvas = document.getElementById("particle-canvas");
var width = canvas.width = window.innerWidth * 0.75;
var height = canvas.height = window.innerHeight * 0.75;
document.getElementsByClassName("particle-container")[0].parentElement.appendChild(canvas);
var gl = canvas.getContext('webgl');
var mouse = {x: 0, y: 0};
var gl = canvas.getContext("webgl");
//initialize metaballs
var numMetaballs = 50;
......@@ -30,11 +49,11 @@ export default {
for (var i = 0; i < numMetaballs; i++) {
var radius = Math.random() * 60 + 10; // TODO hier bisschen rumspielen
metaballs.push({
x: Math.random() * (width - 2 * radius) + radius,
y: Math.random() * (height - 2 * radius) + radius,
vx: (Math.random() - 0.5),
vy: (Math.random() - 0.5),
r: radius * 0.8
x: Math.random() * (canvas.width - 2 * radius) + radius,
y: Math.random() * (canvas.height - 2 * radius) + radius,
vx: Math.random() - 0.5,
vy: Math.random() - 0.5,
r: radius * 0.8,
});
}
......@@ -48,20 +67,29 @@ export default {
}
`;
const fragmentShaderSrc = `
const fragmentShaderSrc =
`
precision highp float;
const float WIDTH = ` + (width >> 0) + `.0;
const float HEIGHT = ` + (height >> 0) + `.0;
const float WIDTH = ` +
(canvas.width >> 0) +
`.0;
const float HEIGHT = ` +
(canvas.height >> 0) +
`.0;
uniform vec3 metaballs[` + numMetaballs + `];
uniform vec3 metaballs[` +
numMetaballs +
`];
void main(){
float x = gl_FragCoord.x;
float y = gl_FragCoord.y;
float sum = 0.0;
for (int i = 0; i < ` + numMetaballs + `; i++) {
for (int i = 0; i < ` +
numMetaballs +
`; i++) {
vec3 metaball = metaballs[i];
float dx = metaball.x - x;
float dy = metaball.y - y;
......@@ -90,18 +118,23 @@ export default {
gl.useProgram(program);
var vertexData = new Float32Array([
-1.0, 1.0, // top left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0, // bottom right
-1.0,
1.0, // top left
-1.0,
-1.0, // bottom left
1.0,
1.0, // top right
1.0,
-1.0, // bottom right
]);
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
var positionHandle = getAttribLocation(program, 'position');
var positionHandle = getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle,
gl.vertexAttribPointer(
positionHandle,
2, // position is a vec2
gl.FLOAT, // each component is a float
gl.FALSE, // don't normalize values
......@@ -109,7 +142,7 @@ export default {
0 // offset into each span of vertex data
);
var metaballsHandle = getUniformLocation(program, 'metaballs');
var metaballsHandle = getUniformLocation(program, "metaballs");
loop();
......@@ -119,8 +152,10 @@ export default {
metaball.x += metaball.vx;
metaball.y += metaball.vy;
if (metaball.x < metaball.r || metaball.x > width - metaball.r) metaball.vx *= -1;
if (metaball.y < metaball.r || metaball.y > height - metaball.r) metaball.vy *= -1;
if (metaball.x < metaball.r || metaball.x > canvas.width - metaball.r)
metaball.vx *= -1;
if (metaball.y < metaball.r || metaball.y > canvas.height - metaball.r)
metaball.vy *= -1;
}
var dataToSendToGPU = new Float32Array(3 * numMetaballs);
......@@ -152,7 +187,7 @@ export default {
function getUniformLocation(program, name) {
var uniformLocation = gl.getUniformLocation(program, name);
if (uniformLocation === -1) {
throw 'Can not find uniform ' + name + '.';
throw "Can not find uniform " + name + ".";
}
return uniformLocation;
}
......@@ -160,41 +195,61 @@ export default {
function getAttribLocation(program, name) {
var attributeLocation = gl.getAttribLocation(program, name);
if (attributeLocation === -1) {
throw 'Can not find attribute ' + name + '.';
throw "Can not find attribute " + name + ".";
}
return attributeLocation;
}
canvas.onmousemove = function(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
}
}
},
};
</script>
<style>
.landing {
overflow: hidden;
width: 100%;
height: 100%;
background: black;
}
.particle-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
canvas {
width: 100%;
height: 100%;
}
#particle-canvas {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
}
.cover {
min-height: 100vh;
text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.cover-container {
max-width: 42em;
min-height: 100vh;
}
.nav-masthead .nav-link {
padding: 0.25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
border-bottom: 0.25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
\ No newline at end of file
web/src/views/Test.vue deleted 100644 → 0
View file @ 91574286
<template>
<div>
<canvas width="1900" height="900" id="particle-canvas">your browser does not support canvas.</canvas>
<div class="cover d-flex h-100 text-center text-white">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">ChiefSend</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<router-link class="nav-link active" :to="{ name: 'Landing' }">Home</router-link>
<router-link class="nav-link" :to="{ name: 'Public' }">Public</router-link>
<router-link class="nav-link" :to="{ name: 'About' }">About</router-link>
</nav>
</div>
</header>
<main class="px-3">
<h1>Share files.</h1>
<p class="lead">
ChiefSend allows you to anonymously share files and send them via link or email.
No Account needed. Uploads up to 2500MB.
</p>
<p class="lead">
<router-link class="btn btn-lg btn-secondary fw-bold border-white bg-white" :to="{ name: 'Upload' }">Upload</router-link>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>
Cover template for
<a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>,
by <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.
</p>
</footer>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Test",
mounted() {
var canvas = document.getElementById("particle-canvas");
var gl = canvas.getContext("webgl");
//initialize metaballs
var numMetaballs = 50;
var metaballs = [];
for (var i = 0; i < numMetaballs; i++) {
var radius = Math.random() * 60 + 10; // TODO hier bisschen rumspielen
metaballs.push({
x: Math.random() * (canvas.width - 2 * radius) + radius,
y: Math.random() * (canvas.height - 2 * radius) + radius,
vx: Math.random() - 0.5,
vy: Math.random() - 0.5,
r: radius * 0.8,
});
}
const vertexShaderSrc = `
attribute vec2 position;
void main() {
// position specifies only x and y.
// We set z to be 0.0, and w to be 1.0
gl_Position = vec4(position, 0.0, 1.0);
}
`;
const fragmentShaderSrc =
`
precision highp float;
const float WIDTH = ` +
(canvas.width >> 0) +
`.0;
const float HEIGHT = ` +
(canvas.height >> 0) +
`.0;
uniform vec3 metaballs[` +
numMetaballs +
`];
void main(){
float x = gl_FragCoord.x;
float y = gl_FragCoord.y;
float sum = 0.0;
for (int i = 0; i < ` +
numMetaballs +
`; i++) {
vec3 metaball = metaballs[i];
float dx = metaball.x - x;
float dy = metaball.y - y;
float radius = metaball.z;
sum += (radius * radius) / (dx * dx + dy * dy);
}
if (sum >= 0.99) {
gl_FragColor = vec4(mix(vec3(x / WIDTH, y / HEIGHT, 1.0), vec3(0, 0, 0), max(0.0, 1.0 - (sum - 0.99) * 100.0)), 1.0);
return;
}
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
`;
var vertexShader = compileShader(vertexShaderSrc, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentShaderSrc, gl.FRAGMENT_SHADER);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
var vertexData = new Float32Array([
-1.0,
1.0, // top left
-1.0,
-1.0, // bottom left
1.0,
1.0, // top right
1.0,
-1.0, // bottom right
]);
var vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
var positionHandle = getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(
positionHandle,
2, // position is a vec2
gl.FLOAT, // each component is a float
gl.FALSE, // don't normalize values
2 * 4, // two 4 byte float components per vertex
0 // offset into each span of vertex data
);
var metaballsHandle = getUniformLocation(program, "metaballs");
loop();
function loop() {
for (let i = 0; i < numMetaballs; i++) {
var metaball = metaballs[i];
metaball.x += metaball.vx;
metaball.y += metaball.vy;
if (metaball.x < metaball.r || metaball.x > canvas.width - metaball.r)
metaball.vx *= -1;
if (metaball.y < metaball.r || metaball.y > canvas.height - metaball.r)
metaball.vy *= -1;
}
var dataToSendToGPU = new Float32Array(3 * numMetaballs);
for (let i = 0; i < numMetaballs; i++) {
var baseIndex = 3 * i;
var mb = metaballs[i];
dataToSendToGPU[baseIndex + 0] = mb.x;
dataToSendToGPU[baseIndex + 1] = mb.y;
dataToSendToGPU[baseIndex + 2] = mb.r;
}
gl.uniform3fv(metaballsHandle, dataToSendToGPU);
//Draw
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(loop);
}
function compileShader(shaderSource, shaderType) {
var shader = gl.createShader(shaderType);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
}
return shader;
}
function getUniformLocation(program, name) {
var uniformLocation = gl.getUniformLocation(program, name);
if (uniformLocation === -1) {
throw "Can not find uniform " + name + ".";
}
return uniformLocation;
}
function getAttribLocation(program, name) {
var attributeLocation = gl.getAttribLocation(program, name);
if (attributeLocation === -1) {
throw "Can not find attribute " + name + ".";
}
return attributeLocation;
}
},
};
</script>
<style scoped>
#particle-canvas {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
}
.cover {
min-height: 100vh;
text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.cover-container {
max-width: 42em;
min-height: 100vh;
}
.nav-masthead .nav-link {
padding: 0.25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
border-bottom: 0.25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment