added "phone" chats

assets/css/styles.css

@@ -18,3 +18,62 @@ nav a {
 main {
   margin: 20vh 5% 20vh 5%;
 }
+
+/* https://codepen.io/RG/pen/bdfDI */
+.phone {
+  background: none repeat scroll 0 0 #fff;
+  /*border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;*/
+  color: #ffffff;
+  font-family: "Open Sans";
+  line-height: 20px;
+  width: 80%;
+  margin: 0 auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.messages-wrapper {
+  position: relative;
+}
+.message {
+  margin: 0 15px 10px;
+  padding: 15px 20px;
+  position: relative;
+}
+.message.to {
+  border-radius: 20px 0px 20px 20px;
+  background-color: #2095fe;
+  color: #fff;
+  margin-left: 160px;
+}
+.message.from {
+  border-radius: 20px 20px 20px 0px;
+  background-color: #e5e4e9;
+  color: #363636;
+  margin-right: 160px;
+}
+.message.to + .message.to,
+.message.from + .message.from {
+  margin-top: -7px;
+}
+.message:before {
+  border-color: #2095fe;
+  border-radius: 50% 50% 50% 50%;
+  border-style: solid;
+  border-width: 0 20px;
+  bottom: 0;
+  clip: rect(20px, 35px, 42px, 0px);
+  content: " ";
+  height: 40px;
+  position: absolute;
+  right: -50px;
+  width: 30px;
+  z-index: -1;
+}
+.message.from:before {
+  border-color: #e5e4e9;
+  left: -50px;
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}

index.html

@@ -41,12 +41,13 @@
     <header>
       <nav>
         <a href="https://simple-stock-bots.gitlab.io/site/">Documentation</a>
-        <a href="https://gitlab.com/simple-stock-bots" target="_blank"
+        <!-- <a href="https://gitlab.com/simple-stock-bots" target="_blank"
           ><img
             src="assets/img/gitlab-icon.svg"
             alt="Gitlab Logo"
             style="height: 35px !important"
-        /></a>
+        /> -->
+      </a>
         <a href="https://www.buymeacoffee.com/Anson" target="_blank"
           ><img
             src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
@@ -72,6 +73,7 @@
         Discord
       </button>
     </main>
+<hr>
     <h2>Quotes</h2>
     <p>
       The current price of any Stock or Cryptocurrency can be called by using
@@ -79,25 +81,69 @@
       cryptocurrencies use two dollar signs. So the following message in any
       chat with the bot:
     </p>
-    <code>I wonder how $tsla and $$eth are doing today.</code>
-    <p>Would return:</p>
-    <code
-      >The current stock price of Tesla Inc is $664.315, the stock is currently
-      down -0.99%</code
-    ><br />
-    <code>
-      The current price of Ethereum is $3,523.57, the coin is currently up
-      2.194% for today</code
-    >
+    <div class="phone">
+      <div class="messages-wrapper">
+        <div class="message to">
+          I wonder how $tsla and $$eth are doing today.
+        </div>
+        <div class="message from">
+          The current stock price of Tesla Inc is $664.315, the stock is
+          currently down -0.99%
+        </div>
+        <div class="message from">
+          The current price of Ethereum is $3,523.57, the coin is currently up
+          2.194% for today
+        </div>
+      </div>
+    </div>
     <h2>Charts</h2>
     <p>
       Simple Stock Bots can return either intraday or monthly charts. Monthly
       charts are called by using the <code>/chart</code> command, and intraday
       with the <code>/intra</code> command.
     </p>
-    <code>/chart $tsla</code><br /><br />
-    <img src="assets/img/TgChartChat.png" alt="" width="350" />
 
+    <div class="phone">
+      <div class="messages-wrapper">
+        <div class="message to">/chart $tsla</div>
+
+        <div class="message from">
+          <img src="assets/img/TgChartChat.jpg" alt="Tesla Motors Chart" />
+          <br />
+          1 Month chart for $TSLA from 06, Apr 2021 to 05, May 2021 The current
+          stock price of Tesla Inc is $664.315, the stock is currently down
+          -0.99%
+        </div>
+      </div><div class="message to">/intra $$doge</div>
+
+        <div class="message from">
+          <img src="assets/img/TgIntraChat.jpg" alt="Tesla Motors Chart" />
+          <br />
+Intraday chart for Dogecoin from 06:00 to 06:00  on 08, May 2021
+
+The current price of Dogecoin is $0.728507, the coin is currently up 27.420% for today
+        </div>
+      </div>
+    </div>
+    <h2>And More...</h2>
+    <p>
+      Check out the
+      <a href="https://simple-stock-bots.gitlab.io/site/">Documentation</a> for
+      the full list!
+    </p>
+    <footer>
+      <h3>Contact Info:</h3>
+      <p>
+        Email:
+        <a href="mailto:anson@ansonbiggs.com">anson@ansonbiggs.com</a>
+      </p>
+      <p>
+        Twitter:
+        <a href="https://twitter.com/Handsome__Anson">@Handsome__Anson</a>
+      </p>
+      <p>Telegram: <a href="https://t.me/MisterBiggs">@MisterBiggs</a></p>
+      <p>Source Code: <a href="https://gitlab.com/simple-stock-bots">GitLab</a></p>
+    </footer>
     <!-- Content -->
     <script src="assets/js/script.js" type="module"></script>
   </body>