Noah Petherbridge
4f93c27651
* Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
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}} |