Initial commitHEADmane

1 files changed, 149 insertions, 0 deletions

diff --git a/public/timeline-demo.html b/public/timeline-demo.html
new file mode 100644
index 0000000..e985234
--- /dev/null
+++ b/public/timeline-demo.html
@@ -0,0 +1,149 @@
+<br>
+<div class="timeline-item timeline-date">
+  Yesterday
+</div>
+<div class="timeline-item timeline-message timeline-message-received" style="background-color: #f3a49355;color: white;">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      See you later!
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Sunny Starscout</span>
+      <span class="timeline-message-date">13:50</span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-switch">
+  <img src="/switch.svg" style="filter: invert(1); width: 16px; height: 16px;">
+  <span style="vertical-align: middle;">Velvet Cascade switched in 3 hours ago</span>
+</div>
+<div class="timeline-item timeline-message timeline-message-received" style="background-color: #466cdb55;color: white;">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      pony pony<br>pone pone
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Velvet Cascade</span>
+      <span class="timeline-message-date">15m</span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent timeline-message-hasReply" style="background-color: #9eff95;color: black;">
+                    <span class="timeline-message-reply" style="background-color: #466cdb55;border-color: #466cdbaa;">
+                        <span class="timeline-message-reply-author">Velvet Cascade</span>
+                        <span class="timeline-message-reply-text">pony pony<br>pone pone</span>
+                    </span>
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      pony!
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">12m</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/read.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent" style="background-color: #9eff95;color: black;">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      Hi!
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">12m</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/read.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent timeline-message-hasImage" style="background-color: #9eff95;color: black;">
+                    <span class="timeline-message-image">
+                            <img src="/test.jpg">
+                        </span>
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      This message contains an image!<br>In case you didn't know, images are super cool because they contain pixels of different colors, <b>millions of colors!</b> Isn't that awesome?
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">12m</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/read.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-received" style="background-color: #466cdb55;color: white;">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      long message aaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaa<br>aa
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Velvet Cascade</span>
+      <span class="timeline-message-date">7m</span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent timeline-message-hasMedia" style="background-color: #9eff95;color: black;">
+                    <span class="timeline-message-media">
+                            <audio controls src="https://music.minteck.org/005.%20Minteck%20-%20Pastel%20Equine/12.%20My%20Little%20Pony%20-%20I'll%20Chase%20the%20Sky%20%5bCover%5d.mp3"></audio>
+                        </span>
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      This message contains... audio!
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">5m</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/read.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent timeline-message-hasMedia" style="background-color: #9eff95;color: black;">
+                    <span class="timeline-message-media">
+                            <video controls src="https://school.pony.minteck.org/video.mp4"></video>
+                        </span>
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      And this one has..... you guessed it, video!
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">3m</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/read.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-sent" style="background-color: #9eff95;color: black;">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      I'd just like to interject for a moment. What you're refering to as Linux, is in fact, GNU/Linux, or as I've recently taken to calling it, GNU plus Linux. Linux is not an operating system unto itself, but rather another free component of a fully functioning GNU system made useful by the GNU corelibs, shell utilities and vital system components comprising a full OS as defined by POSIX.
+    </div>
+    <div class="timeline-message-footer">
+      <span class="timeline-message-author">Mossy Storm</span>
+      <span class="timeline-message-date">Now</span>
+      <span class="timeline-message-status">
+                                <img alt="" src="/received.svg">
+                            </span>
+    </div>
+  </div>
+</div>
+<div class="timeline-item timeline-message timeline-message-received timeline-message-typing" style="background-color: rgba(87,87,87,0.33);color: rgba(255, 255, 255, .5);">
+  <div class="timeline-message-inner">
+    <div class="timeline-message-text">
+      <span class="timeline-message-typing-badge">Replying to <b>Mossy Storm</b></span>
+      <span class="timeline-message-typing-content">Good morn<span class="timeline-message-typing-caret">|</span></span>
+    </div>
+  </div>
+  <div class="timeline-message-footer">
+    <span class="timeline-message-author">Velvet Cascade</span>
+  </div>
+</div>
\ No newline at end of file