bossiara13/J.A.R.V.I.S-rust
1
1
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Activity Actions

project restructure with Rust workspaces

Browse source
This commit is contained in:
Priler 2026-01-04 05:19:47 +05:00
parent 3ffbe876f3
commit 09f72622bc
428 changed files with 19372 additions and 6061 deletions
Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/components/Footer.svelte Normal file
View file

@ -0,0 +1,73 @@
<script>
import { invoke } from "@tauri-apps/api/tauri"
import { tg_official_link, github_repository_link } from "@/stores";
let current_year = new Date().getFullYear();
let author_name = "";
(async () => {
author_name = await invoke("get_author_name")
})().catch(err => {
console.error(err);
});
</script>
<footer id="footer">
<p>© {current_year}. Автор проекта: {author_name}</p>
<p style="margin-top: 5px;margin-bottom: 15px;">
<a href="{tg_official_link}" target="_blank" class="special-link"><img src="/media/icons/howdy-logo.png" alt="" width="20px">&nbsp;&nbsp;Наш телеграм</a> канал.
&nbsp;&nbsp;
<a href="{github_repository_link}" target="_blank"><img src="/media/icons/github-logo.png" alt="" width="18px">&nbsp;Github репозиторий</a> проекта.</p>
</footer>
<style lang="scss">
#footer {
text-align: center;
color: #565759;
font-size: 12px;
font-weight: bold;
line-height: 1.7em;
margin-top: 15px;
p {
margin: 0;
padding: 0;
}
a {
color: #185876;
text-decoration: none;
transition: opacity .5s;
img {
opacity: .5;
transition: opacity .5s;
margin-top: -4px;
}
&:hover {
color: #2A9CD0;
img {
opacity: 1;
}
}
&.special-link {
color: #941d92;
display: inline-block;
&:hover {
color: #FF07FC;
background: url(/media/images/bg/bg24.gif);
background-repeat: no-repeat;
background-size: contain;
}
}
}
}
</style>

28
frontend/src/components/Header.svelte Normal file
View file

@ -0,0 +1,28 @@
<script lang="ts">
import { invoke } from "@tauri-apps/api/tauri"
import { Dashboard, Gear } from 'radix-icons-svelte'
import {isActive} from '@roxi/routify'
let app_version = "";
(async () => {
app_version = await invoke("get_app_version")
})().catch(err => {
console.error(err);
});
</script>
<header id="header">
<div class="logo">
<a href="/" title="Проект канала Хауди Хо!"><img src="/media/header-logo.png" alt=""></a>
<div>
<h1><a href="/">JARVIS</a></h1>
<h2>v{app_version} <small style="color: #8AC832;opacity: .9;font-size: 13px;">BETA</small></h2>
</div>
</div>
<nav class="top-menu">
<ul>
<li><a href="/commands" class:active={$isActive('/commands')}><Dashboard /> Команды</a></li>
<li><a href="/settings" class:active={$isActive('/settings')}><Gear /> Настройки</a></li>
</ul>
</nav>
</header>

5
frontend/src/components/Nav.svelte Normal file
View file

@ -0,0 +1,5 @@
<nav>
<a href="/index">Main Page</a>
<a href="/settings">Настройки</a>
</nav>

647
frontend/src/components/elements/ArcReactor.svelte Normal file
View file

