From 927837c0a46d414fa496f4eac25e1136c73cf0a6 Mon Sep 17 00:00:00 2001 From: Cat Flynn Date: Fri, 25 Apr 2025 01:03:58 +0100 Subject: [PATCH] feat: merde alors --- index.html | 2 +- sncf.json | 12 +++++++ styles.css | 93 +++++++++++++++++++++++++++++++----------------------- 3 files changed, 67 insertions(+), 40 deletions(-) create mode 100644 sncf.json diff --git a/index.html b/index.html index 7210dfa..f88c4cc 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ -
+
diff --git a/sncf.json b/sncf.json new file mode 100644 index 0000000..76a0f76 --- /dev/null +++ b/sncf.json @@ -0,0 +1,12 @@ + +{ + "title": "SNCF billetier", + "interactive": true, + "characters": [ + "you", + "SNCF billetier" + ], + "messages": + [ + ] +} diff --git a/styles.css b/styles.css index be3285b..a5d3880 100644 --- a/styles.css +++ b/styles.css @@ -1,18 +1,13 @@ :root { - --dark-purple: #271f30; - --light-red: #ff686b; - --eggshell: #dfe2cf; - --ucla-blue: #4d7298; - --robin-egg-blue: #66ced6; - - --vermilion: #ef3e36; - --lapis-lazuli: #235789; - --onyx: #383d3b; - --light-cyan: #e0fbfc; - --buff: #edb88b; - --eeriee-black: #1d201f; + --blanc: #fff; + --gris: #666; + --noir: #000; --clear: #00000000; + --bleu: #0055a4; + --rouge: #e1000f; + + --rose-de-l-erreur: #f0f } html { @@ -24,13 +19,14 @@ body { margin: 0; height: 100%; display: flex; - background-color: var(--buff); + background-color: var(--blanc); } #side-panel { height: 100%; - display: none; - color: var(--onyx); + color: var(--noir); + display: block; + width: 100%; } #header button { @@ -39,11 +35,6 @@ body { visibility: visible; } -#side-panel { - display: block; - width: 100%; -} - #side-panel.invisible-on-mobile { display: none; } @@ -51,10 +42,10 @@ body { /* on desktop only */ @media only screen and (min-width: 768px) { #side-panel { - display: block; + min-width: 300px; width: auto; visibility: visible; - border-right: 3px solid var(--onyx); + border-right: 3px solid var(--noir); } #side-panel.invisible-on-mobile { @@ -80,9 +71,8 @@ body { #side-panel .conversation { width: 100%; height: 70px; - border-bottom: solid var(--onyx) 3px; + border-bottom: solid var(--noir) 3px; color: var(--onyx); - padding: .5em; white-space: nowrap; overflow: hidden; @@ -90,8 +80,8 @@ body { } #side-panel .conversation:hover { - background-color: var(--vermilion); - color: var(--light-cyan); + background-color: var(--bleu); + color: var(--blanc); } #side-panel h2 { @@ -101,7 +91,7 @@ body { #header { position: sticky; top: 0; - border-bottom: solid var(--onyx) 3px; + border-bottom: solid var(--blanc) 3px; } #main-panel { @@ -117,7 +107,7 @@ body { h1 { display: inline-block; - color: var(--onyx); + color: var(--noir); margin-left: 1em; } @@ -136,8 +126,8 @@ h1 { } .message-content.theirs { - background-color: var(--onyx); - color: var(--light-cyan); + background-color: var(--bleu); + color: var(--blanc); float: left; @@ -145,7 +135,7 @@ h1 { } .message-content.theirs h3 { - color: var(--buff); + color: var(--blanc); margin: 0; margin-bottom: 3px; font-size: .85em; @@ -157,20 +147,19 @@ h1 { } .message-content.ours { - background-color: var(--vermilion); + background-color: var(--rouge); right: 0; margin-bottom: 0.5em; - - border-bottom-right-radius: 0; +border-bottom-right-radius: 0; } .ours .message-text { - color: var(--light-cyan); + color: var(--blanc); } .system-message { - color: var(--onyx); + color: var(--gris); width: 100%; text-align: center; } @@ -208,8 +197,11 @@ li.message { z-index: 1; - background-color: var(--light-cyan); border-radius: 100vw; + + color: var(--noir); + background-color: var(--blanc); + border-color: var(--gris); } #input-panel input { @@ -222,6 +214,7 @@ li.message { z-index: 1; font-size: 1em; + } #input-panel input:focus { @@ -243,7 +236,7 @@ button:hover { } #typing-indicator { - color: var(--eggshell); + color: var(--gris); margin: 0; margin-left: 1em; @@ -254,8 +247,30 @@ button:hover { } +button { + background-color: var(--rouge); + color: var(--blanc); + + margin: 0.5em; + padding: 0; + flex-grow: 1; + right: 0; + font-size: 1em; + border-width: 3px; + border-style: none; +} + +button:hover { + color: var(--rouge); + background-color: var(--blanc); + border-color: var(--rouge); + border-width: 3px; + padding: 0; + border-style: solid; +} + .message-status { - color: var(--onyx); + color: var(--gris); position: absolute; bottom: -1.75em;