From af8c1e3278d2d60d9bd20904abea1233dcd5966b Mon Sep 17 00:00:00 2001
From: Gaurav Gosain <itsgauravgosain@gmail.com>
Date: Sun, 5 Mar 2023 03:10:06 +0400
Subject: [PATCH] added responsive styles + HTML markdown

---
 templates/assets/css/admin.css | 422 +++++++++++++++++++++++++++++----
 templates/index.html           | 322 ++++++++++++++-----------
 2 files changed, 555 insertions(+), 189 deletions(-)

diff --git a/templates/assets/css/admin.css b/templates/assets/css/admin.css
index 9b87c7b..22eb2e8 100644
--- a/templates/assets/css/admin.css
+++ b/templates/assets/css/admin.css
@@ -1,82 +1,408 @@
-html, body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    font-size: 16px;
-    line-height: 1.5;
-    height: 100%;
-    background: #ECF0F3;
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  height: 100%;
+  background: #ecf0f3;
 }
 nav.navbar {
-    border-top: 4px solid #276cda;
-    margin-bottom: 1rem;
+  border-top: 4px solid #276cda;
+  margin-bottom: 1rem;
 }
 .navbar-item.brand-text {
-    font-weight: 300;
+  font-weight: 300;
 }
-.navbar-item, .navbar-link {
-    font-size: 14px;
-    font-weight: 700;
+.navbar-item,
+.navbar-link {
+  font-size: 14px;
+  font-weight: 700;
 }
 .columns {
-    width: 100%;
-    height: 100%;
-    margin-left: 0;
+  width: 100%;
+  height: 100%;
+  margin-left: 0;
 }
 .menu-label {
-    color: #8F99A3;
-    letter-spacing: 1.3;
-    font-weight: 700;
+  color: #8f99a3;
+  letter-spacing: 1.3;
+  font-weight: 700;
 }
 .menu-list a {
-    color: #0F1D38;
-    font-size: 14px;
-    font-weight: 700;
+  color: #0f1d38;
+  font-size: 14px;
+  font-weight: 700;
 }
 .menu-list a:hover {
-    background-color: transparent;
-    color: #276cda;
+  background-color: transparent;
+  color: #276cda;
 }
 .menu-list a.is-active {
-    background-color: transparent;
-    color: #276cda;
-    font-weight: 700;
+  background-color: transparent;
+  color: #276cda;
+  font-weight: 700;
 }
 .card {
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
-    margin-bottom: 2rem;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
+  margin-bottom: 2rem;
 }
 .card-header-title {
-    color: #8F99A3;
-    font-weight: 400;
+  color: #8f99a3;
+  font-weight: 400;
 }
 .info-tiles {
-    margin: 1rem 0;
+  margin: 1rem 0;
 }
 .info-tiles .subtitle {
-    font-weight: 300;
-    color: #8F99A3;
+  font-weight: 300;
+  color: #8f99a3;
 }
 .hero.welcome.is-info {
-    background: #36D1DC;
-    background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);
-    background: linear-gradient(to right, #5B86E5, #36D1DC);
+  background: #36d1dc;
+  background: -webkit-linear-gradient(to right, #5b86e5, #36d1dc);
+  background: linear-gradient(to right, #5b86e5, #36d1dc);
 }
-.hero.welcome .title, .hero.welcome .subtitle {
-    color: hsl(192, 17%, 99%);
+.hero.welcome .title,
+.hero.welcome .subtitle {
+  color: hsl(192, 17%, 99%);
 }
 .card .content {
-    font-size: 14px;
+  font-size: 14px;
 }
 .card-footer-item {
-    font-size: 14px;
-    font-weight: 700;
-    color: #8F99A3;
-}
-.card-footer-item:hover {
+  font-size: 14px;
+  font-weight: 700;
+  color: #8f99a3;
 }
+
 .card-table .table {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 .events-card .card-table {
-    max-height: 250px;
-    overflow-y: scroll;
-}
\ No newline at end of file
+  max-height: 250px;
+  overflow-y: scroll;
+}
+
+.main-section {
+  display: flex;
+  flex: row;
+  height: auto;
+}
+
+.main-section > section {
+  width: 100%;
+  flex-grow: 1;
+}
+
+.main-section > section > div {
+  width: 100%;
+  flex-grow: 1;
+}
+
+.custom-button {
+  opacity: 0.8;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.custom-button:hover {
+  opacity: 1;
+}
+
+.button-dark {
+  background-color: #000000;
+  color: white;
+  font-size: 1.1rem;
+}
+
+.button-light {
+  color: #000000;
+  background-color: white;
+  border: 1px solid #000000;
+}
+
+.barrier-section {
+  display: grid;
+  grid-template-columns: 1fr 10px 1fr;
+  gap: 3rem;
+  padding: 3rem;
+}
+
+.divider {
+  background: #8f99a3;
+  height: 100%;
+  width: 1px;
+}
+
+.video-container {
+  aspect-ratio: 16/9;
+  position: relative;
+  width: 50%;
+  height: calc(50% * 9 / 16);
+  margin-left: 25%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.18);
+}
+
+.video-container > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.barrier-session-info-wrapper {
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+}
+
+.barrier-session-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: #fff;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
+  height: max-content;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.light-text {
+  color: #8f99a3;
+}
+
+.barrier-session-info > div {
+  margin: 0.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.small-text {
+  font-size: 0.8rem;
+}
+
+.small-button {
+  font-size: 0.8rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid #000000;
+}
+
+.server-info {
+  color: #8f99a3;
+  font-weight: 300;
+  font-size: 1.25rem;
+}
+
+.server-info:first-child {
+  margin-top: -1.25rem;
+}
+
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 3rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 3rem;
+}
+
+.custom-card {
+  width: 100%;
+  max-width: 300px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .barrier-section {
+    grid-template-columns: 1fr;
+  }
+
+  .divider {
+    background: #8f99a3;
+    width: 100%;
+    height: 1px;
+  }
+
+  .video-container {
+    width: 100%;
+    height: calc(100% * 9 / 16);
+    margin-left: 0;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .button-dark {
+    font-size: 0.8rem;
+  }
+}
+
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal__container {
+  background-color: #fff;
+  padding: 30px;
+  max-width: 500px;
+  max-height: 100vh;
+  border-radius: 4px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal__title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  color: #00449e;
+  box-sizing: border-box;
+}
+
+.modal__close {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.modal__header .modal__close:before {
+  content: "\2715";
+}
+
+.modal__content {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.modal__btn {
+  font-size: 0.875rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #e6e6e6;
+  color: rgba(0, 0, 0, 0.8);
+  border-radius: 0.25rem;
+  border-style: none;
+  border-width: 0;
+  cursor: pointer;
+  -webkit-appearance: button;
+  text-transform: none;
+  overflow: visible;
+  line-height: 1.15;
+  margin: 0;
+  will-change: transform;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  transition: -webkit-transform 0.25s ease-out;
+  transition: transform 0.25s ease-out;
+  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
+}
+
+.modal__btn-primary {
+  background-color: #00449e;
+  color: #fff;
+}
+
+/**************************\
+  Demo Animation Style
+\**************************/
+@keyframes mmfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mmfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes mmslideIn {
+  from {
+    transform: translateY(15%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mmslideOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-10%);
+  }
+}
+
+.micromodal-slide {
+  display: none;
+}
+
+.micromodal-slide.is-open {
+  display: block;
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__overlay {
+  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__container {
+  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__overlay {
+  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__container {
+  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide .modal__container,
+.micromodal-slide .modal__overlay {
+  will-change: transform;
+}
diff --git a/templates/index.html b/templates/index.html
index 160c770..091216b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,154 +1,194 @@
 <!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Xplane WebRTC</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"
+      rel="stylesheet"
+    />
     <!-- Bulma Version 0.9.0-->
-    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
-    <link rel="stylesheet" type="text/css" href="assets/css/admin.css">
-</head>
-
-<body>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css"
+    />
+    <link rel="stylesheet" type="text/css" href="assets/css/admin.css" />
+    <!-- CDN script to import micromodal -->
+    <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
+  </head>
 
+  <body>
     <!-- START NAV -->
     <nav class="navbar is-white">
-        <div class="container">
-            <div class="navbar-brand">
-                <a class="navbar-item brand-text" href="/">
-                    XPlane11-WebRTC
-                </a>
-                <div class="navbar-burger burger" data-target="navMenu">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div>
-            </div>
-            <div id="navMenu" class="navbar-menu">
-                <div class="navbar-start">
-                    <a class="navbar-item" href="/">
-                        Home
-                    </a>
-                    <a class="navbar-item" href="/logout">
-                        Logout
-                    </a>
-                </div>
-
-            </div>
+      <div class="container">
+        <div class="navbar-brand">
+          <a class="navbar-item brand-text" href="/"> XPlane11-WebRTC </a>
+          <div class="navbar-burger burger" data-target="navMenu">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
         </div>
+        <div id="navMenu" class="navbar-menu">
+          <div class="navbar-start">
+            <a class="navbar-item" href="/"> Home </a>
+            <a class="navbar-item" href="/logout"> Logout </a>
+          </div>
+        </div>
+      </div>
     </nav>
     <!-- END NAV -->
     <div class="container">
+      <div class="">
         <div class="">
-            <div class="">
-                <section class="hero is-info welcome is-small">
-                    <div class="hero-body">
-                        <div class="container">
-                            <h1 class="title">
-                                Hello, {{ .User.Name }}
-                            </h1>
-                            <h2 class="subtitle">
-                                I hope you are having a great day!
-                            </h2>
-                            </article>
-                        </div>
-                    </div>
-                </section>
-                <section class="info-tiles">
-                    <div class="column is-6 row is-multiline">
-                        <iframe src="https://www.youtube.com/embed/WVDSVhMW7o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="width: 100%; height: 100%"></iframe>
-                    </div>
-                    <div class="column is-6 row is-multiline">
-                        <div class="field is-horizontal">
-                            <div class="field-label is-medium">
-                                <label class="label">Barrier IP Address</label>
-                            </div>
-                            <div class="field-body">
-                                <div class="field">
-                                    <div class="control">
-                                        <input class="input is-medium" type="text" placeholder="Barrier IP address">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="field is-horizontal">
-                            <div class="field-label is-medium">
-                                <label class="label">Machine Name</label>
-                            </div>
-                            <div class="field-body">
-                                <div class="field">
-                                    <div class="control">
-                                        <input class="input is-medium" type="text" placeholder="Machine name">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <center><button class="button is-black" style="font-weight:700">Add Barrier Information</button>
-                        </center>
-                    </div>
-                    <div class="column is-6 row is-multiline">
-                        <div class="card events-card">
-                            <header class="card-header">
-                                <p class="card-header-title">
-                                    Barrier Session information
-                                </p>
-                                <a href="#" class="card-header-icon" aria-label="more options">
-                                    <span class="icon">
-                                        <i class="fa fa-angle-down" aria-hidden="true"></i>
-                                    </span>
-                                </a>
-                            </header>
-                            <div class="card-table">
-                                <div class="content">
-                                    <table class="table is-fullwidth is-striped">
-                                        <tbody>
-                                            <tr>
-                                                <td width="5%"></td>
-                                                <td>Barrier IP address and HostName</td>
-                                                <td class="level-right"><a class="button is-small bg-danger"
-                                                        href="#">Remove</a></td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <!-- <footer class="card-footer">
-                                <a href="#" class="card-footer-item">Add Barrier session</a>
-                            </footer> -->
-                        </div>
-                    </div>
-                    <div class="tile is-ancestor has-text-centered row columns is-multiline">
-                        {{ range .GameSessions }}
-                        <div class="column is-4 tile is-parent">
-                            <article class="tile is-child box">
-                                <p class="title">{{ .Server.GPU }}</p>
-                                <p style="color: #8F99A3; margin-top:-1.25rem; font-weight: 300; font-size: 1.25rem">
-                                    RAM: {{ .Server.RAM }} MB</p>
-                                <p style="color: #8F99A3; font-weight: 300; font-size: 1.25rem">Rate: {{ .Rate }}$/hr
-                                </p>
-                                <p style="color: #8F99A3; font-weight: 300; font-size: 1.25rem">CPU: {{ .Server.CPU }}
-                                </p>
-                                <p style="color: #8F99A3; font-weight: 300; font-size: 1.25rem">Disk: {{ .Server.Disk }}
-                                    MB</p>
-                                <p style="color: #8F99A3; font-weight: 300; font-size: 1.25rem">Platform: {{
-                                    .Server.Platform }}</p>
-                                <br>
-                                <a href="{{ .Link }}" class="button is-block is-success is-fullwidth is-medium">Play</a>
-                            </article>
-                        </div>
-                        {{ end }}
-                    </div>
-                </section>
+          <section class="hero is-info welcome is-small">
+            <div class="hero-body">
+              <div class="container">
+                <h1 class="title">Hello, {{ .User.Name }}</h1>
+                <h2 class="subtitle">I hope you are having a great day!</h2>
+              </div>
             </div>
-        </div>
-    </div>
-    <script async type="text/javascript" src="assets/js/bulma.js"></script>
-</body>
+          </section>
+          <section>
+            <div class="video-container">
+              <iframe
+                src="https://www.youtube.com/embed/WVDSVhMW7o4"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+              >
+              </iframe>
+            </div>
+          </section>
 
-</html>
\ No newline at end of file
+          <div class="barrier-section">
+            <form action="">
+              <div class="field">
+                <label class="label">Barrier IP Address</label>
+                <div class="control">
+                  <input
+                    class="input"
+                    type="text"
+                    placeholder="Barrier IP address"
+                  />
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Machine Name</label>
+                <div class="control">
+                  <input class="input" type="text" placeholder="Machine name" />
+                </div>
+              </div>
+              <div class="field is-grouped">
+                <div class="control">
+                  <button type="button" class="custom-button button-dark">
+                    Add Barrier Information
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div class="divider"></div>
+            <div class="barrier-session-info-wrapper block">
+              <div class="barrier-session-info">
+                <div class="light-text">Barrier Session information</div>
+                <div>
+                  <div class="small-text">Barrier IP address and HostName</div>
+                  <button type="button" class="custom-button button-light">
+                    Remove
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="cards-container">
+            {{ range .GameSessions }}
+            <div class="custom-card">
+              <article class="tile is-child box">
+                <p class="title">{{ .Server.GPU }}</p>
+                <p class="server-info">RAM: {{ .Server.RAM }} MB</p>
+                <p class="server-info">Rate: {{ .Rate }}$/hr</p>
+                <p class="server-info">CPU: {{ .Server.CPU }}</p>
+                <p class="server-info">Disk: {{ .Server.Disk }} MB</p>
+                <p class="server-info">Platform: {{ .Server.Platform }}</p>
+                <br />
+                <button
+                  type="button"
+                  class="button is-block is-success is-fullwidth is-medium"
+                  onclick="setCurrentLink({currentLink: `{{ .Link }}`})"
+                  data-custom-open="modal-1"
+                >
+                  Play
+                </button>
+              </article>
+            </div>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+
+      <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+          <div
+            class="modal__container"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-1-title"
+          >
+            <header class="modal__header">
+              <h2 class="modal__title" id="modal-1-title">Modal</h2>
+              <button
+                class="modal__close"
+                aria-label="Close modal"
+                data-micromodal-close
+              ></button>
+            </header>
+            <main class="modal__content" id="modal-1-content">
+              <p>
+                Try hitting the <code>tab</code> key and notice how the focus
+                stays within the modal itself. Also, <code>esc</code> to close
+                modal.
+              </p>
+            </main>
+            <footer class="modal__footer">
+              <button
+                class="modal__btn modal__btn-primary"
+                onclick="goToLink()"
+              >
+                Continue
+              </button>
+              <button
+                class="modal__btn"
+                data-micromodal-close
+                aria-label="Close this dialog window"
+              >
+                Close
+              </button>
+            </footer>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script type="text/javascript">
+      MicroModal.init();
+
+      let link = "";
+
+      function setCurrentLink({ currentLink }) {
+        link = currentLink.slice(1, -1); //? get rid of the quotes
+        MicroModal.show("modal-1");
+      }
+
+      function goToLink() {
+        window.open(link, "_blank");
+      }
+    </script>
+    <script async type="text/javascript" src="assets/js/bulma.js"></script>
+  </body>
+</html>