mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-12-26 04:08:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add header partial

Browse source
This commit is contained in:
Korbs 2024-04-30 23:06:19 -04:00
parent 82a5cb5e3a
commit cc3b9fd5d6
1 changed files with 153 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
html/partials/header.ejs Normal file
View file

@ -0,0 +1,153 @@
<!--
This Source Code Form is subject to the terms of the GNU General Public License:
Copyright (C) 2021-2024 Poke (https://codeberg.org/Ashley/poke)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
--->
<!-- Global Header-->
<!-- This should be inserted as a component/partial -->
<!-- Eventfully, this should be used on ALL pages, to keep things -->
<!-- things consistant across Poke. -->
<header>
<div class="header-content">
<div class="header-start">
<a title="Poke Homepage" href="/">
<img src="/css/logo.svg?v=5"/>
</a>
<% if (secure) { %>
<i style="margin-left: 12px;" class="fa-light fa-lock"
title="
This is a secure and/or offical instance!
you can trust this instance becuase:
- its a offical instance (offical instances have the max. privacy rules )
- logs are kept closed
if you see this lock icon, you can trust the instance!!
But Please note that unofficial instances can add the same lock icon, so please be careful about dad :D!
To verfiy u cab use this hashed code on SHA-265
d312fe1994124e29478
caaddefabec047746608
b8ef09b69b3ac2f63f4
e53a4a
if your domain matches this code you are probably in poketube.fun owo:3
"></i>
<% } %>
<% if (verify) { %>
<i style="margin-left: 12px;" class="fa-light fa-badge-check"
title="
This is a veried instance!
this instance was verified to be fast and secure!
"></i>
<% } %>
</div>
<div class="header-center">
<form action="/search">
<input/ class="search-bar" autocomplete="on" id="fname" name="query" data-ddg-inputtype="identities.firstName">
<button><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17 17L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
</form>
</div>
<div class="header-end">
<a href="https://codeberg.org/Ashley/poketube/src/branch/main/instances.json"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M6 18.01L6.01 17.9989" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M6 6.01L6.01 5.99889" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M2 9.4V2.6C2 2.26863 2.26863 2 2.6 2H21.4C21.7314 2 22 2.26863 22 2.6V9.4C22 9.73137 21.7314 10 21.4 10H2.6C2.26863 10 2 9.73137 2 9.4Z" stroke="#ffffff" stroke-width="1.5" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M2 21.4V14.6C2 14.2686 2.26863 14 2.6 14H21.4C21.7314 14 22 14.2686 22 14.6V21.4C22 21.7314 21.7314 22 21.4 22H2.6C2.26863 22 2 21.7314 2 21.4Z" stroke="#ffffff" stroke-width="1.5" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg></a>
<a href="/apps"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17.5 17.5C20 21 23.9486 18.4151 23 15C21.5753 9.87113 20.8001 7.01556 20.3969 5.50793C20.1597 4.62136 19.3562 4 18.4384 4L5.56155 4C4.64382 4 3.844 4.62481 3.62085 5.515C2.7815 8.86349 2.0326 11.8016 1.14415 15C0.195501 18.4151 4.14415 21 6.64415 17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 4V6C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6L8 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 16C17.1046 16 18 15.1046 18 14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14C14 15.1046 14.8954 16 16 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
<a href="/account-create"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.271 18.3457C4.271 18.3457 6.50002 15.5 12 15.5C17.5 15.5 19.7291 18.3457 19.7291 18.3457" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg> Account</a>
</div>
</div>
</header>
<style>
header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 12px 0px;
background: rgb(0, 0, 0, 0.5);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1264px;
margin: auto;
}
.header-start {
display: flex;
align-items: center;
}
.header-start img {
height: 32px;
}
form[action="/search"] {
display: flex
}
.header-center #fname {
background: rgba(255, 255, 255, 0.2);
border: 1px #605e5e solid;
border-radius: 6px 0px 0px 6px;
color: white;
font-size: 14px;
padding: 6px 12px;
border-right: none;
cursor: default;
width: 300px;
}
.header-center button {
background: rgba(255, 255, 255, 0.2);
border: 1px #605e5e solid;
border-radius: 0px 6px 6px 0px;
color: white;
border-left: none;
cursor: pointer;
}
.header-center #fname:focus {
outline: none;
border-color: #8a8a8a;
}
.header-center button svg {
width: 18px;
}
.header-end {
display: flex;
align-items: center;
gap: 6px;
}
.header-end a {
/* border: 2px #605e5e solid; */
border-radius: 3rem;
display: flex;
align-items: center;
padding: 6px;
color: white;
gap: 6px;
}
</style>