diff --git a/ides-of-march.json b/ides-of-march.json new file mode 100644 index 0000000..fb62e35 --- /dev/null +++ b/ides-of-march.json @@ -0,0 +1,23 @@ +[ + { "character": 1, "text": "Alright, it’s time. We need to finalize the plan. Everyone good for tomorrow?" }, + { "character": 2, "text": "Yes, it has to be tomorrow. No more delays." }, + { "character": 3, "text": "Do we know exactly where he’s going to be?" }, + { "character": 4, "text": "He’s going to the Senate tomorrow for sure. I’ve convinced him to go, even though he’s been acting paranoid lately." }, + { "character": 5, "text": "Good. We need to catch him before he even suspects anything. Are we all clear on the roles?" }, + { "character": 1, "text": "I’ll signal when we’re ready. Brutus, you’ll come in last. Your presence will make it look more… noble." }, + { "character": 2, "text": "It’s not about appearances. This is about saving the Republic." }, + { "character": 3, "text": "Yeah, yeah. But we can’t forget how people will react after this. They need to see it as necessary." }, + { "character": 1, "text": "Casca, you’ll be the first to strike, as planned. You good with that?" }, + { "character": 3, "text": "Yeah, I’ve got this. One stab, clean." }, + { "character": 4, "text": "Remember, we’re all in this together. There’s no turning back now." }, + { "character": 5, "text": "What about Mark Antony? He’s always close to Caesar." }, + { "character": 1, "text": "Trebonius, you handle him. Keep him distracted outside. Just make sure he doesn’t get involved." }, + { "character": 5, "text": "Consider it done." }, + { "character": 2, "text": "Remember, this isn’t murder. It’s justice. Rome is greater than one man." }, + { "character": 3, "text": "Right. But tomorrow… it’s gonna be chaos." }, + { "character": 4, "text": "We’ll handle the fallout after. Stick to the plan." }, + { "character": 1, "text": "Tomorrow, at the Senate. Let’s end this tyranny." }, + { "character": 2, "text": "For Rome." }, + { "character": 3, "text": "For the Republic." }, + { "character": 5, "text": "For our future." } +] diff --git a/index.html b/index.html index 12047e5..519f2a5 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,26 @@ +
+ +
+

Lorem

+ Lorem ipsum blah-de-fuck +
+
+

Caesar

+ Heyy Markus-chan uwu xoxo. i heard u was in town maybe stop by +
+ + + +
+
+ @@ -18,6 +37,7 @@
+ diff --git a/lorem.json b/lorem.json new file mode 100644 index 0000000..937031d --- /dev/null +++ b/lorem.json @@ -0,0 +1,30 @@ +[ + { "character": 0, "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, + { "character": 1, "text": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, + { "character": 0, "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, + { "character": 0, "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }, + { "character": 1, "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }, + { "character": 0, "text": "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio." }, + { "character": 1, "text": "Suspendisse ut massa. Cras nec ante." }, + { "character": 0, "text": "Pellentesque a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." }, + { "character": 1, "text": "Nulla posuere. Vivamus venenatis venenatis risus." }, + { "character": 1, "text": "In pede mi, aliquet sit amet, euismod in, auctor ut, ligula." }, + { "character": 0, "text": "Aliquam dapibus tincidunt metus." }, + { "character": 1, "text": "Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem." }, + { "character": 0, "text": "Integer vitae libero ac risus egestas placerat." }, + { "character": 0, "text": "Vestibulum commodo felis quis tortor." }, + { "character": 1, "text": "Ut aliquam sollicitudin leo." }, + { "character": 0, "text": "Cras iaculis ultricies nulla." }, + { "character": 1, "text": "Donec quis dui at dolor tempor interdum." }, + { "character": 0, "text": "Vivamus vehicula nulla ut felis." }, + { "character": 1, "text": "Integer malesuada. Vestibulum in felis." }, + { "character": 1, "text": "Mauris fermentum dictum magna." }, + { "character": 0, "text": "Sed laoreet aliquam leo." }, + { "character": 0, "text": "Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit." }, + { "character": 1, "text": "Aenean auctor wisi et urna." }, + { "character": 0, "text": "Aliquam erat volutpat." }, + { "character": 1, "text": "Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus." }, + { "character": 0, "text": "Phasellus vulputate condimentum orci." }, + { "character": 1, "text": "Nullam mattis magna quis ligula." } +] + diff --git a/main.js b/main.js index e511b93..a4d060b 100644 --- a/main.js +++ b/main.js @@ -201,7 +201,7 @@ function init(messagesData) { setTypingIndicator(false); } -fetch("caesar.json") +fetch("lorem.json") .then(response => response.json()) .then(json => init(json)); diff --git a/styles.css b/styles.css index 8e9dc38..fa280cb 100644 --- a/styles.css +++ b/styles.css @@ -8,13 +8,54 @@ html { font-family: sans-serif; + height: 100%; } body { - margin-left: 0; - margin-right: 0; + margin: 0; + height: 100%; + display: flex; +} +#side-panel { + height: 100%; + background-color: red; + + width: 0; + visibility: hidden; +} + +#side-panel .conversation { + width: 300px; + height: 70px; + border: solid black 3px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#side-panel .conversation:hover { + background-color: pink; +} + +#side-panel h2 { + margin: 0; +} + +#header { + position: sticky; + top: 0; + background-color: red; +} + +#main-panel { background-color: var(--dark-purple); + float: right; + + display: flex; + flex-direction: column; + justify-content: flex-end; } #page { @@ -22,8 +63,10 @@ body { } h1 { - margin-left: 0.5em; - display: inline; + transform: translateY(.3rem); + height: 100%; + margin: 0; + display: inline-block; color: var(--eggshell); } @@ -51,7 +94,7 @@ h1 { .message-content.theirs { background-color: var(--ucla-blue); - left: 0; + float: left; } .theirs .message-text { @@ -70,8 +113,9 @@ h1 { } ul { - margin: 1em; - margin-bottom: 4em; + overflow: scroll; + flex-grow: 1; + margin: .5em; padding: 0; list-style: none; } @@ -88,12 +132,16 @@ li { #textbox { width: 100%; - position: fixed; + display: flex; + /*position: sticky;*/ + /*flex-position: end;*/ bottom: 0; margin-top: 0.5em; z-index: 1; + + background-color: var(--dark-purple); } #typing-indicator { @@ -108,13 +156,14 @@ li { } #textbox input { + flex-grow: 2; + color: var(--dark-purple); background-color: var(--eggshell); margin: 0.5em; left: 1em; - width: 80%; font-size: 1em; z-index: 1; @@ -126,8 +175,7 @@ button { margin: 0.5em; padding: 0; - width: 15%; - position: absolute; + flex-grow: 1; right: 0; font-size: 1em; } @@ -174,3 +222,7 @@ button:hover { right: 1em; font-size: .8em; } + +.conversations { + +}