Compare commits

..

2 Commits

Author SHA1 Message Date
407092fe90 Ajout de deux dossiers pour la doc et les recettes Anible 2022-02-19 16:08:44 +01:00
185e8b336b Ajout d'une page d'acceuil 2022-02-19 16:07:43 +01:00
17 changed files with 237 additions and 0 deletions

0
ansible/.gitkeep Normal file
View File

0
doc/.gitkeep Normal file
View File

32
website/css/fonts.css Normal file
View File

@ -0,0 +1,32 @@
@font-face {
font-family: 'Franchise';
src: local('Franchise Regular'), local('Franchise-Regular'),
url('fonts/Franchise-Regular.woff2') format('woff2'),
url('fonts/Franchise-Regular.woff') format('woff'),
url('fonts/Franchise-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Franchise Filled';
src: local('Franchise Filled Regular'), local('FranchiseFilled-Regular'),
url('fonts/FranchiseFilled-Regular.woff2') format('woff2'),
url('fonts/FranchiseFilled-Regular.woff') format('woff'),
url('fonts/FranchiseFilled-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cube';
src: local('Cube'),
url('fonts/Cube.woff2') format('woff2'),
url('fonts/Cube.woff') format('woff'),
url('fonts/Cube.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

BIN
website/css/fonts/Cube.ttf Normal file

Binary file not shown.

BIN
website/css/fonts/Cube.woff Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

55
website/css/master.css Normal file
View File

@ -0,0 +1,55 @@
body {
background-color: black;
color: white;
font-family: sans-serif;
margin: 0;
padding: 0;
}
section {
height: 100%;
}
canvas, .texte {
z-index: -1;
}
.texte {
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
background-blend-mode: exclusion;
background-color: rgba(0, 0, 0, 0.5);
}
.texte, a {
color: white;
}
h1 {
font: 4em "Franchise", sans-serif;
}
main {
position: relative;
z-index: -1;
width: 90%;
height: 100%;
padding: 0;
margin: 0;
position: fixed;
top: 0px;
}
main > * {
position: absolute;
height: 100%;
width: 100%;
}
canvas {
height: 100%;
z-index: -1;
}

41
website/index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/master.css">
<link rel="stylesheet" href="/css/fonts.css">
<title>shlag zone</title>
</head>
<body>
<section>
<main></main>
<div class="texte">
<h1>Bienvenue dans la Shlag Zone</h1>
<h2>C'est quoi ?</h2>
<p>On sait pas trop :)</p>
<h2>C'est qui ?</h2>
<p>Des gens chouettes qui font de l'internet</p>
<h2>C'est comment ?</h2>
<p>Bien et toi ? :)</p>
<h2>Mais encore ?</h2>
<a href="zone/liens.html">Entre dans la zone et tu verra</a>
</div>
</section>
<script src="js/p5.min.js" charset="utf-8"></script>
<script src="js/background.js" charset="utf-8"></script>
</body>
</html>

94
website/js/background.js Normal file
View File

@ -0,0 +1,94 @@
let count = 1000;
var particles_a = [];
var particles_b = [];
var particles_c = [];
var fade = 200;
var radius = 3;
const w = window.innerWidth;
const h = 600;
let noiseScale = 10;
let noiseStrength = 1.2;
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
for (let i=0; i<count; i++) {
let loc_a = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5 -h*0.5, 2);
let angle_a = random(TWO_PI);
let dir_a = createVector(cos(angle_a), sin(angle_a));
let loc_b = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
let angle_b = random(TWO_PI);
let dir_b = createVector(cos(angle_b), sin(angle_b));
let loc_c = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
let angle_c = random(TWO_PI);
let dir_c = createVector(cos(angle_c), sin(angle_c));
particles_a[i] = new Particle(loc_a, dir_a, 0.5);
particles_b[i] = new Particle(loc_b, dir_b,0.6);
particles_c[i] = new Particle(loc_c, dir_c, 0.75);
}
}
function draw() {
fill(0,5);
noStroke();
rect(0,0,width, height);
for (let i=0; i<count; i++) {
fill(191, 19, 99, fade);
particles_a[i].move();
particles_a[i].update(radius);
particles_a[i].checkEdges();
fill (57,166,163, fade);
particles_b[i].move();
particles_b[i].update(radius);
particles_b[i].checkEdges();
fill(222,238,234,fade);
particles_c[i].move();
particles_c[i].update(radius);
particles_c[i].checkEdges();
}
}
let Particle = function(loc_, dir_, speed_) {
this.loc = loc_;
this.dir = dir_;
this.speed = speed_;
this.d = 1;
}
Particle.prototype.run = function() {
this.move();
this.checkEdges();
this.update();
}
Particle.prototype.update = function(r) {
ellipse(this.loc.x, this.loc.y, r);
}
Particle.prototype.checkEdges = function() {
if (this.loc.x < 0 || this.loc.x > width || this.loc.y < 0 || this.loc.y > height) {
this.loc.x = random(w) + windowWidth*0.5 - w*0.5;
this.loc.y = random(h) + windowHeight*0.5 - h*0.5;
}
}
Particle.prototype.move = function() {
this.angle = noise(this.loc.x/noiseScale, this.loc.y/noiseScale, frameCount/noiseScale) * TWO_PI*noiseStrength;
this.dir.x = cos(this.angle) + sin(this.angle) - sin(this.angle);
this.dir.y = sin(this.angle) - cos(this.angle)*sin(this.angle);
this.vel = this.dir.copy();
this.vel.mult(this.speed*this.d);
this.loc.add(this.vel);
}

3
website/js/p5.min.js vendored Normal file

File diff suppressed because one or more lines are too long

12
website/zone/liens.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Les liens de la shlag zone</title>
</head>
<body>
<ul>
<li><a href="art/bubbles.html">Bubbles</a></li>
</ul>
</body>
</html>