subfactory
/
subfactory.ch
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

cleanup index.html

main
heck 2 years ago
parent
a4216bbaff
commit
d271e35a25
1 changed files with 53 additions and 91 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. 144
      html/index.html

144
html/index.html
View File

@ -4,14 +4,12 @@
<title>Sub Factory</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="./images/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<link rel="icon" type="image/png" href="./images/favicon.png">
<!-- Shaders -->
<script id="vertexShader" type="x-shader/x-vertex">
@ -28,13 +26,11 @@
#endif
// #extension GL_OES_standard_derivatives : enable
uniform float iTime;
uniform vec2 iMouse;
uniform vec2 iResolution;
uniform sampler2D iChannel0;
vec2 GetGradient(vec2 intPos, float t) {
float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
float angle = 6.283185 * rand + 4.0 * t * rand;
@ -47,15 +43,15 @@
vec2 blend = f * f * (3.0 -(2.0 * f));
float noiseVal =
mix(
mix(
dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
blend.x),
mix(
dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
blend.x),
blend.y
mix(
dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
blend.x),
mix(
dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
blend.x),
blend.y
);
return noiseVal / 0.7;
}
@ -65,7 +61,6 @@
vec2 uvm = iMouse.xy / iResolution.y;
float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
float val = sin(noiseVal * time + (sin(time) * time / 10.));
@ -93,51 +88,6 @@
opacity: 0.15;
}
.shadercontainer {
position: relative;
}
.shadertitle {
position: absolute;
display: block;
padding: 10rem 0;
margin-left: auto;
margin-right: auto;
width: 75%;
opacity: 0.98;
z-index: -1;
}
.hidden_desktop{
visibility: visible;
display: block;
}
.hidden_mobile {
visibility: hidden;
display: none;
}
@media (min-width: 1000px) {
.hidden_desktop{
visibility: hidden;
display: none;
}
.hidden_mobile {
visibility: visible;
display: block;
}
}
#shadersoundsystem {
left: 0px;
top: 0px;
z-index: -50;
width: 100%;
opacity: 0.01;
}
h2 {
font-family: 'Lato black', sans-serif;
font-size: 2.0rem;
@ -184,6 +134,7 @@
.card {
width: 100%;
background-color: #5fa873;
border: 0px solid #dee2e6!important;
}
.card-body {
@ -214,10 +165,6 @@
padding-right:3vw;
}
.card {
border: 0px solid #dee2e6!important;
}
.fas, .fab {
color: white;
font-size: 2em;
@ -260,13 +207,18 @@
<h5 class="card-title">Eulachbass</h5>
</div>
<img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
<a href="https://eulachbass.ch/" target="_blank" class="card-link"><i class="fas fa-globe mr-2"></i></a>
<a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link"><i
class="fab fa-instagram mr-2"></i></a>
<a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link"><i
class="fab fa-facebook mr-2"></i></a>
<a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link"><i
class="fab fa-soundcloud mr-2"></i></a>
<a href="https://eulachbass.ch/" target="_blank" class="card-link">
<i class="fas fa-globe mr-2"></i>
</a>
<a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
<a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link">
<i class="fab fa-soundcloud mr-2"></i>
</a>
</div>
</div>
@ -276,10 +228,12 @@
<h5 class="card-title">Sector B</h5>
</div>
<img class="logo" src="images/sectorb_logo.webp" alt="Eulachbass Logo">
<a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"><i
class="fab fa-instagram mr-2"></i></a>
<a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link"><i
class="fab fa-facebook mr-2"></i></a>
<a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
</div>
</div>
@ -289,14 +243,16 @@
<h5 class="card-title">Subsanity Soundystem</h5>
</div>
<img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
<a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"><i
class="fab fa-instagram mr-2"></i></a>
<a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link"><i
class="fab fa-facebook mr-2"></i></a>
<a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"><i
class="fab fa-soundcloud mr-2"></i></a>
<a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link">
<i class="fab fa-instagram mr-2"></i>
</a>
<a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link">
<i class="fab fa-facebook mr-2"></i>
</a>
<a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link">
<i class="fab fa-soundcloud mr-2"></i>
</a>
</div>
</div>
</div>
</div>
@ -364,8 +320,20 @@
Verfügung.
</p>
<iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&amp;layer=mapnik&amp;marker=47.49411917450164%2C8.734538555145264"></iframe>
<br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&amp;mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
<iframe
width="100%"
height="350"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://facilmap.org/mymap#q=w315995935%20to%2047.49364%2C8.7348%20by%20pedestrian%20details"
style="border: 1px solid black">
</iframe>
<br/>
<small><a href="https://www.openstreetmap.org/#map=19/47.49401/8.73429" target="_blank">View Larger Map</a></small>
<!-- <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&amp;layer=mapnik&amp;marker=47.49411917450164%2C8.734538555145264"></iframe>-->
<!-- <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&amp;mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>-->
</div>
</div>
@ -417,14 +385,11 @@
camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry( 2, 2 );
const loader = new THREE.TextureLoader();
const texture = loader.load('./images/noise.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
uniforms = {
iTime: { value: 1.0 },
iResolution: { value: new THREE.Vector2(1.0,1.0) },
@ -440,10 +405,8 @@
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const canvas = document.querySelector('#hecksshader');
renderer = new THREE.WebGLRenderer({antialias: true, canvas});
document.addEventListener( 'pointermove', onPointerMove);
}
@ -466,7 +429,7 @@
function render() {
requestAnimationFrame( render );
if ( rendererNeedsResize(renderer)) {
if (rendererNeedsResize(renderer)) {
const canvas = renderer.domElement;
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
@ -475,7 +438,6 @@
}
uniforms[ 'iTime' ].value = performance.now();
renderer.render( scene, camera );
}
</script>

Write Preview
Loading…
Cancel
Save