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="https://adrien.malingrey.fr/jeux/" 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érationelles 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">
|
||
<p>Suggestion :</p>
|
||
<h3 class="fr-alert__title" id="nomDiv"></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">Ce site parodique, bien que reprenant des noms de services issus de data.gouv.fr, n'est pas lié à l'Etat français.</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("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))
|
||
nomDiv.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(nomDiv.innerText).then(() => {
|
||
copyButton.innerText = "Copié"
|
||
copyButton.classList.remove('fr-icon-clipboard-line')
|
||
copyButton.classList.add('fr-icon-checkbox-circle-line')
|
||
})
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |