diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..32ff6e5 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +status/index.html \ No newline at end of file diff --git a/affiches/mardis/IMG001.jpg b/affiches/mardis/IMG001.jpg new file mode 100644 index 0000000..f1903cb Binary files /dev/null and b/affiches/mardis/IMG001.jpg differ diff --git a/affiches/mardis/IMG002.jpg b/affiches/mardis/IMG002.jpg new file mode 100644 index 0000000..acc929a Binary files /dev/null and b/affiches/mardis/IMG002.jpg differ diff --git a/affiches/mardis/IMG333.jpg b/affiches/mardis/IMG333.jpg new file mode 100644 index 0000000..4728581 Binary files /dev/null and b/affiches/mardis/IMG333.jpg differ diff --git a/affiches/mardis/index.html b/affiches/mardis/index.html new file mode 100644 index 0000000..582eb7d --- /dev/null +++ b/affiches/mardis/index.html @@ -0,0 +1,136 @@ + + + + + Permanence du mardi soir + + + + + + +
+
+ une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan + un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive + un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle +
+ +
+

Permanences du LOL

+ +

Venez chiller avec nous, partager un thé ou une bière.

+ +

On échange technique et savoir-faire
sur tous les sujets : logiciel libre, hacking,
couture, bricole et bidouille en tout genre,
mais aussi sur nos projets personnels ou collectifs

+ + +

+ + Tous les mardis
à partir de 17h
+ + +  Tous les samedis
 à partir de 14h + +
+ au local du LOL
  → 7 Place Chazette, 69001 Lyon +

+
+
+ + \ No newline at end of file diff --git a/affiches/test/index.html b/affiches/test/index.html new file mode 100644 index 0000000..5bd48aa --- /dev/null +++ b/affiches/test/index.html @@ -0,0 +1,51 @@ + + + + + + + TEST EVENT + + + + + +
+

test affiche !

+
+ + diff --git a/affiches/test333/index.html b/affiches/test333/index.html new file mode 100644 index 0000000..9f13c5b --- /dev/null +++ b/affiches/test333/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + TEST EVENT 333 + + + + + +
+

test affiche 333 !

+
+ + diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000..b396f5f --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,76 @@ + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/assets/favicon_open.svg b/assets/favicon_open.svg new file mode 100644 index 0000000..284e3ce --- /dev/null +++ b/assets/favicon_open.svg @@ -0,0 +1,76 @@ + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/assets/fleche.svg b/assets/fleche.svg new file mode 100644 index 0000000..dab8f42 --- /dev/null +++ b/assets/fleche.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/about.svg b/assets/icons/about.svg new file mode 100644 index 0000000..edd3e8d --- /dev/null +++ b/assets/icons/about.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/back.svg b/assets/icons/back.svg new file mode 100644 index 0000000..7ed3714 --- /dev/null +++ b/assets/icons/back.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..3821cc9 --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/contact.svg b/assets/icons/contact.svg new file mode 100644 index 0000000..296b560 --- /dev/null +++ b/assets/icons/contact.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/file.svg b/assets/icons/file.svg new file mode 100644 index 0000000..6f8cb9c --- /dev/null +++ b/assets/icons/file.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg new file mode 100644 index 0000000..258f9f5 --- /dev/null +++ b/assets/icons/folder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/info.svg b/assets/icons/info.svg new file mode 100644 index 0000000..1262b3e --- /dev/null +++ b/assets/icons/info.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/link.svg b/assets/icons/link.svg new file mode 100644 index 0000000..a2ed00b --- /dev/null +++ b/assets/icons/link.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/msg.svg b/assets/icons/msg.svg new file mode 100644 index 0000000..7db9879 --- /dev/null +++ b/assets/icons/msg.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/next.svg b/assets/icons/next.svg new file mode 100644 index 0000000..ba6b56f --- /dev/null +++ b/assets/icons/next.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/pause.svg b/assets/icons/pause.svg new file mode 100644 index 0000000..ec47557 --- /dev/null +++ b/assets/icons/pause.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/icons/play.svg b/assets/icons/play.svg new file mode 100644 index 0000000..bf16538 --- /dev/null +++ b/assets/icons/play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/player.svg b/assets/icons/player.svg new file mode 100644 index 0000000..23a5063 --- /dev/null +++ b/assets/icons/player.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/prev.svg b/assets/icons/prev.svg new file mode 100644 index 0000000..904d3db --- /dev/null +++ b/assets/icons/prev.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/reload.svg b/assets/icons/reload.svg new file mode 100644 index 0000000..af82d98 --- /dev/null +++ b/assets/icons/reload.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/icons/saved.svg b/assets/icons/saved.svg new file mode 100644 index 0000000..91c547c --- /dev/null +++ b/assets/icons/saved.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/logo/logo-contour.svg b/assets/logo/logo-contour.svg new file mode 100644 index 0000000..291cc0a --- /dev/null +++ b/assets/logo/logo-contour.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/logo/logo-contreforme.svg b/assets/logo/logo-contreforme.svg new file mode 100644 index 0000000..aa92ebd --- /dev/null +++ b/assets/logo/logo-contreforme.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/logo/logo-forme.svg b/assets/logo/logo-forme.svg new file mode 100644 index 0000000..a0000d6 --- /dev/null +++ b/assets/logo/logo-forme.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/logo/logo_picto.svg b/assets/logo/logo_picto.svg new file mode 100644 index 0000000..cd20ac5 --- /dev/null +++ b/assets/logo/logo_picto.svg @@ -0,0 +1,143 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/assets/logo_hackerspaces_monde.png b/assets/logo_hackerspaces_monde.png new file mode 100644 index 0000000..952f48c Binary files /dev/null and b/assets/logo_hackerspaces_monde.png differ diff --git a/assets/plan.svg b/assets/plan.svg new file mode 100644 index 0000000..ebb4cb0 --- /dev/null +++ b/assets/plan.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/video/background.webm b/assets/video/background.webm new file mode 100644 index 0000000..eeef25e Binary files /dev/null and b/assets/video/background.webm differ diff --git a/assets/video/closed.webm b/assets/video/closed.webm new file mode 100644 index 0000000..c2da18b Binary files /dev/null and b/assets/video/closed.webm differ diff --git a/assets/video/open.webm b/assets/video/open.webm new file mode 100644 index 0000000..8008e55 Binary files /dev/null and b/assets/video/open.webm differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..103d2a6 --- /dev/null +++ b/index.html @@ -0,0 +1,228 @@ + + + + + + + + + + + + + + + + + + Laboratoire Ouvert Lyonnais + + + + + + + + + + + + +
+

+ + + LOL +

+ + +
+ +
+
+ +
+

+ Hackerspace +

+

+
+ Lieu autogéré
+ de réappropriation,
+ réparation & recyclage
+ des objets techniques
+ & technologiques +

+
+ +
+

Horaires d'ouverture

+
    +
  1. + Mar. 17h → 23h +
    2. +
  2. + Sam. 14h → 20h +
    3. +
+ +
+ +
+
+ 7 place Chazette
+ 69001 Lyon
+
+ 45° 46' 23.698" N
+ 4° 50' 14.052" E +
+ + +
+ + +
+
+ Sonnez à l'interphone Laboratoire Ouvert Lyonnais au 7 Place Chazette 69001, puis avancez tout droit, traversez la cour, et avancez encore, la porte se situe après l'ascenceur, sur la droite + +
+
+ + + + + +
+
+
+

+ Le LOL peut ouvrir en dehors des horaires habituels. + En fonction de nos envies et disponibilités. +

+

+ Un capteur sur la porte d'entrée indique si le local est ouvert: +

+
+ Vérifier
si c'est
ouvert
→ → → +
+ + + + +
+ + + + diff --git a/js/cuteTexture.js b/js/cuteTexture.js new file mode 100644 index 0000000..d503688 --- /dev/null +++ b/js/cuteTexture.js @@ -0,0 +1,348 @@ +const DEFAULT_VERTEX_SHADER = ` + attribute float aVertexIndex; + varying highp vec2 vTextureCoord; + + // This vertex shader produces the following, when drawn using indices 0..3: + // + // 1 | 0-----x.....2 + // 0 | | s | . ´ + // -1 | x_____x´ + // -2 | : .´ + // -3 | 1´ + // +--------------- + // -1 0 1 2 3 + // + // The axes are clip-space x and y. The region marked s is the visible region. + // The digits in the corners of the right-angled triangle are the vertex + // indices. + // + // The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0. + // This means that the UV gets interpolated to 1,1 at the bottom-right corner + // of the clip-space rectangle that is at 1,-1 in clip space. + + void main() { + vec2 uv = vec2(floor(aVertexIndex / 2.0), floor(mod(aVertexIndex, 2.0))) * 2.0; + gl_Position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0); + vTextureCoord = uv; + } +` + +const FRAGMENT_SHADER_UTILITIES = ` + highp float noise1(highp vec2 co){ + return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); + } + + // Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl + + const highp float HCV_EPSILON = 1e-10; + const highp float HSL_EPSILON = 1e-10; + + highp vec3 hue_to_rgb(highp float hue) + { + highp float R = abs(hue * 6.0 - 3.0) - 1.0; + highp float G = 2.0 - abs(hue * 6.0 - 2.0); + highp float B = 2.0 - abs(hue * 6.0 - 4.0); + return clamp(vec3(R,G,B), vec3(0), vec3(1)); + } + + // Converts from HSL to linear RGB + highp vec3 hsl_to_rgb(highp vec3 hsl) + { + highp vec3 rgb = hue_to_rgb(hsl.x); + highp float C = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y; + return (rgb - 0.5) * C + hsl.z; + } + + // Converts a value from linear RGB to HCV (Hue, Chroma, Value) + highp vec3 rgb_to_hcv(highp vec3 rgb) + { + // Based on work by Sam Hocevar and Emil Persson + highp vec4 P = (rgb.g < rgb.b) ? vec4(rgb.bg, -1.0, 2.0/3.0) : vec4(rgb.gb, 0.0, -1.0/3.0); + highp vec4 Q = (rgb.r < P.x) ? vec4(P.xyw, rgb.r) : vec4(rgb.r, P.yzx); + highp float C = Q.x - min(Q.w, Q.y); + highp float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z); + return vec3(H, C, Q.x); + } + + // Converts from linear rgb to HSL + highp vec3 rgb_to_hsl(highp vec3 rgb) + { + highp vec3 HCV = rgb_to_hcv(rgb); + highp float L = HCV.z - HCV.y * 0.5; + highp float S = HCV.y / (1.0 - abs(L * 2.0 - 1.0) + HSL_EPSILON); + return vec3(HCV.x, S, L); + } + + highp vec4 hue_rotate(highp vec4 rgb_input, highp float amount) { + highp vec3 hsl = rgb_to_hsl(rgb_input.xyz); + hsl.x = mod(hsl.x+amount,1.0); + return vec4(hsl_to_rgb(hsl), rgb_input.w); + } + + highp vec4 grayscale(highp vec4 rgb_input, highp float amount) { + highp vec3 hsl = rgb_to_hsl(rgb_input.xyz); + hsl.y = 1.0 - amount; + return vec4(hsl_to_rgb(hsl), rgb_input.w); + } +` + +const FRAGMENT_SHADER_UTILITIES_N_LINES = FRAGMENT_SHADER_UTILITIES.split(/\n/g).length + +const DEFAULT_FRAGMENT_SHADER = ` + // Some random values computed for each frame + uniform highp vec4 uRandom; + // Size (in logical pixel) of current CuteTexture canvas + uniform lowp vec2 uCanvasSize; + // Number of seconds since canvas was initialized + uniform lowp float uTime; + // Current frame of first video with [data-cute-texture-video] attribute + uniform sampler2D uVideo; + // Size (in pixels) of current video frame in uVideo + uniform lowp vec2 uVideoSize; + // Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right) + varying highp vec2 vTextureCoord; + + void main() { + gl_FragColor = vec4(vTextureCoord.x, vTextureCoord.y, 0.0, 1.0); + } +` + +/** + * Initialise un canvas d'arrière plan "CuteTexture" avec les options données + */ +export function initCuteTexture(options){ + let shaderSourceOption = options?.shaderSource; + + /** @type {HTMLCanvasElement} */ + const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas"); + if(!targetCanvas) + throw new Error(`Aucun élément trouvé sur la page`) + + { + let computedStyle = getComputedStyle(targetCanvas) + let elementWidth = parseFloat(computedStyle.width) + let elementHeight = parseFloat(computedStyle.height) + targetCanvas.width = elementWidth + targetCanvas.height = elementHeight + } + + const ctx = targetCanvas.getContext("webgl"); + if(ctx == null) + throw new Error("WebGL n'ext pas supporté sur votre machine") + + let mainShader = initMainShader(ctx, { + shaderSource: shaderSourceOption + }) + console.log("Shader CuteTexture initialisé", mainShader) + + const initTime = Date.now() + + function startRender(){ + renderCuteTexture(targetCanvas, mainShader, initTime) + requestAnimationFrame(startRender) + } + + startRender() + + return { + target: targetCanvas, + initTime, + resize: function(width, height) { + targetCanvas.width = width + targetCanvas.height = height + } + } +} + +/** + * @param {WebGLRenderingContext} ctx + */ +function initMainShader(ctx, options){ + let fragmentShaderCode = options?.shaderSource; + + const vertexShader = ctx.createShader(ctx.VERTEX_SHADER) + ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER) + ctx.compileShader(vertexShader) + + if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) { + throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`) + ctx.deleteShader(vertexShader) + return null + } + + if(!fragmentShaderCode){ + fragmentShaderCode = getDocumentShaderSource(document); + } + + if(!fragmentShaderCode){ + fragmentShaderCode = DEFAULT_FRAGMENT_SHADER + } + + const fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER) + ctx.shaderSource(fragmentShader, FRAGMENT_SHADER_UTILITIES+fragmentShaderCode) + ctx.compileShader(fragmentShader) + + if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) { + let error = ctx.getShaderInfoLog(fragmentShader) + + let errorLine = error.match(/\d+:(\d+):/) + if(errorLine) { + let lineNum = parseInt(errorLine[1]) + let lineNumeWithoutUtils = lineNum-FRAGMENT_SHADER_UTILITIES_N_LINES; + if(lineNumeWithoutUtils >= 0){ + error = `Ligne ${lineNumeWithoutUtils}: ${error}` + } + } + + ctx.deleteShader(fragmentShader) + throw new Error(`Le fragment shader n'a pas pu être compilé: ${error}`) + } + + const shaderProgram = ctx.createProgram() + ctx.attachShader(shaderProgram, vertexShader) + ctx.attachShader(shaderProgram, fragmentShader) + ctx.linkProgram(shaderProgram) + + if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) { + throw new Error(`Le shader n'a pas pu être linké: ${ctx.getProgramInfoLog(shaderProgram)}`) + ctx.deleteShader(vertexShader) + ctx.deleteShader(fragmentShader) + ctx.deleteProgram(shaderProgram) + return null + } + + let videoElement, videoTexture = null; + if(ctx.getUniformLocation(shaderProgram, "uVideo") != null){ + videoElement = document.querySelector("video[data-cute-texture-video]") || document.querySelector("video"); + if(!videoElement){ + console.warn("Aucune vidéo avec l'attribut [data-cute-texture-video] n'a été trouvé sur la page"); + } else { + videoTexture = ctx.createTexture(); + ctx.bindTexture(ctx.TEXTURE_2D, videoTexture) + ctx.texImage2D( + ctx.TEXTURE_2D, + 0, + ctx.RGBA, + 1, 1, + 0, + ctx.RGBA, + ctx.UNSIGNED_BYTE, + new Uint8Array([0, 0, 0, 255]) + ) + ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE); + ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE); + ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR); + } + } + + const vertexIndexBuffer = ctx.createBuffer() + ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer) + ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW) + + return { + program: shaderProgram, + vertexShader, + fragmentShader, + videoElement, + videoTexture, + aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"), + uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"), + uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"), + uTime: ctx.getUniformLocation(shaderProgram, "uTime"), + uVideo: ctx.getUniformLocation(shaderProgram, "uVideo"), + uVideoSize: ctx.getUniformLocation(shaderProgram, "uVideoSize"), + vertexIndexBuffer, + } +} + +/** + * @param {HTMLCanvasElement} target + * @param {*} mainShader + */ +function renderCuteTexture(target, mainShader, initTime){ + let ctx = target.getContext("webgl") + + ctx.clearColor(0, 0, 0, 0) + ctx.clearDepth(1.0) + ctx.enable(ctx.DEPTH_TEST) + ctx.depthFunc(ctx.LEQUAL) + + ctx.clear(ctx.COLOR_BUFFER_BIT) + + ctx.bindBuffer(ctx.ARRAY_BUFFER, mainShader.vertexIndexBuffer) + ctx.vertexAttribPointer( + mainShader.aVertexIndex, // location + 1, // pull out 1 value per iteration + ctx.FLOAT, // the data in the buffer is 32bit floats + false, // don't normalize + 0, // how many bytes to get from one set of values to the next + 0 // how many bytes inside the buffer to start from + ) + ctx.enableVertexAttribArray(mainShader.aVertexIndex) + + ctx.useProgram(mainShader.program) + if(mainShader.uRandom){ + ctx.uniform4f( + mainShader.uRandom, + Math.random(), + Math.random(), + Math.random(), + Math.random() + ) + } + + if(mainShader.uCanvasSize){ + ctx.uniform2f( + mainShader.uCanvasSize, + target.width, + target.height + ) + } + + if(mainShader.uTime){ + ctx.uniform1f( + mainShader.uTime, + (Date.now() - initTime)/1000 + ) + } + + if(mainShader.uVideo){ + ctx.activeTexture(ctx.TEXTURE0); + ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture); + ctx.uniform1i( + mainShader.uVideo, + 0 + ) + } + + if(mainShader.uVideo && mainShader.videoElement && mainShader.videoTexture){ + ctx.activeTexture(ctx.TEXTURE0); + ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture); + ctx.texImage2D( + ctx.TEXTURE_2D, + 0, + ctx.RGBA, + ctx.RGBA, + ctx.UNSIGNED_BYTE, + mainShader.videoElement, + ); + ctx.uniform1i( + mainShader.uVideo, + 0 + ) + } + + if(mainShader.uVideoSize && mainShader.videoElement) { + ctx.uniform2f( + mainShader.uVideoSize, + mainShader.videoElement.videoWidth, + mainShader.videoElement.videoHeight + ) + } + + ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3); +} + +export function getDocumentShaderSource(doc=document){ + return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML +} \ No newline at end of file diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..8a66a09 --- /dev/null +++ b/js/events.js @@ -0,0 +1,140 @@ +export async function loadEvents(){ + let eventList = document.querySelectorAll('#eventSection > article'); + //console.log("event list: ", eventList); + + for (let event of eventList){ + let title = event.querySelector('h4'); + let date = event.querySelector('p.date'); + let posterLink = event.querySelector('a.iconBtnStyle').href; + let posterHTML = await getPoster(posterLink); + + let poster = posterHTML.querySelector('body > article'); + + let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])') + + console.log('entry data :', title, date, poster, posterStyle); + + let selectedEntry = createEntry(title, date, poster, posterStyle) + + console.log('created new details :', selectedEntry); + + event.replaceChildren(selectedEntry); + } + + /* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle'); + + //console.log("source buttons : ", btnList) + + let displayWindow = document.querySelector('#posterWindow'); + + let displayContainer = document.querySelector('#posterContainer'); + + let closeBtn = document.querySelector('#posterCloseBtn'); + + closeBtn.addEventListener('mousedown', () => { + displayWindow.style.visibility = 'collapse'; + displayContainer.replaceChildren(); + }) + + closeBtn.addEventListener('touchstart', () => { + displayWindow.style.visibility = 'collapse'; + displayContainer.replaceChildren(); + }) + + async function getPoster(src){ + let res = await fetch(src); + if (res.ok){ + let html_text = await res.text() + let html = new DOMParser().parseFromString(html_text, "text/html"); + return html + } else{ + console.log('error 333'); + return + } + } + + let eventList = []; + + if( btnList.length > 0 ){ + for (let btn of btnList ){ + let link = btn.children[0]; + link.style.pointerEvents = 'none'; + + //console.log(link.href); + + let posterPage = await getPoster(link.href); + + //console.log('selected poster: ', posterPage) + + let titleData = posterPage.querySelector('title'); + //console.log(titleData); + + let styleList = Array.from(posterPage.querySelectorAll('head > style')); + //console.log(styleList) + + styleList.splice(0,1); + //console.log(styleList) + + eventList.push( + { + content: posterPage.querySelector('main'), + title: titleData.innerText, + stylesheet: styleList, + sourceBtn: btn + } + ); + } + } + + //console.log("event list : ", eventList); + + if (eventList.length > 0){ + + eventList.forEach( (obj) =>{ + let btn = obj.sourceBtn; + let content = obj.content; + let title = obj.title; + for (let style of obj.stylesheet){ + document.head.append(style); + } + btn.addEventListener( 'click', () => { + //console.log("selection :", content) + displayWindow.style.visibility = 'visible'; + let targetTitle = displayWindow.querySelector('h4'); + targetTitle.innerText = title; + displayContainer.replaceChildren(content); + }) + }) + } */ +} + +async function getPoster(link){ + let res = await fetch(link); + if (res.ok){ + let html_text = await res.text() + let html = new DOMParser().parseFromString(html_text, "text/html"); + return html + } else{ + console.log('error 333'); + return + } + +} + +function createEntry(title, date, html, style){ + let newEntry = document.createElement('details'); + let newSummary = document.createElement('summary'); + newSummary.append(title, date); + + newEntry.append(newSummary); + + newEntry.append(html); + + newEntry.name = "eventList" + + for(let el of style){ + document.head.append(el); + } + + return newEntry +} diff --git a/js/floating.js b/js/floating.js new file mode 100644 index 0000000..d8ed239 --- /dev/null +++ b/js/floating.js @@ -0,0 +1,44 @@ +export function makeItFloat(target){ + let startTarget = target.querySelector('.title'); + + console.log('selected target :', startTarget); + + let startX, startY; + let clicked = false; + let selectedPointer; + + startTarget.addEventListener('pointerdown', (event) => { + selectedPointer = event.pointerId; + startX = event.pageX; + startY = event.pageY; + console.log('clicking...') + }) + + document.addEventListener('pointermove', (event) => { + if(event.pointerId === selectedPointer){ + event.preventDefault(); + document.querySelector('html').style.overflow = 'hidden'; + console.log('moving...') + let currentX = event.pageX; + let currentY = event.pageY; + let moveX = target.offsetLeft + currentX - startX; + target.style.left = moveX + 'px'; + let moveY = target.offsetTop + currentY - startY; + target.style.top = moveY + 'px'; + startX = currentX; + startY = currentY; + } + }); + + document.addEventListener('pointerup', () => { + console.log('STOP !') + selectedPointer = null; + document.querySelector('html').style.overflow = ''; + }) + + document.addEventListener('pointercancel', () => { + console.log('STOP !') + selectedPointer = null; + document.querySelector('html').style.overflow = ''; + }) +} \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..c72243c --- /dev/null +++ b/js/index.js @@ -0,0 +1,22 @@ +async function importOuverture(){ + const res = await fetch("/status/index.html") + if(!res.ok){ + throw new Error(`Server responded with status ${res.status} ${res.statusText}`) + } + let html_text = await res.text() + let html = new DOMParser().parseFromString(html_text, "text/html"); + + for(let style of html.querySelectorAll("head > style")) { + document.head.append(style) + } + + let textStatus = html.querySelector("#statusText").textContent; + let statusBox = document.querySelector('#statusText'); + statusBox.textContent = textStatus; +} + +importOuverture() + +for( let btn of document.querySelectorAll(".iconBtnStyle")){ + btn.style.visibility = 'visible'; +} diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..8b3bf7f --- /dev/null +++ b/js/main.js @@ -0,0 +1,21 @@ +import { loadEvents } from '/js/events.js' +import { loadStatus } from '/js/status.js' +import { initCuteTexture } from '/js/cuteTexture.js' +import { makeItFloat } from '/js/floating.js'; + +// ======================================== events & statut d'ouverture +loadEvents(); +loadStatus() + .then((status) => { + console.log("Status actuel du LOL", status); + + let cuteTexture = initCuteTexture({ + shaderSource: status.shaderSource + }); + + cuteTexture.target.style.visibility = "visible" + }); + +// ======================================== floating message window + +makeItFloat(document.querySelector('#msgWindow')); diff --git a/js/status.js b/js/status.js new file mode 100644 index 0000000..e3cbaa8 --- /dev/null +++ b/js/status.js @@ -0,0 +1,32 @@ +import { getDocumentShaderSource } from './cuteTexture.js'; + +export async function loadStatus(){ + let res = await fetch('/status/index.html'); + + let html_text = await res.text() + let html = new DOMParser().parseFromString(html_text, "text/html"); + + let shaderSource = getDocumentShaderSource(html); + + let target = document.querySelector('#statuSection'); + + let hiddenBtn = target.querySelector('a'); + + hiddenBtn.style.visibility = 'collapse'; + + let status = html.querySelector('#lolStatus'); + console.log('current status:', status.innerText); + + let isOpen = status.innerText.includes('ouvert'); + + let icon = html.querySelector('link[rel="icon"]'); + let style = html.querySelectorAll('link[rel="stylesheet"]')[0]; + //console.log("selected script: ", script); + + document.head.append(icon); + document.head.append(style); + + target.appendChild(status); + + return { open: isOpen, shaderSource }; +} diff --git a/readMe.MD b/readMe.MD new file mode 100644 index 0000000..aeb48ca --- /dev/null +++ b/readMe.MD @@ -0,0 +1,100 @@ +Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL : + +>si possible écrire tous les noms de variables en camel Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible + +> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" voir dernière entrée (***) + +> j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ? + + + +> ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé ) + +>(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire) + modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale + changer le fetch dans status.js + +> problème de gestion des évènement tactiles, rien ne marche ... + +> problème import css directement dans main.css + +* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche + +* [x] auto scale affiche dans son conteneur +> problème à gérer dans la conception des affiches + +* [x] message de bienvenue !!! + +* [x] tester section event avec des vraies affiches !!! +> problème de cohérence interface / contenu sur pc, le panneau event est très large et dois afficher des affiches format vertical donc très haut si rescale sur width ou très petit si rescale sur hauteur + si format aléatoire je sais pas comment scale + +* [x] performance arrière plan avec un shader + > OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg + + video noir & blanc au dessus en mix blend difference, opacité 0.777 + > FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg + +* [x] désactiver la video pour les personnes qui veulent pas d'effets visuels + +* [x] fond video en version dégradée + scale video un peu plus grand car bande noire en bas + +* [x] réglages padding section statut + + +# Démarrer un serveur de developpement + +``` +python3 -m http.server +``` + +Et ensuite, le site est disponible sur http://localhost:8000/ + +## Tester sur son tel + +Il faut démarrer le serveur avec la commande suivante: + +``` +python3 -m http.server -b 0.0.0.0 +``` + +Ensuite il faut obtenir l'adresse IP de son ordinateur +``` +ip a +``` + +Dans notre cas c'est `10.0.0.165` (voir l'exemple ci-dessous). +``` +1: lo: mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 + link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 + inet 127.0.0.1/8 scope host lo + valid_lft forever preferred_lft forever +2: eth0: mtu 1500 qdisc mq state UP group default qlen 1000 + link/ether c4:9d:ed:15:78:cc brd ff:ff:ff:ff:ff:ff + inet 10.0.0.165/24 brd 10.0.0.255 scope global dynamic noprefixroute mlan0 + valid_lft 5204sec preferred_lft 5204sec +``` + +Sur son tel, on peut alors acceder a http://10.0.0.165:8000/. +Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000. + +## Lien symbolique et ouverture => comment preview pour dev + +aller dans /status puis executer la commande en fonction du statut souhaité + + ./set-status.sh opened + +> statut ouvert + + ./set-status.sh closed + +> statut fermé + +## Accessibilité + +[x] alt sur les images fonctionnelle + +[x] alt sur les boutons aussi + +[x]checkup global accessibilité et sémantique + +[x] open graphs ! + diff --git a/spaceapi/space.json b/spaceapi/space.json new file mode 100644 index 0000000..f041b66 --- /dev/null +++ b/spaceapi/space.json @@ -0,0 +1,34 @@ +{ + "api_compatibility": [ + "14", + "15" + ], + "space": "Laboratoire Ouvert Lyonnais", + "logo": "https://labolyon.fr/images/logo_picto.svg", + "url": "https://labolyon.fr/", + "location": { + "address": "7 Place Louis Chazette 69001 Lyon, France", + "lon": 4.8372366, + "lat": 45.7732494, + "country_code": "FR", + "timezone": "Europe/Paris" + }, + "contact": { + "irc": "ircs://irc.geeknode.org:6697/labolyon", + "ml": "discussions@listes.labolyon.fr", + "mastodon": "@labolyon@nerdculture.de", + "matrix": "#lol-space:chat.labolyon.fr" + }, + "state": { + "icon": { + "closed": "https://labolyon.fr/status/status.ferm%C3%A9.png", + "open": "https://labolyon.fr/status/status.ouvert.png" + }, + "open": false, + "lastchange": 1788302721 + }, + "projects": [ + "https://git.labolyon.fr/", + "https://wiki.labolyon.fr/" + ] +} diff --git a/status/closedStyle.css b/status/closedStyle.css new file mode 100644 index 0000000..af8858d --- /dev/null +++ b/status/closedStyle.css @@ -0,0 +1,88 @@ +:root { + --back-color: #FFFF4D; + --main-color: #000000; +} + +/*======================= Page Statut LOL fermé ===*/ +#lolIsClosed { + position: relative; + top: 0; + left: 0; + margin: 0; + width: 100vw; + height: 100vh; + background-color: var(--main-color); + + #closedContainer { + padding: 15px; + box-sizing: border-box; + } + + .cute-texture { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + } +} + +#closedContainer{ + width:100%; + height: 100%; + border-radius: 33px; + + display:flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + section{ + width: 333px; + height: 117px; + background-color: var(--back-color); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding-top: 33px; + + margin-top: -77px; + + border-radius: 33px; + + + p{ + padding: 0; + margin: 0; + text-transform: none; + font-size: 22px; + font-family: 'velvelyne'; + font-weight: bold; + + color: var(--main-color); + } + + h3{ + width: 277px; + height: 50px; + + background-color: var(--main-color); + color: var(--back-color); + + border-radius: 33px; + + text-transform: uppercase; + text-align: center; + font-size: 33px; + font-family: 'karrik'; + font-weight: normal; + + padding: 0; + margin: 0; + padding-top: 7.77px; + } + } +} diff --git a/status/index.fermé.html b/status/index.fermé.html new file mode 100644 index 0000000..e9a5925 --- /dev/null +++ b/status/index.fermé.html @@ -0,0 +1,59 @@ + + + + + + + + + + + Le LOL est Fermé ... + + + +
+
+

Le LOL est actuellement

+

fermé ...

+
+
+ + + + + + diff --git a/status/index.ouvert.html b/status/index.ouvert.html new file mode 100644 index 0000000..e9a5925 --- /dev/null +++ b/status/index.ouvert.html @@ -0,0 +1,59 @@ + + + + + + + + + + + Le LOL est Fermé ... + + + +
+
+

Le LOL est actuellement

+

fermé ...

+
+
+ + + + + + diff --git a/status/openStyle.css b/status/openStyle.css new file mode 100644 index 0000000..99dd0f3 --- /dev/null +++ b/status/openStyle.css @@ -0,0 +1,118 @@ +:root { + --back-color: #00FF44; + --main-color: #000000; +} + +.closedBackground{ + visibility: collapse; +} + +.openBackground{ + position: absolute; + visibility: visible; + opacity: 1; + z-index: -20 +} + +.openBackground#texture{ + z-index: -30; +} + +.openBackground#background{ + mix-blend-mode: difference; + filter: brightness(133%) saturate(33%) grayscale(); + transform: rotate(180deg); + position: absolute; + margin-top: -9%; + height: 120%; + opacity: .777; +} + +/*======================= Page Statut LOL ouvert ===*/ + +#lolIsOpen { + position: relative; + top: 0; + left: 0; + margin: 0; + width: 100vw; + height: 100vh; + background-color: var(--main-color); + + #openContainer { + padding: 15px; + box-sizing: border-box; + } + + .cute-texture, .cute-texture-video { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + } +} + +#openContainer{ + width:100%; + height: 100%; + border-radius: 33px; + + display:flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + section{ + width: 333px; + height: 117px; + background-color: var(--back-color); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding-top: 33px; + + margin-top: -77px; + + border-radius: 33px; + + + p{ + padding: 0; + margin: 0; + text-transform: none; + font-size: 22px; + font-family: 'velvelyne'; + font-weight: bold; + + color: var(--main-color); + } + + h3{ + width: 277px; + height: 50px; + + background-color: var(--main-color); + color: var(--back-color); + + border-radius: 33px; + + text-transform: uppercase; + text-align: center; + font-size: 33px; + font-family: 'karrik'; + font-weight: normal; + + padding: 0; + margin: 0; + padding-top: 7.77px; + } + } +} + +#lolStatus{ + animation: blink 3.33s infinite; +} diff --git a/status/set-status.sh b/status/set-status.sh new file mode 100755 index 0000000..3b71623 --- /dev/null +++ b/status/set-status.sh @@ -0,0 +1,24 @@ +#!/bin/bash + +if [ "$#" = "0" ]; then + echo "Usage set-status.sh [new-status]" + echo "" + echo "[new-status] can be \"opened\" or \"closed\"" + echo "" + exit 1 +fi + +#SPACE_JSON=/var/www/html/spaceapi/space.json +SPACE_JSON="$(dirname $0)/../spaceapi/space.json" + +if [ "$1" = "opened" ]; then + ln -sf "index.ouvert.html" "$(dirname $0)/index.html" + jq "setpath([\"state\", \"open\"]; true) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new && + mv -f $SPACE_JSON.new $SPACE_JSON +fi + +if [ "$1" = "closed" ]; then + ln -sf "index.fermé.html" "$(dirname $0)/index.html" + jq "setpath([\"state\", \"open\"]; false) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new && + mv -f $SPACE_JSON.new $SPACE_JSON +fi diff --git a/style/animation.css b/style/animation.css new file mode 100644 index 0000000..f2a2da9 --- /dev/null +++ b/style/animation.css @@ -0,0 +1,37 @@ +@keyframes blink { + 0% { color: var(--main-color);} + 15% { color: var(--back-color);} + 35% { color: var(--back-color);} + 50% { color: var(--main-color);} + 65% { color: var(--back-color);} + 85% { color: var(--back-color);} + 100% { color: var(--main-color);} +} + +@keyframes blinkBack { + 0% { background-color: var(--back-color);} + 15% { background-color: var(--main-color);} + 35% { background-color: var(--main-color);} + 50% { background-color: var(--back-color);} + 65% { background-color: var(--main-color);} + 85% { background-color: var(--main-color);} + 100% { background-color: var(--back-color);} +} + +@keyframes blinkBorder { + 0% { border-color: var(--main-color);} + 15% { border-color: var(--accent-color);} + 35% { border-color: var(--accent-color);} + 50% { border-color: var(--main-color);} + 65% { border-color: var(--accent-color);} + 85% { border-color: var(--accent-color);} + 100% { border-color: var(--main-color);} +} + +@keyframes float { + 0% { transform: translateY(0px); } + 35% { transform: translateY(1px); } + 50% { transform: translateY(-10px); } + 65% { transform: translateY(1px); } + 100% { transform: translateY(0px); } +} \ No newline at end of file diff --git a/style/common.css b/style/common.css new file mode 100644 index 0000000..c81a6e3 --- /dev/null +++ b/style/common.css @@ -0,0 +1,188 @@ +.textBtnStyle{ + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + text-align: center; + + border-radius: 16.1px; + border-style: solid; + border-width: thin; + padding: 3.33px; + padding-left: 7.77px; + + + font-family: 'karrik'; + font-size: 16.1px; + text-transform: uppercase; + + border-color: var(--main-color); + color: var(--main-color); + background-color: var(--back-color); +} + +.textBtnStyle:hover{ + color: var(--back-color); + background-color: var(--main-color); + border-color: var(--back-color); +} + +.iconBtnStyle{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-align: center; + + border-radius: 16.1px; + border-style: solid; + border-width: thin; + + border-color: var(--main-color); + color: var(--main-color); + background-color: var(--back-color); +} +.icon{ + height: 16.1px; + width: auto; + fill: currentColor; + pointer-events: none; +} + +.iconBtnStyle:hover{ + color: var(--back-color); + background-color: var(--main-color); + border-color: var(--back-color); + animation: none; +} + +@media(min-width: 1300px){ + .textBtnStyle{ + font-size: 19px; + } + + .iconBtnStyle{ + font-size: 19px; + } +} + +.solidBox{ + width: 100%; + height: 100%; + position: relative; + z-index: 0; + + border-radius: 0; + border-style: solid; + border-width: thin; + padding: 7.77px; + + border-color: var(--main-color); + color: var(--main-color); + background-color: var(--back-color); + + font-family: 'velvelyne'; + font-weight: bold; + font-size: 16.1px; + box-sizing: border-box; +} + +.transparentBox{ + width: 100%; + height: 100%; + position: relative; + z-index: 0; + + padding: 7.77px; + + color: var(--back-color); + background-color: transparent; + + font-family: 'karrik'; + text-transform: uppercase; + font-size: 16.1px; + box-sizing: border-box; +} + +.borderBox{ + width: 95%; + height: 95%; + position: relative; + z-index: 0; + + border-radius: 0; + border-style: solid; + border-width: medium; + padding: 7.77px; + padding-right: 13.12px; + + border-color: var(--main-color); + color: var(--back-color); + background-color: transparent; + + box-sizing: border-box; +} + +.floatingWindow{ + position: relative; + z-index: 3333; + + width: auto; + height: auto; + + background-color: var(--back-color); + border-color: var(--main-color); + border-radius: 16.1px; + border-style: solid; + border-width: thin; + + overflow: hidden; + box-sizing: content-box; + + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + .title{ + position: relative; + top: 0; + width: 100%; + height: 44px; + + background-color: var(--main-color); + color: var(--back-color); + + text-transform: none; + font-size: 15px; + font-family: 'velvelyne'; + font-weight: bold; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + padding-left: 16.1px; + padding-right: 7.77px; + + box-sizing: border-box; + cursor: move; + + h4{ + pointer-events: none; + } + + .iconBtnStyle{ + width: 27px; + height: 27px; + pointer-events: all; + + .icon{ + height: 13.12px; + width: auto; + } + } + + } +} diff --git a/style/default.css b/style/default.css new file mode 100644 index 0000000..79fc63b --- /dev/null +++ b/style/default.css @@ -0,0 +1,39 @@ +input { + -webkit-appearance: none !important; + appearance: none !important; +} + +a{ + text-decoration: none; + color: inherit; + cursor: alias; +} + +button{ + cursor: cell; +} + +a p{ + cursor:inherit; +} + +a button{ + cursor: inherit; +} + +p,h1,h2,h3,h4{ + cursor: inherit; + pointer-events: none; + padding: 0; + margin: 0; +} + +ul,ol { + padding: 0; + margin: 0; + list-style-type: none; +} + +dialog{ + padding: 0; +} diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..211696f --- /dev/null +++ b/style/main.css @@ -0,0 +1,619 @@ +/*================ GAMME COLOR ======================*/ +:root{ + --back-color: #FFFF4D; + --main-color: #000000; +} + +/*================ BODY ======================*/ +html{ + margin: 0; + padding: 0; + scrollbar-color: var(--back-color) var(--main-color); + background-color: var(--main-color); + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: scroll; + position: relative; + z-index: -33; +} + +body{ + margin: 0; + padding: 0; + width: 100%; + height: auto; + overflow-y: hidden; + position: relative; + z-index: -33; + box-sizing: border-box; +} +/*================ STRUCTURE ======================*/ + +header{ + width: 100%; + height: 93px; + margin: 0; + position: relative; + top:0; + z-index: 0; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + border-style: solid; + border-width: 0 0 1.61px 0; + + border-color: var(--main-color); + background-color: var(--back-color); + + h1{ + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: 13.12px; + padding-left: 13.12px; + margin-bottom: 13.12px; + img{ + height: 50px; + width: auto; + } + + .cool-name{ + font-family: 'pressStart'; + font-size: 50px; + padding-top: 13.12px; + + + .trans-symbol{ + font-family: 'velvelyne'; + font-weight: bold; + } + } + + .plain-name{ + position: relative; + z-index: -33; + opacity: 0; + width: 0; + } + } + + nav > ul{ + width: auto; + height: 100%; + margin: 0; + + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-right: 7.77px; + margin-top: 13.12px; + + .textBtnStyle{ + border-radius: 0; + width: 117px; + } + } + +} + +noscript > video{ + height: 110%; + width: auto; + position: absolute; + inset: 0; + z-index: -32; +} + +.cute-texture-video{ + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: -33; +} + +.cute-texture{ + position: absolute; + width: 100%; + height: 110%; + top: 0; + left: 0; + z-index: -33; +} + +.openBackground{ + visibility: collapse; +} + + +main{ + position: relative; + z-index: -33; + overflow: hidden; + + #homeContent{ + height: 66vh; + width: 100%; + position:relative; + z-index: 0; + display: grid; + grid-template-columns: 2.5fr 2fr 1fr; + grid-template-rows: 1fr 1.5fr; + + .access-info-box { + grid-column: 2 / 4; + grid-row: 1; + font-size: 15px; + z-index: 5; + padding-top: 50px; + + address { + margin-bottom: 2em; + } + } + + aside{ + grid-row: 2; + grid-column: 2; + align-self: end; + justify-self: end; + color: var(--main-color); + position: relative; + + z-index: 33; + + margin-bottom: 13.12px; + margin-right: 13.12px; + + #openMsg{ + width: 33px; + height: 33px; + animation: float 1.61s infinite; + box-sizing: border-box; + + border-radius: 13.12px; + } + + #openMsg:hover{ + animation: none; + } + + #msgWindow{ + border-style: none; + background-color: transparent; + position: fixed; + top: 117px; + left: 33px; + animation: none; + z-index: 1312; + margin: 0; + + .floatingWindow{ + width: 277px; + height: auto; + margin-top: 33px; + + text-transform: none; + font-size: 15px; + font-family: 'velvelyne'; + font-weight: bold; + padding-bottom: 13.12px; + border-width: 3.33px; + border-style: double solid solid; + + h4{ + user-select: none; + pointer-events: all; + } + + p{ + padding: 7.77px; + padding-right: 16.1px; + + + strong{ + font-family: 'karrik'; + font-weight: normal; + text-transform: uppercase; + font-size: 16.1px; + } + } + } + } + + #msgWindow::backdrop{ + background-color: var(--back-color); + opacity: .333; + width: 100vw; + height: 100vh; + box-sizing: border-box; + } + + } + + #titleSection{ + grid-column: 1; + grid-row: 1; + width: 100%; + height: 100%; + + h2{ + text-transform: uppercase; + font-family: 'karrik'; + font-size: 22px; + line-height: 1em; + } + small{ + text-transform: none; + font-size: 15px; + font-family: 'velvelyne'; + font-weight: bold; + line-height: 0.3em; + padding-left: 7.77px; + } + } + + #hourSection{ + grid-column: 3; + grid-row: 2; + width: 100%; + height: 77%; + align-self: end; + justify-self: end; + padding: 0; + + h3{ + width: 100%; + margin-bottom: 16.1px; + + font-family: 'karrik'; + text-transform: uppercase; + font-weight: normal; + font-size: 14px; + + border-radius: 0; + border-style: solid; + border-width: thin; + + padding: 3.33px; + margin-bottom: 3.33px; + box-sizing: border-box; + + border-color: var(--main-color); + } + + ol{ + padding-left: 3.33px; + + font-family: 'karrik'; + text-transform: uppercase; + font-weight: normal; + font-size: 11px; + + strong{ + font-family: 'velvelyne'; + font-weight: bold; + font-size: 16.1px; + } + + li{ + margin-top: 16.1px; + } + } + } + + #planSection{ + grid-column: 1 / 3; + grid-row: 2; + color: var(--back-color); + justify-self: end; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + #planContainer{ + width: 100%; + height: max-content; + margin-left: 13.12px; + margin-top: 0; + } + + img{ + position: relative; + z-index: 0; + width: 90%; + height: auto; + } + + svg{ + fill: currentColor; + position: absolute; + z-index: -1; + width: 90%; + height: auto; + top: 4.44px; + left: -1.61px; + } + } + + #extLinkSection{ + grid-column: 3; + grid-row: 1; + width: 77%; + height: 122%; + justify-self: end; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + margin-right: 16.1px; + margin-top: 7.77px; + gap: 13.12px; + + a{ + cursor: alias; + img{ + width: auto; + height: 55px; + pointer-events: none; + } + } + + } + + #adhesionSection{ + visibility: collapse; + grid-column: 1; + grid-row: 2; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + .textBtnStyle{ + position: relative; + z-index: 33; + width: 90%; + height: 33px; + font-size: 13.12px; + margin-top: 13.12px; + } + + #addUserWindow{ + border-style: none; + background-color: transparent; + position: fixed; + top: 77px; + left: 16.1px; + animation: none; + z-index: 1312; + margin: 0; + + .floatingWindow{ + width: 333px; + height: auto; + margin-top: 33px; + + text-transform: none; + font-size: 15px; + font-family: 'velvelyne'; + font-weight: bold; + padding-bottom: 13.12px; + border-width: 3.33px; + border-style: double solid solid; + + p{ + padding: 7.77px; + padding-right: 16.1px; + + strong{ + font-family: 'karrik'; + font-weight: normal; + text-transform: uppercase; + font-size: 16.1px; + } + } + } + } + + #addUserWindow::backdrop{ + background-color: var(--back-color); + opacity: .333; + width: 100vw; + height: 100vh; + box-sizing: border-box; + } + } + } + + #statuSection{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + padding: 0; + height: 20vh; + + .textBtnStyle{ + width: 66px; + font-size: 11px; + margin-right: 7.77px; + } + + #statusDesc{ + width: 77%; + padding: 7.77px; + padding-right: 33px; + font-size: 16.1px; + line-height: 1.1em; + + small{ + font-size: 13.12px; + line-height: 0.333em; + } + } + + #lolStatus{ + position: relative; + z-index: 33; + width: 40%; + height: 50px; + display: flex; + flex-direction: row; + align-items: center; + + font-family: 'karrik'; + text-transform: uppercase; + font-size: 22px; + line-height: 1em; + + padding-left: 16.1px; + box-sizing: border-box; + border-radius: 22px 0 0 22px; + + background-color: var(--main-color); + color: var(--back-color); + + small{ + font-size: 1px; + opacity: 0; + } + } + } + + #extraContent{ + width: 100%; + height:auto; + position: relative; + z-index: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + + dl dt { + clear: both; + float: left; + margin-right: 1ex; + font-family: "karrik", sans-serif; + text-transform: uppercase; + } + + dl dd { + margin-left: 0; + margin-bottom: 1em; + } + + #aboutSection{ + padding: 13.12px; + padding-right: 33px; + font-size: 16.1px; + line-height: 1.333em; + } + + #eventSection{ + position: relative; + z-index: -1; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 0; + padding-bottom: 16.1px; + padding-right: 16.1px; + + overflow-y: scroll; + + h3{ + position: relative; + margin-bottom: 7.77px; + } + + + article{ + h4{ + padding: 16.1px; + } + + a{ + margin-right: 33px; + } + + .date{ + padding: 16.1px; + } + } + + .solidBox{ + width: 100%; + height: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0; + box-sizing: border-box; + flex-shrink: 0; + } + + .solidBox:has(details[open]){ + color: var(--back-color); + background-color: var(--main-color); + border-color: var(--back-color); + border-radius: 16.1px; + margin-top: 7.77px; + overflow: hidden; + margin-bottom: 7.77px; + + details{ + cursor: default; + } + + } + + .iconBtnStyle{ + width: 33px; + height: 33px; + + .icon{ + transform: rotate(45deg); + } + } + + details{ + width: 100%; + height: 100%; + cursor: copy; + overflow: hidden; + + summary{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + box-sizing: border-box; + list-style-type: none; + padding: 16.1px; + } + + article{ + width: 100%; + cursor: default; + text-transform: none; + } + } + } + } +} diff --git a/style/reduced.css b/style/reduced.css new file mode 100644 index 0000000..22c67ab --- /dev/null +++ b/style/reduced.css @@ -0,0 +1,12 @@ +@media (prefers-reduced-motion: reduce){ + noscript > video, + .cute-texture, + .cute-texture-video{ + visibility: collapse !important; + display: none !important; + } + + main aside #openMsg{ + animation: none !important; + } +} \ No newline at end of file diff --git a/style/responsive.css b/style/responsive.css new file mode 100644 index 0000000..8e74f7d --- /dev/null +++ b/style/responsive.css @@ -0,0 +1,317 @@ +/*===========================Moyen format : Tablette et petite fenêtres PC ===*/ +@media(min-width: 650px){ + header{ + height: 60px; + + h1{ + margin-bottom: 5px; + + img{ + height: 40px; + } + } + nav > ul{ + + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + height: 44px; + margin-top: 16.1px; + margin-right: 13.12px; + min-width: 444px; + box-sizing: border-box; + + li{ + height: 100%; + } + + .textBtnStyle{ + border-radius: 0; + width: 93px; + height: 100%; + } + } + } + + main{ + #homeContent{ + height: 77vh; + grid-template-columns: 2fr 2fr 1fr; + grid-template-rows: 0.7fr 2fr; + + .access-info-box { + padding-top: 0; + } + + aside{ + grid-column: 3; + margin-bottom: 33px; + margin-right: 33px; + + #msgWindow{ + left: unset; + right: 77px; + top: 161px; + } + } + + #titleSection{ + height: 110%; + h2{ + font-size: 27px; + } + + p{ + font-size: 20px; + } + } + + #hourSection{ + grid-column: 1; + width: 50%; + height: 100%; + justify-self: start; + } + + address{ + padding-top: 16.1px; + } + + #planSection{ + grid-column: 2 / 4; + #planContainer{ + width: 110%; + height: auto; + margin-left: -88px; + margin-top: -50px; + + @media(min-width: 800px){ + margin-top: -88px; + } + } + } + + #extLinkSection{ + justify-content: flex-start; + padding-top: 33px; + } + + #adhesionSection{ + justify-content: flex-end; + margin-top: 0; + margin-bottom: 33px; + width: 77%; + } + + } + #statuSection{ + .textBtnStyle{ + font-size: 16.1px; + width: 117px; + margin-right: 33px; + } + + #statusDesc{ + font-size: 16.1px; + padding-left: 33px; + } + } + + #extraContent{ + + + #aboutSection{ + + } + + #eventSection{ + #eventContent{ + li{ + .iconBtnStyle{ + right: 3.33%; + } + } + } + } + } + } + } + + + +/*===========================Grand format : écrans larges et grands ===*/ +@media(min-width: 1300px){ + header{ + nav > ul{ + + font-size: 27px; + + li{ + height: 100%; + } + + .textBtnStyle{ + padding-left: 16.1px; + width: 133px; + } + } + } + + main{ + #homeContent{ + aside{ + margin-bottom: 77px; + margin-right: 77px; + + #msgWindow{ + left: unset; + right: 33px; + top: 33vh; + } + + #openMsg{ + width: 44px; + height: 44px; + } + + .icon{ + height: 22px; + width: auto; + } + + dialog{ + + .title{ + font-size: 22px; + height: 50px; + + .iconBtnStyle{ + width: 36px; + height: 36px; + border-radius: 22px; + } + } + } + } + + #titleSection{ + width: 90%; + } + + #hourSection{ + height: 77%; + width: 44%; + + h3{ + font-size: 20px; + } + + ol{ + font-size: 16.1px; + padding-left: 16.1px; + strong{ + font-size: 22px; + } + } + } + + address{ + font-size: 22px; + margin-top: 13.12px; + } + + #planSection{ + #planContainer{ + width: 100%; + height: auto; + margin-left: -88px; + margin-top: -133px; + } + } + + #extLinkSection{ + a img{ + height: 77px; + } + } + + #adhesionSection{ + width: 50%; + margin-left: 16.1px; + margin-bottom: 77px; + + .textBtnStyle{ + height: 44px; + font-size: 20px; + } + } + + } + + #statuSection{ + #statusDesc{ + padding-left: 77px; + font-size: 20px; + } + #lolStatus{ + font-size: 33px; + height: 77px; + width: 50%; + border-radius: 33px 0 0 33px; + } + + .textBtnStyle{ + font-size: 22px; + margin-right: 33px; + padding-left: 16.1px; + } + } + + #extraContent{ + height: 90vh; + flex-direction: row; + overflow: hidden; + + #aboutSection{ + font-size: 22px; + } + + #eventSection{ + #eventContent{ + li{ + .iconBtnStyle{ + width: 44px; + height: 44px; + border-radius: 22px; + right: 1.61%; + } + + .icon{ + height: 22px; + } + } + + details{ + summary{ + .title{ + font-size: 22px; + + h4{ + font-size: 27px; + } + } + + .resume{ + font-size: 16.1px; + } + } + .description{ + font-size: 16.1px; + } + } + } + } + } + } +} diff --git a/style/typo.css b/style/typo.css new file mode 100644 index 0000000..a632e36 --- /dev/null +++ b/style/typo.css @@ -0,0 +1,33 @@ +@font-face { + font-family: 'karrik'; + src: url('typo/Karrik-Italic.woff2') format('woff2'); + font-style: italic; +} + +@font-face { + font-family: 'karrik'; + src: url('typo/Karrik-Regular.woff2') format('woff2'); + font-style: normal; +} + +@font-face { + font-family: 'velvelyne'; + src: url('typo/Velvelyne-Book.ttf') format('truetype'); + font-weight: normal; +} + +@font-face { + font-family: 'avara'; + src: url('typo/Avara-Black.woff2') format('woff2'); +} + +@font-face { + font-family: 'pressStart'; + src: url('typo/PressStart2P-Regular.ttf'); +} + +@font-face { + font-family: 'velvelyne'; + src:url('typo/Velvelyne-Bold.ttf') format('truetype'); + font-weight: bold; +} diff --git a/style/typo/Avara-Black.woff2 b/style/typo/Avara-Black.woff2 new file mode 100644 index 0000000..24a6617 Binary files /dev/null and b/style/typo/Avara-Black.woff2 differ diff --git a/style/typo/Karrik-Italic.woff2 b/style/typo/Karrik-Italic.woff2 new file mode 100644 index 0000000..203f936 Binary files /dev/null and b/style/typo/Karrik-Italic.woff2 differ diff --git a/style/typo/Karrik-Regular.woff2 b/style/typo/Karrik-Regular.woff2 new file mode 100644 index 0000000..8754815 Binary files /dev/null and b/style/typo/Karrik-Regular.woff2 differ diff --git a/style/typo/Lineal-Heavy.ttf b/style/typo/Lineal-Heavy.ttf new file mode 100644 index 0000000..ee6c18d Binary files /dev/null and b/style/typo/Lineal-Heavy.ttf differ diff --git a/style/typo/PressStart2P-Regular.ttf b/style/typo/PressStart2P-Regular.ttf new file mode 100644 index 0000000..2442aff Binary files /dev/null and b/style/typo/PressStart2P-Regular.ttf differ diff --git a/style/typo/Velvelyne-Bold.ttf b/style/typo/Velvelyne-Bold.ttf new file mode 100644 index 0000000..a9a4c84 Binary files /dev/null and b/style/typo/Velvelyne-Bold.ttf differ diff --git a/style/typo/Velvelyne-Book.ttf b/style/typo/Velvelyne-Book.ttf new file mode 100644 index 0000000..7a4dd9e Binary files /dev/null and b/style/typo/Velvelyne-Book.ttf differ diff --git a/style/typo/Velvelyne-Light.ttf b/style/typo/Velvelyne-Light.ttf new file mode 100644 index 0000000..8601c1d Binary files /dev/null and b/style/typo/Velvelyne-Light.ttf differ