Ajout d'une page a propos
This commit is contained in:
parent
7e654b4640
commit
cb10cc189c
GPG key ID:
C4B28FD2729941CE
6 changed files with 156 additions and 2 deletions
59
about.html
Normal file
59
about.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./css/about.css" />
|
||||
<link rel="shortcut icon" href="./assets/favicon@192.png" type="image/png">
|
||||
<style>
|
||||
body {
|
||||
max-width: 800px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 100px;
|
||||
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<title>À propos de la carte du Camp Interhack</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="about">
|
||||
|
||||
<img src="./assets/favicon@512.png" alt="Interhack Camp">
|
||||
|
||||
<h1>À propos <small>de la carte du Camp Interhack</small></h1>
|
||||
|
||||
<p>
|
||||
La carte de Camp à été élaborée par la commission Ambiance et Spacialisation.
|
||||
On espère qu'elle vous sera utile.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Si vous avez un soucis, que vous avez trouvé un bug ou que vous voulez contribuer, vous pouvez vous rendre sur le <a href="https://git.interhacker.space/epickiwi/2026.camp.carte" target="_blank">GIT de l'interhack</a> et parciper à son amélioration.
|
||||
Vous pouvez aussi trouver Kiwi qui se fera une joie de vous expliquer comment contribuer ou comment la carte fonctionne.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
Nous avons élaboré cette carte avec <a href="https://qgis.org/" target="_blank">QGIS</a>, un logiciel libre d'analyse et d'édition de cartes.
|
||||
Pour la partie interactive sur le site, nous avons utilisé du HTML, du CSS et du JavaScript. Les icones ont été fabriquées sur <a href="https://inkscape.org/fr/" target="_blank">Inkscape</a>, les textures du fond de carte sur <a href="https://www.gimp.org/" target="_blank">Gimp</a> et les éléments 3D dans <a href="https://www.blender.org/" target="_blank">Blender</a>.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
Le code source de la carte est en <a href="https://www.gnu.org/licenses/agpl-3.0.fr.html" target="_blank">license libre AGPLv3</a>. Les données sont en license <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr" target="_blank">CC-BY-SA</a> et incluses dans le code source.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le code source peut être téléchargé et redistribué librement: <a href="./carte-camp-code-source.tar.gz" download="carte-camp-code-source.tar.gz">Télécharger le code source</a>
|
||||
</p>
|
||||
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
46
css/about.css
Normal file
46
css/about.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.about {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.about img[src="./assets/favicon@512.png"] {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
height: 100px;
|
||||
max-height: 50vw;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
filter: drop-shadow(currentColor 0px 0px 1px) drop-shadow(currentColor 0px 0px 1px) drop-shadow(currentColor 0px 0px 1px);
|
||||
}
|
||||
/*
|
||||
#result-panel-dialog .about img[src="./assets/favicon@512.png"] {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
.about h1 {
|
||||
font-weight: normal;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.about h1 small {
|
||||
display: block;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.about a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.about hr {
|
||||
border: none;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.about p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -50,8 +50,17 @@ body > hr {
|
|||
}
|
||||
|
||||
#main-header #logo {
|
||||
max-height: clamp(2rem, 10vh, 5rem);
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
filter: drop-shadow(rgba(0,0,0,0.5) 0 0 10px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#main-header #logo img {
|
||||
max-height: clamp(2rem, 10vh, 5rem);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* MAP */
|
||||
|
|
|
|||
|
|
@ -8,16 +8,20 @@
|
|||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="./css/style-desktop.css" media="screen and (min-width: 600px)">
|
||||
<link rel="stylesheet" href="./css/widgets.css">
|
||||
<link rel="stylesheet" href="./css/about.css">
|
||||
<script type="module" src="./js/index.js"></script>
|
||||
<script type="module" src="./js/components/bidi-panel.js"></script>
|
||||
<script type="module" src="./js/components/upcoming-talks.js"></script>
|
||||
<script type="module" src="./js/components/html.js"></script>
|
||||
<script type="module" src="./js/components/talk.js"></script>
|
||||
<link rel="shortcut icon" href="./assets/favicon@192.png" type="image/png">
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
</head>
|
||||
<body>
|
||||
<header id="main-header">
|
||||
<img src="./logo.png" alt="Interhack Camp" id="logo">
|
||||
<button id="logo">
|
||||
<img src="./logo.png" alt="Interhack Camp">
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section id="map"></section>
|
||||
|
|
@ -50,5 +54,7 @@
|
|||
</button>
|
||||
<camp-bidi-panel id="result-panel" ></camp-bidi-panel>
|
||||
</dialog>
|
||||
|
||||
<template id="about-template" is="camp-html" src="./about.html"></template>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
25
js/components/html.js
Normal file
25
js/components/html.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
class HTMLImportElement extends HTMLTemplateElement {
|
||||
|
||||
get src(){
|
||||
return new URL(this.getAttribute("src"), this.baseURI).toString();
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.load()
|
||||
}
|
||||
|
||||
async load(){
|
||||
let res = await fetch(this.src);
|
||||
if(!res.ok){
|
||||
console.error(`Server responded with code ${res.status} ${res.statusText}`)
|
||||
return
|
||||
}
|
||||
|
||||
let htmlStr = await res.text()
|
||||
let html = new DOMParser().parseFromString(htmlStr, "text/html");
|
||||
|
||||
this.content.replaceChildren(...Array.from(html.querySelector("body").childNodes))
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("camp-html", HTMLImportElement, {extends: "template"})
|
||||
|
|
@ -223,6 +223,15 @@ bindButtonToCategory(document.getElementById("explore-on-schedule"), "on-schedul
|
|||
bindButtonToCategory(document.getElementById("explore-dodo"), "dodo")
|
||||
bindButtonToCategory(document.getElementById("explore-bin"), "bin")
|
||||
|
||||
document.getElementById("logo").addEventListener("click", e => {
|
||||
openFeature()
|
||||
let panel = document.getElementById("result-panel")
|
||||
panel.replaceChildren(document.getElementById("about-template").content.cloneNode(true));
|
||||
requestAnimationFrame(() => {
|
||||
panel.setActiveChildrenIndex(0, {behavior: "instant"})
|
||||
})
|
||||
})
|
||||
|
||||
{
|
||||
const RESULT_PANEL = document.getElementById("result-panel")
|
||||
/** @type {HTMLDialogElement} */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue