aboutsummaryrefslogtreecommitdiffstats
path: root/htdocs
diff options
context:
space:
mode:
Diffstat (limited to 'htdocs')
-rw-r--r--htdocs/index.html9
-rw-r--r--htdocs/legal-notice.html90
-rw-r--r--htdocs/license.html93
-rw-r--r--htdocs/mentions-legales.html90
-rw-r--r--htdocs/src/js/app.js15
-rw-r--r--htdocs/src/js/i18n/locales/en.js4
-rw-r--r--htdocs/src/js/i18n/locales/fr.js4
-rw-r--r--htdocs/src/scss/layout/_footer.scss18
-rw-r--r--htdocs/src/scss/layout/_main.scss15
-rw-r--r--htdocs/src/scss/layout/_nav.scss4
10 files changed, 337 insertions, 5 deletions
diff --git a/htdocs/index.html b/htdocs/index.html
index a2e1c02..d2fe5fc 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -54,6 +54,15 @@
</noscript>
</main>
<footer class="footer">
+ <nav class="nav nav--footer">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a href="legal-notice.html" class="nav__link nav__link--legal">
+ Legal notice
+ </a>
+ </li>
+ </ul>
+ </nav>
<div class="copyright">
<span class="copyright__license" title="License MIT">MIT</span>
<span class="copyright__date">2021.</span>
diff --git a/htdocs/legal-notice.html b/htdocs/legal-notice.html
new file mode 100644
index 0000000..14e807c
--- /dev/null
+++ b/htdocs/legal-notice.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Armand Philippot</title>
+ <link rel="stylesheet" href="assets/css/style.css" />
+ </head>
+
+ <body class="body">
+ <div class="toolbar">
+ <button type="button" class="toolbar__options btn btn--menu">Menu</button>
+ <button type="button" class="toolbar__options btn btn--details">
+ About app
+ </button>
+ </div>
+ <header class="header">
+ <div class="branding">
+ <div class="branding__logo logo">
+ <a href="/" rel="home" class="logo__link">
+ <img
+ src="./assets/images/armand-philippot.jpg"
+ alt="Back to homepage"
+ class="logo__image logo__image--front"
+ />
+ <img
+ src="./assets/images/armand-philippot-logo.svg"
+ alt="Back to homepage"
+ class="logo__image logo__image--back"
+ />
+ </a>
+ </div>
+ <h1 class="branding__title">
+ <a href="/" rel="home" class="branding__link">Armand Philippot</a>
+ </h1>
+ <p class="branding__description">Front-end developer</p>
+ </div>
+ <nav class="nav">
+ <p class="nav__label">App list:</p>
+ <ul class="nav__list"></ul>
+ </nav>
+ </header>
+ <main class="main">
+ <div class="legal-notice">
+ <h2>Legal notice</h2>
+ <p>
+ The website demo.armandphilippot.com is the property of Armand
+ Philippot.
+ </p>
+ <h3>Publisher</h3>
+ <p>
+ Armand Philippot <br />France <br />Email: contact@armandphilippot.com
+ </p>
+ <p>Publication Director: Armand Philippot</p>
+ <h3>Web hosting</h3>
+ <p>
+ GANDI SAS <br />63-65 boulevard Massena <br />75013 Paris <br />FRANCE
+ </p>
+ <p>Phone: +331 70 37 76 61</p>
+ <h3>Intellectual property</h3>
+ <p>
+ The contents of the site, with the exception of those not belonging to
+ Armand Philippot, are made available under the terms of the
+ <a href="license.html">MIT license</a>.
+ </p>
+ </div>
+ </main>
+ <footer class="footer">
+ <nav class="nav nav--footer">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a href="legal-notice.html" class="nav__link nav__link--legal">
+ Legal notice
+ </a>
+ </li>
+ </ul>
+ </nav>
+ <div class="copyright">
+ <span class="copyright__license" title="License MIT">MIT</span>
+ <span class="copyright__date">2021.</span>
+ <a href="https://www.armandphilippot.com/" class="copyright__author"
+ >Armand Philippot.</a
+ >
+ </div>
+ </footer>
+ <script src="./assets/js/runtime.js"></script>
+ <script src="./assets/js/app.js"></script>
+ </body>
+</html>
diff --git a/htdocs/license.html b/htdocs/license.html
new file mode 100644
index 0000000..593d57b
--- /dev/null
+++ b/htdocs/license.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Armand Philippot</title>
+ <link rel="stylesheet" href="assets/css/style.css" />
+ </head>
+
+ <body class="body">
+ <div class="toolbar">
+ <button type="button" class="toolbar__options btn btn--menu">Menu</button>
+ <button type="button" class="toolbar__options btn btn--details">
+ About app
+ </button>
+ </div>
+ <header class="header">
+ <div class="branding">
+ <div class="branding__logo logo">
+ <a href="/" rel="home" class="logo__link">
+ <img
+ src="./assets/images/armand-philippot.jpg"
+ alt="Back to homepage"
+ class="logo__image logo__image--front"
+ />
+ <img
+ src="./assets/images/armand-philippot-logo.svg"
+ alt="Back to homepage"
+ class="logo__image logo__image--back"
+ />
+ </a>
+ </div>
+ <h1 class="branding__title">
+ <a href="/" rel="home" class="branding__link">Armand Philippot</a>
+ </h1>
+ <p class="branding__description">Front-end developer</p>
+ </div>
+ <nav class="nav">
+ <p class="nav__label">App list:</p>
+ <ul class="nav__list"></ul>
+ </nav>
+ </header>
+ <main class="main">
+ <div class="legal-notice">
+ <h2>MIT License</h2>
+ <p>Copyright (c) 2021 Armand Philippot</p>
+ <p>
+ Permission is hereby granted, free of charge, to any person obtaining
+ a copy of this software and associated documentation files (the
+ "Software"), to deal in the Software without restriction, including
+ without limitation the rights to use, copy, modify, merge, publish,
+ distribute, sublicense, and/or sell copies of the Software, and to
+ permit persons to whom the Software is furnished to do so, subject to
+ the following conditions:
+ </p>
+ <p>
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+ </p>
+ <p>
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ </p>
+ </div>
+ </main>
+ <footer class="footer">
+ <nav class="nav nav--footer">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a href="legal-notice.html" class="nav__link nav__link--legal">
+ Legal notice
+ </a>
+ </li>
+ </ul>
+ </nav>
+ <div class="copyright">
+ <span class="copyright__license" title="License MIT">MIT</span>
+ <span class="copyright__date">2021.</span>
+ <a href="https://www.armandphilippot.com/" class="copyright__author"
+ >Armand Philippot.</a
+ >
+ </div>
+ </footer>
+ <script src="./assets/js/runtime.js"></script>
+ <script src="./assets/js/app.js"></script>
+ </body>
+</html>
diff --git a/htdocs/mentions-legales.html b/htdocs/mentions-legales.html
new file mode 100644
index 0000000..523b850
--- /dev/null
+++ b/htdocs/mentions-legales.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Armand Philippot</title>
+ <link rel="stylesheet" href="assets/css/style.css" />
+ </head>
+
+ <body class="body">
+ <div class="toolbar">
+ <button type="button" class="toolbar__options btn btn--menu">Menu</button>
+ <button type="button" class="toolbar__options btn btn--details">
+ About app
+ </button>
+ </div>
+ <header class="header">
+ <div class="branding">
+ <div class="branding__logo logo">
+ <a href="/" rel="home" class="logo__link">
+ <img
+ src="./assets/images/armand-philippot.jpg"
+ alt="Back to homepage"
+ class="logo__image logo__image--front"
+ />
+ <img
+ src="./assets/images/armand-philippot-logo.svg"
+ alt="Back to homepage"
+ class="logo__image logo__image--back"
+ />
+ </a>
+ </div>
+ <h1 class="branding__title">
+ <a href="/" rel="home" class="branding__link">Armand Philippot</a>
+ </h1>
+ <p class="branding__description">Front-end developer</p>
+ </div>
+ <nav class="nav">
+ <p class="nav__label">App list:</p>
+ <ul class="nav__list"></ul>
+ </nav>
+ </header>
+ <main class="main">
+ <div class="legal-notice">
+ <h2>Mentions légales</h2>
+ <p>
+ Le site demo.armandphilippot.com est la propriété d’Armand Philippot.
+ </p>
+ <h3>Éditeur</h3>
+ <p>
+ Armand Philippot <br />France <br />Email :
+ contact@armandphilippot.com
+ </p>
+ <p>Directeur de la publication : Armand Philippot</p>
+ <h3>Hébergement du site</h3>
+ <p>
+ GANDI SAS <br />63-65 boulevard Massena <br />75013 Paris <br />FRANCE
+ </p>
+ <p>Téléphone : 01 70 37 76 61</p>
+ <h3>Propriété intellectuelle</h3>
+ <p>
+ Les contenus du site, à l’exception de ceux n’appartenant pas à Armand
+ Philippot, sont mis à disposition selon les termes de la
+ <a href="license.html">licence MIT</a>.
+ </p>
+ </div>
+ </main>
+ <footer class="footer">
+ <nav class="nav nav--footer">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a href="legal-notice.html" class="nav__link nav__link--legal">
+ Legal notice
+ </a>
+ </li>
+ </ul>
+ </nav>
+ <div class="copyright">
+ <span class="copyright__license" title="License MIT">MIT</span>
+ <span class="copyright__date">2021.</span>
+ <a href="https://www.armandphilippot.com/" class="copyright__author"
+ >Armand Philippot.</a
+ >
+ </div>
+ </footer>
+ <script src="./assets/js/runtime.js"></script>
+ <script src="./assets/js/app.js"></script>
+ </body>
+</html>
diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index efb4c33..4f5f5a5 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -327,6 +327,18 @@ function printRequestedPage() {
}
}
+/**
+ * Replace the legal notice link and text.
+ */
+function replaceLegalNoticeLink() {
+ const link = document.querySelector('.nav__link--legal');
+ link.href = translate('footer.legalNotice.link');
+ link.textContent = translate('footer.legalNotice.txt');
+}
+
+/**
+ * Translate all text available in HTML templates.
+ */
function translateHTMLContent() {
const brandingDesc = document.querySelector('.branding__description');
const navLabel = document.querySelector('.nav__label');
@@ -335,7 +347,7 @@ function translateHTMLContent() {
brandingDesc.textContent = translate('branding.description');
navLabel.textContent = translate('nav.title');
license.title = translate('footer.license');
- instructions.textContent = translate('main.instructions');
+ if (instructions) instructions.textContent = translate('main.instructions');
}
/**
@@ -357,6 +369,7 @@ function setAppLocale() {
function init() {
setAppLocale();
translateHTMLContent();
+ replaceLegalNoticeLink();
loadWebpackStyles();
printProjectsNav();
updateView();
diff --git a/htdocs/src/js/i18n/locales/en.js b/htdocs/src/js/i18n/locales/en.js
index c21b739..9717528 100644
--- a/htdocs/src/js/i18n/locales/en.js
+++ b/htdocs/src/js/i18n/locales/en.js
@@ -25,6 +25,10 @@ const en = {
},
},
footer: {
+ legalNotice: {
+ txt: 'Legal notice',
+ link: 'legal-notice.html',
+ },
license: 'License MIT',
},
};
diff --git a/htdocs/src/js/i18n/locales/fr.js b/htdocs/src/js/i18n/locales/fr.js
index af1d83c..9c93012 100644
--- a/htdocs/src/js/i18n/locales/fr.js
+++ b/htdocs/src/js/i18n/locales/fr.js
@@ -25,6 +25,10 @@ const fr = {
},
},
footer: {
+ legalNotice: {
+ txt: 'Mentions légales',
+ link: 'mentions-legales.html',
+ },
license: 'Licence MIT',
},
};
diff --git a/htdocs/src/scss/layout/_footer.scss b/htdocs/src/scss/layout/_footer.scss
index b405114..7dce0dc 100644
--- a/htdocs/src/scss/layout/_footer.scss
+++ b/htdocs/src/scss/layout/_footer.scss
@@ -2,8 +2,15 @@
@use "../abstracts/mixins" as mix;
.footer {
+ align-items: center;
background: fun.get-var(color-bg-secondary);
border-top: fun.convert-px(1) solid fun.get-var(color-border-light);
+ display: flex;
+ flex-flow: row wrap;
+ font-family: fun.get-var(font-family-secondary);
+ font-size: fun.get-var(font-size-md);
+ gap: fun.get-var(spacing-3xs);
+ justify-content: center;
padding: fun.get-var(spacing-sm) fun.get-var(spacing-md)
calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-sm)});
@@ -13,14 +20,21 @@
padding: fun.get-var(spacing-sm) fun.get-var(spacing-md);
}
}
+
+ .nav {
+ display: inline-flex;
+ gap: fun.get-var(spacing-3xs);
+
+ &::after {
+ content: "/";
+ }
+ }
}
.copyright {
align-items: center;
display: flex;
flex-flow: row wrap;
- font-family: fun.get-var(font-family-secondary);
- font-size: fun.get-var(font-size-md);
gap: fun.get-var(spacing-3xs);
justify-content: center;
}
diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss
index 8ab842b..33c118e 100644
--- a/htdocs/src/scss/layout/_main.scss
+++ b/htdocs/src/scss/layout/_main.scss
@@ -55,6 +55,21 @@ noscript {
}
}
+.legal-notice {
+ height: 100%;
+ overflow-y: auto;
+ padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)});
+ scrollbar-color: fun.get-var(color-primary-light-opacity)
+ fun.get-var(color-bg-tertiary);
+ width: 100%;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("lg") {
+ grid-column: 1 / -1;
+ }
+ }
+}
+
.project-preview {
background: fun.get-var(color-bg);
flex: 0 1 100%;
diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss
index 33346b5..98e4cb5 100644
--- a/htdocs/src/scss/layout/_nav.scss
+++ b/htdocs/src/scss/layout/_nav.scss
@@ -16,11 +16,11 @@
}
}
- &__item {
+ &:not(&--footer) &__item {
margin: fun.get-var(spacing-2xs) 0;
}
- &__link {
+ &:not(&--footer) &__link {
background-image: linear-gradient(
to left,
#{fun.get-var(color-bg)} 0,
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 13:33:12 +0000