mirror of
				https://codeberg.org/ashley/poke
				synced 2025-07-17 16:52:11 +00:00 
			
		
		
		
	Add header partial
This commit is contained in:
		
							parent
							
								
									82a5cb5e3a
								
							
						
					
					
						commit
						cc3b9fd5d6
					
				
							
								
								
									
										153
									
								
								html/partials/header.ejs
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										153
									
								
								html/partials/header.ejs
									
									
									
									
									
										Normal 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> | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Korbs
						Korbs