@matrixage/picpic
Version:
A awesome image bed by github pages and github actions.
155 lines • 9.55 kB
HTML
<template id="header">
<div
class="header_wrap w_100 border_box flex justify_center fixed top_0 left_0"
:style="header_no_border?'border-bottom:1px solid transparent':''"
>
<header class="header border_box flex justify_between align_center relative">
<div :class="['left_wrap flex align_center',header_no_border?'scrolled':'']">
<img
class="logo"
src="./images/logo_picpic_black.png"
alt="logo"
v-show="!header_no_border"
>
<img
class="logo"
src="./images/logo_picpic_white.png"
alt="logo"
v-show="header_no_border"
>
<span class="name">PicPic</span>
</div>
<transition name="fade">
<div
:class="['search_wrap border_box flex justify_center absolute',header_no_border?'scrolled':'']"
v-show="visible_search"
>
<div class="search flex justify_center align_center flex_column relative">
<input
class="input"
type="text"
placeholder="Search in your images"
v-model="search_text"
>
</div>
</div>
</transition>
<div :class="['right_wrap flex align_center',header_no_border?'scrolled':'']">
<div class="options flex align_center">
<button
class="option_item btn_search mr_12"
@click="onToggleSearch"
>
<svg
class='icon_search'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="20"
height="20"
v-if="!visible_search"
>
<path
d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z' />
</svg>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="20"
height="20"
v-else
>
<path
fill='none'
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='32'
d='M368 368L144 144M368 144L144 368'
/>
</svg>
</button>
<button
class="option_item btn_folder mr_12"
@click="onToggleFolder"
>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="18"
height="18"
>
<path
d='M496 152a56 56 0 00-56-56H220.11a23.89 23.89 0 01-13.31-4L179 73.41A55.77 55.77 0 00147.89 64H72a56 56 0 00-56 56v48a8 8 0 008 8h464a8 8 0 008-8zM16 392a56 56 0 0056 56h368a56 56 0 0056-56V216a8 8 0 00-8-8H24a8 8 0 00-8 8z' />
</svg>
</button>
<button
class="option_item"
@click="onToggleMode"
>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="21"
height="21"
v-show="mode==='list'"
>
<path
fill='none'
stroke='currentColor'
stroke-linecap='round'
stroke-miterlimit='10'
stroke-width='48'
d='M88 152h336M88 256h336M88 360h336'
/>
</svg>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width="18"
height="18"
v-show="mode==='block'"
>
<path
d='M204 240H68a36 36 0 01-36-36V68a36 36 0 0136-36h136a36 36 0 0136 36v136a36 36 0 01-36 36zM444 240H308a36 36 0 01-36-36V68a36 36 0 0136-36h136a36 36 0 0136 36v136a36 36 0 01-36 36zM204 480H68a36 36 0 01-36-36V308a36 36 0 0136-36h136a36 36 0 0136 36v136a36 36 0 01-36 36zM444 480H308a36 36 0 01-36-36V308a36 36 0 0136-36h136a36 36 0 0136 36v136a36 36 0 01-36 36z' />
</svg>
</button>
</div>
<div class="d_line"></div>
<div class="link_items flex">
<a
class="link mr_12 flex"
href="https://github.com/MatrixAge"
target="_blank"
rel="noopener noreferrer"
>
<img
class="logo_matrixage"
src="./images/matrixage.png"
alt="logo"
>
</a>
<a
class="link flex"
href="https://github.com/MatrixAges/picpic"
target="_blank"
rel="noopener noreferrer"
>
<svg
class="logo_github octicon octicon-mark-github v-align-middle"
width="20"
height="20"
viewBox="0 0 16 16"
version="1.1"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</a>
</div>
</div>
</header>
</div>
</template>