186 lines
6.9 KiB
HTML
186 lines
6.9 KiB
HTML
|
{{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}}
|