{{define "index"}} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css"> <link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css"> <link rel="stylesheet" type="text/css" href="/static/css/BareRTC.css?{{CacheHash}}"> <title>BareRTC</title> </head> <body> <div id="BareRTC-App"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> BareRTC </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item" href="/"> <span class="icon"><i class="fa fa-home"></i></span> <span>Home</span> </a> <a class="navbar-item" href="/about"> About </a> <a class="navbar-item" href="/faq"> FAQ </a> <div id="navbar-more" class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown is-active"> <a class="navbar-item" href="/about"> <span class="icon"><i class="fa fa-circle-info"></i></span> <span>About</span> </a> <a class="navbar-item" href="/faq"> <span class="icon"><i class="fa fa-circle-question"></i></span> <span>FAQ</span> </a> <a class="navbar-item" href="/tos"> <span class="icon"><i class="fa fa-list"></i></span> <span>Terms of Service</span> </a> <a class="navbar-item" href="/privacy"> <span class="icon"><i class="fa fa-file-shield"></i></span> <span>Privacy Policy</span> </a> <a class="navbar-item" href="/contact"> <span class="icon"><i class="fa fa-message"></i></span> <span>Contact</span> </a> <hr class="navbar-divider"> <a class="navbar-item" href="/contact?intent=report"> <span class="icon"><i class="fa fa-triangle-exclamation"></i></span> <span>Report an issue</span> </a> </div> </div> </div> </div> </nav> <!-- Sign In modal --> <div class="modal" :class="{'is-active': loginModal.visible}"> <div class="modal-background"></div> <div class="modal-content"> <div class="card"> <header class="card-header has-background-info"> <p class="card-header-title has-text-light">Sign In</p> </header> <div class="card-content"> <form @submit.prevent="signIn()"> <div class="field"> <label class="label">Username</label> <input class="input" v-model="username" placeholder="Username" autocomplete="off" autofocus required> </div> <div class="field"> <div class="control"> <button class="button is-link">Submit</button> </div> </div> </form> </div> </div> </div> </div> <div class="block p-4"> <div class="columns"> <div class="column is-one-fifth"> <div class="card"> <header class="card-header has-background-success-dark"> <p class="card-header-title has-text-light"> Channels </p> </header> <div class="card-content"> <aside class="menu"> <p class="menu-label"> Chat Rooms </p> <ul class="menu-list"> <li><a href="#" class="is-active">Chat Room</a></li> </ul> <p class="menu-label"> Private Messages </p> <ul class="menu-list"> <li><a href="#">Chat Room</a></li> <li><a href="#">DMs</a></li> </ul> </aside> </div> </div> </div> <div class="column"> <div class="card"> <header class="card-header has-background-link"> <p class="card-header-title has-text-light"> Chat Room </p> </header> <div class="card-content"> <div v-for="(msg, i) in history" v-bind:key="i"> <div> <label class="label">[[msg.username]]</label> </div> [[msg.message]] </div> </div> </div> <div class="card"> <div class="card-content"> <form @submit.prevent="sendMessage()"> <input type="text" class="input" v-model="message" placeholder="Message"> </form> </div> </div> </div> </div> <h1>Hello</h1> </div> </div><!-- /app --> <script src="/static/js/vue-3.2.45.js"></script> <script src="/static/js/BareRTC.js?{{CacheHash}}"></script> </body> </html> {{end}}