first commit

.env

@@ -0,0 +1,4 @@
+ALLOW_ORIGIN=netig.net
+#DSN=
+RECIPIENT=contact@netig.net
+SENDER=contact@netig.net

Dockerfile

@@ -0,0 +1,9 @@
+FROM ghcr.io/getzola/zola:v0.19.2 AS zola
+
+COPY ./src /project
+WORKDIR /project
+RUN ["zola", "build"]
+
+FROM ghcr.io/static-web-server/static-web-server:2
+WORKDIR /
+COPY --from=zola /project/public /public

README.md

@@ -0,0 +1 @@
+# netig.net

compose.yml

@@ -0,0 +1,27 @@
+services:
+  post-to-email:
+    image: matthiasmullie/post-to-email
+    container_name: p2enetignet_post-to-email
+    networks:
+      - mailserver
+    env_file:
+      - .env
+      - ../passwords/p2enetignet.pass
+    ports:
+      - "127.0.0.1:9007:80"
+    healthcheck:
+      test: 'curl --fail http://localhost:80/?SENDER=test@example.com'
+      interval: 1m
+      timeout: 10s
+      retries: 3
+      start_period: 20s
+    restart: unless-stopped
+  zola:
+    build: .
+    container_name: netignet_zola
+    ports:
+      - "127.0.0.1:8000:80"
+    restart: unless-stopped
+networks:
+  mailserver:
+    external: true

src/config.toml

@@ -0,0 +1,16 @@
+# The URL the site will be built for
+base_url = "https://netig.net"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = false
+
+[extra]
+# Put all your custom variables here

src/content/contact.md

@@ -0,0 +1,4 @@
++++
+title = "Contact"
+template = "contact.html"
++++

src/content/legal.md

@@ -0,0 +1,47 @@
++++
+title = "Mention légales"
+template = "page.html"
++++
+
+NETig<br>Julien Debrousse<br>Siren : 799 900 907
+
+### Contact
+Il est possible de prendre contact par courriel à : <a href="mailto:contact@netig.net">contact@netig.net</a>.
+        
+### Hébergement des données
+Toutes les données collectées dans le cadre de la mise à disposition des services sont conservées exclusivement sur des serveurs gérés par moi chez HostUp en Suède et Hetzner en Allemagne.
+
+## Conditions Générales d’Utilisation
+### Disponibilité
+Malgré les efforts faits pour assurer la meilleure disponibilité possible, un accès permanent aux services n’est pas garanti. Vous pouvez consulter l’état des services en temps réel depuis un <a href="https://status.netig.net/status/services" target="_blank">outil de surveillance</a> mis à disposition. Vous pouvez aussi vous inscrire à la <a href="https://list.netig.net/subscription/form" target="_blank">liste de diffusion de maintenance</a>, afin d’être informé des interruptions de service.
+
+### Données personnelles
+#### Responsabilité
+Vous êtes responsables des contenus diffusés et êtes tenus de respecter la législation en vigueur. Le non respect des conditions d’utilisation ou des lois en vigueur peut entraîner une suppression de vos données et comptes.
+
+#### Confidentialité
+Les données confiées ne seront en aucun cas divulguées ou utilisée dans un but autre que de fournir les services liés.
+
+#### Conservation
+Les données personnelles sont conservées pour la durée de provision des services. Elles peuvent persister dans les sauvegardes quelques semaines après la clôture des services.
+
+#### Récupération
+Vous pouvez à tout moment récupérer vos données personnelles, soit à l’aide d’une fonctionnalité intégrée à un service ou bien sur demande.
+
+#### Suppression
+Vous pouvez à tout moment supprimer vos données personnelles, soit à l’aide d’une fonctionnalité intégrée à un service ou bien sur demande écrite.
+
+### Services en libre accès
+Ces services sont accessibles à tous afin de proposer une alternative aux produits des GAFAM ou « Géants du web », respectueuse des données de chacun. Les ressources matérielles ne sont pas sans limites donc utilisez les avec bon sens, en cas d’abus et après un premier avertissement votre adresse IP pourra être bannie.
+
+### Hébergement et services
+#### Souscription
+Vous pouvez souscrire à tout moment à une offre pour une durée minimale d’un mois en prenant contact à : <a href="mailto:contact@netig.net">contact@netig.net</a>.
+
+#### Paiement
+Les paiements s’effectuent par virement bancaire. Les hébergements sont facturés mensuellement un mois après la mise à disposition du service.
+
+#### Suspension et Résiliation
+Toute facture impayée de plus de deux mois pourra entraîner une suspension du service concerné. Toute facture impayée de plus de six mois pourra entraîner une suppression définitive des données.
+Si vous souhaitez résilier un service en cours avant échéance, aucun remboursement ne sera fait mais à votre demande le service pourra être désactivé et les données supprimées.
+

