<!DOCTYPE html>
<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
<head>
<title>{browserTitle}</title>
{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
<script>
var config = JSON.parse('{{configJSON}}');
var app = {
user: JSON.parse('{{userJSON}}')
};
document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
</script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
var config = JSON.parse('{{configJSON}}');
var app = {
user: JSON.parse('{{userJSON}}')
};
fetch('/frames/totals').then((res) => {
return res.json()
}).then((obj) => {
document.getElementById("sss").innerText = obj.stories;
document.getElementById("aaa").innerText = obj.authors;
});
$(document).ready(function() {
$(".navbar-burger").click(function() {
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
})
$('.has-dropdown > .navbar-link').click(function() {
$('.navbar-dropdown').toggle()
})
})
$(document).mouseup(function(e) {
var container = $(".navbar-menu, .navbar-burger, .navbar-burger > span");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".navbar-burger").removeClass("is-active");
$(".navbar-menu").removeClass("is-active");
}
});
document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
</script>
{{{if useCustomHTML}}}
{{customHTML}}
{{{end}}}
{{{if useCustomCSS}}}
<style>{{customCSS}}</style>
{{{end}}}
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
<nav id="menu" class="slideout-menu hidden">
<!-- IMPORT partials/slideout-menu.tpl -->
</nav>
<nav id="chats-menu" class="slideout-menu hidden">
<!-- IMPORT partials/chats-menu.tpl -->
</nav>
<main id="panel" class="slideout-panel">
<div id="navstufz">
<nav class="navbar container is-fluid pb-4">
<div class="sitetitle navbar-brand">Rockfic</div>
<div id="sitesubtitle" class="is-flex">
<div class="subtitle is-5 m-0"> — Band fiction that rocks</div>
<div class="content is-small">With <div id="sss" style="display: inline-block">0</div> stories by <div id="aaa" style="display: inline-block"></div> authors</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">Home</a>
<a class="navbar-item" href="/bands">Bands</a>
<a class="navbar-item" href="/authors">Authors</a>
<a class="navbar-item" href="/forum">Message Board</a>
{{{ if config.loggedIn }}}
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Your Stuff</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/my-stuff">Account</a>
<a class="navbar-item" href="/messages">
Private Messages
</a>
<a class="navbar-item" href="/my-stuff/reviews">Manage Reviews</a>
<a class="navbar-item" href="/my-stuff/profile">Edit Profile</a>
<a class="navbar-item" href="/user/{user.remoteId}">View Profile</a>
<a class="navbar-item" href="/my-stuff/stories">Stories</a>
<a class="navbar-item" href="/my-stuff/drafts">Drafts</a>
<!--IF isAdmin -->
{{{if isAdmin}}}
<hr class="navbar-divider">
<a class="navbar-item" href="/admin">Admin page</a>
{{{end}}}
<!-- ENDIF isAdmin-->
</div>
</div>
<a class="navbar-item" href="/logout">Log Out</a>
{{{else}}}
<a class="navbar-item button is-light mr-3" href="/login">Log In</a>
<a class="navbar-item button is-primary" href="/register">Register!</a>
{{{end}}}
</div>
<div id="addlink" class="navbar-end" style="align-items: center !important">
<a class="button is-primary" href="/new-story">Submit a New Story!</a>
</div>
</div>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</nav>
</div>
<nav class="navbar sticky-top navbar-expand-lg bg-light header border-bottom py-0" id="header-menu" component="navbar">
<div class="container-lg justify-content-start flex-nowrap">
<!-- IMPORT partials/menu.tpl -->
</div>
</nav>
<script>
const rect = document.getElementById('header-menu').getBoundingClientRect();
const offset = Math.max(0, rect.bottom);
document.documentElement.style.setProperty('--panel-offset', offset + `px`);
</script>
<div class="container-lg pt-3" id="content" style="margin: 0 auto;" >
<!-- IMPORT partials/noscript/warning.tpl -->
<!-- IMPORT partials/noscript/message.tpl -->