feat: add SAC app icon to favicon, sidebar, and login page
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -3,6 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="theme-color" content="#15202b" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="apple-touch-icon" href="/sac-icon.png" />
|
||||||
<title>Security Alert Center</title>
|
<title>Security Alert Center</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="SAC">
|
||||||
|
<rect width="512" height="512" rx="96" fill="#15202b"/>
|
||||||
|
<g fill="none" stroke="#3db8ff" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M256 88 L360 128 V248 C360 332 316 388 256 424 C196 388 152 332 152 248 V128 Z"/>
|
||||||
|
<circle cx="256" cy="292" r="22" fill="#3db8ff" stroke="none"/>
|
||||||
|
<path d="M256 270 V210"/>
|
||||||
|
<path d="M196 178 C216 158 236 148 256 148 C276 148 296 158 316 178"/>
|
||||||
|
<path d="M176 198 C206 168 231 153 256 153 C281 153 306 168 336 198"/>
|
||||||
|
<path d="M156 218 C196 178 226 163 256 163 C286 163 316 178 356 218"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 681 B |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<aside class="sac-sidebar">
|
<aside class="sac-sidebar">
|
||||||
<div class="sac-sidebar-brand">{{ appTitle }}</div>
|
<div class="sac-sidebar-brand">
|
||||||
|
<img src="/sac-icon.png" alt="" class="sac-brand-logo" width="40" height="40" />
|
||||||
|
<div class="sac-brand-text">
|
||||||
|
<span class="sac-brand-name">{{ appName }}</span>
|
||||||
|
<span class="sac-brand-version">v.{{ appVersion }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<nav class="sac-sidebar-nav" aria-label="Основная навигация">
|
<nav class="sac-sidebar-nav" aria-label="Основная навигация">
|
||||||
<RouterLink
|
<RouterLink
|
||||||
v-for="item in navItems"
|
v-for="item in navItems"
|
||||||
@@ -25,9 +31,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { clearToken } from "../api";
|
import { clearToken } from "../api";
|
||||||
import { APP_VERSION_LABEL } from "../version";
|
import { APP_NAME, APP_VERSION } from "../version";
|
||||||
|
|
||||||
const appTitle = APP_VERSION_LABEL;
|
const appName = APP_NAME;
|
||||||
|
const appVersion = APP_VERSION;
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@@ -70,16 +77,42 @@ function logout() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sac-sidebar-brand {
|
.sac-sidebar-brand {
|
||||||
font-weight: 700;
|
display: flex;
|
||||||
color: #fff;
|
align-items: center;
|
||||||
font-size: 0.82rem;
|
gap: 0.65rem;
|
||||||
line-height: 1.35;
|
|
||||||
padding: 0.5rem 0.75rem 0.85rem;
|
padding: 0.5rem 0.75rem 0.85rem;
|
||||||
white-space: nowrap;
|
|
||||||
border-bottom: 1px solid #2a3441;
|
border-bottom: 1px solid #2a3441;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sac-brand-logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sac-brand-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sac-brand-name {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sac-brand-version {
|
||||||
|
color: #9aa4b2;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.sac-sidebar-nav {
|
.sac-sidebar-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card" style="max-width: 360px; margin: 4rem auto">
|
<div class="card login-card">
|
||||||
<h1 style="margin-top: 0">Вход в SAC</h1>
|
<div class="login-brand">
|
||||||
|
<img src="/sac-icon.png" alt="" class="login-brand-icon" width="64" height="64" />
|
||||||
|
<h1 class="login-title">Вход в SAC</h1>
|
||||||
|
<p class="login-subtitle">Security Alert Center</p>
|
||||||
|
</div>
|
||||||
<form @submit.prevent="submit">
|
<form @submit.prevent="submit">
|
||||||
<p>
|
<p>
|
||||||
<label>Логин<br />
|
<label>Логин<br />
|
||||||
@@ -46,3 +50,34 @@ async function submit() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-card {
|
||||||
|
max-width: 360px;
|
||||||
|
margin: 4rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-brand-icon {
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
margin: 0.35rem 0 0;
|
||||||
|
color: #9aa4b2;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user