src/content/maintenance.md

@@ -0,0 +1,4 @@
++++
+title = "Maintenance et incidents"
+template = "maintenance.html"
++++

src/content/success.md

@@ -0,0 +1,4 @@
++++
+title = "Success"
+template = "success.html"
++++

src/sass/css/style.scss

@@ -0,0 +1,565 @@
+/* Fonts
+	------------------------------------------------------------------------ */
+@font-face {
+    font-family: 'TitilliumWeb';
+    src: url('/fonts/TitilliumWeb-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'TitilliumWeb';
+    src: url('/fonts/TitilliumWeb-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Reset
+    ------------------------------------------------------------------------ */
+body {
+    margin: 0px;
+}
+
+/* Variables
+    ------------------------------------------------------------------------ */
+
+$color__primary: #00c8be;
+$color__secondary: rgb(15 25 50/var(--tw-bg-opacity, 1));
+$color__ternary: rgb(30 40 85/var(--tw-bg-opacity, 1));
+$color__neutral: #010101;
+$color__white: #fff;
+$cover__home: url(/images/background.webp);
+
+/* Layout
+    ------------------------------------------------------------------------ */
+body,
+html {
+    font-family: TitilliumWeb, sans-serif;
+    font-size: 1.2rem;
+    color: $color__white;
+    scroll-behavior: smooth;
+}
+
+main {
+    min-height: calc(100vh - 142.4px);
+}
+
+article {
+    padding-bottom: 100px;
+}
+
+.anchor {
+    height: 40px;
+}
+
+
+.content {
+    padding: 20px;
+}
+
+/* Lists
+    ------------------------------------------------------------------------ */
+
+li {
+    color: $color__white;
+}
+
+/* Background
+    ------------------------------------------------------------------------ */
+
+body {
+    background: $color__secondary;
+}
+
+/* Links
+    ------------------------------------------------------------------------ */
+
+a {
+    color: $color__primary;
+    text-decoration: none;
+
+    &:hover {
+        color: $color__primary;
+    }
+}
+
+/* Titles
+    ------------------------------------------------------------------------ */
+h1,
+h2,
+h3,
+h4 {
+    font-family: 'TitilliumWeb', sans-serif;
+    font-weight: bold;
+    text-align: left;
+    color: $color__white;
+}
+
+h1 {
+    font-size: 2.8rem;
+    line-height: 2.8rem;
+}
+
+h2 {
+    font-size: 2.6rem;
+    line-height: 2.6rem;
+    margin-bottom: 100px;
+}
+
+h3 {
+    font-size: 2rem;
+    line-height: 2rem;
+}
+
+h4 {
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+}
+
+/* Animations
+    ------------------------------------------------------------------------ */
+
+.from-left {
+    position: relative;
+    animation-name: from-left;
+    animation-duration: 1s;
+}
+
+@keyframes from-left {
+    0% {
+        left: -500px;
+    }
+
+    100% {
+        left: 0;
+    }
+}
+
+.from-right {
+    position: relative;
+    animation-name: from-right;
+    animation-duration: 1s;
+}
+
+@keyframes from-right {
+    0% {
+        right: -500px;
+    }
+
+    100% {
+        right: 0;
+    }
+}
+
+/* Topnav
+    ------------------------------------------------------------------------ */
+
+.topbar {
+    text-align: left;
+    background: $color__ternary;
+    padding-left: 20px;
+
+    a {
+        padding: 20px;
+    }
+}
+
+/* Sidenav
+    ------------------------------------------------------------------------ */
+.menu_icon_sidenav {
+    z-index: 2;
+    width: fit-content;
+    height: auto;
+    background-color: #FC970B;
+    padding: 10px;
+    margin: 10px;
+    cursor: pointer;
+    position: fixed;
+    top: 0;
+    right: 0;
+    box-shadow: 0 0 10px $color__neutral;
+    border-radius: 100%;
+}
+
+.line1,
+.line2,
+.line3 {
+    width: 40px;
+    height: 4px;
+    margin: 10px 8px;
+    background-color: $color__white;
+    border-radius: 50px;
+    transition: 0.2s;
+}
+
+.active {
+    .line1 {
+        transform: translate(0px, 15px) rotate(45deg);
+    }
+
+    .line2 {
+        opacity: 0;
+    }
+
+    .line3 {
+        transform: translate(0px, -15px) rotate(-45deg);
+    }
+}
+
+.sidenav {
+    width: fit-content;
+    background-color: $color__neutral;
+    position: fixed;
+    text-align: center;
+    z-index: 1;
+    right: -500px;
+    pointer-events: none;
+    transition: 0.3s;
+    top: 0;
+    box-shadow: 0 0 10px $color__neutral;
+    overflow: scroll;
+
+    nav {
+        padding-top: 80px;
+        margin-right: 40px;
+
+        ul li {
+            list-style: none;
+            margin-bottom: 20px;
+            transition: 0.2s;
+
+            &:hover {
+                background-color: $color__secondary;
+                border-radius: 50px;
+            }
+
+            a {
+                font-size: 1.2rem;
+                padding: 10px 30px;
+                display: block;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.active_sidenav {
+    right: 0px;
+    pointer-events: fill;
+    position: fixed;
+    top: 0;
+    height: 100vh;
+    max-width: 100%;
+}
+
+
+/* Gaps
+    ------------------------------------------------------------------------ */
+
+.gap__20 {
+    height: 20px;
+}
+
+.gap__40 {
+    height: 40px;
+}
+
+.gap__80 {
+    height: 80px;
+}
+
+/* Boxes
+    ------------------------------------------------------------------------ */
+
+.box {
+    display: flex;
+    margin-top: 80px;
+    padding: 20px;
+    padding-bottom: 40px;
+    border: 2px solid $color__white;
+    box-shadow: 0 0 5px rgba(255, 255, 255, .2), 0 4px 4px rgba(0, 0, 0, .08);
+    flex-direction: column;
+    justify-content: space-between;
+
+    img {
+        max-width: 96px;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+    }
+
+    &__title {
+        width: fit-content;
+        padding: 10px;
+        margin-top: 0;
+        margin-bottom: 0;
+        background: $color__secondary;
+        border: 0px solid $color__white;
+        translate: 0px -55px;
+        text-align: left;
+    }
+
+    &__link {
+        text-align: center;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+            &:hover {
+                transform: scale(1.1);
+                transition: all .2s;
+            }
+        }
+    }
+}
+
+/* Logo
+    ------------------------------------------------------------------------ */
+
+.logo {
+    img {
+        width: 100%;
+        max-width: 500px;
+
+        @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+            &:hover {
+                transform: scale(1.02);
+                transition: all .4s;
+            }
+        }
+    }
+}
+
+/* Header
+    ------------------------------------------------------------------------ */
+
+header {
+    position: relative;
+    color: $color__white;
+    text-align: left;
+
+    p {
+        font-size: 1.6rem;
+    }
+}
+
+header::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: $color__ternary;
+    z-index: -1;
+}
+
+
+
+header {
+    h1 {
+        text-align: left;
+        font-size: 4rem;
+    }
+}
+
+/* Services
+    ------------------------------------------------------------------------ */
+
+.article-services {
+    position: relative;
+    color: $color__white;
+    text-align: center;
+}
+
+.article-services::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background: $color__secondary;
+    z-index: -1;
+}
+
+/* Footer
+    ------------------------------------------------------------------------ */
+
+footer {
+    background-color: $color__neutral;
+    padding: 40px;
+    box-shadow: 0 0 20px $color__neutral;
+}
+
+.botbar {
+    width: 100%;
+    display: flex;
+    font-size: 1rem;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-align: center;
+    color: $color__white;
+
+    p {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+/* About article
+    ------------------------------------------------------------------------ */
+
+.article-about {
+    position: relative;
+    color: $color__white;
+    text-align: center;
+
+    ::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        background: rgb(5 100 115/var(--tw-bg-opacity, 1));
+        z-index: -1;
+    }
+
+    h3 {
+        text-align: center;
+    }
+}
+
+/* hosting article
+    ------------------------------------------------------------------------ */
+
+.article-hosting {
+    position: relative;
+    color: $color__white;
+    text-align: left;
+
+    ::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        background: $color__secondary;
+        z-index: -1;
+    }
+}
+
+/* Contact
+    ------------------------------------------------------------------------ */
+
+.contact-form {
+    margin-right: 20px;
+    font-size: 0.8rem;
+    font-weight: bold;
+
+    input,
+    select,
+    textarea {
+        width: 100%;
+        font-size: 1rem;
+        padding: 10px;
+        border: 0;
+        flex: 1 1 auto;
+        margin: 10px 0;
+    }
+
+    &>* {
+        display: flex;
+        font-family: TitilliumWeb, sans-serif;
+    }
+
+    textarea {
+        min-height: 150px;
+        max-width: 100%;
+        box-shadow: 0 0 10px $color__neutral;
+    }
+}
+
+input:focus,
+textarea:focus {
+    outline: none;
+}
+
+.submit {
+    width: calc(100% + 22px) !important;
+    color: $color__white;
+    background-color: $color__primary;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+svg {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    height: 64px;
+    width: auto;
+}
+
+/* Success
+    ------------------------------------------------------------------------ */
+
+.success {
+    padding: 20px;
+    background-color: #185833;
+}
+
+
+/* Responsive 1080px
+    ------------------------------------------------------------------------ */
+
+@media screen and (min-width: 1080px) and (max-resolution: 1x) {
+    .col--1-1 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr;
+        align-items: normal;
+    }
+
+    .col--1-2 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 2fr;
+        align-items: normal;
+    }
+
+    .col--1-1-1 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr 1fr;
+        align-items: normal;
+    }
+
+    .col--1-1-2 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 1fr 2fr;
+        align-items: normal;
+    }
+
+}
+
+/* Responsive 1200px
+    ------------------------------------------------------------------------ */
+
+@media screen and (min-width: 1200px) and (max-resolution: 1x) {
+    .content {
+        width: 1200px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

src/static/images/calc.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fff" width="800px" height="800px" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.75 0c-.41 0-.75.34-.75.75v5.5c0 .41.34.75.75.75h6.5c.41 0 .75-.34.75-.75v-5.5c0-.41-.34-.75-.75-.75h-6.5zm.25 1h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1z"/>
+</svg>

src/static/images/cloud.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/static/images/clouds.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M5.38846 12.7023C3.98522 12.1237 3 10.7636 3 9.17807C3 7.42863 4.3 5.8125 6.25 5.5C6.86168 4.0617 8.30934 3 9.9978 3C12.1607 3 13.9285 4.65893 14.05 6.75C14.8721 7.10549 15.5169 7.83126 15.8166 8.69914M5.38846 12.7023C4.50928 13.5938 4 14.7867 4 16.0315C4 18.7755 6.28335 21 9.1 21L16.75 21C19.0972 21 21 19.1279 21 16.8185C21 15.1039 19.951 13.5202 18.45 12.875C18.3457 11.0905 17.3135 9.5483 15.8166 8.69914M5.38846 12.7023C6.11557 11.9651 7.0957 11.4339 8.25 11.25C9.04989 9.3802 10.943 8 13.151 8C14.1227 8 15.0333 8.25474 15.8166 8.69914" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

src/static/images/drop.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21V11M12 11L9 14M12 11L15 14M7 16.8184C4.69636 16.2074 3 14.1246 3 11.6493C3 9.20008 4.8 6.9375 7.5 6.5C8.34694 4.48637 10.3514 3 12.6893 3C15.684 3 18.1317 5.32251 18.3 8.25C19.8893 8.94488 21 10.6503 21 12.4969C21 14.8148 19.25 16.7236 17 16.9725" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/static/images/git.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 3.82843C12.6332 3.04738 11.3668 3.04738 10.5858 3.82843L9.91421 4.5L11.482 6.06774C11.6472 6.02356 11.8208 6 12 6C13.1046 6 14 6.89543 14 8C14 8.17916 13.9764 8.35282 13.9323 8.51804L15.982 10.5677C16.1472 10.5236 16.3208 10.5 16.5 10.5C17.6046 10.5 18.5 11.3954 18.5 12.5C18.5 13.6046 17.6046 14.5 16.5 14.5C15.3954 14.5 14.5 13.6046 14.5 12.5C14.5 12.3208 14.5236 12.1472 14.5677 11.982L13 10.4142V15.2676C13.5978 15.6134 14 16.2597 14 17C14 18.1046 13.1046 19 12 19C10.8954 19 10 18.1046 10 17C10 16.2597 10.4022 15.6134 11 15.2676V9.73244C10.4022 9.38663 10 8.74028 10 8C10 7.82084 10.0236 7.64718 10.0677 7.48196L8.5 5.91421L3.82843 10.5858C3.04738 11.3668 3.04738 12.6332 3.82843 13.4142L10.5858 20.1716C11.3668 20.9526 12.6332 20.9526 13.4142 20.1716L20.1716 13.4142C20.9526 12.6332 20.9526 11.3668 20.1716 10.5858L13.4142 3.82843ZM9.17157 2.41421C10.7337 0.852115 13.2663 0.852119 14.8284 2.41422L21.5858 9.17157C23.1479 10.7337 23.1479 13.2663 21.5858 14.8284L14.8284 21.5858C13.2663 23.1479 10.7337 23.1479 9.17157 21.5858L2.41421 14.8284C0.852115 13.2663 0.852119 10.7337 2.41422 9.17157L9.17157 2.41421Z" fill="#fff"/>
+</svg>

src/static/images/list.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" width="800px" height="800px" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st1{fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style> <polyline class="st0" points="2,16 12,22 22,16 "/> <path class="st0" d="M18,11H6c-2.2,0-4,1.8-4,4v10c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V15C22,12.8,20.2,11,18,11z"/> <line class="st0" x1="21.5" y1="13.1" x2="30" y2="8"/> <path class="st0" d="M22,21h4c2.2,0,4-1.8,4-4V7c0-2.2-1.8-4-4-4H14c-2.2,0-4,1.8-4,4v4"/> </g>
+
</svg>

src/static/images/mail.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 8L17.4392 9.97822C15.454 11.0811 14.4614 11.6326 13.4102 11.8488C12.4798 12.0401 11.5202 12.0401 10.5898 11.8488C9.53864 11.6326 8.54603 11.0811 6.5608 9.97822L3 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/static/images/other.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title/> <g> <path d="M48,0A24.0275,24.0275,0,0,0,24,24a6,6,0,0,0,12,0,12,12,0,0,1,24,0c0,5.2031-3.0586,8.3965-8.0859,13.0371C47.2617,41.32,42,46.1719,42,54a6,6,0,0,0,12,0c0-2.4434,2.2969-4.6875,6.0469-8.1445C65.0859,41.2031,72,34.834,72,24A24.0275,24.0275,0,0,0,48,0Z"/> <path d="M48,72A12,12,0,1,0,60,84,12.0119,12.0119,0,0,0,48,72Z"/> </g> </g>
+
</svg>

src/static/images/pad.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#fff" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M27,3H5A1,1,0,0,0,5,5H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,7H5A1,1,0,0,0,5,9H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,11H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,15H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,19H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,23H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+    <path d="M27,27H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
+</svg>

src/static/js/sidenav.js

@@ -0,0 +1,14 @@
+let menu_icon_sidenav = document.querySelector(".menu_icon_sidenav");
+let sidenav = document.querySelector(".sidenav");
+
+menu_icon_sidenav.onclick = function () {
+    menu_icon_sidenav.classList.toggle("active");
+    sidenav.classList.toggle("active_sidenav");
+}
+
+document.onclick = function (e) {
+    if (!menu_icon_sidenav.contains(e.target) && !sidenav.contains(e.target)) {
+        menu_icon_sidenav.classList.remove("active");
+        sidenav.classList.remove("active_sidenav");
+    }
+}

src/templates/base.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="index, follow">
+    <title>NETig</title>
+    <meta name="description"
+        content="Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos données aux GAFAM ? Vous êtes au bon endroit !">
+    <link rel="canonical" href="https://netig.net/">
+    <link rel="icon" type="image/x-icon" href="{{ get_url(path="images/favicon.webp") }}">
+    <link rel="stylesheet" href="{{ get_url(path="css/style.css") }}">
+</head>
+
+<body>
+    <header class="">
+        <div class="topbar">
+            <a class="" href="https://webmail.netig.net" target="_blank">NETmail</a>
+            <a class="" href="https://cloud.netig.net" target="_blank">NETcloud</a>
+            <a class="" href="https://git.netig.net" target="_blank">NETgit</a>
+
+        </div>
+        <div class="menu_icon_sidenav">
+            <div class="line1"></div>
+            <div class="line2"></div>
+            <div class="line3"></div>
+        </div>
+        <div class="sidenav">
+            <nav>
+                <ul>
+                    <li><a href="/#">Accueil</a></li>
+                    <li><a href="/#services">Services</a></li>
+                    <li><a href="/#about">À propos</a></li>
+                    <li><a href="/#hosting">Hébergement</a></li>
+                    <li><a href="/maintenance">Maintenance et incidents</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+        <div class="content col--1-2">
+            <div>
+                <a class="logo" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}"
+                        alt="Logo"></a>
+            </div>
+            <div>
+                <a href="/#"><h1>NETig</h1></a>
+                <p><strong>Vous cherchez des services en ligne mais vous ne souhaitez pas confier vos
+                        données aux GAFAM ? Vous êtes au bon endroit !</strong></p>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div>
+            {% block content %} {% endblock %}
+        </div>
+    </main>
+    <footer>
+        <div class="botbar">
+            <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title"
+                    rel="cc:attributionURL" href="https://netig.net">NETig website</a> by <span
+                    property="cc:attributionName">Julien Debrousse</span> is licensed under <a
+                    href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank"
+                    rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img
+                        style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                        src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
+                        style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                        src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""></a></p>
+            <p>
+                <a href="/legal">Mentions Légales</a>
+            </p>
+            <p>
+                Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
+            </p>
+        </div>
+        <script src="{{ get_url(path="js/sidenav.js") }}"></script>
+    </footer>
+</body>
+
+</html>

src/templates/contact.html

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    <article class="article-contact">
+        <div class="col--1-1">
+            <div>
+                <p>Vous avez un projet en tête ? Un service vous intéresse ? Ou simplement une question ? Ce formulaire
+                    est
+                    là pour ça !</p>
+            </div>
+            <form action="https://p2e.netig.net/" method="post" class="contact-form">
+                <input type="hidden" name="REDIRECT" value="https://netig.net/success" />
+                <input type="email" name="REPLY_TO" placeholder="Email" class="contact-form-input" required>
+                <input type="hidden" name="Source" value="Formulaire de contact" />
+                <input type="text" name="Nom" maxlength="128" placeholder="Nom" class="contact-form-input" required>
+                <input type="text" name="SUBJECT" maxlength="256" placeholder="Objet" class="contact-form-input"
+                    required>
+                <textarea name="Message" cols="40" rows="10" placeholder="Message" class="contact-form-input"
+                    required></textarea>
+                <input type="submit" value="Envoyer" class="submit">
+            </form>
+        </div>
+    </article>
+</div>
+{% endblock content %}

src/templates/index.html

@@ -0,0 +1,176 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<article class="article-services">
+    <div class="anchor" id="services"></div>
+    <div class="content">
+        <h2>Services en libre accès</h2>
+        <div class="col--1-1-1">
+            <a class="box box__link" href="https://calc.netig.net" target="_blank">
+                <h3 class="box__title">NETcalc</h3>
+                <p>Tableur en ligne collaboratif, similaire à Framacalc.</p>
+            </a>
+            <a class="box box__link" href="https://pad.netig.net" target="_blank">
+                <h3 class="box__title">NETpad</h3>
+                <p>Éditeur de texte en ligne collaboratif, similaire à Framapad.</p>
+            </a>
+            <a class="box box__link" href="https://drop.netig.net" target="_blank">
+                <h3 class="box__title">NETdrop</h3>
+                <p>Partage de fichiers jusqu'à 1Go, similaire à Framadrop.</p>
+            </a>
+        </div>
+    </div>
+</article>
+
+<article class="article-about">
+    <div class="anchor" id="about"></div>
+    <div class="content col--1-1-1">
+        <div>
+            <h3>Quoi ?</h3>
+            <p>Tous les outils numérique dont vous pouriez avoir besoin en tant que particulier, association ou petite
+                entreprise : des boîtes mail, du stockage en ligne, des outils de travail collaboratif, un service de
+                partage de fichiers volumineux, une forge logicielle, des listes de diffusion... et plus encore !
+            </p>
+        </div>
+        <div>
+            <h3>Comment ?</h3>
+            <p>L'ensemble des services sont fournis depuis un VPS chez <a href="https://hostup.se/en/"
+                    target="_blank">HostUp</a> en Suède et conteneurisés, c'est à dire isolés les uns des autres
+                pour améliorer la sécurité, la reproductibilité et l'automatisation. Le stockage est redondant sur deux
+                disques en cas de défaillance matérielle. Les données sont sauvegardées automatiquement une fois par
+                semaine et stockées sur le serveur ainsi qu'en Allemagne chez <a href="https://www.hetzner.com/"
+                    target="_blank">Hetzner</a>. Utilisation exclusive de logiciels sous licences libres.</p>
+        </div>
+        <div>
+            <h3>Pourquoi ?</h3>
+            <p>Je suis un petit hébergeur, en utilisant mes services vous gardez le contrôle sur vos données et
+                participez à un internet libre et décentralisé. Ici vos données ne seront en aucun cas marchandées ni
+                utilisées à toute autre fin que de fournir le service demandé. Je participe également à ma mesure à la
+                distribution Linux utilisée en mettant à disposition <a href="https://chimera.netig.net/"
+                    target="_blank">un mirroir</a>.</p>
+        </div>
+    </div>
+</article>
+
+<article class="article-hosting">
+    <div class="anchor" id="hosting"></div>
+    <div class="content">
+        <h2>Offres d'hébergement</h2>
+        <p>Si un service vous intéresse <a class="link" href="/contact">contactez-moi</a>, vous
+            avez un mois d'essai à compter de la mise à disposition avant le premier paiement.</p>
+        <div>
+            <div class="box">
+                <h3 class="box__title">NETmail - Adresse mail</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/mail.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>2€/mois 5Go</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Adresse mail en @netig.net ou votre nom de domaine (12€ de frais de mise en place
+                            supplémentaire), consultable depuis un webmail ou depuis votre client mail habituel.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETcloud - Compte Nextcloud</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/cloud.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>1€/mois 1Go</li>
+                            <li>2€/mois 5Go</li>
+                            <li>2€/mois + 5Go</li>
+                            <li>2€/mois option Collabora</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Un compte Nextcloud pour stocker vos fichiers, photos, et agendas en ligne. Suite bureautique
+                            complète en option avec Collabora.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETcloud - Instance Nextcloud</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/clouds.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>20€/mois 5Go</li>
+                            <li>2€/mois + 5Go</li>
+                            <li>8€/mois option Collabora</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Votre propre instance Nextcloud privée pour plusieurs comptes.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETgit - Compte Gitea</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/git.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>2€/mois</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Forge logicielle.</p>
+                    </div>
+                </div>
+
+            </div>
+            <div class="box">
+                <h3 class="box__title">NETlist - Instance Listmonk</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/list.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>8€/mois</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Listes de diffusion avec page d'inscription et d'archives publiques. Pas de limite sur le
+                            nombre d’abonnés ni sur le nombre de listes. Possibilité d’utiliser une ou plusieurs
+                            adresses mail d’expédition @netig.net ou tout autre fournisseur. Conforme RGPD.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <h3 class="box__title">Autre</h3>
+                <div class="col--1-1-2">
+                    <div>
+                        <img src="{{ get_url(path="images/other.svg") }}" alt="">
+                    </div>
+                    <div>
+                        <ul>
+                            <li>Sur devis</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <p>Vous avez autre chose en tête ? Un site ou une application web à héberger ? <a class="link"
+                                href="/contact">Demandez-moi</a> !
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+
+{% endblock content %}

src/templates/maintenance.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    <article class="article-report">
+        <p>Information : Brève interruption de l'ensemble des services tous les lundi matins à 4h pour sauvegarde.
+        </p>
+        <div class="col--1-1-1">
+            <a class="box box__link" href="https://status.netig.net/status/services" target="_blank">État des
+                services
+                en
+                temps réel</a>
+            <a class="box box__link" href="https://list.netig.net/archive" target="_blank">Maintenances et
+                incidents
+                signalés</a>
+            <a class="box box__link" href="https://list.netig.net/subscription/form" target="_blank">Recevoir
+                les
+                notifications par mail</a>
+        </div>
+    </article>
+</div>
+{% endblock content %}

src/templates/page.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <h2>{{ page.title }}</h2>
+    {{ page.content | safe }}
+</div>
+{% endblock content %}

src/templates/success.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="content">
+    <p class="success">Message envoyé, retourner à la <a href="/#">page d'accueil</a> !</p>
+    
+</div>
+{% endblock content %}