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 14ae21f..3e0ed3f 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 {
@@ -67,19 +58,13 @@ body {
padding: 0;
visibility: hidden;
}
-
- #side-panel .conversation {
- max-width: 300px;
- }
-
}
#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;
@@ -87,8 +72,8 @@ body {
}
#side-panel .conversation:hover {
- background-color: var(--vermilion);
- color: var(--light-cyan);
+ background-color: var(--bleu);
+ color: var(--blanc);
}
#side-panel h2 {
@@ -98,14 +83,14 @@ body {
#header {
position: sticky;
top: 0;
- border-bottom: solid var(--onyx) 3px;
+ border-bottom: solid var(--blanc) 3px;
}
#main-panel {
display: flex;
flex-direction: column;
justify-content: flex-end;
- width: calc(100% - 300px);
+ width: 100%;
}
#page {
@@ -114,7 +99,7 @@ body {
h1 {
display: inline-block;
- color: var(--onyx);
+ color: var(--noir);
margin-left: 1em;
}
@@ -133,8 +118,8 @@ h1 {
}
.message-content.theirs {
- background-color: var(--onyx);
- color: var(--light-cyan);
+ background-color: var(--bleu);
+ color: var(--blanc);
float: left;
@@ -142,7 +127,7 @@ h1 {
}
.message-content.theirs h3 {
- color: var(--buff);
+ color: var(--blanc);
margin: 0;
margin-bottom: 3px;
font-size: .85em;
@@ -154,7 +139,7 @@ h1 {
}
.message-content.ours {
- background-color: var(--vermilion);
+ background-color: var(--rouge);
right: 0;
margin-bottom: 0.5em;
@@ -163,11 +148,11 @@ h1 {
}
.ours .message-text {
- color: var(--light-cyan);
+ color: var(--blanc);
}
.system-message {
- color: var(--onyx);
+ color: var(--gris);
width: 100%;
text-align: center;
}
@@ -205,8 +190,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 {
@@ -219,6 +207,7 @@ li.message {
z-index: 1;
font-size: 1em;
+
}
#input-panel input:focus {
@@ -240,7 +229,7 @@ button:hover {
}
#typing-indicator {
- color: var(--eggshell);
+ color: var(--gris);
margin: 0;
margin-left: 1em;
@@ -251,8 +240,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;