diff --git a/test_tube_scanner/home/static/css/doc_media.css b/test_tube_scanner/home/static/css/doc_media.css new file mode 100644 index 0000000..ede75a2 --- /dev/null +++ b/test_tube_scanner/home/static/css/doc_media.css @@ -0,0 +1,114 @@ +/* ============================================================ + doc_media.css + Styles spécifiques à la page "Gestionnaire de médias". + Dépend de doc_database.css + doc_calibration.css + + doc_experiments.css + + doc_scanning.css + + doc_results.css. + ============================================================ */ + +/* ─── Badge purple ─── */ +.badge-purple { + background: rgba(188,140,255,.12); + color: var(--accent-purple); + border: 1px solid rgba(188,140,255,.3); +} + +/* ─── Prévisualisation grille ─── */ +.grid-preview { + display: flex; + align-items: center; + gap: 10px; + margin-top: 14px; + flex-wrap: wrap; +} + +.gp-col { + width: 28px; height: 28px; + border-radius: 50%; + background: rgba(188,140,255,.12); + border: 1px solid rgba(188,140,255,.25); + color: var(--accent-purple); + display: flex; align-items: center; justify-content: center; + font-size: 13px; + cursor: default; +} + +/* Chaque démo de grille */ +.gp-demo { + display: grid; + gap: 3px; + flex: 1; + min-width: 60px; + max-width: 120px; +} +.gp-demo span { + height: 22px; + border-radius: 3px; + background: rgba(188,140,255,.15); + border: 1px solid rgba(188,140,255,.2); +} +.gp-2 { grid-template-columns: repeat(2, 1fr); } +.gp-3 { grid-template-columns: repeat(3, 1fr); } +.gp-4 { grid-template-columns: repeat(4, 1fr); } + +/* ─── Contrôles lecteur vidéo ─── */ +.player-controls { + display: flex; + gap: 8px; + margin-top: 10px; + flex-wrap: wrap; +} + +.player-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + padding: 10px 16px; + border-radius: var(--radius-sm); + font-size: 11px; + font-weight: 600; + flex: 1; + min-width: 60px; + border: 1px solid var(--border); + transition: background .15s; +} +.player-btn i { font-size: 16px; } +.player-btn span { color: var(--text-secondary); } + +.btn-play { + background: rgba(63,185,80,.08); + border-color: rgba(63,185,80,.25); + color: var(--accent-green); +} +.btn-play:hover { background: rgba(63,185,80,.16); } + +.btn-pause { + background: rgba(227,179,65,.08); + border-color: rgba(227,179,65,.25); + color: var(--accent-yellow); +} +.btn-pause:hover { background: rgba(227,179,65,.16); } + +.btn-stop { + background: rgba(248,81,73,.08); + border-color: rgba(248,81,73,.25); + color: var(--accent-red); +} +.btn-stop:hover { background: rgba(248,81,73,.16); } + +/* ─── Badge export différé ─── */ +.deferred-badge { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 10px; + padding: 5px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + background: rgba(45,212,191,.08); + border: 1px solid rgba(45,212,191,.25); + color: var(--accent-teal); +} diff --git a/test_tube_scanner/home/templates/docs/doc_medias.html b/test_tube_scanner/home/templates/docs/doc_medias.html index 5256002..37e28ca 100644 --- a/test_tube_scanner/home/templates/docs/doc_medias.html +++ b/test_tube_scanner/home/templates/docs/doc_medias.html @@ -8,15 +8,280 @@ - + + {% endblock %} {% block content %} +
+ +
+
+
+ +
+
+

{% trans "Gestionnaire de médias" %}

+

{% trans "Consultation, rediffusion et export des images et vidéos" %}

+
+
+
+ + + + + +
+ + + + +
+
+ {% trans "Affichage" %} +

{% trans "Grille d'affichage" %}

+

{% trans "Contrôle situé en haut à gauche de l'interface." %}

+
+
+
+
+
+

{% trans "Nombre de colonnes" %}

+

{% trans "Réduire ou augmenter dynamiquement le nombre de colonnes d'affichage des médias." %}

+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + +
+
+ {% trans "Images" %} +

{% trans "Gestionnaire d'images" %}

+
+ + +
+

{% trans "Menu gauche — Sélection" %}

+
+
+
+
+
    +
  1. {% trans "Sélectionner la session" %}
    2. +
  2. {% trans "Cocher l'expérience" %}
    3. +
  3. {% trans "Choisir le puit" %}
    4. +
+
+
+
+
+ + +
+

{% trans "Affichage des images & export" %}

+
+ +
+
+
+

{% trans "Téléchargement unitaire" %}

+

{% trans "Chaque image affichée dispose d'un bouton de téléchargement individuel." %}

+
+
+ + +
+
+
+

+ {% trans "Exporter l'ensemble des images" %} + {% trans "ATTENTION" %} +

+
    +
  • + + {% trans "La procédure peut être longue." %} +
    • +
  • + + {% trans "Préférer l'export différé." %} +
    • +
+
+ + {% trans "Export différé recommandé" %} +
+
+
+
+
+
+ + + + +
+
+ {% trans "Vidéos" %} +

{% trans "Rediffusion de vidéos" %}

+
+ + +
+

{% trans "Menu gauche — Sélection" %}

+
+
+
+
+
    +
  1. {% trans "Sélectionner la session" %}
    2. +
  2. {% trans "Cocher l'expérience" %}
    3. +
  3. {% trans "Choisir le puit" %}
    4. +
+
+
+
+
+ + +
+

{% trans "Lecteur vidéo & export" %}

+
+ +
+
+
+

{% trans "Contrôles de lecture" %}

+ +
+
+ + {% trans "Marche" %} +
+
+ + {% trans "Pause" %} +
+
+ + {% trans "Arrêt" %} +
+
+ +
    +
  • + + {% trans "Slider vitesse de lecture" %} +
    • +
  • + + {% trans "Slider timeline (position dans la vidéo)" %} +
    • +
+
+
+ + +
+
+
+

{% trans "Téléchargements" %}

+
    +
  • + + {% trans "Télécharger l'image courante" %} +
    • +
  • + + {% trans "Télécharger la vidéo complète" %} +
    • +
+
+
+
+ + +
+
+
+
+

+ {% trans "Exporter l'ensemble des vidéos" %} + {% trans "ATTENTION" %} +

+
    +
  • + + {% trans "La procédure peut être longue." %} +
    • +
  • + + {% trans "Préférer l'export différé." %} +
    • +
+
+ + {% trans "Export différé recommandé" %} +
+
+
+
+
+
+ +
+
{% endblock %} {% block js_footer %} {{ block.super }} - - + {% endblock %}