ktyl/shift
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: merde alors

Browse Source
This commit is contained in:
Cat Flynn 2025-04-25 01:03:58 +01:00
parent 34c5b35194
commit 927837c0a4
3 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div id="side-panel"></div> <!--<div id="side-panel"></div>-->
<div id="main-panel"> <div id="main-panel">

12
sncf.json Normal file
View File

@ -0,0 +1,12 @@
{
"title": "SNCF billetier",
"interactive": true,
"characters": [
"you",
"SNCF billetier"
],
"messages":
[
]
}

93
styles.css
View File

@ -1,18 +1,13 @@
:root { :root {
--dark-purple: #271f30; --blanc: #fff;
--light-red: #ff686b; --gris: #666;
--eggshell: #dfe2cf; --noir: #000;
--ucla-blue: #4d7298;
--robin-egg-blue: #66ced6;
--vermilion: #ef3e36;
--lapis-lazuli: #235789;
--onyx: #383d3b;
--light-cyan: #e0fbfc;
--buff: #edb88b;
--eeriee-black: #1d201f;
--clear: #00000000; --clear: #00000000;
--bleu: #0055a4;
--rouge: #e1000f;
--rose-de-l-erreur: #f0f
} }
html { html {
@ -24,13 +19,14 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: var(--buff); background-color: var(--blanc);
} }
#side-panel { #side-panel {
height: 100%; height: 100%;
display: none; color: var(--noir);
color: var(--onyx); display: block;
width: 100%;
} }
#header button { #header button {
@ -39,11 +35,6 @@ body {
visibility: visible; visibility: visible;
} }
#side-panel {
display: block;
width: 100%;
}
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
display: none; display: none;
} }
@ -51,10 +42,10 @@ body {
/* on desktop only */ /* on desktop only */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
#side-panel { #side-panel {
display: block; min-width: 300px;
width: auto; width: auto;
visibility: visible; visibility: visible;
border-right: 3px solid var(--onyx); border-right: 3px solid var(--noir);
} }
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
@ -80,9 +71,8 @@ body {
#side-panel .conversation { #side-panel .conversation {
width: 100%; width: 100%;
height: 70px; height: 70px;
border-bottom: solid var(--onyx) 3px; border-bottom: solid var(--noir) 3px;
color: var(--onyx); color: var(--onyx);
padding: .5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -90,8 +80,8 @@ body {
} }
#side-panel .conversation:hover { #side-panel .conversation:hover {
background-color: var(--vermilion); background-color: var(--bleu);
color: var(--light-cyan); color: var(--blanc);
} }
#side-panel h2 { #side-panel h2 {
@ -101,7 +91,7 @@ body {
#header { #header {
position: sticky; position: sticky;
top: 0; top: 0;
border-bottom: solid var(--onyx) 3px; border-bottom: solid var(--blanc) 3px;
} }
#main-panel { #main-panel {
@ -117,7 +107,7 @@ body {
h1 { h1 {
display: inline-block; display: inline-block;
color: var(--onyx); color: var(--noir);
margin-left: 1em; margin-left: 1em;
} }
@ -136,8 +126,8 @@ h1 {
} }
.message-content.theirs { .message-content.theirs {
background-color: var(--onyx); background-color: var(--bleu);
color: var(--light-cyan); color: var(--blanc);
float: left; float: left;
@ -145,7 +135,7 @@ h1 {
} }
.message-content.theirs h3 { .message-content.theirs h3 {
color: var(--buff); color: var(--blanc);
margin: 0; margin: 0;
margin-bottom: 3px; margin-bottom: 3px;
font-size: .85em; font-size: .85em;
@ -157,20 +147,19 @@ h1 {
} }
.message-content.ours { .message-content.ours {
background-color: var(--vermilion); background-color: var(--rouge);
right: 0; right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
} }
.ours .message-text { .ours .message-text {
color: var(--light-cyan); color: var(--blanc);
} }
.system-message { .system-message {
color: var(--onyx); color: var(--gris);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -208,8 +197,11 @@ li.message {
z-index: 1; z-index: 1;
background-color: var(--light-cyan);
border-radius: 100vw; border-radius: 100vw;
color: var(--noir);
background-color: var(--blanc);
border-color: var(--gris);
} }
#input-panel input { #input-panel input {
@ -222,6 +214,7 @@ li.message {
z-index: 1; z-index: 1;
font-size: 1em; font-size: 1em;
} }
#input-panel input:focus { #input-panel input:focus {
@ -243,7 +236,7 @@ button:hover {
} }
#typing-indicator { #typing-indicator {
color: var(--eggshell); color: var(--gris);
margin: 0; margin: 0;
margin-left: 1em; 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 { .message-status {
color: var(--onyx); color: var(--gris);
position: absolute; position: absolute;
bottom: -1.75em; bottom: -1.75em;