285 lines
19 KiB
HTML
285 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr" data-fr-scheme="system">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="format-detection" content="telephone=no">
|
||
|
||
<meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
|
||
<link rel="apple-touch-icon" href="dsfr/favicon/apple-touch-icon.png"><!-- 180×180 -->
|
||
<link rel="icon" href="dsfr/favicon/favicon.svg" type="image/svg+xml">
|
||
<link rel="shortcut icon" href="dsfr/favicon/favicon.ico" type="image/x-icon"><!-- 32×32 -->
|
||
<link rel="manifest" href="dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials">
|
||
|
||
<link rel="stylesheet" href="dsfr/dsfr.min.css">
|
||
<link rel="stylesheet" href="dsfr/utility/utility.min.css">
|
||
<style>
|
||
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-fi-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class*=" fr-icon-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-fi-"], .fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class^="fr-btns-group--icon-"]):not([class*=" fr-btns-group--icon-"]) .fr-btn[class^="fr-icon-"] {
|
||
max-width: inherit;
|
||
}
|
||
|
||
.fr-display-button {
|
||
position: fixed;
|
||
bottom: 3.5rem;
|
||
right: 2rem;
|
||
}
|
||
</style>
|
||
|
||
<title>G.R.O.S.C.O.N.</title>
|
||
</head>
|
||
<body>
|
||
<script type="module">
|
||
const e="system",t="dark",c="dark",o="data-fr-theme",a="data-fr-scheme",r=`:root[${o}], :root[${a}]`,m=()=>{document.documentElement.setAttribute(o,c),document.documentElement.style.colorScheme="dark"},n=()=>{window.matchMedia("(prefers-color-scheme: dark)").matches&&m()};(()=>{if(document.documentElement.matches(r)){const c=(()=>{try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}})()?localStorage.getItem("scheme"):"",o=document.documentElement.getAttribute(a);switch(!0){case c===t:m();break;case c===e:n();break;case o===t:m();break;case o===e:n()}}})();
|
||
</script>
|
||
|
||
<div class="fr-mb-12w">
|
||
<div class="fr-mb-6v">
|
||
<header role="banner" class="fr-header">
|
||
<div class="fr-header__body">
|
||
<div class="fr-container">
|
||
<div class="fr-header__body-row">
|
||
<div class="fr-header__brand fr-enlarge-link">
|
||
<div class="fr-header__brand-top">
|
||
<div class="fr-header__logo">
|
||
<p class="fr-logo">
|
||
Ministère<br>
|
||
des démarches<br/>
|
||
ridicules
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="fr-header__service">
|
||
<a href="#" title="G.R.O.S.C.O.N. - Ministère des démarches ridicules">
|
||
<p class="fr-header__service-title">
|
||
Générateur Rationnel d'Organisations Spécifiques,<br/>
|
||
Complexes, Opériationelles ou Nationales
|
||
</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
</div>
|
||
|
||
<main role="main" id="content">
|
||
<div class="fr-container fr-mt-8v fr-mt-md-14v fr-mb-2v fr-mb-md-8v">
|
||
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
|
||
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
|
||
<p class="fr-text--lead">Cette application est à destination des Décideurs qui, dans le cadre d'une nouvelle réorganisation, souhaitent trouver le nom d'une entité à partir d'un sigle.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fr-container fr-container--fluid fr-mb-md-14v">
|
||
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
|
||
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
|
||
<div class="fr-container fr-background-alt--grey fr-px-md-0 fr-pt-10v fr-pt-md-14v fr-pb-6v fr-pb-md-10v">
|
||
<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
|
||
<div class="fr-col-12 fr-col-md-10 fr-col-lg-9">
|
||
<div>
|
||
<form class="fr-mb-0" id="recover">
|
||
<fieldset class="fr-mb-0 fr-fieldset" id="recover-fieldset" aria-labelledby="recover-fieldset-legend recover-fieldset-messages">
|
||
<legend class="fr-fieldset__legend" id="recover-fieldset-legend">
|
||
<h2 class="fr-h5">Générer le nom d'une entité</h2>
|
||
</legend>
|
||
<div class="fr-fieldset__element">
|
||
<p class="fr-text--sm">Entrez ici un sigle bien choisi.</p>
|
||
</div>
|
||
<div class="fr-fieldset__element">
|
||
<div class="fr-input-group" id="input-group-9817">
|
||
<label class="fr-label" for="username-9816">
|
||
Sigle
|
||
</label>
|
||
<input type="text" id="sigleInput" class="fr-input" style="text-transform: uppercase;"/>
|
||
</div>
|
||
</div>
|
||
<div id="alertDiv" class="fr-fieldset__element">
|
||
<div class="fr-alert fr-alert--info">
|
||
<h3 class="fr-alert__title">Suggestion : <span id="nomSpan"></span></h3>
|
||
</div>
|
||
</div>
|
||
<div class="fr-fieldset__element">
|
||
<ul class="fr-mt-2v fr-btns-group fr-btns-group--between fr-btns-group--inline">
|
||
<li>
|
||
<button id="copyButton" class="fr-btn fr-btn--secondary fr-btn--icon-right fr-icon-clipboard-line" type="button">
|
||
Copier
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button class="fr-btn fr-btn--icon-right fr-icon-lightbulb-line" id="button-9288" type="button" onclick="regen()">
|
||
Nouvelle suggestion
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
|
||
<footer class="fr-footer" role="contentinfo" id="footer-7450">
|
||
<div class="fr-container">
|
||
<div class="fr-footer__body">
|
||
<div class="fr-footer__brand fr-enlarge-link">
|
||
<a id="footer-operator" href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
|
||
<p class="fr-logo">
|
||
Ministère<br>
|
||
des démarches<br/>
|
||
ridicules
|
||
</p>
|
||
</a>
|
||
</div>
|
||
<div class="fr-footer__content">
|
||
<p class="fr-footer__content-desc">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Bon, ça ne veut absolument rien dire, mais je trouve que c’est assez dans le ton. </p>
|
||
<ul class="fr-footer__content-list">
|
||
<li class="fr-footer__content-item">
|
||
<a id="footer__content-link-7451" class="fr-footer__content-link" target="_blank" href="https://adrien.malingrey.fr/jeux">adrien.malingrey.fr/jeux</a>
|
||
</li>
|
||
<li class="fr-footer__content-item">
|
||
<a id="footer__content-link-7452" class="fr-footer__content-link" target="_blank" href="https://git.malingrey.fr/adrien/groscon">code source</a>
|
||
</li>
|
||
<li class="fr-footer__content-item">
|
||
<a id="footer__content-link-7454" class="fr-footer__content-link" target="_blank" href="https://data.gouv.fr">data.gouv.fr</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="fr-footer__bottom-copy">
|
||
<p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous <a href="http://www.wtfpl.net/" target="_blank">licence WTFPL</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<button class="fr-display-button fr-background-default--grey fr-btn fr-btn--lg fr-icon-theme-fill fr-btn--secondary" aria-controls="fr-theme-modal" data-fr-opened="false" style="z-index: 1600" id="button-7460">
|
||
Label bouton
|
||
</button>
|
||
<dialog id="fr-theme-modal" class="fr-modal" aria-labelledby="fr-theme-modal-title">
|
||
<div class="fr-container fr-container--fluid fr-container-md">
|
||
<div class="fr-grid-row fr-grid-row--center">
|
||
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
|
||
<div class="fr-modal__body">
|
||
<div class="fr-modal__header">
|
||
<button class="fr-btn--close fr-btn" aria-controls="fr-theme-modal" id="button-7461" title="Fermer">
|
||
Fermer
|
||
</button>
|
||
</div>
|
||
<div class="fr-modal__content">
|
||
<h1 id="fr-theme-modal-title" class="fr-modal__title">
|
||
Paramètres d’affichage
|
||
</h1>
|
||
<div id="fr-display" class="fr-display">
|
||
<fieldset class="fr-fieldset" id="display-fieldset">
|
||
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="display-fieldset-legend">
|
||
Choisissez un thème pour personnaliser l’apparence du site.
|
||
</legend>
|
||
<div class="fr-fieldset__element">
|
||
<div class="fr-radio-group fr-radio-rich">
|
||
<input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme">
|
||
<label class="fr-label" for="fr-radios-theme-light">
|
||
Thème clair
|
||
</label>
|
||
<div class="fr-radio-rich__pictogram">
|
||
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
|
||
<use class="fr-artwork-decorative" href="dsfr/artwork/pictograms/environment/sun.svg#artwork-decorative"></use>
|
||
<use class="fr-artwork-minor" href="dsfr/artwork/pictograms/environment/sun.svg#artwork-minor"></use>
|
||
<use class="fr-artwork-major" href="dsfr/artwork/pictograms/environment/sun.svg#artwork-major"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fr-fieldset__element">
|
||
<div class="fr-radio-group fr-radio-rich">
|
||
<input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme">
|
||
<label class="fr-label" for="fr-radios-theme-dark">
|
||
Thème sombre
|
||
</label>
|
||
<div class="fr-radio-rich__pictogram">
|
||
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
|
||
<use class="fr-artwork-decorative" href="dsfr/artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
|
||
<use class="fr-artwork-minor" href="dsfr/artwork/pictograms/environment/moon.svg#artwork-minor"></use>
|
||
<use class="fr-artwork-major" href="dsfr/artwork/pictograms/environment/moon.svg#artwork-major"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="fr-fieldset__element">
|
||
<div class="fr-radio-group fr-radio-rich">
|
||
<input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme">
|
||
<label class="fr-label" for="fr-radios-theme-system">
|
||
Système
|
||
<span class="fr-hint-text">Utilise les paramètres système</span>
|
||
</label>
|
||
<div class="fr-radio-rich__pictogram">
|
||
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
|
||
<use class="fr-artwork-decorative" href="dsfr/artwork/pictograms/system/system.svg#artwork-decorative"></use>
|
||
<use class="fr-artwork-minor" href="dsfr/artwork/pictograms/system/system.svg#artwork-minor"></use>
|
||
<use class="fr-artwork-major" href="dsfr/artwork/pictograms/system/system.svg#artwork-major"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<script type="module" src="dsfr/dsfr.module.min.js"></script>
|
||
<script type="text/javascript" nomodule src="dsfr/dsfr.nomodule.min.js"></script>
|
||
<script>
|
||
Array.prototype.choice = function () { return this[Math.floor(Math.random() * this.length)] }
|
||
|
||
fetch("https://adrien.malingrey.fr/dev/groscon/noms.json")
|
||
.then(response => response.json())
|
||
.then(json => {
|
||
noms = json
|
||
|
||
regen()
|
||
})
|
||
|
||
listNoms = []
|
||
|
||
function trouveMot(lettre, position) {
|
||
lettre = lettre.toUpperCase()
|
||
position = position? 1: 0
|
||
return lettre in noms[position]? noms[position][lettre].choice(): "?"
|
||
}
|
||
|
||
function regen() {
|
||
if (sigleInput.value.length) {
|
||
listNoms = Array.from(sigleInput.value).map((lettre, position) => trouveMot(lettre, position))
|
||
nomSpan.innerText = listNoms.join(" ")
|
||
alertDiv.style.display = ""
|
||
} else {
|
||
alertDiv.style.display = "none"
|
||
}
|
||
copyButton.innerText = "Copier"
|
||
copyButton.classList.remove('fr-icon-checkbox-circle-line')
|
||
copyButton.classList.add('fr-icon-clipboard-line')
|
||
}
|
||
|
||
sigleInput.onkeyup = regen
|
||
|
||
copyButton.onclick = function(event) {
|
||
navigator.clipboard.writeText(nomSpan.innerText).then(() => {
|
||
copyButton.innerText = "Copié"
|
||
copyButton.classList.remove('fr-icon-clipboard-line')
|
||
copyButton.classList.add('fr-icon-checkbox-circle-line')
|
||
})
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |