+
{ setStep((current) => (current - 1) as LaunchStep); setStepError('') }}>{step === 1 ? 'Cancel' : 'Back'}
{step < 4 ?
Next :
{createMut.isPending ? 'Launching…' : 'Launch instance'} }
diff --git a/packages/frontend/src/components/DatabaseLaunchProgress.tsx b/packages/frontend/src/components/DatabaseLaunchProgress.tsx
index ad5eb3a..9af9ff9 100644
--- a/packages/frontend/src/components/DatabaseLaunchProgress.tsx
+++ b/packages/frontend/src/components/DatabaseLaunchProgress.tsx
@@ -5,12 +5,8 @@ interface DatabaseLaunchProgressProps {
export function DatabaseLaunchProgress({ name, description }: DatabaseLaunchProgressProps) {
return
-
-
-
-
-
-
+
Creating {name || "database"} {description}
;
}
+import databaseCreationAnimation from '../../../../svgAsset/db-creation.svg';
diff --git a/packages/frontend/src/components/LightsailInstancePanel.test.tsx b/packages/frontend/src/components/LightsailInstancePanel.test.tsx
index ce1d4c1..22e9658 100644
--- a/packages/frontend/src/components/LightsailInstancePanel.test.tsx
+++ b/packages/frontend/src/components/LightsailInstancePanel.test.tsx
@@ -45,6 +45,7 @@ test('shows Lightsail instance state and invokes lifecycle actions from Actions'
await user.click(screen.getByRole('button', {name: 'Stop'}))
await waitFor(() => expect(apiMocks.stopCloudResource).toHaveBeenCalledWith('aws', 'lightsail', 'web'))
+ expect(screen.getByText('Actions').closest('details')).not.toHaveAttribute('open')
})
test('manages firewall rules through generic resource updates and shows browser mappings', async () => {
diff --git a/packages/frontend/src/components/LightsailInstancePanel.tsx b/packages/frontend/src/components/LightsailInstancePanel.tsx
index 4e01182..b1b3d76 100644
--- a/packages/frontend/src/components/LightsailInstancePanel.tsx
+++ b/packages/frontend/src/components/LightsailInstancePanel.tsx
@@ -19,6 +19,7 @@ export function LightsailInstancePanel({resource, runtimeReachable, onDeleted}:
const [startCommand, setStartCommand] = useState('')
const [confirmDelete, setConfirmDelete] = useState(false)
const fileInput = useRef
(null)
+ const actionsMenu = useRef(null)
const ports = publicPorts(resource?.metadata.networking)
const hostMappings = hostPortMappings(resource?.metadata.hostPortMappings)
const disks = instanceDisks(resource?.metadata.hardware)
@@ -100,11 +101,12 @@ export function LightsailInstancePanel({resource, runtimeReachable, onDeleted}:
const wordpress = stringMetadata(resource.metadata.blueprintId) === 'wordpress'
const wordpressPort = hostMappings.find((mapping) => mapping.instancePort === 80)
const stateLabel = resource.status ?? 'Unknown'
+ const closeActionsMenu = () => actionsMenu.current?.removeAttribute('open')
return
setTab('overview')}>Overview
diff --git a/packages/frontend/src/components/LoadBalancingProgress.tsx b/packages/frontend/src/components/LoadBalancingProgress.tsx
index 1777dd6..a014d6b 100644
--- a/packages/frontend/src/components/LoadBalancingProgress.tsx
+++ b/packages/frontend/src/components/LoadBalancingProgress.tsx
@@ -10,10 +10,21 @@ export function LoadBalancingProgress({kind, description}: LoadBalancingProgress
}
+export function TargetHealthIcon({state}: {state: string}) {
+ if (state.toLowerCase() === 'healthy') {
+ return
+ }
+ if (state.toLowerCase() === 'unhealthy') {
+ return
+ }
+ return
+}
+
function ListenerIcon() {
- return
+ return
}
function TargetIcon() {
return {[178, 197, 216, 236, 256, 276, 295].map((cx, index) => )}{[178, 197, 216, 236, 256, 276].map((cx, index) => )}
}
+import loadBalancerAnimation from '../../../../svgAsset/Load-Balancer.svg'
diff --git a/packages/frontend/src/components/MskPanel.tsx b/packages/frontend/src/components/MskPanel.tsx
index e5267d9..d563d24 100644
--- a/packages/frontend/src/components/MskPanel.tsx
+++ b/packages/frontend/src/components/MskPanel.tsx
@@ -1,5 +1,5 @@
import {useEffect, useState} from "react";
-import {Loader2, Plus, RefreshCw, Send, Trash2} from "lucide-react";
+import {Activity, Loader2, MessageSquare, Network, Plus, RefreshCw, Send, Server, Trash2} from "lucide-react";
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
import {createMskCluster, createMskTopic, deleteMskCluster, deleteMskTopic, getMskConsumerGroupLag, listMskClusters, listMskTopics, peekMskMessages, produceMskMessage} from "@/api/mskClient";
import {listEc2Subnets} from "@/api/aws/ec2.api";
@@ -38,25 +38,51 @@ export function MskPanel({runtimeReachable}: {runtimeReachable: boolean}) {
const error = createCluster.error ?? deleteCluster.error ?? createTopic.error ?? deleteTopic.error ?? produce.error ?? peek.error ?? loadLag.error;
return
-
- Amazon MSK
Kafka clusters Broker access is open: no IAM, SASL, or TLS authentication is configured.
clustersQuery.refetch()}>{clustersQuery.isFetching ? "Loading" : "Refresh"}
- ;
}
diff --git a/packages/frontend/src/components/ServerLaunchProgress.tsx b/packages/frontend/src/components/ServerLaunchProgress.tsx
index f69e016..b7bcda5 100644
--- a/packages/frontend/src/components/ServerLaunchProgress.tsx
+++ b/packages/frontend/src/components/ServerLaunchProgress.tsx
@@ -5,15 +5,8 @@ interface ServerLaunchProgressProps {
export function ServerLaunchProgress({name, description}: ServerLaunchProgressProps) {
return
-
-
-
-
-
-
-
-
-
+
Launching {name || 'instance'} {description}
}
+import serverLaunchAnimation from '../../../../svgAsset/server-for-lightmode.svg'
diff --git a/packages/frontend/src/components/TargetGroupPanel.tsx b/packages/frontend/src/components/TargetGroupPanel.tsx
index 8792dc6..17c3c25 100644
--- a/packages/frontend/src/components/TargetGroupPanel.tsx
+++ b/packages/frontend/src/components/TargetGroupPanel.tsx
@@ -3,7 +3,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {useEffect, useState} from 'react'
import {getLoadBalancingDependencies, listFlatItems, putFlatItem, deleteFlatItem} from '@/api/cloudProxyClient'
import {useAccountId} from '@/lib/accountStore'
-import {LoadBalancingProgress} from '@/components/LoadBalancingProgress'
+import {TargetHealthIcon} from '@/components/LoadBalancingProgress'
import type {CloudResource} from '@/types/resource'
type Props = {
@@ -12,16 +12,19 @@ type Props = {
}
type TargetInstance = {id: string; name: string; privateIp: string | null}
+type PendingTarget = {id: string; name: string; port: number}
export function TargetGroupPanel({resource, runtimeReachable}: Props) {
const accountId = useAccountId()
const queryClient = useQueryClient()
const [instanceId, setInstanceId] = useState('')
const [port, setPort] = useState('')
+ const [pendingTargets, setPendingTargets] = useState([])
const dependenciesQuery = useQuery({
queryKey: ['target-group-instances', accountId],
queryFn: ({signal}) => getTargetGroupInstances(signal),
enabled: Boolean(resource) && runtimeReachable,
+ refetchInterval: pendingTargets.length ? 500 : false,
})
const healthQuery = useQuery({
queryKey: ['target-group-health', accountId, resource?.id],
@@ -34,26 +37,33 @@ export function TargetGroupPanel({resource, runtimeReachable}: Props) {
setPort(typeof resource?.metadata.port === 'number' ? String(resource.metadata.port) : '')
}, [resource?.id, resource?.metadata.port])
+ useEffect(() => {
+ const targets = healthQuery.data?.items ?? []
+ setPendingTargets((current) => current.filter((pending) => {
+ const state = stringValue(targets.find((target) => stringValue(target.body.id) === pending.id && Number(target.body.port) === pending.port)?.body.state).toLowerCase()
+ return state !== 'healthy' && state !== 'unhealthy'
+ }))
+ }, [healthQuery.data])
+
+ useEffect(() => {
+ if (!pendingTargets.length) {
+ return
+ }
+ const interval = window.setInterval(() => {
+ void healthQuery.refetch()
+ }, 1_000)
+ return () => window.clearInterval(interval)
+ }, [pendingTargets.length, healthQuery.refetch])
+
const refresh = () => {
void Promise.all([dependenciesQuery.refetch(), healthQuery.refetch()])
}
const registerMutation = useMutation({
- mutationFn: async () => {
- const startedAt = Date.now()
- await putFlatItem('aws', 'targetgroups', resource?.id ?? '', {id: instanceId, port: Number(port)})
- while (true) {
- const health = await listFlatItems('aws', 'targetgroups', resource?.id ?? '')
- const target = health.items.find((item) => stringValue(item.body.id) === instanceId && Number(item.body.port) === Number(port))
- const state = stringValue(target?.body.state).toLowerCase()
- if (state === 'healthy' || state === 'unhealthy') {
- const remaining = 5_000 - (Date.now() - startedAt)
- if (remaining > 0) await new Promise((resolve) => setTimeout(resolve, remaining))
- return
- }
- await new Promise((resolve) => setTimeout(resolve, 500))
- }
+ mutationFn: (target: PendingTarget) => putFlatItem('aws', 'targetgroups', resource?.id ?? '', {id: target.id, port: target.port}),
+ onSuccess: (_, target) => {
+ setPendingTargets((current) => [...current, target])
+ void queryClient.invalidateQueries({queryKey: ['target-group-health', accountId, resource?.id]})
},
- onSuccess: () => queryClient.invalidateQueries({queryKey: ['target-group-health', accountId, resource?.id]}),
})
const deregisterMutation = useMutation({
mutationFn: (targetKey: string) => deleteFlatItem('aws', 'targetgroups', resource?.id ?? '', targetKey),
@@ -68,22 +78,23 @@ export function TargetGroupPanel({resource, runtimeReachable}: Props) {
const targets = healthQuery.data?.items ?? []
const validPort = /^\d+$/.test(port) && Number(port) >= 1 && Number(port) <= 65535
const error = healthQuery.error ?? dependenciesQuery.error ?? registerMutation.error ?? deregisterMutation.error
+ const pendingRows = pendingTargets.filter((pending) => !targets.some((target) => stringValue(target.body.id) === pending.id && Number(target.body.port) === pending.port))
+
return
Target health
{targets.length} registered targets in {resource.name}
{healthQuery.isFetching ? 'Loading' : 'Refresh'}
- { event.preventDefault(); if (instanceId && validPort) registerMutation.mutate() }}>
- Running instance setInstanceId(event.target.value)} disabled={dependenciesQuery.isLoading || registerMutation.isPending}>Select an instance {instances.map((instance) => {instance.name} ({instance.id}{instance.privateIp ? `, ${instance.privateIp}` : ''}) )}
- Target port setPort(event.target.value)} disabled={registerMutation.isPending}/>
- {registerMutation.isPending ? 'Registering' : 'Register target'}
+ { event.preventDefault(); const instance = instances.find((candidate) => candidate.id === instanceId); if (instance && validPort) registerMutation.mutate({id: instance.id, name: instance.name, port: Number(port)}) }}>
+ Running instance setInstanceId(event.target.value)} disabled={dependenciesQuery.isLoading}>Select an instance {instances.map((instance) => {instance.name} ({instance.id}{instance.privateIp ? `, ${instance.privateIp}` : ''}) )}
+ Target port setPort(event.target.value)}/>
+ Register target
{instances.length === 0 && dependenciesQuery.isSuccess && No running instances are available in this account.
}
- {registerMutation.isPending &&
}
{error instanceof Error && {error.message}
}
{healthQuery.isLoading && Loading target health
}
- {healthQuery.isSuccess && targets.length === 0 && No registered targets Register a running instance to see its ELB health state.
}
- {targets.length > 0 && Instance Port State Reason Description {targets.map((target) => {stringValue(target.body.id)}{stringValue(target.body.port)} {stringValue(target.body.state) || '-'} {stringValue(target.body.reason) || '-'} {stringValue(target.body.description) || '-'} deregisterMutation.mutate(target.id)}> )}
}
+ {healthQuery.isSuccess && targets.length === 0 && pendingRows.length === 0 && No registered targets Register a running instance to see its ELB health state.
}
+ {(targets.length > 0 || pendingRows.length > 0) && Instance Port State Reason Description {pendingRows.map((target) => {target.id}{target.port} Checking- Waiting for target health. )}{targets.map((target) => { const state = stringValue(target.body.state); return {stringValue(target.body.id)}{stringValue(target.body.port)} {state || '-'} {stringValue(target.body.reason) || '-'} {stringValue(target.body.description) || '-'} deregisterMutation.mutate(target.id)}> })}
}
}
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 14682ab..63156b8 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -976,6 +976,21 @@ pre,
.workflow-studio > .dynamic-stage-header { min-height: 58px; margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--border); }
.workflow-studio > .dynamic-stage-header h3 { margin: 1px 0 0; font-size: 15px; }
.workflow-studio > .compact-text { margin: 0; padding: 7px 18px; border-bottom: 1px solid var(--border-faint); }
+.codebuild-progress { display: flex; align-items: center; gap: 18px; margin: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--link) 42%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--link) 6%, var(--surface)); }
+.codebuild-progress h3 { margin: 3px 0 0; color: var(--text-bright); font-size: 14px; }
+.codebuild-progress p:last-child { margin: 5px 0 0; }
+.codebuild-progress-art { width: 112px; height: 103px; flex: 0 0 auto; overflow: visible; }
+.pipeline-release-progress { display: flex; align-items: center; gap: 18px; margin: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #e38c6c 46%, var(--border)); border-radius: 10px; background: color-mix(in srgb, #e38c6c 8%, var(--surface)); }
+.pipeline-release-progress h3 { margin: 3px 0 0; color: var(--text-bright); font-size: 14px; }
+.pipeline-release-progress p:last-child { margin: 5px 0 0; }
+.pipeline-release-art { width: 112px; height: 112px; flex: 0 0 auto; overflow: visible; }
+.codebuild-art-outline { stroke: #050505; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
+.codebuild-art-binary { font-family: Arial, sans-serif; font-size: 51px; font-weight: 600; fill: #43bed0; }
+.codebuild-art-gear { transform-box: fill-box; transform-origin: center; animation: codebuild-gear-spin 4s linear infinite; }
+@keyframes codebuild-gear-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .codebuild-art-gear { animation: none; } .codebuild-art-binary animate { display: none; } }
+@media (max-width: 520px) { .codebuild-progress { align-items: flex-start; margin: 12px; padding: 14px; } .codebuild-progress-art { width: 76px; height: 70px; } }
+@media (max-width: 520px) { .pipeline-release-progress { align-items: flex-start; margin: 12px; padding: 14px; } .pipeline-release-art { width: 76px; height: 76px; } }
.workflow-studio-actions { display: flex; align-items: center; gap: 8px; }
.workflow-save-definition { min-height: 30px; border-color: var(--workflow-save-border); background: var(--workflow-save-bg); color: var(--workflow-save-text); font-size: 11px; }
.workflow-save-definition:not(:disabled):hover { border-color: var(--workflow-save-hover-border); background: var(--workflow-save-hover-bg); }
@@ -2881,6 +2896,8 @@ pre,
align-items: start;
}
+.ec2-launch-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
+
.launch-form-group {
grid-column: 1 / -1;
display: flex;
@@ -2894,11 +2911,87 @@ pre,
margin-top: 6px;
}
-.launch-form-group::after {
- content: '';
- flex: 1;
- height: 1px;
- background: var(--border);
+.launch-form-group::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+.launch-form-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 24px;
+ padding-bottom: 4px;
+}
+
+.launch-form-header h3,
+.launch-form-header p { margin-bottom: 0; }
+
+.launch-form-header > span {
+ flex: 0 0 auto;
+ padding: 5px 9px;
+ border: 1px solid color-mix(in srgb, var(--link) 36%, var(--border));
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--link) 9%, var(--surface));
+ color: var(--link);
+ font-size: 10px;
+ font-weight: 700;
+ letter-spacing: .05em;
+ text-transform: uppercase;
+}
+
+.launch-stepper {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 6px;
+ overflow-x: auto;
+}
+
+.launch-stepper button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 145px;
+ padding: 9px 10px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ background: var(--surface);
+ color: var(--text-3);
+ font: inherit;
+ font-size: 11px;
+ font-weight: 600;
+ text-align: left;
+}
+
+.launch-stepper button:not(:disabled) { cursor: pointer; }
+.launch-stepper button:disabled { opacity: .58; }
+.launch-stepper button.active { border-color: color-mix(in srgb, var(--link) 52%, var(--border)); background: color-mix(in srgb, var(--link) 8%, var(--surface)); color: var(--text); }
+.launch-stepper b { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--raised); color: var(--text-3); font-size: 10px; }
+.launch-stepper button.active b { background: var(--link); color: #fff; }
+
+.launch-form-section {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ width: 100%;
+}
+
+.launch-section-title {
+ display: flex;
+ align-items: flex-start;
+ gap: 11px;
+ padding: 14px 16px;
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--surface) 94%, var(--bg));
+}
+
+.launch-section-title > svg { flex: 0 0 auto; margin-top: 1px; color: var(--link); }
+.launch-section-title h4 { margin: 0; color: var(--text-bright); font-size: 13px; }
+.launch-section-title p { margin: 3px 0 0; color: var(--text-3); font-size: 11px; line-height: 1.4; }
+
+.launch-form-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 18px 22px;
+ align-items: start;
}
.launch-field {
@@ -2913,6 +3006,14 @@ pre,
text-transform: uppercase;
}
+.ec2-launch-form .launch-field { gap: 8px; min-width: 0; }
+.ec2-launch-form .launch-field > span { letter-spacing: .025em; text-transform: none; }
+.ec2-launch-form .launch-field .input,
+.ec2-launch-form .launch-field .textarea,
+.ec2-launch-form .launch-field select { width: 100%; min-width: 0; }
+.ec2-launch-form .launch-field .input { min-height: 38px; }
+.ec2-launch-form .launch-field small { color: var(--text-3); font-size: 10px; line-height: 1.4; }
+
.launch-field--span {
grid-column: 1 / -1;
}
@@ -2927,6 +3028,25 @@ pre,
border-top: 1px solid var(--border);
}
+.ec2-launch-form .launch-form-actions { margin-top: 0; padding-top: 4px; border-top: 0; }
+
+.launch-choice-row { display: flex; gap: 8px; }
+.launch-choice-row label { display: flex; flex: 1; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 11px; cursor: pointer; }
+.launch-choice-row input { accent-color: var(--link); }
+.launch-key-create { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
+.launch-key-create .button.primary { grid-column: 1 / -1; justify-self: start; }
+.launch-review { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.launch-review .meta-grid { margin-top: 2px; }
+
+@media (max-width: 720px) {
+ .launch-form-grid { grid-template-columns: 1fr; }
+ .ec2-launch-form .launch-field--span { grid-column: auto; }
+ .launch-stepper { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
+ .launch-form-header { gap: 12px; }
+ .launch-key-create { grid-template-columns: 1fr; }
+ .launch-key-create .button.primary { grid-column: auto; }
+}
+
.ami-catalog {
display: grid;
gap: 12px;
@@ -3414,6 +3534,35 @@ pre,
min-width: 0;
}
+.msk-workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }
+.msk-service-section { border-radius: 10px; }
+.msk-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
+.msk-section-heading { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
+.msk-section-heading > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--link) 30%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--link) 9%, var(--surface)); color: var(--link); }
+.msk-section-heading h3 { margin: 2px 0 0; color: var(--text-bright); font-size: 13px; }
+.msk-section-heading p:last-child { margin: 4px 0 0; }
+.msk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; padding: 18px; }
+.msk-form .dynamic-field { gap: 8px; }
+.msk-form .dynamic-field > span { letter-spacing: .025em; text-transform: none; }
+.msk-form .input { width: 100%; min-width: 0; min-height: 38px; }
+.msk-form .subnet-multiselect { min-height: 88px; }
+.msk-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; }
+.msk-form-actions > span { margin-right: auto; color: var(--text-3); font-size: 10px; line-height: 1.4; }
+.msk-active-resource { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--border); background: var(--surface); }
+.msk-active-resource .dynamic-field { gap: 8px; }
+.msk-resource-list { display: grid; gap: 6px; padding: 0 18px 18px; }
+.msk-resource-list > .compact-text { margin: 0; padding: 10px 0; }
+.msk-lag-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
+.msk-lag-form .msk-form-actions { grid-column: auto; }
+.msk-error { margin: 0 18px 18px; }
+
+@media (max-width: 720px) {
+ .msk-form, .msk-lag-form { grid-template-columns: minmax(0, 1fr); }
+ .msk-form .dynamic-field--span, .msk-form-actions, .msk-lag-form .msk-form-actions { grid-column: auto; }
+ .msk-active-resource { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
+ .msk-section-header { gap: 12px; }
+}
+
.sns-topic-summary {
display: flex;
justify-content: space-between;
@@ -4881,6 +5030,34 @@ button.console-service-card {
gap: 14px;
}
+.codedeploy-create-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
+.codedeploy-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 4px; }
+.codedeploy-form-header h3, .codedeploy-form-header p { margin-bottom: 0; }
+.codedeploy-form-header > span { flex: 0 0 auto; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--link) 36%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--link) 9%, var(--surface)); color: var(--link); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+.codedeploy-form-section { display: flex; flex-direction: column; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
+.codedeploy-section-title { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
+.codedeploy-section-title > svg { flex: 0 0 auto; margin-top: 1px; color: var(--link); }
+.codedeploy-section-title h4 { margin: 0; color: var(--text-bright); font-size: 13px; }
+.codedeploy-section-title p { margin: 3px 0 0; color: var(--text-3); font-size: 11px; line-height: 1.4; }
+.codedeploy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; }
+.codedeploy-form-grid .dynamic-field { gap: 8px; }
+.codedeploy-form-grid .dynamic-field > span { letter-spacing: .025em; text-transform: none; }
+.codedeploy-form-grid .input { min-height: 38px; }
+.codedeploy-listener-field { grid-column: 1 / -1; }
+.codedeploy-target-card { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
+.codedeploy-target-card b { width: max-content; padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
+.codedeploy-target-card.blue { border-color: color-mix(in srgb, #45b5fa 42%, var(--border)); }
+.codedeploy-target-card.blue b { background: color-mix(in srgb, #45b5fa 18%, var(--surface)); color: #2398df; }
+.codedeploy-target-card.green { border-color: color-mix(in srgb, #62c9aa 48%, var(--border)); }
+.codedeploy-target-card.green b { background: color-mix(in srgb, #62c9aa 18%, var(--surface)); color: #278f70; }
+.codedeploy-rollback { display: flex; align-items: flex-start; gap: 10px; min-height: 38px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
+.codedeploy-rollback input { margin-top: 2px; accent-color: var(--link); }
+.codedeploy-rollback span, .codedeploy-rollback strong, .codedeploy-rollback small { display: block; }
+.codedeploy-rollback strong { color: var(--text); font-size: 11px; }
+.codedeploy-rollback small { margin-top: 3px; color: var(--text-3); font-size: 10px; line-height: 1.35; }
+.codedeploy-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
+@media (max-width: 720px) { .codedeploy-form-grid { grid-template-columns: 1fr; } .codedeploy-listener-field { grid-column: auto; } .codedeploy-form-header { gap: 12px; } }
+
.ec2-readiness-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -4914,6 +5091,25 @@ button.console-service-card {
color: var(--status-error);
}
+.ec2-readiness-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ec2-launch-cpu { width: 42px; height: 42px; flex: 0 0 auto; }
+.ec2-cpu-pins { fill: none; stroke: #17162b; stroke-width: 2; stroke-linecap: round; }
+.ec2-launch-cpu.active .ec2-cpu-pins { animation: ec2-cpu-pin 1.2s ease-in-out infinite; }
+.ec2-cpu-chip { fill: #45b5fa; stroke: #17162b; stroke-width: 2.5; }
+.ec2-cpu-label { font: 25px Arial, sans-serif; fill: #17162b; letter-spacing: 4px; }
+.ec2-cpu-pulse { fill: none; stroke: #8bd6ff; stroke-width: 2; opacity: 0; transform-origin: 67px 66px; }
+.ec2-launch-cpu.active .ec2-cpu-pulse { animation: ec2-cpu-pulse 1.8s ease-out infinite; }
+.ec2-cpu-dots { fill: #17162b; }
+.ec2-ssh-heartbeat { width: 72px; height: 25px; overflow: visible; }
+.ec2-ssh-heartbeat path { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+.ec2-ssh-heartbeat.active path { stroke: #ef5b5b; stroke-dasharray: 118; animation: ec2-ekg-trace 1.55s linear infinite; }
+.ec2-key-ready { width: 45px; height: 45px; margin: -4px -4px -8px 0; }
+@keyframes ec2-cpu-pin { 0%, 100% { stroke: #17162b; } 50% { stroke: #45b5fa; } }
+@keyframes ec2-cpu-pulse { 0% { opacity: .8; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.08); } }
+@keyframes ec2-ekg-trace { from { stroke-dashoffset: 118; } to { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: reduce) { .ec2-launch-cpu.active .ec2-cpu-pins, .ec2-launch-cpu.active .ec2-cpu-pulse, .ec2-ssh-heartbeat.active path { animation: none; } }
+
.ec2-connect-error,
.ec2-check-result {
display: flex;
@@ -5908,11 +6104,11 @@ button.console-service-card {
.lightsail-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lightsail-config label { display: grid; gap: 6px; font-weight: 600; }
.server-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ec7211 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ec7211 8%, var(--surface)); }
-.server-launch-progress svg { width: 70px; height: 56px; flex: 0 0 auto; }
+.server-launch-progress-art { width: 70px; height: 56px; flex: 0 0 auto; }
.server-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
.server-launch-progress small { color: var(--text-muted); }
.database-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #1769c2 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #1769c2 8%, var(--surface)); }
-.database-launch-progress svg { width: 56px; height: 56px; flex: 0 0 auto; }
+.database-launch-progress-art { width: 56px; height: 56px; flex: 0 0 auto; }
.database-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
.database-launch-progress small { color: var(--text-muted); }
.database-led { animation: database-led-blink 1.4s ease-in-out infinite; }
@@ -5921,11 +6117,12 @@ button.console-service-card {
.database-led-d { animation-delay: .66s; }
@keyframes database-led-blink { 0%, 25%, 100% { opacity: .28; } 45%, 72% { opacity: 1; } }
.load-balancing-progress { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ffc52e 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ffc52e 8%, var(--surface)); }
-.load-balancing-progress svg { width: 72px; height: 64px; flex: 0 0 auto; }
+.load-balancing-progress-art, .load-balancing-progress svg { width: 72px; height: 64px; flex: 0 0 auto; }
.load-balancing-progress div { display: flex; flex-direction: column; gap: 3px; }
.load-balancing-progress small { color: var(--text-muted); }
.lb-device { fill: #30283d; }.lb-panel { fill: #2b2440; stroke: #17132f; stroke-width: 5; }.lb-wire { fill: none; stroke: #17132f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-yellow { fill: #ffc12d; }.lb-green { fill: #31aa98; }.lb-port { fill: none; stroke: #ffc52e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-ports { animation: lb-port-morph 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-hub { animation: lb-hub-pulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-blink-1 { animation: lb-blink-one 4.5s steps(1, end) infinite; }.lb-blink-2 { animation: lb-blink-two 4.5s steps(1, end) infinite; }.lb-blink-3 { animation: lb-blink-three 4.5s steps(1, end) infinite; }
@keyframes lb-blink-one { 0%, 18%, 42%, 68%, 100% { opacity: 1; } 19%, 41%, 69%, 84% { opacity: .22; } } @keyframes lb-blink-two { 0%, 28%, 58%, 88%, 100% { opacity: .28; } 29%, 57%, 89%, 99% { opacity: 1; } } @keyframes lb-blink-three { 0%, 12%, 48%, 76%, 100% { opacity: 1; } 13%, 47%, 77%, 92% { opacity: .2; } } @keyframes lb-port-morph { 0%, 18%, 82%, 100% { transform: scaleX(.62); } 42%, 62% { transform: scaleX(1.18); } } @keyframes lb-hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
+.target-health-table table { min-width: 860px; table-layout: fixed; }.target-health-table th, .target-health-table td { padding: 14px 16px; vertical-align: middle; }.target-health-table th:nth-child(1) { width: 215px; }.target-health-table th:nth-child(2) { width: 70px; }.target-health-table th:nth-child(3) { width: 145px; }.target-health-table th:nth-child(4) { width: 170px; }.target-health-table th:last-child { width: 48px; }.target-health-table code { font-size: 12px; }.target-state { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-transform: capitalize; }.target-state-icon { display: inline-block; width: 48px; height: 38px; flex: 0 0 auto; }.target-state-icon svg { width: 100%; height: 100%; }.target-state-icon--checking { animation: target-checking 1.2s ease-in-out infinite; }.target-state-icon--unhealthy { color: #cc3d3d; } @keyframes target-checking { 50% { opacity: .4; } }
@media (max-width: 640px) { .lightsail-launch { padding: 18px; } .lightsail-config { grid-template-columns: 1fr; } .lightsail-platform, .lightsail-blueprint, .lightsail-plans button { width: 100%; } }
.lightsail-instance-panel { overflow: visible; }
diff --git a/svgAsset/CodeBuild.svg b/svgAsset/CodeBuild.svg
new file mode 100644
index 0000000..d1203b8
--- /dev/null
+++ b/svgAsset/CodeBuild.svg
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 0
+
+
+ 1
+
+
+
+ 1
+
+
+ 0
+
+
+
+ 0
+
+
+ 1
+
+
+
+ 1
+
+
+ 0
+
+
+
+ 0
+
+
+ 1
+
+
+
+ 1
+
+
+ 0
+
+
+
+ 0
+
+
+ 1
+
+
+
+ 1
+
+
+ 0
+
+
+
+ 0
+
+
+ 1
+
+
+
+ 1
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/svgAsset/Load-Balancer.svg b/svgAsset/Load-Balancer.svg
new file mode 100644
index 0000000..6d06ed7
--- /dev/null
+++ b/svgAsset/Load-Balancer.svg
@@ -0,0 +1,1232 @@
+
+Generated Animation
+46 frames, 2.150s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/Pipleline.svg b/svgAsset/Pipleline.svg
new file mode 100644
index 0000000..57f4c1e
--- /dev/null
+++ b/svgAsset/Pipleline.svg
@@ -0,0 +1,1350 @@
+
+Generated Animation
+113 frames, 3.820s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/animated-cpu.svg b/svgAsset/animated-cpu.svg
new file mode 100644
index 0000000..583d5f6
--- /dev/null
+++ b/svgAsset/animated-cpu.svg
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+CPU
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/svgAsset/animated_load_balancer.svg b/svgAsset/animated_load_balancer.svg
new file mode 100644
index 0000000..864c38b
--- /dev/null
+++ b/svgAsset/animated_load_balancer.svg
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/svgAsset/api_cog.svg b/svgAsset/api_cog.svg
new file mode 100644
index 0000000..3d2dd54
--- /dev/null
+++ b/svgAsset/api_cog.svg
@@ -0,0 +1,2593 @@
+
+Generated Animation
+143 frames, 4.570s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/cloud-code.svg b/svgAsset/cloud-code.svg
new file mode 100644
index 0000000..fa180b4
--- /dev/null
+++ b/svgAsset/cloud-code.svg
@@ -0,0 +1,662 @@
+
+Generated Animation
+41 frames, 2.020s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/db-creation.svg b/svgAsset/db-creation.svg
new file mode 100644
index 0000000..179231b
--- /dev/null
+++ b/svgAsset/db-creation.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/svgAsset/server-for-darkmode.svg b/svgAsset/server-for-darkmode.svg
new file mode 100644
index 0000000..1ca2074
--- /dev/null
+++ b/svgAsset/server-for-darkmode.svg
@@ -0,0 +1,1204 @@
+
+Generated Animation
+81 frames, 3.020s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/server-for-lightmode.svg b/svgAsset/server-for-lightmode.svg
new file mode 100644
index 0000000..6bfb478
--- /dev/null
+++ b/svgAsset/server-for-lightmode.svg
@@ -0,0 +1,835 @@
+
+Generated Animation
+41 frames, 2.020s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/server_network_animation.svg b/svgAsset/server_network_animation.svg
new file mode 100644
index 0000000..18cbccd
--- /dev/null
+++ b/svgAsset/server_network_animation.svg
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/system-solid-369-code-hover-pinch.svg b/svgAsset/system-solid-369-code-hover-pinch.svg
new file mode 100644
index 0000000..dd7a0f4
--- /dev/null
+++ b/svgAsset/system-solid-369-code-hover-pinch.svg
@@ -0,0 +1,252 @@
+
+Generated Animation
+41 frames, 2.020s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/svgAsset/terminal.svg b/svgAsset/terminal.svg
new file mode 100644
index 0000000..4f90ada
--- /dev/null
+++ b/svgAsset/terminal.svg
@@ -0,0 +1,1145 @@
+
+Generated Animation
+61 frames, 2.520s duration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+