freechat/freechat-client/pages/index.html
2021-01-01 22:02:17 -08:00

78 lines
3.5 KiB
HTML

<!-- Keep in mind basically all the major components of the app are held together here -->
<!-- The reason for this is because ~~~~~ I'm actually just lazy -->
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- required bs for bootstrap -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="css/style.css"/>
<title>Freechat</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">
<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
Freechat
</a>
<ul class="navbar-nav mr-auto" style="display: inline-block;">
<button class="btn btn-outline-secondary btn-nav-settings me-2" type="button" id="settings-btn">Settings</button>
<button class="btn btn-outline-secondary btn-nav-settings" type="button" id="join-btn" data-toggle="modal", data-target="#joinform">Join</button>
<!-- Now comes the list of serves that we're a part of -->
</ul>
<!-- Basically a container for the "hamburger-collapse-button-thing" to target when it does have to collapse -->
<!--
Alternatively we could simply make the list of items scrollable or something but like that would be kinda aids
Though to be fair no one should be in 9999 instances cuz that's degeneracy(also this is what configs are literally made for)
-->
<div class="collapse navbar-collapse">
<ul class="navbav-nav mr-auto" style="display: inline-block;", id="server-list"></ul>
</div>
<!-- Button used for the collapsing thingy - the ((hamburger menu)) -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div id="joinform" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content join-style">
<div class="modal-header">
<h5 class="modal-title">Paste an invite link below</h5>
</div>
<div class="modal-body">
<form>
<input type="text" class="form-text">
<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Example: sample-domain.io/invite/42069</label>
<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Degen note: Freechat ONLY does HTTPS, so the prefix isn't needed. If anyone says otherwise they're full of shit</label>
<button class="btn btn-outline-success" type="button" id="submit-invite-link">Join</button>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script>
const { ipcRenderer } = require('electron')
const config = ipcRenderer.sendSync('config-request', 'benis')
// only put things like the server list up if theres anythng to put in there
if(config['servers']) {
let parent = document.getElementById('server-list')
for(const server of config['servers']) {
let node = document.createElement('button')
node.classList.add('btn', 'btn-outline-secondary', 'btn-nav-settings')
node.type = 'button'
node.textContent = server['name']
parent.appendChild(node)
}
}
</script>
</html>