Code générique de la page d'accueil personnalisée YunoHost (Makefile, scripts, éditeur visuel)
This commit is contained in:
mathieu
@@ -0,0 +1,32 @@
|
|||||||
|
# Copie ce fichier en .env (jamais commité) et remplis les valeurs pour TON
|
||||||
|
# instance YunoHost. Rien de ce qui suit n'a de valeur par défaut dans les
|
||||||
|
# scripts : sans .env correctement rempli, deploy/sync s'arrêtent avec un
|
||||||
|
# message expliquant quoi renseigner.
|
||||||
|
|
||||||
|
# --- Déploiement (make export / make deploy) ---
|
||||||
|
# Domaine de ton instance YunoHost.
|
||||||
|
REMOTE_HOST=mondomaine.exemple
|
||||||
|
|
||||||
|
# Nom de l'app "Custom Webapp" (my_webapp) installée pour servir cette page
|
||||||
|
# (visible dans YunoHost admin > Applications, ou `yunohost app list`).
|
||||||
|
REMOTE_USER=my_webapp__x
|
||||||
|
|
||||||
|
# Port SSH du serveur (22 sauf si tu l'as changé).
|
||||||
|
REMOTE_PORT=22
|
||||||
|
|
||||||
|
# Chemin distant relatif à la racine du chroot SFTP de cette app (ne pas
|
||||||
|
# mettre le chemin absolu /var/www/... — voir le README).
|
||||||
|
REMOTE_PATH=/www/
|
||||||
|
|
||||||
|
# Mot de passe du compte REMOTE_USER (celui défini à l'installation de
|
||||||
|
# l'app). Laisse vide pour que ssh/scp le demande à chaque fois.
|
||||||
|
REMOTE_PASSWORD=
|
||||||
|
|
||||||
|
# --- Synchronisation des apps (make sync) ---
|
||||||
|
# Utilisateur et hôte SSH ayant accès en lecture à la configuration YunoHost
|
||||||
|
# (root, ou un utilisateur avec sudo -- voir le README pour les limites).
|
||||||
|
SYNC_SSH_USER=root
|
||||||
|
SYNC_SSH_HOST=mondomaine.exemple
|
||||||
|
|
||||||
|
# Domaine YunoHost dont on lit le portail (souvent le même que REMOTE_HOST).
|
||||||
|
PORTAL_DOMAIN=mondomaine.exemple
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
.env
|
||||||
|
output/
|
||||||
|
__pycache__/
|
||||||
|
src/config.json
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
.DEFAULT_GOAL := help
|
||||||
|
PORT ?= 8000
|
||||||
|
|
||||||
|
.PHONY: help install config serve sync export deploy
|
||||||
|
|
||||||
|
help:
|
||||||
|
@echo "Cibles disponibles :"
|
||||||
|
@echo " make install - installe les dependances necessaires aux scripts (sshpass)"
|
||||||
|
@echo " make config - cree .env et src/config.json si absents"
|
||||||
|
@echo " make serve - lance l'apercu + l'editeur en local (PORT=$(PORT))"
|
||||||
|
@echo " make sync - recupere dans src/config.json les apps YunoHost manquantes"
|
||||||
|
@echo " make export - copie src/ vers output/ (equivalent au bouton Exporter)"
|
||||||
|
@echo " make deploy - envoie output/ sur le serveur YunoHost"
|
||||||
|
|
||||||
|
install:
|
||||||
|
sudo apt-get update
|
||||||
|
sudo apt-get install -y sshpass
|
||||||
|
|
||||||
|
config:
|
||||||
|
@if [ -f .env ]; then \
|
||||||
|
echo ".env existe deja."; \
|
||||||
|
else \
|
||||||
|
cp .env.example .env; \
|
||||||
|
echo ".env cree depuis .env.example : edite-le pour renseigner le mot de passe."; \
|
||||||
|
fi
|
||||||
|
@if [ -f src/config.json ]; then \
|
||||||
|
echo "src/config.json existe deja."; \
|
||||||
|
else \
|
||||||
|
cp src/config.example.json src/config.json; \
|
||||||
|
echo "src/config.json cree depuis src/config.example.json (donnees d'exemple)."; \
|
||||||
|
echo "Remplace-le par tes propres apps, ou copie ton config.json personnel ici."; \
|
||||||
|
fi
|
||||||
|
|
||||||
|
serve:
|
||||||
|
scripts/start.sh $(PORT)
|
||||||
|
|
||||||
|
sync:
|
||||||
|
python3 scripts/sync-apps.py
|
||||||
|
|
||||||
|
export:
|
||||||
|
scripts/export.sh
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
scripts/deploy.sh
|
||||||
@@ -1,2 +1,204 @@
|
|||||||
# Yunohost_homePage
|
# Yunohost_homePage
|
||||||
|
|
||||||
|
Page d'accueil YunoHost personnalisée : applications épinglées en haut de
|
||||||
|
page, groupes repliables/réordonnables, applications sans groupe, bouton
|
||||||
|
Administration à côté de Déconnexion, et détection automatique du logo de
|
||||||
|
chaque application (favicon ou logo officiel YunoHost).
|
||||||
|
|
||||||
|
Ce dépôt contient le **code générique**, réutilisable par n'importe qui a
|
||||||
|
une instance YunoHost — toutes les informations spécifiques à un serveur
|
||||||
|
(domaine, identifiants SSH, mot de passe) vivent uniquement dans un fichier
|
||||||
|
`.env` local, jamais commité. `src/config.json` (tes apps/groupes) est lui
|
||||||
|
aussi local et ignoré par git — voir plus bas comment le renseigner.
|
||||||
|
|
||||||
|
## Structure du projet
|
||||||
|
|
||||||
|
```
|
||||||
|
src/ sources de la page (index.html, style.css, app.js)
|
||||||
|
et de l'éditeur visuel (editor.html/css/js)
|
||||||
|
+ config.json (tes données, ignoré par git — voir ci-dessous)
|
||||||
|
+ config.example.json (exemple versionné, point de départ)
|
||||||
|
scripts/ scripts d'outillage (preview, export, sync, déploiement)
|
||||||
|
output/ généré par "make export" — c'est ce dossier qui est envoyé
|
||||||
|
sur le serveur YunoHost (ignoré par git)
|
||||||
|
Makefile regroupe toutes les commandes ci-dessous
|
||||||
|
.env tes identifiants/domaine (créé par "make config", jamais commité)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Démarrage rapide
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make help # liste toutes les commandes
|
||||||
|
make config # crée .env et src/config.json (depuis les .example) si absents
|
||||||
|
```
|
||||||
|
|
||||||
|
Édite ensuite :
|
||||||
|
- `.env` avec les infos de **ton** instance YunoHost (voir les commentaires
|
||||||
|
dans `.env.example`),
|
||||||
|
- `src/config.json` avec tes propres applications et groupes — soit à la
|
||||||
|
main (voir la section dédiée plus bas), soit via l'éditeur visuel une
|
||||||
|
fois le serveur lancé, soit en copiant un fichier existant si tu en as
|
||||||
|
déjà un ailleurs (ex. un dépôt séparé où tu gardes tes configs
|
||||||
|
personnelles).
|
||||||
|
|
||||||
|
Puis :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make serve # lance l'apercu + l'editeur en local
|
||||||
|
```
|
||||||
|
|
||||||
|
## Aperçu et édition en local
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make serve
|
||||||
|
```
|
||||||
|
|
||||||
|
(Ctrl+C arrête le serveur.) Un port différent : `make serve PORT=8080`.
|
||||||
|
|
||||||
|
Ça ouvre deux onglets :
|
||||||
|
- **`http://localhost:8000/editor.html`** — éditeur : glisser-déposer les
|
||||||
|
applications entre groupes, vers/depuis "Sans groupe" ou vers/depuis
|
||||||
|
"Épinglées" (tout en haut, en dehors de tout groupe), réordonner les
|
||||||
|
groupes (poignée `⠿`), les renommer (clic sur le nom), cocher "replié par
|
||||||
|
défaut", ajouter (`+`) ou supprimer (`✕`) une application ou un groupe.
|
||||||
|
- Le bouton **Enregistrer** écrit dans `src/config.json`.
|
||||||
|
- Le bouton **Exporter** enregistre puis copie les fichiers déployables
|
||||||
|
(`index.html`, `style.css`, `app.js`, `config.json`) dans `output/` —
|
||||||
|
c'est ce dossier, pas `src/`, qui est envoyé sur le serveur.
|
||||||
|
- **`http://localhost:8000/`** — aperçu de la page finale (celle de
|
||||||
|
`src/`), avec rechargement automatique dès qu'un fichier change.
|
||||||
|
|
||||||
|
Cette partie ne nécessite aucune information sur ton serveur : tout est
|
||||||
|
local.
|
||||||
|
|
||||||
|
## Récupérer automatiquement les apps installées sur YunoHost
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make sync
|
||||||
|
```
|
||||||
|
|
||||||
|
Se connecte en SSH (`SYNC_SSH_USER@SYNC_SSH_HOST` défini dans `.env`),
|
||||||
|
récupère la vraie liste des apps installées sur `PORTAL_DOMAIN` avec leur
|
||||||
|
nom/URL/logo officiels, et ajoute dans `ungrouped` uniquement celles qui
|
||||||
|
manquent encore (comparaison par URL). N'écrase jamais une app déjà classée
|
||||||
|
dans un groupe ou épinglée.
|
||||||
|
|
||||||
|
⚠️ Nécessite un accès **root** (ou un compte avec sudo, mot de passe requis
|
||||||
|
à chaque appel) sur le serveur : le fichier lu
|
||||||
|
(`/etc/yunohost/portal/<domaine>.json`) n'est lisible par aucun compte moins
|
||||||
|
privilégié, y compris le compte applicatif utilisé pour le déploiement.
|
||||||
|
|
||||||
|
## Gérer les applications à la main (optionnel)
|
||||||
|
|
||||||
|
Tout se configure aussi directement dans `src/config.json` (voir
|
||||||
|
`src/config.example.json` pour un point de départ), si tu préfères éditer
|
||||||
|
le fichier toi-même plutôt que d'utiliser l'éditeur visuel.
|
||||||
|
|
||||||
|
### Ajouter une application
|
||||||
|
|
||||||
|
```json
|
||||||
|
{ "id": "monapp", "name": "Mon App", "url": "/monapp/", "color": "#2196f3", "initials": "MA" }
|
||||||
|
```
|
||||||
|
|
||||||
|
- **`id`** : identifiant unique, sans espace.
|
||||||
|
- **`name`** : nom affiché sous la tuile.
|
||||||
|
- **`url`** : chemin réel de l'appli sur le domaine (ex. `/navidrome/`). C'est
|
||||||
|
à partir de cette URL que la page tente de charger `favicon.ico`
|
||||||
|
automatiquement.
|
||||||
|
- **`color`** / **`initials`** : filet de sécurité si aucun favicon ne charge
|
||||||
|
(pastille colorée avec initiales).
|
||||||
|
- **`icon`** *(optionnel)* : force une image précise plutôt que le favicon
|
||||||
|
auto-détecté, ex. `"icon": "https://..."`.
|
||||||
|
|
||||||
|
Ajoute l'objet dans le tableau `apps` d'un groupe existant, dans le tableau
|
||||||
|
racine `pinned` (épinglées en haut de page) ou dans `ungrouped` si elle ne
|
||||||
|
doit appartenir à aucun groupe.
|
||||||
|
|
||||||
|
### Supprimer une application
|
||||||
|
|
||||||
|
Supprime son objet `{ ... }` dans le tableau où elle se trouve. Attention aux
|
||||||
|
virgules JSON (pas de virgule surnuméraire).
|
||||||
|
|
||||||
|
### Gérer les groupes
|
||||||
|
|
||||||
|
- **Créer** : ajoute un objet dans le tableau racine `groups` :
|
||||||
|
```json
|
||||||
|
{ "id": "domotique", "name": "Domotique", "collapsed": false, "apps": [] }
|
||||||
|
```
|
||||||
|
- **Réordonner** : l'ordre des objets dans `groups` = l'ordre vertical affiché.
|
||||||
|
- **Renommer** : change le champ `name`.
|
||||||
|
- **Replié par défaut** : `"collapsed": true` (le choix de chaque visiteur
|
||||||
|
est ensuite mémorisé dans son navigateur et prend le dessus).
|
||||||
|
- **Supprimer** : retire l'objet de `groups` — déplace d'abord ses apps
|
||||||
|
ailleurs, sinon elles disparaissent avec lui.
|
||||||
|
|
||||||
|
### Vérifier que le JSON reste valide
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m json.tool src/config.json > /dev/null && echo "JSON valide"
|
||||||
|
```
|
||||||
|
|
||||||
|
## Déploiement sur YunoHost
|
||||||
|
|
||||||
|
Cette page est conçue pour être servie par une app "Custom Webapp"
|
||||||
|
(`my_webapp`) YunoHost, définie comme application par défaut du domaine
|
||||||
|
pour être visible à la racine (`https://tondomaine/`) — voir la doc
|
||||||
|
YunoHost pour installer ce type d'app si ce n'est pas déjà fait.
|
||||||
|
|
||||||
|
Le déploiement se fait toujours à partir de `output/`, jamais de `src/`
|
||||||
|
directement :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make export # (ou le bouton Exporter de l'éditeur) : src/ -> output/
|
||||||
|
make deploy # envoie output/ sur le serveur
|
||||||
|
```
|
||||||
|
|
||||||
|
### Configurer `.env`
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make config
|
||||||
|
```
|
||||||
|
|
||||||
|
crée `.env` à partir de `.env.example` (déjà ignoré par git, ne sera jamais
|
||||||
|
commité). **Toutes** les infos de connexion viennent de ce fichier — sans
|
||||||
|
lui, `make deploy` et `make sync` s'arrêtent avec un message expliquant quoi
|
||||||
|
renseigner :
|
||||||
|
|
||||||
|
```dotenv
|
||||||
|
# Déploiement
|
||||||
|
REMOTE_HOST=tondomaine.exemple
|
||||||
|
REMOTE_USER=my_webapp__x
|
||||||
|
REMOTE_PORT=22
|
||||||
|
REMOTE_PATH=/www/
|
||||||
|
REMOTE_PASSWORD=le-mot-de-passe-ici
|
||||||
|
|
||||||
|
# Synchronisation des apps (make sync)
|
||||||
|
SYNC_SSH_USER=root
|
||||||
|
SYNC_SSH_HOST=tondomaine.exemple
|
||||||
|
PORTAL_DOMAIN=tondomaine.exemple
|
||||||
|
```
|
||||||
|
|
||||||
|
`scripts/deploy.sh` charge ce fichier. Si `REMOTE_PASSWORD` est renseigné,
|
||||||
|
il utilise `sshpass` (installé via `make install`) pour se connecter sans
|
||||||
|
invite interactive. Sans mot de passe dans `.env`, `ssh` demandera la
|
||||||
|
saisie manuelle — utile en terminal interactif, mais ne fonctionne pas dans
|
||||||
|
un contexte sans terminal (script automatisé), où `ssh` échoue avec une
|
||||||
|
erreur `ssh_askpass`.
|
||||||
|
|
||||||
|
⚠️ Le compte applicatif (`REMOTE_USER`) d'une "Custom Webapp" YunoHost est
|
||||||
|
en général un compte **SFTP uniquement**, chrooté dans son propre dossier
|
||||||
|
(`ForceCommand internal-sftp` côté serveur) :
|
||||||
|
- **`rsync` ne fonctionne pas** (il a besoin d'exécuter un shell distant) —
|
||||||
|
`scripts/deploy.sh` utilise `scp`.
|
||||||
|
- `REMOTE_PATH` est **relatif à la racine du chroot** de cette app
|
||||||
|
(`/var/www/<REMOTE_USER>`), donc `/www/` et pas
|
||||||
|
`/var/www/<REMOTE_USER>/www/`.
|
||||||
|
|
||||||
|
### Authentification par clé SSH (alternative)
|
||||||
|
|
||||||
|
Pour ne plus dépendre du mot de passe pour le déploiement :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh-keygen -t ed25519 -C "deploy-yunohost-pageaccueil"
|
||||||
|
ssh-copy-id -p "$REMOTE_PORT" "$REMOTE_USER@$REMOTE_HOST"
|
||||||
|
```
|
||||||
|
|||||||
Executable
+53
@@ -0,0 +1,53 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# Deploie le contenu de output/ (voir "make export") sur l'app YunoHost.
|
||||||
|
# Voir README.md pour le detail des parametres et l'authentification par cle SSH.
|
||||||
|
#
|
||||||
|
# Le compte SSH d'une app "Custom Webapp" YunoHost est en general limite a
|
||||||
|
# SFTP (ForceCommand internal-sftp) et chroote dans son propre dossier home
|
||||||
|
# (/var/www/<REMOTE_USER>) : rsync ne fonctionne donc pas (il a besoin
|
||||||
|
# d'executer un shell distant), et le chemin distant doit etre relatif a la
|
||||||
|
# racine du chroot, pas un chemin absolu du systeme de fichiers du serveur.
|
||||||
|
|
||||||
|
set -eu
|
||||||
|
|
||||||
|
SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
|
||||||
|
PROJECT_ROOT="$(CDPATH= cd -- "$SCRIPT_DIR/.." && pwd)"
|
||||||
|
OUTPUT_DIR="$PROJECT_ROOT/output"
|
||||||
|
|
||||||
|
if [ ! -f "${PROJECT_ROOT}/.env" ]; then
|
||||||
|
echo "Aucun .env trouve : lance 'make config' puis renseigne-le (voir .env.example)." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
# shellcheck disable=SC1090,SC1091
|
||||||
|
. "${PROJECT_ROOT}/.env"
|
||||||
|
|
||||||
|
if [ ! -f "${OUTPUT_DIR}/index.html" ]; then
|
||||||
|
echo "output/ est vide ou incomplet : lance d'abord 'make export' (ou le bouton Export de l'editeur)." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "${REMOTE_HOST:-}" ] || [ -z "${REMOTE_USER:-}" ]; then
|
||||||
|
echo "REMOTE_HOST et REMOTE_USER doivent etre renseignes dans .env (voir .env.example)." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
REMOTE_PORT="${REMOTE_PORT:-22}"
|
||||||
|
# Chemin relatif a la racine du chroot SFTP (pas le chemin absolu serveur).
|
||||||
|
REMOTE_PATH="${REMOTE_PATH:-/www/}"
|
||||||
|
|
||||||
|
SCP="scp"
|
||||||
|
|
||||||
|
if [ -n "${REMOTE_PASSWORD:-}" ]; then
|
||||||
|
if ! command -v sshpass > /dev/null 2>&1; then
|
||||||
|
echo "REMOTE_PASSWORD est defini dans .env mais sshpass n'est pas installe (apt install sshpass)." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
SCP="sshpass -p ${REMOTE_PASSWORD} scp"
|
||||||
|
fi
|
||||||
|
|
||||||
|
${SCP} -P "${REMOTE_PORT}" \
|
||||||
|
"${OUTPUT_DIR}/index.html" \
|
||||||
|
"${OUTPUT_DIR}/style.css" \
|
||||||
|
"${OUTPUT_DIR}/app.js" \
|
||||||
|
"${OUTPUT_DIR}/config.json" \
|
||||||
|
"${REMOTE_USER}@${REMOTE_HOST}:${REMOTE_PATH}"
|
||||||
Executable
+16
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# Copie les fichiers deployables de src/ vers output/ (equivalent en ligne
|
||||||
|
# de commande du bouton "Exporter" de l'editeur).
|
||||||
|
|
||||||
|
set -eu
|
||||||
|
|
||||||
|
SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
|
||||||
|
PROJECT_ROOT="$(CDPATH= cd -- "$SCRIPT_DIR/.." && pwd)"
|
||||||
|
SRC_DIR="$PROJECT_ROOT/src"
|
||||||
|
OUTPUT_DIR="$PROJECT_ROOT/output"
|
||||||
|
|
||||||
|
mkdir -p "$OUTPUT_DIR"
|
||||||
|
cp "$SRC_DIR/index.html" "$SRC_DIR/style.css" "$SRC_DIR/app.js" "$SRC_DIR/config.json" "$OUTPUT_DIR/"
|
||||||
|
|
||||||
|
echo "Exporte vers $OUTPUT_DIR :"
|
||||||
|
ls "$OUTPUT_DIR"
|
||||||
Executable
+146
@@ -0,0 +1,146 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
"""Serveur de previsualisation locale (sert src/), avec rechargement
|
||||||
|
automatique, sauvegarde et export depuis l'editeur visuel (editor.html).
|
||||||
|
|
||||||
|
Usage: python3 scripts/preview.py [port]
|
||||||
|
"""
|
||||||
|
import http.server
|
||||||
|
import json
|
||||||
|
import shutil
|
||||||
|
import sys
|
||||||
|
from pathlib import Path
|
||||||
|
|
||||||
|
PORT = int(sys.argv[1]) if len(sys.argv) > 1 else 8000
|
||||||
|
|
||||||
|
SCRIPT_DIR = Path(__file__).resolve().parent
|
||||||
|
PROJECT_ROOT = SCRIPT_DIR.parent
|
||||||
|
SRC_DIR = PROJECT_ROOT / "src"
|
||||||
|
OUTPUT_DIR = PROJECT_ROOT / "output"
|
||||||
|
|
||||||
|
WATCHED_FILES = ["index.html", "style.css", "app.js", "config.json"]
|
||||||
|
EXPORTED_FILES = ["index.html", "style.css", "app.js", "config.json"]
|
||||||
|
|
||||||
|
RELOAD_SNIPPET = b"""
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var lastSeen = null;
|
||||||
|
var polling = false;
|
||||||
|
function poll() {
|
||||||
|
if (polling) { return; }
|
||||||
|
polling = true;
|
||||||
|
fetch("/__mtime", { cache: "no-store" })
|
||||||
|
.then(function (r) { return r.text(); })
|
||||||
|
.then(function (text) {
|
||||||
|
if (lastSeen === null) {
|
||||||
|
lastSeen = text;
|
||||||
|
} else if (text !== lastSeen) {
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (err) { console.error("live-reload:", err); })
|
||||||
|
.finally(function () { polling = false; });
|
||||||
|
}
|
||||||
|
setInterval(poll, 1000);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
"""
|
||||||
|
|
||||||
|
|
||||||
|
def watched_mtime():
|
||||||
|
mtimes = []
|
||||||
|
for name in WATCHED_FILES:
|
||||||
|
try:
|
||||||
|
mtimes.append((SRC_DIR / name).stat().st_mtime)
|
||||||
|
except OSError:
|
||||||
|
pass
|
||||||
|
return str(max(mtimes)) if mtimes else "0"
|
||||||
|
|
||||||
|
|
||||||
|
class ReloadingHandler(http.server.SimpleHTTPRequestHandler):
|
||||||
|
def __init__(self, *args, **kwargs):
|
||||||
|
super().__init__(*args, directory=str(SRC_DIR), **kwargs)
|
||||||
|
|
||||||
|
def do_GET(self):
|
||||||
|
if self.path == "/__mtime":
|
||||||
|
body = watched_mtime().encode()
|
||||||
|
self.send_response(200)
|
||||||
|
self.send_header("Content-Type", "text/plain")
|
||||||
|
self.send_header("Content-Length", str(len(body)))
|
||||||
|
self.end_headers()
|
||||||
|
self.wfile.write(body)
|
||||||
|
return
|
||||||
|
|
||||||
|
if self.path in ("/", "/index.html"):
|
||||||
|
try:
|
||||||
|
html = (SRC_DIR / "index.html").read_bytes()
|
||||||
|
except OSError:
|
||||||
|
return super().do_GET()
|
||||||
|
html = html.replace(b"</body>", RELOAD_SNIPPET)
|
||||||
|
self.send_response(200)
|
||||||
|
self.send_header("Content-Type", "text/html; charset=utf-8")
|
||||||
|
self.send_header("Content-Length", str(len(html)))
|
||||||
|
self.end_headers()
|
||||||
|
self.wfile.write(html)
|
||||||
|
return
|
||||||
|
|
||||||
|
super().do_GET()
|
||||||
|
|
||||||
|
def do_POST(self):
|
||||||
|
if self.path == "/__save":
|
||||||
|
length = int(self.headers.get("Content-Length", 0))
|
||||||
|
raw = self.rfile.read(length)
|
||||||
|
try:
|
||||||
|
data = json.loads(raw)
|
||||||
|
except json.JSONDecodeError as exc:
|
||||||
|
self.send_error(400, f"JSON invalide: {exc}")
|
||||||
|
return
|
||||||
|
with open(SRC_DIR / "config.json", "w", encoding="utf-8") as f:
|
||||||
|
json.dump(data, f, ensure_ascii=False, indent=2)
|
||||||
|
f.write("\n")
|
||||||
|
self._send_json({"ok": True})
|
||||||
|
return
|
||||||
|
|
||||||
|
if self.path == "/__export":
|
||||||
|
OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
|
||||||
|
copied = []
|
||||||
|
for name in EXPORTED_FILES:
|
||||||
|
src = SRC_DIR / name
|
||||||
|
if src.exists():
|
||||||
|
shutil.copy(src, OUTPUT_DIR / name)
|
||||||
|
copied.append(name)
|
||||||
|
self._send_json({"ok": True, "files": copied, "dir": str(OUTPUT_DIR)})
|
||||||
|
return
|
||||||
|
|
||||||
|
self.send_error(404)
|
||||||
|
|
||||||
|
def _send_json(self, payload):
|
||||||
|
body = json.dumps(payload).encode()
|
||||||
|
self.send_response(200)
|
||||||
|
self.send_header("Content-Type", "application/json")
|
||||||
|
self.send_header("Content-Length", str(len(body)))
|
||||||
|
self.end_headers()
|
||||||
|
self.wfile.write(body)
|
||||||
|
|
||||||
|
def end_headers(self):
|
||||||
|
# Empeche le navigateur de mettre en cache src/*, sinon un simple
|
||||||
|
# rechargement (ou le reload automatique) peut afficher une version
|
||||||
|
# perimee et forcer a faire Ctrl+F5.
|
||||||
|
self.send_header("Cache-Control", "no-store, must-revalidate")
|
||||||
|
super().end_headers()
|
||||||
|
|
||||||
|
def log_message(self, format, *args):
|
||||||
|
if args and "__mtime" in str(args[0]):
|
||||||
|
return
|
||||||
|
super().log_message(format, *args)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
with http.server.ThreadingHTTPServer(("127.0.0.1", PORT), ReloadingHandler) as httpd:
|
||||||
|
print(f"Apercu : http://localhost:{PORT}/")
|
||||||
|
print(f"Editeur : http://localhost:{PORT}/editor.html")
|
||||||
|
print("Ctrl+C pour arreter.")
|
||||||
|
try:
|
||||||
|
httpd.serve_forever()
|
||||||
|
except KeyboardInterrupt:
|
||||||
|
pass
|
||||||
Executable
+34
@@ -0,0 +1,34 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# Lance le serveur de previsualisation locale et ouvre l'editeur + l'apercu
|
||||||
|
# dans le navigateur. Ctrl+C arrete tout.
|
||||||
|
|
||||||
|
set -eu
|
||||||
|
|
||||||
|
PORT="${1:-8000}"
|
||||||
|
SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
|
||||||
|
cd "$SCRIPT_DIR"
|
||||||
|
|
||||||
|
python3 preview.py "$PORT" &
|
||||||
|
SERVER_PID=$!
|
||||||
|
trap 'kill "$SERVER_PID" 2>/dev/null || true' EXIT INT TERM
|
||||||
|
|
||||||
|
# Laisse le temps au serveur de demarrer avant d'ouvrir le navigateur.
|
||||||
|
sleep 1
|
||||||
|
|
||||||
|
EDITOR_URL="http://localhost:${PORT}/editor.html"
|
||||||
|
PREVIEW_URL="http://localhost:${PORT}/"
|
||||||
|
|
||||||
|
open_url() {
|
||||||
|
if command -v xdg-open > /dev/null 2>&1; then
|
||||||
|
xdg-open "$1" > /dev/null 2>&1 &
|
||||||
|
elif command -v open > /dev/null 2>&1; then
|
||||||
|
open "$1" > /dev/null 2>&1 &
|
||||||
|
else
|
||||||
|
echo "Ouvre manuellement : $1"
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
open_url "$EDITOR_URL"
|
||||||
|
open_url "$PREVIEW_URL"
|
||||||
|
|
||||||
|
wait "$SERVER_PID"
|
||||||
Executable
+162
@@ -0,0 +1,162 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
"""Recupere la liste des apps installees sur le serveur YunoHost et ajoute
|
||||||
|
celles qui manquent dans src/config.json (dans "ungrouped"), sans toucher a
|
||||||
|
celles deja placees dans un groupe, dans "pinned" ou deja presentes.
|
||||||
|
|
||||||
|
Usage: python3 scripts/sync-apps.py [utilisateur@hote] [domaine]
|
||||||
|
|
||||||
|
Toute la configuration vient de .env (SYNC_SSH_USER, SYNC_SSH_HOST,
|
||||||
|
PORTAL_DOMAIN, REMOTE_USER) ; les arguments en ligne de commande, s'ils sont
|
||||||
|
fournis, ont priorite sur .env.
|
||||||
|
"""
|
||||||
|
import json
|
||||||
|
import subprocess
|
||||||
|
import sys
|
||||||
|
from pathlib import Path
|
||||||
|
|
||||||
|
SCRIPT_DIR = Path(__file__).resolve().parent
|
||||||
|
PROJECT_ROOT = SCRIPT_DIR.parent
|
||||||
|
CONFIG_PATH = PROJECT_ROOT / "src" / "config.json"
|
||||||
|
ENV_PATH = PROJECT_ROOT / ".env"
|
||||||
|
|
||||||
|
|
||||||
|
def load_env():
|
||||||
|
env = {}
|
||||||
|
if not ENV_PATH.exists():
|
||||||
|
return env
|
||||||
|
for line in ENV_PATH.read_text(encoding="utf-8").splitlines():
|
||||||
|
line = line.strip()
|
||||||
|
if not line or line.startswith("#") or "=" not in line:
|
||||||
|
continue
|
||||||
|
key, value = line.split("=", 1)
|
||||||
|
env[key.strip()] = value.strip()
|
||||||
|
return env
|
||||||
|
|
||||||
|
|
||||||
|
ENV = load_env()
|
||||||
|
|
||||||
|
SYNC_SSH_USER = ENV.get("SYNC_SSH_USER", "root")
|
||||||
|
SYNC_SSH_HOST = ENV.get("SYNC_SSH_HOST") or ENV.get("REMOTE_HOST")
|
||||||
|
PORTAL_DOMAIN = ENV.get("PORTAL_DOMAIN") or ENV.get("REMOTE_HOST")
|
||||||
|
SELF_APP_ID = ENV.get("REMOTE_USER", "") # cette page elle-meme, jamais ajoutee
|
||||||
|
|
||||||
|
if len(sys.argv) > 1:
|
||||||
|
SSH_TARGET = sys.argv[1]
|
||||||
|
elif SYNC_SSH_HOST:
|
||||||
|
SSH_TARGET = f"{SYNC_SSH_USER}@{SYNC_SSH_HOST}"
|
||||||
|
else:
|
||||||
|
SSH_TARGET = None
|
||||||
|
|
||||||
|
DOMAIN = sys.argv[2] if len(sys.argv) > 2 else PORTAL_DOMAIN
|
||||||
|
|
||||||
|
if not SSH_TARGET or not DOMAIN:
|
||||||
|
print(
|
||||||
|
"Configuration manquante : renseigne SYNC_SSH_HOST (ou REMOTE_HOST) "
|
||||||
|
"et PORTAL_DOMAIN dans .env (lance 'make config' si .env n'existe pas "
|
||||||
|
"encore), ou passe-les en argument :\n"
|
||||||
|
" python3 scripts/sync-apps.py utilisateur@hote domaine",
|
||||||
|
file=sys.stderr,
|
||||||
|
)
|
||||||
|
sys.exit(1)
|
||||||
|
|
||||||
|
PALETTE = [
|
||||||
|
"#1db9c3", "#ff5a1f", "#2094f3", "#ffc230", "#00a651", "#e6721a",
|
||||||
|
"#b71c1c", "#f39c12", "#0d3b66", "#3b8a8c", "#568d34", "#609926",
|
||||||
|
"#d24939", "#0066cc", "#8e44ad", "#16a085", "#c0392b", "#2c3e50",
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
def color_of(name):
|
||||||
|
h = 0
|
||||||
|
for ch in name:
|
||||||
|
h = (h * 31 + ord(ch)) & 0xFFFFFFFF
|
||||||
|
return PALETTE[h % len(PALETTE)]
|
||||||
|
|
||||||
|
|
||||||
|
def initials_of(name):
|
||||||
|
words = name.strip().split()
|
||||||
|
if len(words) == 1:
|
||||||
|
return words[0][:2].upper()
|
||||||
|
return (words[0][0] + words[1][0]).upper()
|
||||||
|
|
||||||
|
|
||||||
|
def fetch_remote_apps():
|
||||||
|
cmd = ["ssh", "-o", "BatchMode=yes", SSH_TARGET, f"cat /etc/yunohost/portal/{DOMAIN}.json"]
|
||||||
|
result = subprocess.run(cmd, capture_output=True, text=True)
|
||||||
|
if result.returncode != 0:
|
||||||
|
print(f"Erreur SSH: {result.stderr}", file=sys.stderr)
|
||||||
|
sys.exit(1)
|
||||||
|
return json.loads(result.stdout)
|
||||||
|
|
||||||
|
|
||||||
|
def normalize_url(url):
|
||||||
|
return url.replace("https://", "").replace("http://", "").rstrip("/").lower()
|
||||||
|
|
||||||
|
|
||||||
|
def known_urls(config):
|
||||||
|
urls = set()
|
||||||
|
for app in config.get("pinned", []):
|
||||||
|
urls.add(normalize_url(app["url"]))
|
||||||
|
for group in config.get("groups", []):
|
||||||
|
for app in group["apps"]:
|
||||||
|
urls.add(normalize_url(app["url"]))
|
||||||
|
for app in config.get("ungrouped", []):
|
||||||
|
urls.add(normalize_url(app["url"]))
|
||||||
|
return urls
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
with open(CONFIG_PATH, encoding="utf-8") as f:
|
||||||
|
config = json.load(f)
|
||||||
|
|
||||||
|
remote = fetch_remote_apps()
|
||||||
|
remote_apps = remote.get("apps", {})
|
||||||
|
existing_urls = known_urls(config)
|
||||||
|
|
||||||
|
added = []
|
||||||
|
for perm_key, info in sorted(remote_apps.items()):
|
||||||
|
if not perm_key.endswith(".main"):
|
||||||
|
continue
|
||||||
|
app_id = perm_key[: -len(".main")]
|
||||||
|
if app_id == SELF_APP_ID:
|
||||||
|
continue
|
||||||
|
|
||||||
|
url = info["url"]
|
||||||
|
if not url.startswith("http"):
|
||||||
|
url = "https://" + url
|
||||||
|
if not url.endswith("/"):
|
||||||
|
url += "/"
|
||||||
|
|
||||||
|
if normalize_url(url) in existing_urls:
|
||||||
|
continue
|
||||||
|
|
||||||
|
name = info.get("label", app_id)
|
||||||
|
app = {
|
||||||
|
"id": app_id,
|
||||||
|
"name": name,
|
||||||
|
"url": url,
|
||||||
|
"color": color_of(name),
|
||||||
|
"initials": initials_of(name),
|
||||||
|
}
|
||||||
|
logo = info.get("logo")
|
||||||
|
if logo:
|
||||||
|
app["icon"] = f"https://{DOMAIN}{logo}"
|
||||||
|
|
||||||
|
config.setdefault("ungrouped", []).append(app)
|
||||||
|
added.append(name)
|
||||||
|
|
||||||
|
if not added:
|
||||||
|
print("Rien a ajouter, config.json est deja a jour.")
|
||||||
|
return
|
||||||
|
|
||||||
|
with open(CONFIG_PATH, "w", encoding="utf-8") as f:
|
||||||
|
json.dump(config, f, ensure_ascii=False, indent=2)
|
||||||
|
f.write("\n")
|
||||||
|
|
||||||
|
print(f"{len(added)} application(s) ajoutee(s) dans \"ungrouped\" :")
|
||||||
|
for name in added:
|
||||||
|
print(f" - {name}")
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
||||||
+160
@@ -0,0 +1,160 @@
|
|||||||
|
const COLLAPSE_STORAGE_KEY = "yunohost-portal-collapsed-groups";
|
||||||
|
|
||||||
|
function loadCollapsedState() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(COLLAPSE_STORAGE_KEY)) || {};
|
||||||
|
} catch (e) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveCollapsedState(state) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(state));
|
||||||
|
} catch (e) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function guessFaviconUrl(appUrl) {
|
||||||
|
try {
|
||||||
|
return new URL("favicon.ico", new URL(appUrl, window.location.href)).href;
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showInitialsFallback(icon, app) {
|
||||||
|
icon.innerHTML = "";
|
||||||
|
icon.style.background = app.color || "#8e8e8e";
|
||||||
|
icon.textContent = app.initials || app.name.slice(0, 2).toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function tileNode(app) {
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.className = "tile";
|
||||||
|
a.href = app.url;
|
||||||
|
|
||||||
|
const icon = document.createElement("div");
|
||||||
|
icon.className = "tile-icon";
|
||||||
|
|
||||||
|
const iconSrc = app.icon || guessFaviconUrl(app.url);
|
||||||
|
if (iconSrc) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = iconSrc;
|
||||||
|
img.alt = "";
|
||||||
|
img.addEventListener("error", () => showInitialsFallback(icon, app), { once: true });
|
||||||
|
icon.appendChild(img);
|
||||||
|
} else {
|
||||||
|
showInitialsFallback(icon, app);
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = document.createElement("div");
|
||||||
|
name.className = "tile-name";
|
||||||
|
name.textContent = app.name;
|
||||||
|
|
||||||
|
a.appendChild(icon);
|
||||||
|
a.appendChild(name);
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupNode(group, collapsedState) {
|
||||||
|
const wrapper = document.createElement("section");
|
||||||
|
wrapper.className = "group";
|
||||||
|
const isCollapsed = collapsedState[group.id] ?? group.collapsed ?? false;
|
||||||
|
if (isCollapsed) wrapper.classList.add("collapsed");
|
||||||
|
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "group-header";
|
||||||
|
|
||||||
|
const toggle = document.createElement("span");
|
||||||
|
toggle.className = "group-toggle";
|
||||||
|
toggle.textContent = "▾";
|
||||||
|
|
||||||
|
const title = document.createElement("span");
|
||||||
|
title.className = "group-title";
|
||||||
|
title.textContent = group.name;
|
||||||
|
|
||||||
|
const count = document.createElement("span");
|
||||||
|
count.className = "group-count";
|
||||||
|
count.textContent = `(${group.apps.length})`;
|
||||||
|
|
||||||
|
header.appendChild(toggle);
|
||||||
|
header.appendChild(title);
|
||||||
|
header.appendChild(count);
|
||||||
|
|
||||||
|
header.addEventListener("click", () => {
|
||||||
|
const nowCollapsed = wrapper.classList.toggle("collapsed");
|
||||||
|
collapsedState[group.id] = nowCollapsed;
|
||||||
|
saveCollapsedState(collapsedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
const grid = document.createElement("div");
|
||||||
|
grid.className = "tile-grid";
|
||||||
|
group.apps.forEach((app) => grid.appendChild(tileNode(app)));
|
||||||
|
|
||||||
|
wrapper.appendChild(header);
|
||||||
|
wrapper.appendChild(grid);
|
||||||
|
return wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(config) {
|
||||||
|
document.getElementById("user-fullname").textContent = config.user.username;
|
||||||
|
document.getElementById("user-sub").textContent = config.user.fullname;
|
||||||
|
document.getElementById("user-domain").textContent = `${config.user.username}@${config.user.domain}`;
|
||||||
|
|
||||||
|
const adminUrl = config.portal.adminUrl || "/yunohost/admin/";
|
||||||
|
document.getElementById("admin-btn").href = adminUrl;
|
||||||
|
document.getElementById("footer-admin").href = adminUrl;
|
||||||
|
document.getElementById("footer-edit-profile").href = config.portal.editProfileUrl || "#";
|
||||||
|
document.getElementById("edit-profile").href = config.portal.editProfileUrl || "#";
|
||||||
|
document.getElementById("footer-doc").href = config.portal.documentationUrl || "#";
|
||||||
|
document.getElementById("footer-support").href = config.portal.supportUrl || "#";
|
||||||
|
|
||||||
|
const logoutUrl = config.portal.logoutUrl || "/yunohost/portalapi/logout";
|
||||||
|
document.getElementById("logout-btn").addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
fetch(logoutUrl, { credentials: "same-origin" }).finally(() => {
|
||||||
|
window.location.href = "/yunohost/sso/";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const app = document.getElementById("app");
|
||||||
|
app.innerHTML = "";
|
||||||
|
|
||||||
|
const collapsedState = loadCollapsedState();
|
||||||
|
|
||||||
|
if (config.pinned && config.pinned.length) {
|
||||||
|
const section = document.createElement("section");
|
||||||
|
section.className = "pinned-section";
|
||||||
|
const grid = document.createElement("div");
|
||||||
|
grid.className = "tile-grid";
|
||||||
|
config.pinned.forEach((appItem) => grid.appendChild(tileNode(appItem)));
|
||||||
|
section.appendChild(grid);
|
||||||
|
app.appendChild(section);
|
||||||
|
}
|
||||||
|
|
||||||
|
const groups = [...(config.groups || [])];
|
||||||
|
groups.forEach((group) => {
|
||||||
|
app.appendChild(groupNode(group, collapsedState));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (config.ungrouped && config.ungrouped.length) {
|
||||||
|
const section = document.createElement("section");
|
||||||
|
section.className = "ungrouped-section";
|
||||||
|
const grid = document.createElement("div");
|
||||||
|
grid.className = "tile-grid";
|
||||||
|
config.ungrouped.forEach((appItem) => grid.appendChild(tileNode(appItem)));
|
||||||
|
section.appendChild(grid);
|
||||||
|
app.appendChild(section);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch("config.json")
|
||||||
|
.then((r) => r.json())
|
||||||
|
.then(render)
|
||||||
|
.catch((err) => {
|
||||||
|
document.getElementById("app").textContent =
|
||||||
|
"Erreur de chargement de la configuration (config.json).";
|
||||||
|
console.error(err);
|
||||||
|
});
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"portal": {
|
||||||
|
"logoText": "YUNO\nHOST",
|
||||||
|
"adminUrl": "/yunohost/admin/",
|
||||||
|
"editProfileUrl": "/yunohost/sso/edit",
|
||||||
|
"logoutUrl": "/yunohost/portalapi/logout",
|
||||||
|
"documentationUrl": "https://yunohost.org/docs",
|
||||||
|
"supportUrl": "https://yunohost.org/help"
|
||||||
|
},
|
||||||
|
"user": {
|
||||||
|
"fullname": "Nom complet",
|
||||||
|
"username": "utilisateur",
|
||||||
|
"domain": "domaine.exemple"
|
||||||
|
},
|
||||||
|
"pinned": [],
|
||||||
|
"groups": [
|
||||||
|
{
|
||||||
|
"id": "exemple",
|
||||||
|
"name": "Exemple de groupe",
|
||||||
|
"collapsed": false,
|
||||||
|
"apps": [
|
||||||
|
{
|
||||||
|
"id": "monapp",
|
||||||
|
"name": "Mon App",
|
||||||
|
"url": "https://monapp.domaine.exemple/",
|
||||||
|
"color": "#2196f3",
|
||||||
|
"initials": "MA"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ungrouped": []
|
||||||
|
}
|
||||||
+339
@@ -0,0 +1,339 @@
|
|||||||
|
:root {
|
||||||
|
--purple: #4c2b8f;
|
||||||
|
--purple-dark: #3a2070;
|
||||||
|
--bg: #ffffff;
|
||||||
|
--panel-bg: #f6f6f6;
|
||||||
|
--tile-bg: #efefef;
|
||||||
|
--tile-hover: #e2e2e2;
|
||||||
|
--text: #1a1a1a;
|
||||||
|
--muted: #6b6b6b;
|
||||||
|
--border: #dcdcdc;
|
||||||
|
--danger: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-topbar h1 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
min-width: 90px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.saved { color: #2f855a; }
|
||||||
|
.status.error { color: var(--danger); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background: none;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--purple);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--purple-dark); }
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--purple);
|
||||||
|
border-color: var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-root {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-card {
|
||||||
|
background: var(--panel-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 14px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-card.drag-over {
|
||||||
|
outline: 2px dashed var(--purple);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-card.dragging {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-handle {
|
||||||
|
cursor: grab;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 18px;
|
||||||
|
user-select: none;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-name-input {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: transparent;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-name-input:hover,
|
||||||
|
.group-name-input:focus {
|
||||||
|
border-color: var(--border);
|
||||||
|
background: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-collapsed-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--tile-hover);
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||||
|
gap: 14px;
|
||||||
|
min-height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-grid.drag-over {
|
||||||
|
background: rgba(76, 43, 143, 0.06);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-tile {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 14px 8px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--tile-bg);
|
||||||
|
cursor: grab;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-tile.dragging {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-tile .remove-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.app-tile .remove-btn:hover { background: var(--danger); }
|
||||||
|
|
||||||
|
.tile-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-name {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.25;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-tile {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px dashed var(--border);
|
||||||
|
min-height: 96px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 28px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.add-tile:hover {
|
||||||
|
border-color: var(--purple);
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ungrouped-section {
|
||||||
|
margin-top: 32px;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ungrouped-section h2 {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinned-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinned-section h2 {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-group-btn {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px dashed var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.add-group-btn:hover {
|
||||||
|
border-color: var(--purple);
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 24px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form h3 {
|
||||||
|
margin: 0 0 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form input {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Éditeur du portail</title>
|
||||||
|
<link rel="stylesheet" href="editor.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="editor-topbar">
|
||||||
|
<h1>Éditeur du portail</h1>
|
||||||
|
<div class="editor-actions">
|
||||||
|
<span id="status" class="status"></span>
|
||||||
|
<a href="/" target="_blank" class="btn btn-outline">Aperçu ↗</a>
|
||||||
|
<button id="save-btn" class="btn btn-outline">Enregistrer</button>
|
||||||
|
<button id="export-btn" class="btn btn-primary">Exporter</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="editor-root"></main>
|
||||||
|
|
||||||
|
<script src="editor.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+435
@@ -0,0 +1,435 @@
|
|||||||
|
let state = null;
|
||||||
|
let dirty = false;
|
||||||
|
let dragSource = null; // { appId } or { groupId } currently being dragged
|
||||||
|
|
||||||
|
const PALETTE = [
|
||||||
|
"#1db9c3", "#ff5a1f", "#2094f3", "#ffc230", "#00a651", "#e6721a",
|
||||||
|
"#b71c1c", "#f39c12", "#0d3b66", "#3b8a8c", "#568d34", "#609926",
|
||||||
|
"#d24939", "#0066cc", "#8e44ad", "#16a085", "#c0392b", "#2c3e50",
|
||||||
|
];
|
||||||
|
|
||||||
|
function uid(prefix) {
|
||||||
|
return `${prefix}-${Math.random().toString(36).slice(2, 8)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initialsOf(name) {
|
||||||
|
const words = name.trim().split(/\s+/);
|
||||||
|
if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
|
||||||
|
return (words[0][0] + words[1][0]).toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function colorOf(name) {
|
||||||
|
let hash = 0;
|
||||||
|
for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
|
||||||
|
return PALETTE[hash % PALETTE.length];
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(text, kind) {
|
||||||
|
const el = document.getElementById("status");
|
||||||
|
el.textContent = text;
|
||||||
|
el.className = "status" + (kind ? " " + kind : "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function markDirty() {
|
||||||
|
dirty = true;
|
||||||
|
setStatus("Modifications non enregistrées");
|
||||||
|
}
|
||||||
|
|
||||||
|
function findAppLocation(appId) {
|
||||||
|
const pinnedIdx = (state.pinned || []).findIndex((a) => a.id === appId);
|
||||||
|
if (pinnedIdx !== -1) return { list: state.pinned, index: pinnedIdx };
|
||||||
|
for (const group of state.groups) {
|
||||||
|
const idx = group.apps.findIndex((a) => a.id === appId);
|
||||||
|
if (idx !== -1) return { list: group.apps, index: idx };
|
||||||
|
}
|
||||||
|
const idx = state.ungrouped.findIndex((a) => a.id === appId);
|
||||||
|
if (idx !== -1) return { list: state.ungrouped, index: idx };
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeDropIndexGrid(containerEl, clientX, clientY) {
|
||||||
|
const items = Array.from(containerEl.querySelectorAll(":scope > .app-tile"));
|
||||||
|
if (items.length === 0) return 0;
|
||||||
|
let closestIndex = items.length;
|
||||||
|
let closestDist = Infinity;
|
||||||
|
items.forEach((item, i) => {
|
||||||
|
const rect = item.getBoundingClientRect();
|
||||||
|
const cx = rect.left + rect.width / 2;
|
||||||
|
const cy = rect.top + rect.height / 2;
|
||||||
|
const dist = Math.hypot(clientX - cx, clientY - cy);
|
||||||
|
if (dist < closestDist) {
|
||||||
|
closestDist = dist;
|
||||||
|
closestIndex = clientX < cx ? i : i + 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return closestIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeDropIndexList(containerEl, selector, clientY) {
|
||||||
|
const items = Array.from(containerEl.querySelectorAll(selector));
|
||||||
|
if (items.length === 0) return 0;
|
||||||
|
let closestIndex = items.length;
|
||||||
|
let closestDist = Infinity;
|
||||||
|
items.forEach((item, i) => {
|
||||||
|
const rect = item.getBoundingClientRect();
|
||||||
|
const cy = rect.top + rect.height / 2;
|
||||||
|
const dist = Math.abs(clientY - cy);
|
||||||
|
if (dist < closestDist) {
|
||||||
|
closestDist = dist;
|
||||||
|
closestIndex = clientY < cy ? i : i + 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return closestIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTile(app) {
|
||||||
|
const tile = document.createElement("div");
|
||||||
|
tile.className = "app-tile";
|
||||||
|
tile.draggable = true;
|
||||||
|
tile.dataset.appId = app.id;
|
||||||
|
|
||||||
|
tile.addEventListener("dragstart", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dragSource = { appId: app.id };
|
||||||
|
e.dataTransfer.effectAllowed = "move";
|
||||||
|
e.dataTransfer.setData("text/plain", app.id);
|
||||||
|
tile.classList.add("dragging");
|
||||||
|
});
|
||||||
|
tile.addEventListener("dragend", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
tile.classList.remove("dragging");
|
||||||
|
dragSource = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeBtn = document.createElement("button");
|
||||||
|
removeBtn.className = "remove-btn";
|
||||||
|
removeBtn.textContent = "✕";
|
||||||
|
removeBtn.title = "Supprimer cette application";
|
||||||
|
removeBtn.addEventListener("click", () => {
|
||||||
|
if (!confirm(`Supprimer "${app.name}" définitivement ?`)) return;
|
||||||
|
const loc = findAppLocation(app.id);
|
||||||
|
if (loc) loc.list.splice(loc.index, 1);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
const icon = document.createElement("div");
|
||||||
|
icon.className = "tile-icon";
|
||||||
|
if (app.icon) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = app.icon;
|
||||||
|
img.alt = "";
|
||||||
|
icon.appendChild(img);
|
||||||
|
} else {
|
||||||
|
icon.style.background = app.color || "#8e8e8e";
|
||||||
|
icon.textContent = app.initials || initialsOf(app.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = document.createElement("div");
|
||||||
|
name.className = "tile-name";
|
||||||
|
name.textContent = app.name;
|
||||||
|
|
||||||
|
tile.appendChild(removeBtn);
|
||||||
|
tile.appendChild(icon);
|
||||||
|
tile.appendChild(name);
|
||||||
|
return tile;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAddTile(onAdd) {
|
||||||
|
const add = document.createElement("button");
|
||||||
|
add.className = "add-tile";
|
||||||
|
add.type = "button";
|
||||||
|
add.textContent = "+";
|
||||||
|
add.title = "Ajouter une application";
|
||||||
|
add.addEventListener("click", onAdd);
|
||||||
|
return add;
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachGridDropzone(gridEl, targetListGetter) {
|
||||||
|
gridEl.addEventListener("dragover", (e) => {
|
||||||
|
if (!dragSource || !dragSource.appId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
gridEl.classList.add("drag-over");
|
||||||
|
});
|
||||||
|
gridEl.addEventListener("dragleave", () => {
|
||||||
|
gridEl.classList.remove("drag-over");
|
||||||
|
});
|
||||||
|
gridEl.addEventListener("drop", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
gridEl.classList.remove("drag-over");
|
||||||
|
if (!dragSource || !dragSource.appId) return;
|
||||||
|
const appId = dragSource.appId;
|
||||||
|
const loc = findAppLocation(appId);
|
||||||
|
if (!loc) return;
|
||||||
|
const [app] = loc.list.splice(loc.index, 1);
|
||||||
|
const targetList = targetListGetter();
|
||||||
|
const dropIndex = computeDropIndexGrid(gridEl, e.clientX, e.clientY);
|
||||||
|
targetList.splice(Math.min(dropIndex, targetList.length), 0, app);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAppForm(onSubmit) {
|
||||||
|
const backdrop = document.createElement("div");
|
||||||
|
backdrop.className = "app-form-backdrop";
|
||||||
|
|
||||||
|
const form = document.createElement("form");
|
||||||
|
form.className = "app-form";
|
||||||
|
form.innerHTML = `
|
||||||
|
<h3>Nouvelle application</h3>
|
||||||
|
<label>Nom
|
||||||
|
<input type="text" name="name" required placeholder="Ex: Navidrome" />
|
||||||
|
</label>
|
||||||
|
<label>URL
|
||||||
|
<input type="url" name="url" required placeholder="https://sous-domaine.tondomaine.exemple/" />
|
||||||
|
</label>
|
||||||
|
<label>Icône (optionnel, sinon détection auto)
|
||||||
|
<input type="url" name="icon" placeholder="https://..." />
|
||||||
|
</label>
|
||||||
|
<div class="app-form-actions">
|
||||||
|
<button type="button" class="btn btn-outline" data-cancel>Annuler</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Ajouter</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
backdrop.appendChild(form);
|
||||||
|
document.body.appendChild(backdrop);
|
||||||
|
form.querySelector('input[name="name"]').focus();
|
||||||
|
|
||||||
|
backdrop.addEventListener("click", (e) => {
|
||||||
|
if (e.target === backdrop) backdrop.remove();
|
||||||
|
});
|
||||||
|
form.querySelector("[data-cancel]").addEventListener("click", () => backdrop.remove());
|
||||||
|
|
||||||
|
form.addEventListener("submit", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const data = new FormData(form);
|
||||||
|
const name = data.get("name").trim();
|
||||||
|
const url = data.get("url").trim();
|
||||||
|
const icon = data.get("icon").trim();
|
||||||
|
if (!name || !url) return;
|
||||||
|
const app = {
|
||||||
|
id: uid("app"),
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
color: colorOf(name),
|
||||||
|
initials: initialsOf(name),
|
||||||
|
};
|
||||||
|
if (icon) app.icon = icon;
|
||||||
|
onSubmit(app);
|
||||||
|
backdrop.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGroup(group, index) {
|
||||||
|
const card = document.createElement("section");
|
||||||
|
card.className = "group-card";
|
||||||
|
card.draggable = true;
|
||||||
|
card.dataset.groupId = group.id;
|
||||||
|
|
||||||
|
card.addEventListener("dragstart", (e) => {
|
||||||
|
dragSource = { groupId: group.id };
|
||||||
|
e.dataTransfer.effectAllowed = "move";
|
||||||
|
e.dataTransfer.setData("text/plain", group.id);
|
||||||
|
card.classList.add("dragging");
|
||||||
|
});
|
||||||
|
card.addEventListener("dragend", () => {
|
||||||
|
card.classList.remove("dragging");
|
||||||
|
dragSource = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
const header = document.createElement("div");
|
||||||
|
header.className = "group-header";
|
||||||
|
|
||||||
|
const handle = document.createElement("span");
|
||||||
|
handle.className = "drag-handle";
|
||||||
|
handle.textContent = "⠿";
|
||||||
|
handle.title = "Glisser pour réordonner les groupes";
|
||||||
|
|
||||||
|
const nameInput = document.createElement("input");
|
||||||
|
nameInput.className = "group-name-input";
|
||||||
|
nameInput.value = group.name;
|
||||||
|
nameInput.draggable = false;
|
||||||
|
nameInput.addEventListener("input", () => {
|
||||||
|
group.name = nameInput.value;
|
||||||
|
markDirty();
|
||||||
|
});
|
||||||
|
nameInput.addEventListener("mousedown", (e) => e.stopPropagation());
|
||||||
|
|
||||||
|
const collapsedLabel = document.createElement("label");
|
||||||
|
collapsedLabel.className = "group-collapsed-label";
|
||||||
|
const collapsedCheckbox = document.createElement("input");
|
||||||
|
collapsedCheckbox.type = "checkbox";
|
||||||
|
collapsedCheckbox.checked = !!group.collapsed;
|
||||||
|
collapsedCheckbox.addEventListener("change", () => {
|
||||||
|
group.collapsed = collapsedCheckbox.checked;
|
||||||
|
markDirty();
|
||||||
|
});
|
||||||
|
collapsedLabel.appendChild(collapsedCheckbox);
|
||||||
|
collapsedLabel.appendChild(document.createTextNode("replié par défaut"));
|
||||||
|
|
||||||
|
const deleteBtn = document.createElement("button");
|
||||||
|
deleteBtn.className = "icon-btn";
|
||||||
|
deleteBtn.textContent = "✕";
|
||||||
|
deleteBtn.title = "Supprimer le groupe (les apps repassent en \"Sans groupe\")";
|
||||||
|
deleteBtn.addEventListener("click", () => {
|
||||||
|
if (!confirm(`Supprimer le groupe "${group.name}" ? Les apps repasseront en "Sans groupe".`)) return;
|
||||||
|
state.ungrouped.push(...group.apps);
|
||||||
|
state.groups.splice(index, 1);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
header.appendChild(handle);
|
||||||
|
header.appendChild(nameInput);
|
||||||
|
header.appendChild(collapsedLabel);
|
||||||
|
header.appendChild(deleteBtn);
|
||||||
|
|
||||||
|
const grid = document.createElement("div");
|
||||||
|
grid.className = "tile-grid";
|
||||||
|
group.apps.forEach((app) => grid.appendChild(renderTile(app)));
|
||||||
|
grid.appendChild(renderAddTile(() => {
|
||||||
|
openAppForm((app) => {
|
||||||
|
group.apps.push(app);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
attachGridDropzone(grid, () => group.apps);
|
||||||
|
|
||||||
|
card.appendChild(header);
|
||||||
|
card.appendChild(grid);
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachGroupsDropzone(containerEl) {
|
||||||
|
containerEl.addEventListener("dragover", (e) => {
|
||||||
|
if (!dragSource || !dragSource.groupId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
containerEl.addEventListener("drop", (e) => {
|
||||||
|
if (!dragSource || !dragSource.groupId) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const groupId = dragSource.groupId;
|
||||||
|
const fromIndex = state.groups.findIndex((g) => g.id === groupId);
|
||||||
|
if (fromIndex === -1) return;
|
||||||
|
const [group] = state.groups.splice(fromIndex, 1);
|
||||||
|
const dropIndex = computeDropIndexList(containerEl, ".group-card", e.clientY);
|
||||||
|
state.groups.splice(Math.min(dropIndex, state.groups.length), 0, group);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
const root = document.getElementById("editor-root");
|
||||||
|
root.innerHTML = "";
|
||||||
|
|
||||||
|
const pinnedSection = document.createElement("section");
|
||||||
|
pinnedSection.className = "pinned-section";
|
||||||
|
const pinnedHeading = document.createElement("h2");
|
||||||
|
pinnedHeading.textContent = "Épinglées (en haut de la page)";
|
||||||
|
pinnedSection.appendChild(pinnedHeading);
|
||||||
|
|
||||||
|
const pinnedGrid = document.createElement("div");
|
||||||
|
pinnedGrid.className = "tile-grid";
|
||||||
|
(state.pinned || []).forEach((app) => pinnedGrid.appendChild(renderTile(app)));
|
||||||
|
pinnedGrid.appendChild(renderAddTile(() => {
|
||||||
|
openAppForm((app) => {
|
||||||
|
state.pinned = state.pinned || [];
|
||||||
|
state.pinned.push(app);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
attachGridDropzone(pinnedGrid, () => (state.pinned = state.pinned || []));
|
||||||
|
pinnedSection.appendChild(pinnedGrid);
|
||||||
|
root.appendChild(pinnedSection);
|
||||||
|
|
||||||
|
const groupsList = document.createElement("div");
|
||||||
|
groupsList.id = "groups-list";
|
||||||
|
state.groups.forEach((group, i) => groupsList.appendChild(renderGroup(group, i)));
|
||||||
|
attachGroupsDropzone(groupsList);
|
||||||
|
root.appendChild(groupsList);
|
||||||
|
|
||||||
|
const addGroupBtn = document.createElement("button");
|
||||||
|
addGroupBtn.className = "add-group-btn";
|
||||||
|
addGroupBtn.type = "button";
|
||||||
|
addGroupBtn.textContent = "+ Nouveau groupe";
|
||||||
|
addGroupBtn.addEventListener("click", () => {
|
||||||
|
state.groups.push({ id: uid("group"), name: "Nouveau groupe", collapsed: false, apps: [] });
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
root.appendChild(addGroupBtn);
|
||||||
|
|
||||||
|
const ungroupedSection = document.createElement("section");
|
||||||
|
ungroupedSection.className = "ungrouped-section";
|
||||||
|
const heading = document.createElement("h2");
|
||||||
|
heading.textContent = "Sans groupe";
|
||||||
|
ungroupedSection.appendChild(heading);
|
||||||
|
|
||||||
|
const ungroupedGrid = document.createElement("div");
|
||||||
|
ungroupedGrid.className = "tile-grid";
|
||||||
|
state.ungrouped.forEach((app) => ungroupedGrid.appendChild(renderTile(app)));
|
||||||
|
ungroupedGrid.appendChild(renderAddTile(() => {
|
||||||
|
openAppForm((app) => {
|
||||||
|
state.ungrouped.push(app);
|
||||||
|
markDirty();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
attachGridDropzone(ungroupedGrid, () => state.ungrouped);
|
||||||
|
ungroupedSection.appendChild(ungroupedGrid);
|
||||||
|
|
||||||
|
root.appendChild(ungroupedSection);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
const res = await fetch("config.json", { cache: "no-store" });
|
||||||
|
state = await res.json();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function save() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("/__save", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(state, null, 2),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error(await res.text());
|
||||||
|
dirty = false;
|
||||||
|
setStatus("Enregistré ✓", "saved");
|
||||||
|
setTimeout(() => setStatus(""), 2000);
|
||||||
|
} catch (err) {
|
||||||
|
setStatus("Erreur d'enregistrement", "error");
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function exportToOutput() {
|
||||||
|
await save();
|
||||||
|
try {
|
||||||
|
const res = await fetch("/__export", { method: "POST" });
|
||||||
|
if (!res.ok) throw new Error(await res.text());
|
||||||
|
setStatus("Exporté vers output/ ✓", "saved");
|
||||||
|
setTimeout(() => setStatus(""), 2500);
|
||||||
|
} catch (err) {
|
||||||
|
setStatus("Erreur d'export", "error");
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("save-btn").addEventListener("click", save);
|
||||||
|
document.getElementById("export-btn").addEventListener("click", exportToOutput);
|
||||||
|
|
||||||
|
window.addEventListener("beforeunload", (e) => {
|
||||||
|
if (dirty) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.returnValue = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
load();
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Portail</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="brand">
|
||||||
|
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 85" aria-hidden="true">
|
||||||
|
<path d="M97,51c-2.02,4.98-8.33,5.67-14,7c-0.609,6.29,3.05,10.95-1,16c-6.41-0.26-7.471-5.859-7-13c-1,0-2,0-3,0
|
||||||
|
c-2.09,2.77,0.9,4.52,0,8c-1.12,4.34-7.88,7.91-11,7c-2.18-0.641-5.96-6.63-5-12c2.82-2.71,2.76,3.12,6,3c5.05-7.84-9.63-8.55-8-17
|
||||||
|
c1.24-6.42,11.66-9.66,15-1c1.54,4.21-5.17,0.16-5,3c-0.279,1.62,0.95,1.72,1,3c2.52,0.77,1.68-2.16,3-3c1.859-1.17,3.09-0.75,6-1
|
||||||
|
c2.45-2.55,1.08-8.92,4-11c3.87,0.46,6.08,2.59,6,7C91.01,46.109,94.3,46.05,97,51z" />
|
||||||
|
<path d="M87,13c0.609,3.21,2.32,4.98,2,8c-0.34,3.21-2.9,8.83-4,9c-1.17,0.18-1.34,1.78-2,2
|
||||||
|
c-4.66,1.57-12.391-1.48-14-7c-1.16-3.97,1.9-13.37,4-17c1.3-2.25,1.221-2.99,5-4c2.41-0.65,3.65-2.25,6,0
|
||||||
|
c0.471,0.45,1.3,0.49,1.85,0.89c-0.199,0,2,3.14,2.15,4.11C88.32,11.07,86.77,11.78,87,13z M79,22c1.779-1.89,3.29-4.04,3-8
|
||||||
|
C77.49,12.33,74.67,21.3,79,22z" />
|
||||||
|
<path d="M67,21c-0.07,5.81,2.48,10.7,0,15c-6.73,1.06-7.24-4.1-11-6c-1.939,1.39-1.49,5.18-3,7
|
||||||
|
c-3.78,0.44-4.69-1.97-7-3c2.47-7.81,1.26-18.98,2-26c8.58-0.58,7.68,8.32,12,12c0.52-4.34-0.359-15.52,3-20
|
||||||
|
C70.33,3.29,67.09,12.99,67,21z" />
|
||||||
|
<path d="M52,55c1.93,8.41,0.12,22.689-12,20c-1.59-0.35-8.42-5.22-9-7c-1.62-5,0.34-13.34,3-16
|
||||||
|
C39.03,46.97,45.48,50.359,52,55z M39,66c4.55,0.96,6.3-4.2,4-7C39.37,59.03,38.61,61.939,39,66z" />
|
||||||
|
<path d="M39,8c5.58,0.9,6.4,6.81,5,15c-1.43,8.38-3.02,14.59-9,15c-9.57,0.65-12.25-16.69-9-29
|
||||||
|
c8.32,1.27,6.59,10.36,6,17c2.71,0.83,2.2-0.85,3-2C37.05,21.04,37.82,13.61,39,8z" />
|
||||||
|
<path d="M28,62c0.1,5.67,4.4,11.33,2,17c-4.32-1.01-6.57-4.09-9-7c-3.15-0.48-2.26,3.07-6,2
|
||||||
|
c-0.67,5.061,2.29,7.57-1,10c-4.7-0.63-6.66-4-8-8c-2.61-1.38-5.48-2.52-6-6c0.14-3.53,4.48-2.85,7-4c0.47-5.53-1.41-13.41,2-16
|
||||||
|
c8.31,0.49,8.21,7.13,7,15c4.36,0.29,4.94-4.35,5-7c0.06-2.43-1.82-8.26,2-11c3.06-0.73,2.94,1.73,6,1
|
||||||
|
C32.35,52.7,27.92,57.439,28,62z" />
|
||||||
|
<path d="M24,12c1.07,7.07-3.86,8.14-6,12c0.21,6.88-0.47,12.86-2,18c-5.86-1.32-8.7-10.38-6-17
|
||||||
|
c-0.33-3.52-5.26-4.22-7-8c-0.3-0.66-0.47-4.43-1-7C1.09,5.63,0.55,4.31,3,1c8.16-0.49,7.21,8.13,9,14c5.05,0.39,3.91-5.42,8-6
|
||||||
|
C20.98,10.35,22.67,11,24,12z" />
|
||||||
|
</svg>
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="user-name">
|
||||||
|
<span id="user-fullname">utilisateur</span>
|
||||||
|
<a href="#" id="edit-profile" class="edit-link" title="Éditer mon profil">✎</a>
|
||||||
|
</div>
|
||||||
|
<div class="user-sub" id="user-sub">Nom complet</div>
|
||||||
|
<div class="user-sub" id="user-domain">utilisateur@domaine.exemple</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<a href="#" id="admin-btn" class="btn btn-outline">Administration</a>
|
||||||
|
<a href="#" id="logout-btn" class="btn btn-primary">
|
||||||
|
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M10 17v-2H4V9h6V7l5 5-5 5z" />
|
||||||
|
<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7v-2h7V5h-7V3z" />
|
||||||
|
</svg>
|
||||||
|
Déconnexion
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="app"></main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<a href="#" id="footer-edit-profile">Éditer mon profil</a>
|
||||||
|
<a href="#" id="footer-doc">Documentation</a>
|
||||||
|
<a href="#" id="footer-support">Support</a>
|
||||||
|
<a href="#" id="footer-admin">Administration</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+273
@@ -0,0 +1,273 @@
|
|||||||
|
:root {
|
||||||
|
--purple: #4c2b8f;
|
||||||
|
--purple-dark: #3a2070;
|
||||||
|
--bg: #ffffff;
|
||||||
|
--tile-bg: #efefef;
|
||||||
|
--tile-hover: #e2e2e2;
|
||||||
|
--text: #1a1a1a;
|
||||||
|
--muted: #6b6b6b;
|
||||||
|
--border: #e2e2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 54px;
|
||||||
|
width: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo path {
|
||||||
|
fill: #111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-link {
|
||||||
|
color: var(--muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-sub {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
fill: currentColor;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--purple);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--purple-dark); }
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--purple);
|
||||||
|
border-color: var(--purple);
|
||||||
|
}
|
||||||
|
.btn-outline:hover { background: rgba(76, 43, 143, 0.08); }
|
||||||
|
|
||||||
|
main#app {
|
||||||
|
padding: 8px 32px 32px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-toggle {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group.collapsed .group-toggle {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-count {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: grid-template-rows 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group.collapsed .tile-grid {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text);
|
||||||
|
padding: 20px 12px 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--tile-bg);
|
||||||
|
transition: background 0.15s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:hover {
|
||||||
|
background: var(--tile-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: transparent;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ungrouped-section {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinned-section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: var(--muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.footer a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.topbar {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main#app {
|
||||||
|
padding: 0 20px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon {
|
||||||
|
width: 84px;
|
||||||
|
height: 84px;
|
||||||
|
font-size: 26px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile-icon img {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user