website/web/templates/base.html

410 lines
19 KiB
HTML

{{define "title"}}Untitled{{end}}
{{define "content"}}{{end}}
{{define "scripts"}}{{end}}
{{define "base"}}
<!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?build={{.BuildHash}}">
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?build={{.BuildHash}}" />
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<link rel="manifest" href="/manifest.json">
<title>{{template "title" .}} - {{ .Title }}</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
{{ PrettyTitle }}
</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">
{{if not .LoggedIn}}
<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="/features">
Features
</a>
<a class="navbar-item" href="/faq">
FAQ
</a>
{{end}}
{{if .LoggedIn}}
<a class="navbar-item px-1" href="/me">
<span class="icon"><i class="fa fa-house-user"></i></span>
<span>Home</span>
</a>
<a class="navbar-item px-1" href="/chat">
<span class="icon"><i class="fa fa-message"></i></span>
<span>Chat</span>
{{if .NavChatStatistics.UserCount}}<span class="nonshy-navbar-notification-tag is-info ml-1">{{.NavChatStatistics.UserCount}}</span>{{end}}
</a>
<a class="navbar-item px-1" href="/forum">
<span class="icon"><i class="fa fa-comments"></i></span>
<span>Forum</span>
</a>
<a class="navbar-item px-1" href="/photo/gallery">
<span class="icon"><i class="fa fa-image"></i></span>
<span>Gallery</span>
</a>
<a class="navbar-item px-1" href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
<span class="icon"><i class="fa fa-user-group"></i></span>
<span>Friends</span>
{{if .NavFriendRequests}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavFriendRequests}}</span>{{end}}
</a>
<a class="navbar-item px-1" href="/messages">
<span class="icon"><i class="fa fa-envelope"></i></span>
<span>Messages</span>
{{if .NavUnreadMessages}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavUnreadMessages}}</span>{{end}}
</a>
<a class="navbar-item px-1" href="/members">
<span class="icon"><i class="fa fa-people-group"></i></span>
<span>People</span>
</a>
{{end}}
<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 {{PrettyTitle}}</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 class="navbar-end">
{{if .LoggedIn }}
<div id="navbar-user" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/me{{if .NavUnreadNotifications}}#notifications{{end}}">
<div class="columns is-mobile is-gapless">
<div class="column is-narrow">
<figure class="image is-24x24 mr-2">
{{if gt .CurrentUser.ProfilePhoto.ID 0}}
<img src="{{PhotoURL .CurrentUser.ProfilePhoto.CroppedFilename}}" class="is-rounded">
{{else}}
<img src="/static/img/shy.png" class="is-rounded has-background-warning">
{{end}}
</figure>
</div>
<div class="column">
{{.CurrentUser.Username}}
{{if .NavUnreadNotifications}}<span class="nonshy-navbar-notification-tag is-warning ml-1">{{.NavUnreadNotifications}}</span>{{end}}
{{if .NavAdminNotifications}}
{{if and (.NavCertificationPhotos) (not .NavAdminFeedback)}}
<span class="nonshy-navbar-notification-tag is-success ml-1">{{.NavAdminNotifications}}</span>
{{else if and .NavCertificationPhotos .NavAdminFeedback}}
<span class="nonshy-navbar-notification-tag is-mixed ml-1">{{.NavAdminNotifications}}</span>
{{else}}
<span class="nonshy-navbar-notification-tag is-danger ml-1">{{.NavAdminNotifications}}</span>
{{end}}
{{end}}
</div>
</div>
</a>
<div class="navbar-dropdown is-right is-hoverable">
<a class="navbar-item" href="/me{{if .NavUnreadNotifications}}#notifications{{end}}">
<span class="icon"><i class="fa fa-home-user"></i></span>
<span>Dashboard</span>
{{if .NavUnreadNotifications}}
<span class="nonshy-navbar-notification-tag is-warning ml-1">
<span class="icon"><i class="fa fa-bell"></i></span>
<span>{{.NavUnreadNotifications}}</span>
</span>
{{end}}
</a>
<a class="navbar-item" href="/u/{{.CurrentUser.Username}}">
<span class="icon"><i class="fa fa-user"></i></span>
<span>My Profile</span>
</a>
<a class="navbar-item" href="/photo/u/{{.CurrentUser.Username}}">
<span class="icon"><i class="fa fa-image"></i></span>
<span>My Photos</span>
</a>
<a class="navbar-item" href="/photo/upload">
<span class="icon"><i class="fa fa-upload"></i></span>
<span>Upload Photo</span>
</a>
<a class="navbar-item" href="/photo/private">
<span class="icon"><i class="fa fa-eye"></i></span>
<span>Private Photos</span>
</a>
{{if .CurrentUser.IsInnerCircle}}
<a class="navbar-item" href="/inner-circle">
<span class="icon"><img src="/static/img/circle-16.png"></span>
<span>Inner circle</span>
</a>
{{end}}
<a class="navbar-item" href="/settings">
<span class="icon"><i class="fa fa-gear"></i></span>
<span>Settings</span>
</a>
{{if .CurrentUser.IsAdmin}}
<a class="navbar-item has-text-danger" href="/admin">
<span class="icon"><i class="fa fa-peace"></i></span>
<span>Admin</span>
{{if .NavAdminNotifications}}
<!-- Color code them by the type -->
{{if and (.NavCertificationPhotos) (not .NavAdminFeedback)}}
<span class="nonshy-navbar-notification-tag is-success ml-1">{{.NavAdminNotifications}}</span>
{{else if and .NavCertificationPhotos .NavAdminFeedback}}
<span class="nonshy-navbar-notification-tag is-mixed ml-1">{{.NavAdminNotifications}}</span>
{{else}}
<span class="nonshy-navbar-notification-tag is-danger ml-1">{{.NavAdminNotifications}}</span>
{{end}}
{{end}}
</a>
{{end}}
{{if .SessionImpersonated}}
<a href="/admin/unimpersonate" class="navbar-item has-text-danger">
<span class="icon"><i class="fa fa-ghost"></i></span>
<span>Unimpersonate</span>
</a>
{{end}}
<a class="navbar-item" href="/logout">
<span class="icon"><i class="fa fa-arrow-right-from-bracket"></i></span>
<span>Log out</span>
</a>
</div>
</div>
{{ else }}
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/signup">
<strong>Sign up</strong>
</a>
<a class="button is-light" href="/login">
Log in
</a>
</div>
</div>
{{end}}
</div>
</div>
</nav>
<!-- Mobile: notifications badge next to hamburger menu -->
{{if .LoggedIn}}
<div class="mobile nonshy-mobile-notification">
{{if .CurrentUser.Certified}}
<a class="tag {{if gt .NavChatStatistics.UserCount 0}}is-info{{else}}is-grey{{end}} py-4"
href="/chat">
<span class="icon"><i class="fa fa-message"></i></span>
{{if gt .NavChatStatistics.UserCount 0}}
<small class="nonshy-navbar-notification-count">{{.NavChatStatistics.UserCount}}</small>
{{end}}
</a>
<a class="tag is-grey py-4"
href="/forum">
<span class="icon"><i class="fa fa-comments"></i></span>
</a>
<a class="tag is-grey py-4"
href="/photo/gallery">
<span class="icon"><i class="fa fa-image"></i></span>
</a>
{{end}}
<a class="tag {{if gt .NavFriendRequests 0}}is-warning{{else}}is-grey{{end}} py-4"
href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
<span class="icon"><i class="fa fa-user-group"></i></span>
{{if gt .NavFriendRequests 0}}
<small class="nonshy-navbar-notification-count">{{.NavFriendRequests}}</small>
{{end}}
</a>
<a class="tag {{if gt .NavUnreadMessages 0}}is-warning{{else}}is-grey{{end}} py-4" href="/messages">
<span class="icon"><i class="fa fa-envelope"></i></span>
{{if gt .NavUnreadMessages 0}}
<small class="nonshy-navbar-notification-count">{{.NavUnreadMessages}}</small>
{{end}}
</a>
{{if gt .NavUnreadNotifications 0}}
<a class="tag is-warning py-4" href="/me#notifications">
<span class="icon"><i class="fa fa-bell"></i></span>
<small class="nonshy-navbar-notification-count">{{.NavUnreadNotifications}}</small>
</a>
{{end}}
{{if gt .NavAdminNotifications 0}}
<!-- Color code them by the type -->
{{if and (.NavCertificationPhotos) (not .NavAdminFeedback)}}
<a class="tag is-success py-4" href="/admin">
<span class="icon"><i class="fa fa-peace"></i></span>
<small class="nonshy-navbar-notification-count">{{.NavAdminNotifications}}</small>
</a>
{{else if and .NavCertificationPhotos .NavAdminFeedback}}
<a class="tag is-mixed py-4" href="/admin">
<span class="icon"><i class="fa fa-peace"></i></span>
<small class="nonshy-navbar-notification-count">{{.NavAdminNotifications}}</small>
</a>
{{else}}
<a class="tag is-danger py-4" href="/admin">
<span class="icon"><i class="fa fa-peace"></i></span>
<small class="nonshy-navbar-notification-count">{{.NavAdminNotifications}}</small>
</a>
{{end}}
{{end}}
</div>
{{end}}
<div class="container is-fullhd">
{{if .Flashes}}
<div class="notification block is-success">
<!-- <button class="delete"></button> -->
{{range .Flashes}}
<div class="block">{{.}}</div>
{{end}}
</div>
{{end}}
{{if .Errors}}
<div class="notification block is-danger">
<!-- <button class="delete"></button> -->
{{range .Errors}}
<div class="block">{{.}}</div>
{{end}}
</div>
{{end}}
{{template "content" .}}
<div class="block p-4 has-text-centered has-text-grey">
&copy; {{.YYYY}} {{.Title}}
<div class="columns">
<div class="column">
<a href="/">Home</a>
</div>
<div class="column">
<a href="/about">About</a>
</div>
{{if .LoggedIn}}
<div class="column">
<a href="/me">User Dashboard</a>
</div>
<div class="column">
<a href="/u/{{.CurrentUser.Username}}">My Profile</a>
</div>
<div class="column">
<a href="/settings">Settings</a>
</div>
<div class="column">
<a href="/logout">Log out</a>
</div>
{{else}}
<div class="column">
<a href="/login">Log in</a>
</div>
<div class="column">
<a href="/signup">Sign up</a>
</div>
{{end}}
</div>
</div>
</div>
<script type="text/javascript" src="/static/js/bulma.js?build={{.BuildHash}}"></script>
<script type="text/javascript" src="/static/js/likes.js?build={{.BuildHash}}"></script>
<script type="text/javascript" src="/static/js/vue-3.2.45.js"></script>
{{template "scripts" .}}
<!-- Likes modal -->
{{template "like-modal"}}
<!-- Right-click modal -->
<div class="modal nonshy-important-modal" id="rightclick-modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="card">
<div class="card-header has-background-warning">
<p class="card-header-title has-text-dark-dark">
<i class="fa fa-info-circle mr-2"></i> Please respect peoples' privacy
</p>
</div>
<div class="card-content content">
<p>
Please respect our members' privacy and refrain from downloading any pictures from {{PrettyTitle}}.
</p>
<p>
It is <a href="/tos#downloading">against the rules</a> to download a copy of other peoples' photos
from this site. I know that I can't stop you from doing so anyway if you're so determined, but
please consider that many of us don't wish for our pictures to end up reposted somewhere
else on the Internet or seen by people outside of the {{PrettyTitle}} community.
</p>
<p>
Thank you for your understanding!
</p>
</div>
<div class="card-footer has-text-centered">
<div class="card-footer-item">
<button type="button" class="button is-success">
Acknowledge
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/static/js/right-click.js?build={{.BuildHash}}"></script>
</body>
</html>
{{end}}