@ -0,0 +1,647 @@
<!-- Based on: https://github.com/rembertdesigns/Iron-Man-Arc-Reactor-Pure-CSS and https://codepen.io/FlyingEmu/pen/DZNqEj -->
<div id="arc-reactor" class="reactor-container">
<div class="reactor-container-inner circle abs-center">
<ul class="marks"><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li></ul>
<div class="e7">
<div class="semi_arc_3 e5_1">
<div class="semi_arc_3 e5_2">
<div class="semi_arc_3 e5_3">
<div class="semi_arc_3 e5_4" />
</div>
</div>
</div>
</div>
</div>
<div class="tunnel circle abs-center" />
<div class="core-wrapper circle abs-center" />
<div class="core-outer circle abs-center" />
<div class="core-inner circle abs-center" />
<div class="coil-container">
<div class="coil coil-1" />
<div class="coil coil-2" />
<div class="coil coil-3" />
<div class="coil coil-4" />
<div class="coil coil-5" />
<div class="coil coil-6" />
<div class="coil coil-7" />
<div class="coil coil-8" />
</div>
</div>
<style lang="scss" global>
$arc_radius: 130px;
$size3: 6px;
$cshadow: rgba(2, 254, 255, 0.8);
$marks_color_1: rgba(2, 254, 255, 1);
$marks_color_2: rgba(2, 254, 255, 0.3);
$colour1: rgba(2, 255, 255, 0.15);
$colour3: rgba(2, 255, 255, 0.3);
$cshadow: rgba(2, 254, 255, 0.8);
.reactor-container {
width: 300px;
height: 320px;
margin: auto;
// border: 1px dashed #888;
position: relative;
border-radius: 50%;
transition: scale 1s ease, opacity .5s ease;
scale: 0.9;
opacity: .9;
// background-color: #384c50;
// border: 1px solid #121414;
// box-shadow: 0px 0px 32px 8px #121414, 0px 0px 4px 1px #121414 inset;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}
.reactor-container-inner {
height: 238px;
width: 238px;
background-color: #161a1b;
box-shadow: 0px 0px 50px 15px $colour3, inset 0px 0px 50px 15px $colour3;
// box-shadow: 0px 0px 4px 1px #52fefe;
}
.circle {
border-radius: 50%;
}
.abs-center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.core-inner {
width: 70px;
height: 70px;
border: 5px solid #1b4e5f;
background-color: #ffffff;
box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe inset;
}
.core-outer {
width: 120px;
height: 120px;
border: 1px solid #52fefe;
background-color: #ffffff;
box-shadow: 0px 0px 2px 1px #52fefe, 0px 0px 10px 5px #52fefe inset;
}
.core-wrapper {
width: 180px;
height: 180px;
background-color: #073c4b;
box-shadow: 0px 0px 5px 4px #52fefe, 0px 0px 6px 2px #52fefe inset;
}
.tunnel {
width: 220px;
height: 220px;
background-color: #ffffff;
box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inset;
}
.coil-container {
position: relative;
width: 100%;
height: 100%;
animation: 10s infinite linear reactor-anim;
transition: animation 1s;
}
.coil {
position: absolute;
width: 30px;
height: 20px;
top: calc(50% - 110px);
left: calc(50% - 15px);
transform-origin: 15px 110px;
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}
.coil-1 {
transform: rotate(0deg);
}
.coil-2 {
transform: rotate(45deg);
}
.coil-3 {
transform: rotate(90deg);
}
.coil-4 {
transform: rotate(135deg);
}
.coil-5 {
transform: rotate(180deg);
}
.coil-6 {
transform: rotate(225deg);
}
.coil-7 {
transform: rotate(270deg);
}
.coil-8 {
transform: rotate(315deg);
}
@keyframes reactor-anim {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@mixin border-radius($pixel...) {
border-radius: $pixel;
}
.e7 {
position: relative;
z-index: 1;
width: 160%;
height: 160%;
left: -32.5%;
top: -32.5%;
right: 0;
bottom: 0;
margin: auto;
border: $size3 solid transparent;
background: transparent;
@include border-radius(50%);
transform: rotateZ(0deg);
transition: box-shadow 3s ease;
text-align: center;
opacity: .3;
}
.semi_arc {
width: 100px;
height: 100px;
border: 6px solid #02feff;
background: rgba(2, 254, 255, 0.2);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
transform: rotateZ(0deg);
transition: box-shadow 3s ease;
text-align: center;
overflow: hidden;
}
.semi_arc:hover {
box-shadow: 0px 0px 30px $cshadow;
transition: 0.3s;
}
.semi_arc_2 {
content: "";
position: absolute;
width: 94%;
height: 94%;
left: 3%;
top: 3%;
border: 5px solid #02feff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
animation: rotate 4s linear infinite;
text-align: center;
overflow: hidden;
}
.semi_arc_2:after {
content: "";
position: absolute;
width: 94%;
height: 94%;
left: 3%;
top: 3%;
border: 4px solid #02feff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
animation: rotate_anti 2s linear infinite;
}
.semi_arc_3 {
content: "";
position: absolute;
width: 94%;
height: 94%;
left: 3%;
top: 3%;
border: 5px solid #02feff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
animation: rotate 4s linear infinite;
text-align: center;
overflow: hidden;
}
.e1:after {
border-color: rgba(2, 255, 255, 0.6);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.e2:after {
border-color: rgba(2, 255, 255, 0.6);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.e3 {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
animation: rotate 5s linear infinite;
}
.e3:after {
border-color: rgba(2, 255, 255, 0.6);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.e4 {
width: 150px;
height: 150px;
}
.e4_1 {
border-color: rgba(2, 255, 255, 0.3);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.e4_1:after {
border-color: rgba(2, 255, 255, 0.6);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.e5 {
width: 200px;
height: 200px;
}
.e5_1 {
color: rgba(2, 255, 255, 0.15);
border: 2px solid;
border-left: 2px solid transparent;
animation: rotate 5s linear infinite;
}
.e5_2 {
color: rgba(2, 255, 255, 0.7);
border: 4px solid;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
animation: rotate_anti 4s linear infinite;
}
.e5_3 {
color: rgba(2, 255, 255, 0.5);
border: 2px solid;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
animation: rotate 3s linear infinite;
}
.e5_4 {
color: rgba(2, 255, 255, 0.15);
border: 4px solid;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
animation: rotate_anti 2s linear infinite;
}
.e6 {
border-color: transparent;
background: rgba(255, 255, 255, 0);
width: 200px;
height: 200px;
}
@keyframes rotate_anti {
0% {
transform: rotateZ(360deg);
}
100% {
transform: rotateZ(0deg);
}
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.marks {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
li {
display: block;
width: 3px;
height: 11px;
background: $cshadow;
position: absolute;
margin-left: 117.5px;
margin-top: 113.5px;
animation: colour_ease2 3s infinite ease-in-out;
}
}
@keyframes colour_ease2 {
0% {
background: $marks_color_1;
}
50% {
background: $marks_color_2;
}
100% {
background: $marks_color_1;
}
}
.marks li:first-child {
transform: rotate(6deg) translateY($arc_radius);
}
.marks li:nth-child(2) {
transform: rotate(12deg) translateY($arc_radius);
}
.marks li:nth-child(3) {
transform: rotate(18deg) translateY($arc_radius);
}
.marks li:nth-child(4) {
transform: rotate(24deg) translateY($arc_radius);
}
.marks li:nth-child(5) {
transform: rotate(30deg) translateY($arc_radius);
}
.marks li:nth-child(6) {
transform: rotate(36deg) translateY($arc_radius);
}
.marks li:nth-child(7) {
transform: rotate(42deg) translateY($arc_radius);
}
.marks li:nth-child(8) {
transform: rotate(48deg) translateY($arc_radius);
}
.marks li:nth-child(9) {
transform: rotate(54deg) translateY($arc_radius);
}
.marks li:nth-child(10) {
transform: rotate(60deg) translateY($arc_radius);
}
.marks li:nth-child(11) {
transform: rotate(66deg) translateY($arc_radius);
}
.marks li:nth-child(12) {
transform: rotate(72deg) translateY($arc_radius);
}
.marks li:nth-child(13) {
transform: rotate(78deg) translateY($arc_radius);
}
.marks li:nth-child(14) {
transform: rotate(84deg) translateY($arc_radius);
}
.marks li:nth-child(15) {
transform: rotate(90deg) translateY($arc_radius);
}
.marks li:nth-child(16) {
transform: rotate(96deg) translateY($arc_radius);
}
.marks li:nth-child(17) {
transform: rotate(102deg) translateY($arc_radius);
}
.marks li:nth-child(18) {
transform: rotate(108deg) translateY($arc_radius);
}
.marks li:nth-child(19) {
transform: rotate(114deg) translateY($arc_radius);
}
.marks li:nth-child(20) {
transform: rotate(120deg) translateY($arc_radius);
}
.marks li:nth-child(21) {
transform: rotate(126deg) translateY($arc_radius);
}
.marks li:nth-child(22) {
transform: rotate(132deg) translateY($arc_radius);
}
.marks li:nth-child(23) {
transform: rotate(138deg) translateY($arc_radius);
}
.marks li:nth-child(24) {
transform: rotate(144deg) translateY($arc_radius);
}
.marks li:nth-child(25) {
transform: rotate(150deg) translateY($arc_radius);
}
.marks li:nth-child(26) {
transform: rotate(156deg) translateY($arc_radius);
}
.marks li:nth-child(27) {
transform: rotate(162deg) translateY($arc_radius);
}
.marks li:nth-child(28) {
transform: rotate(168deg) translateY($arc_radius);
}
.marks li:nth-child(29) {
transform: rotate(174deg) translateY($arc_radius);
}
.marks li:nth-child(30) {
transform: rotate(180deg) translateY($arc_radius);
}
.marks li:nth-child(31) {
transform: rotate(186deg) translateY($arc_radius);
}
.marks li:nth-child(32) {
transform: rotate(192deg) translateY($arc_radius);
}
.marks li:nth-child(33) {
transform: rotate(198deg) translateY($arc_radius);
}
.marks li:nth-child(34) {
transform: rotate(204deg) translateY($arc_radius);
}
.marks li:nth-child(35) {
transform: rotate(210deg) translateY($arc_radius);
}
.marks li:nth-child(36) {
transform: rotate(216deg) translateY($arc_radius);
}
.marks li:nth-child(37) {
transform: rotate(222deg) translateY($arc_radius);
}
.marks li:nth-child(38) {
transform: rotate(228deg) translateY($arc_radius);
}
.marks li:nth-child(39) {
transform: rotate(234deg) translateY($arc_radius);
}
.marks li:nth-child(40) {
transform: rotate(240deg) translateY($arc_radius);
}
.marks li:nth-child(41) {
transform: rotate(246deg) translateY($arc_radius);
}
.marks li:nth-child(42) {
transform: rotate(252deg) translateY($arc_radius);
}
.marks li:nth-child(43) {
transform: rotate(258deg) translateY($arc_radius);
}
.marks li:nth-child(44) {
transform: rotate(264deg) translateY($arc_radius);
}
.marks li:nth-child(45) {
transform: rotate(270deg) translateY($arc_radius);
}
.marks li:nth-child(46) {
transform: rotate(276deg) translateY($arc_radius);
}
.marks li:nth-child(47) {
transform: rotate(282deg) translateY($arc_radius);
}
.marks li:nth-child(48) {
transform: rotate(288deg) translateY($arc_radius);
}
.marks li:nth-child(49) {
transform: rotate(294deg) translateY($arc_radius);
}
.marks li:nth-child(50) {
transform: rotate(300deg) translateY($arc_radius);
}
.marks li:nth-child(51) {
transform: rotate(306deg) translateY($arc_radius);
}
.marks li:nth-child(52) {
transform: rotate(312deg) translateY($arc_radius);
}
.marks li:nth-child(53) {
transform: rotate(318deg) translateY($arc_radius);
}
.marks li:nth-child(54) {
transform: rotate(324deg) translateY($arc_radius);
}
.marks li:nth-child(55) {
transform: rotate(330deg) translateY($arc_radius);
}
.marks li:nth-child(56) {
transform: rotate(336deg) translateY($arc_radius);
}
.marks li:nth-child(57) {
transform: rotate(342deg) translateY($arc_radius);
}
.marks li:nth-child(58) {
transform: rotate(348deg) translateY($arc_radius);
}
.marks li:nth-child(59) {
transform: rotate(354deg) translateY($arc_radius);
}
.marks li:nth-child(60) {
transform: rotate(360deg) translateY($arc_radius);
}
/*
Some overrides.
*/
.reactor-container.active {
$arc_radius: 130px;
$size3: 6px;
$cshadow: rgba(2, 254, 255, 0.8);
$marks_color_1: rgba(2, 254, 255, 1);
$marks_color_2: rgba(2, 254, 255, 0.3);
$colour1: rgba(2, 255, 255, 0.15);
$colour3: rgba(2, 255, 255, 0.3);
$cshadow: rgba(2, 254, 255, 0.8);
scale: 1.1;
opacity: 1;
.coil-container {
animation: 3s infinite linear reactor-anim;
}
.reactor-container-inner {
box-shadow: 0px 0px 50px 15px $colour3, inset 0px 0px 50px 15px $colour3;
}
.core-inner {
border: 5px solid #1b4e5f;
background-color: #ffffff;
box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe inset;
}
.core-outer {
border: 1px solid #52fefe;
background-color: #ffffff;
box-shadow: 0px 0px 2px 1px #52fefe, 0px 0px 10px 5px #52fefe inset;
}
.core-wrapper {
background-color: #073c4b;
box-shadow: 0px 0px 5px 4px #52fefe, 0px 0px 6px 2px #52fefe inset;
}
.tunnel {
background-color: #ffffff;
box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inset;
}
.coil {
background-color: #073c4b;
box-shadow: 0px 0px 5px #52fefe inset;
}
.semi_arc {
border: 6px solid #02feff;
background: rgba(2, 254, 255, 0.2);
}
.e5_1 {
animation: rotate 3s linear infinite;
}
.e5_2 {
animation: rotate_anti 2s linear infinite;
}
.e5_3 {
animation: rotate 2s linear infinite;
}
.e5_4 {
animation: rotate_anti 2s linear infinite;
}
}
</style>

18
frontend/src/components/elements/HDivider.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
export let no_margin = false;
</script>
<div class="h-divider" class:no-margin="{no_margin}"></div>
<style lang="scss">
.h-divider {
margin: 20px 0;
height: 40px;
background-image: url(media/images/decor.png);
background-position: center;
&.no-margin {
margin: 0;
}
}
</style>

11
frontend/src/components/elements/SearchBar.svelte Normal file
View file

@ -0,0 +1,11 @@
<script>
let search_q = "";
</script>
<div id="search-form" class="search" class:active={search_q != ""}>
<form action="#" method="GET">
<input bind:value={search_q} type="text" name="q" placeholder="Введите команду или скажите &laquo;Джарвис&raquo; ..." autocomplete="off" minlength="3" maxlength="30">
<button type="submit"></button>
<small>Enter</small>
</form>
</div>

377
frontend/src/components/elements/Stats.svelte Normal file
View file

@ -0,0 +1,377 @@
<script>
// IMPORTS
import { invoke } from "@tauri-apps/api/tauri"
import { onMount } from 'svelte'
import { capitalizeFirstLetter } from "@/functions";
// VARIABLES
let selected_microphone = 0;
let microphone_label = "";
let nn_details = {
"ww_engine": "",
"stt_engine": "Vosk"
}
// let resources_cpu_temp = 0;
// let resources_cpu_usage = 0;
let resources_ram_usage = "-";
// CODE
setInterval(() => {
(async () => {
resources_ram_usage = Number(await invoke("get_current_ram_usage")).toFixed(2);
// resources_cpu_temp = await invoke("get_cpu_temp");
// resources_cpu_usage = +Number(await invoke("get_cpu_usage")).toFixed(2);
})().catch(err => {
console.error(err);
});
}, 1000);
onMount(async () => {
(async () => {
selected_microphone = +Number(await invoke("db_read", {key: "selected_microphone"}));
microphone_label = await invoke("pv_get_audio_device_name", {idx: selected_microphone});
nn_details["ww_engine"] = capitalizeFirstLetter(await invoke("db_read", {key: "selected_wake_word_engine"}));
// resources_cpu_temp = await invoke("get_cpu_temp");
// resources_cpu_usage = +Number(await invoke("get_cpu_usage")).toFixed(2);
})().catch(err => {
console.error(err);
});
});
</script>
<div class="statistics">
<div class="online">
<div class="pulse"><div class="wave"></div></div>
<div class="info">
<span class="num">Микрофон</span>
<small title="{microphone_label}">{microphone_label}</small>
</div>
</div>
<div class="files">
<div class="pulse"><div class="wave"></div></div>
<div class="info">
<span class="num">Нейросети</span>
<small>{nn_details["ww_engine"]} + {nn_details["stt_engine"]}</small>
</div>
</div>
<div class="downloads hint--bottom" aria-label="Общее количество скачиваний по всему проекту">
<div class="pulse"><div class="wave"></div></div>
<div class="info">
<span class="num">Ресурсы</span>
<small><!-- CPU {resources_cpu_usage}%<br /> -->RAM {resources_ram_usage}mb</small>
</div>
</div>
</div>
<style lang="scss">
.statistics {
position: relative;
z-index: 3;
padding: 0 10px;
height: 100px;
display: flex;
justify-content: space-between;
& > div {
height: 70px;
}
.info {
z-index: 10;
}
& > .online {
position: relative;
width: 40%;
$base-color: rgba(0, 191, 8, 1);
$mid-color: rgba(0, 191, 8, 0.4);
$end-color: rgba(0, 191, 8, 0);
& > .pulse::before {
background-color: rgba(0, 191, 8, 1);
}
& > .pulse::after {
background-color: rgba(0, 191, 8, 1);
animation: online-cdot linear 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
& > .pulse .wave {
background-color: rgba(0, 191, 8, 0.4);
animation: online-radarWave cubic-bezier(0, 0.54, 0.53, 1) 3s 0s;
animation-iteration-count: infinite;
}
& > .pulse .wave::after {
background-color: rgba(0, 191, 8, 0.4);
animation: online-radarWave cubic-bezier(0, 0.54, 0.53, 1) 3s
0.1s;
animation-iteration-count: infinite;
}
& > .info {
position: absolute;
top: 26px;
left: 26px;
& > span.num {
font-size: 18px;
font-weight: bold;
color: #00bf08;
}
& > small {
display: block;
color: #535a60;
font-size: 12px;
position: relative;
top: 0;
width: 130px;
max-height: 40px;
overflow: hidden;
line-height: 1.5em;
}
}
@keyframes online-cdot {
0% {
opacity: 0.3;
background: $base-color;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
background: $end-color;
}
}
@keyframes online-radarWave {
0% {
opacity: 0.1;
transform: scale(0);
}
5% {
background: $mid-color;
opacity: 1;
}
100% {
transform: scale(1.2);
background: $end-color;
}
}
}
& > .files {
position: relative;
width: 35%;
$base-color: rgba(255, 129, 48, 1);
$mid-color: rgba(255, 129, 48, 0.4);
$end-color: rgba(255, 129, 48, 0);
& > .pulse::before {
background-color: $base-color;
}
& > .pulse::after {
background-color: $base-color;
animation: files-cdot linear 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
& > .pulse .wave {
background-color: $mid-color;
animation: files-radarWave cubic-bezier(0, 0.54, 0.53, 1) 5s 0s;
animation-iteration-count: infinite;
}
& > .pulse .wave::after {
background-color: $mid-color;
animation: files-radarWave cubic-bezier(0, 0.54, 0.53, 1) 5s
0.1s;
animation-iteration-count: infinite;
}
& > .info {
position: absolute;
top: 26px;
left: 26px;
& > span.num {
font-size: 18px;
font-weight: bold;
color: #ff8130;
}
& > small {
display: block;
color: #535a60;
font-size: 12px;
position: relative;
top: 0;
}
}
@keyframes files-cdot {
0% {
opacity: 0.3;
background: $base-color;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
background: $end-color;
}
}
@keyframes files-radarWave {
0% {
opacity: 0.1;
transform: scale(0);
}
5% {
background: $mid-color;
transform: scale(0.2);
opacity: 1;
}
100% {
transform: scale(0.8);
background: $end-color;
}
}
}
& > .downloads {
position: relative;
$base-color: rgba(11,66,166, 1);
$mid-color: rgba(32, 150, 243, 0.4);
$end-color: rgba(32, 150, 243, 0);
& > .pulse::before {
background: rgba(32, 150, 243, 1);
}
& > .pulse::after {
background: rgba(32, 150, 243, 1);
animation: downloads-cdot linear 7s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 1s;
}
& > .pulse .wave {
background-color: $mid-color;
animation: downloads-radarWave cubic-bezier(0, 0.54, 0.53, 1) 7s
0s;
animation-iteration-count: infinite;
animation-delay: 1s;
}
& > .pulse .wave::after {
background-color: $mid-color;
animation: downloads-radarWave cubic-bezier(0, 0.54, 0.53, 1) 7s
0.1s;
animation-iteration-count: infinite;
animation-delay: 1s;
}
& > .info {
position: absolute;
top: 26px;
left: 26px;
& > span.num {
font-size: 18px;
font-weight: bold;
color: #1b78a6;
}
& > small {
display: block;
color: #535a60;
font-size: 12px;
position: relative;
top: 0;
}
}
@keyframes downloads-cdot {
0% {
opacity: 0.3;
background: $base-color;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
background: $end-color;
}
}
@keyframes downloads-radarWave {
0% {
opacity: 0.1;
transform: scale(0);
}
5% {
background: $mid-color;
opacity: 1;
}
100% {
transform: scale(0.7);
background: $end-color;
}
}
}
.pulse {
position: relative;
height: 100px;
width: 100px;
margin: 0;
left: -43px;
top: 0px;
z-index: 5;
}
.pulse::before {
content: '';
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: .5;
}
.pulse::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pulse .wave {
position: absolute;
left: 7%;
top: 7%;
width: 86%;
height: 86%;
border-radius: 50%;
opacity: 0;
}
.pulse .wave::after {
content: '';
position: absolute;
left: 7%;
top: 7%;
width: 86%;
height: 86%;
border-radius: 50%;
opacity: 0;
}
}
</style>