mirror of
https://github.com/warp-tech/warpgate.git
synced 2024-09-20 06:46:17 +08:00
updated logo
This commit is contained in:
Eugene Pankov
parent
1658d1d076
commit
93a1259c38
|
|
@ -1,42 +1,62 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 80 47" style="enable-background:new 0 0 80 47;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{clip-path:url(#SVGID_4_);}
|
||||
.st3{fill:url(#SVGID_5_);}
|
||||
</style>
|
||||
<g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10.5" y1="23.25" x2="25.3182" y2="23.25">
|
||||
<stop offset="0" style="stop-color:#005BAA"/>
|
||||
<stop offset="1" style="stop-color:#C82AFF"/>
|
||||
</linearGradient>
|
||||
<line class="st0" x1="10.5" y1="11.5" x2="25.32" y2="35"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="17.9092" y1="6.746" x2="17.9092" y2="42.5092">
|
||||
<stop offset="0" style="stop-color:#005BAA"/>
|
||||
<stop offset="1" style="stop-color:#C82AFF"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M25.33,42c-2.32,0-4.6-1.16-5.93-3.27L4.58,15.23C2.52,11.96,3.5,7.64,6.77,5.58
|
||||
c3.27-2.06,7.59-1.08,9.65,2.19l14.82,23.5c2.06,3.27,1.08,7.59-2.19,9.65C27.89,41.65,26.6,42,25.33,42z"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_3_" points="33,10 13,42 56,52 86,27 87,0 33,-4 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_4_">
|
||||
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<g class="st2">
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="40.3635" y1="41.0594" x2="40.3635" y2="5.2934">
|
||||
<stop offset="0" style="stop-color:#000019"/>
|
||||
<stop offset="1" style="stop-color:#2A44FF"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M55.18,42L55.18,42c-2.4,0-4.64-1.23-5.92-3.27l-8.9-14.11l-8.9,14.11C30.18,40.77,27.95,42,25.55,42
|
||||
s-4.64-1.23-5.92-3.27L4.81,15.23c-2.06-3.27-1.08-7.59,2.19-9.65c3.27-2.06,7.59-1.08,9.65,2.19l8.9,14.11l8.9-14.11
|
||||
c1.28-2.03,3.52-3.27,5.92-3.27l0,0c2.4,0,4.64,1.23,5.92,3.27l8.9,14.11l8.9-14.11c2.06-3.27,6.38-4.25,9.65-2.19
|
||||
c3.27,2.06,4.25,6.38,2.19,9.65L61.1,38.73C59.82,40.77,57.58,42,55.18,42z"/>
|
||||
</g>
|
||||
</g>
|
||||
<svg viewBox="0 0 80 47"
|
||||
id="warpgate-logo"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
#warpgate-logo path {
|
||||
fill: rgb(64, 64, 236);
|
||||
}
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#warpgate-logo path {
|
||||
fill: rgb(11, 207, 215);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path d="m9.2 4.7c-1 .3-2 .8-2.9 1.4l-1.1 1.2c-.6.8-1.1 1.7-1.3 2.7z"/>
|
||||
<path d="m4 13.3 8.3-8.7c-.4-.1-.8-.1-1.2-.1l-7.3 7.6c0 .4.1.8.2 1.2z"/>
|
||||
<path d="m13.4 5-8.9 9.8c.1.1.1.3.2.4 0 0 .1.2.3.5l9.2-10.2c-.2-.2-.5-.3-.8-.5z"/>
|
||||
<path d="m16 6.9c-.2-.3-.5-.5-.7-.7l-9.4 10.8.6.9z"/>
|
||||
<path d="m17.2 8.7c-.3-.5-.5-.9-.6-.9l-9.3 11.4c.2.3.4.6.6.9z"/>
|
||||
<path d="m18.4 10.6c-.2-.3-.4-.6-.6-.9l-9.1 11.7c.2.3.4.6.6.9z"/>
|
||||
<path d="m19.7 12.5c-.2-.3-.4-.6-.6-.9l-8.9 12.1c.2.3.4.6.6.9z"/>
|
||||
<path d="m20.9 14.5c-.2-.3-.4-.6-.6-.9l-8.7 12.4.6.9z"/>
|
||||
<path d="m22.2 16.5c-.2-.3-.4-.6-.6-.9l-8.5 12.7c.2.3.4.6.6.9z"/>
|
||||
<path d="m23.5 18.6c-.2-.3-.4-.6-.6-.9l-8.3 13.1.6.9z"/>
|
||||
<path d="m24.8 20.7c-.2-.3-.4-.6-.6-.9l-8.1 13.5c.2.3.4.6.6.9z"/>
|
||||
<path d="m35.5 6.5c-.4.4-.8.8-1.1 1.3l-8.1 12.8-8.6 15.2c.2.3.4.7.6 1z"/>
|
||||
<path d="m37.1 5.3-17.7 33c.1.2.2.4.2.4.1.2.3.4.4.6l18.5-34.5c-.5.1-1 .3-1.4.5z"/>
|
||||
<path d="m40.6 4.5c-.1 0-.2 0-.2 0-.3 0-.6 0-.9.1l-18.1 36c.3.2.6.4.8.5z"/>
|
||||
<path d="m41.4 4.6-17.6 37.1c.3.1.7.1 1 .2l17.6-37.1c-.4-.1-.7-.2-1-.2z"/>
|
||||
<path d="m43.9 5.5c-.3-.2-.6-.3-.9-.5l-16.3 36.9c.4-.1.8-.2 1.2-.3z"/>
|
||||
<path d="m33.2 36.1 12.1-29.5c-.2-.3-.5-.5-.8-.7l-14.1 34.2c.4-.4.8-.8 1.1-1.3z"/>
|
||||
<path d="m40.1 25.1 6.5-16.8-.3-.5c-.1-.2-.3-.4-.4-.6l-8.6 22.2z"/>
|
||||
<path d="m47.8 10.1-.7-1.1-6 16.7c.2.3.4.7.7 1.1z"/>
|
||||
<path d="m49 12.1-.7-1.1-5.7 17.2c.2.4.5.7.7 1.1z"/>
|
||||
<path d="m50.3 14.1-.7-1.1-5.4 17.7c.2.4.5.7.7 1.1z"/>
|
||||
<path d="m51.6 16.2-.7-1.1-5 18.2c.2.4.5.8.7 1.1z"/>
|
||||
<path d="m53 18.5-.7-1.2-4.7 18.8c.3.4.5.8.7 1.2z"/>
|
||||
<path d="m54.5 20.8-.8-1.2-4.3 19.4c.2.3.5.7.8 1z"/>
|
||||
<path d="m56.9 19.2-1.5 2.4-3.8 19.4c.3.2.6.3.9.5z"/>
|
||||
<path d="m59.6 14.9-1.4 2.2-4.3 24.8c.3.1.7.1 1 .1z"/>
|
||||
<path d="m62 11.1-1.3 2.1-4.3 28.7c.4-.1.7-.2 1.1-.3z"/>
|
||||
<path d="m64.1 7.8-1.2 1.8-3.8 31.2c.4-.3.8-.6 1.1-.9l4-32.2c-.1 0-.1 0-.1.1z"/>
|
||||
<path d="m66 5.8c-.4.3-.8.6-1.1 1l-3 30.7c.3-.5.7-1.1 1.2-1.9z"/>
|
||||
<path d="m67.7 4.9c-.4.1-.7.3-1 .5l-2.1 27.9c.4-.6.7-1.2 1.1-1.8z"/>
|
||||
<path d="m69.2 4.5c-.3 0-.7.1-1 .2l-1.2 24.6c.4-.6.7-1.1 1.1-1.7z"/>
|
||||
<path d="m70.8 4.6c-.3 0-.7-.1-1-.1l-.5 21.3c.4-.6.7-1.1 1-1.6z"/>
|
||||
<path d="m72.4 5c-.3-.1-.7-.2-1-.3v17.8c.3-.5.7-1.1 1-1.6z"/>
|
||||
<path d="m73.9 5.8c-.3-.2-.7-.4-1-.6l.3 14.2c.3-.6.7-1.1 1-1.5z"/>
|
||||
<path d="m75.6 7.3c-.3-.4-.7-.8-1.1-1.1l.5 10.4c.5-.9.9-1.4.9-1.4v-.1z"/>
|
||||
<path d="m76.7 13.6c.6-1.9.4-3.7-.4-5.1z"/>
|
||||
<path d="m3.5 11.8c.1 1.1.4 2.3 1.1 3.4l14.8 23.5c.3.4.6.8.9 1.2z"/>
|
||||
<path d="m3.7 9.8c-.1.5-.2 1-.2 1.6l19 30c.5.2 1 .4 1.5.5z"/>
|
||||
<path d="m4.2 8.5c-.2.4-.4.7-.5 1.1l21.6 32.4c.4 0 .8 0 1.1-.1z"/>
|
||||
<path d="m4.8 7.5c-.2.2-.4.5-.6.9l23.4 33.2c.3-.1.6-.3.9-.4z"/>
|
||||
<path d="m5.6 6.6c-.3.2-.5.5-.7.7l24.6 33.2c.3-.2.5-.4.7-.7z"/>
|
||||
<path d="m6.4 5.9c-.2.2-.5.4-.7.6l25.3 32.5c.2-.3.4-.6.5-.9z"/>
|
||||
<path d="m7.4 5.3c-.3.1-.6.3-.9.5l25.5 31.1c.1-.4.2-.8.3-1.3z"/>
|
||||
<path d="m7.5 5.2 24.8 28.7c-.1-.9-.5-1.8-1-2.7 0 0 0-.1-.1-.2l-22.7-26.2c-.4.1-.7.3-1 .4z"/>
|
||||
<path d="m9.7 4.5c-.3.1-.7.2-1.1.3l19.5 21.5c-.9-1.5-2-3.2-3.1-4.9z"/>
|
||||
<path d="m11.3 4.5c-.5 0-.9 0-1.4 0l13.2 13.8c-.9-1.5-1.9-3-2.7-4.3z"/>
|
||||
<path d="m11.6 4.6 7.6 7.6c-1.1-1.7-2-3.1-2.4-3.8l-3.1-3.1c-.7-.4-1.4-.6-2.1-.7z"/>
|
||||
<path d="m14.7 5.9 1 .9c-.3-.3-.6-.6-1-.9z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.5 KiB |
|
|
@ -4,13 +4,12 @@ import { api } from 'gateway/lib/api'
|
|||
import { serverInfo, reloadServerInfo } from 'gateway/lib/store'
|
||||
import Fa from 'svelte-fa'
|
||||
|
||||
import logo from '../../public/assets/logo.svg'
|
||||
|
||||
import Router, { link } from 'svelte-spa-router'
|
||||
import active from 'svelte-spa-router/active'
|
||||
import { wrap } from 'svelte-spa-router/wrap'
|
||||
import { Spinner } from 'sveltestrap'
|
||||
import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
|
||||
import Logo from 'common/Logo.svelte'
|
||||
|
||||
async function init () {
|
||||
await reloadServerInfo()
|
||||
|
|
@ -58,7 +57,9 @@ const routes = {
|
|||
<div class="app container">
|
||||
<header>
|
||||
<a href="/@warpgate" class="d-flex">
|
||||
<img class="logo" src={logo} alt="Logo" />
|
||||
<div class="logo">
|
||||
<Logo />
|
||||
</div>
|
||||
</a>
|
||||
{#if $serverInfo?.username}
|
||||
<a use:link use:active href="/">Sessions</a>
|
||||
|
|
@ -99,6 +100,7 @@ const routes = {
|
|||
.logo {
|
||||
width: 40px;
|
||||
padding-top: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
|
|
|
|||
42
warpgate-web/src/common/Logo.svelte
Normal file
42
warpgate-web/src/common/Logo.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script type="ts">
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { get } from 'svelte/store'
|
||||
import { currentThemeFile } from 'theme'
|
||||
import logo from '../../public/assets/logo.svg?raw'
|
||||
|
||||
let element: HTMLElement|undefined
|
||||
|
||||
function colorize (r: number, g: number, b: number, dr: number, dg: number, db: number) {
|
||||
element?.querySelectorAll('path').forEach((p, idx) => {
|
||||
let d = idx
|
||||
p.style.fill = `rgb(${r + d * dr}, ${g + d * dg}, ${b + d * db})`
|
||||
})
|
||||
}
|
||||
|
||||
function colorizeByTheme () {
|
||||
if (get(currentThemeFile) === 'light') {
|
||||
colorize(81, 47, 185, -1, 1, 3)
|
||||
} else {
|
||||
colorize(131, 167, 255, -3, 1, -1)
|
||||
}
|
||||
}
|
||||
|
||||
let s = currentThemeFile.subscribe(colorizeByTheme)
|
||||
|
||||
onMount(() => {
|
||||
colorizeByTheme()
|
||||
})
|
||||
|
||||
onDestroy(s)
|
||||
|
||||
</script>
|
||||
|
||||
<div bind:this={element} class="d-flex">
|
||||
{@html logo}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(svg) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,13 +2,12 @@
|
|||
import { faSignOut } from '@fortawesome/free-solid-svg-icons'
|
||||
import { Alert, Spinner } from 'sveltestrap'
|
||||
import Fa from 'svelte-fa'
|
||||
|
||||
import { api } from 'gateway/lib/api'
|
||||
import { reloadServerInfo, serverInfo } from 'gateway/lib/store'
|
||||
import logo from '../../public/assets/logo.svg'
|
||||
import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
|
||||
import Login from './Login.svelte'
|
||||
import TargetList from './TargetList.svelte'
|
||||
import Logo from 'common/Logo.svelte'
|
||||
|
||||
let redirecting = false
|
||||
|
||||
|
|
@ -39,7 +38,9 @@ init()
|
|||
<Spinner />
|
||||
{:else}
|
||||
<div class="d-flex align-items-center mt-5 mb-5">
|
||||
<img class="logo" src={logo} alt="Warpgate" />
|
||||
<div class="logo">
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
{#if $serverInfo?.username}
|
||||
<div class="ms-auto">{$serverInfo.username}</div>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@ type ThemeName = ThemeFileName|'auto'
|
|||
|
||||
const savedTheme = (localStorage.getItem('theme') ?? 'auto') as ThemeName
|
||||
export const currentTheme = writable(savedTheme)
|
||||
export const currentThemeFile = writable<ThemeFileName>('dark')
|
||||
|
||||
const styleElement = document.createElement('style')
|
||||
document.head.appendChild(styleElement)
|
||||
|
||||
function loadThemeFile (name: ThemeFileName) {
|
||||
currentThemeFile.set(name)
|
||||
if (name === 'dark') {
|
||||
return import('./theme.dark.scss?inline')
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue