113 lines
2.1 KiB
Svelte
113 lines
2.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { getVersion } from '@tauri-apps/api/app';
|
||
|
|
|
||
|
|
let { onClose }: { onClose: () => void } = $props();
|
||
|
|
|
||
|
|
let version = $state('');
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
getVersion().then((v) => {
|
||
|
|
version = v;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="overlay" role="presentation" onclick={onClose}>
|
||
|
|
<div class="dialog" role="dialog" onclick={(e) => e.stopPropagation()}>
|
||
|
|
<img class="app-icon" src="/favicon.svg" alt="GUI Video Clipper icon" />
|
||
|
|
<h2>GUI Video Clipper</h2>
|
||
|
|
{#if version}
|
||
|
|
<span class="version">v{version}</span>
|
||
|
|
{/if}
|
||
|
|
<p class="author">by cottongin</p>
|
||
|
|
<p class="license">MIT License</p>
|
||
|
|
<a
|
||
|
|
class="repo-link"
|
||
|
|
href="https://code.cottongin.xyz/cottongin/gui-video-clipper"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
code.cottongin.xyz/cottongin/gui-video-clipper
|
||
|
|
</a>
|
||
|
|
<div class="actions">
|
||
|
|
<button class="primary" onclick={onClose}>Close</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.overlay {
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog {
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 32px;
|
||
|
|
max-width: 360px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon {
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.version {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
}
|
||
|
|
|
||
|
|
.author {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 13px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.license {
|
||
|
|
color: var(--text-muted);
|
||
|
|
font-size: 12px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.repo-link {
|
||
|
|
color: var(--accent);
|
||
|
|
font-size: 12px;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.repo-link:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
margin-top: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary {
|
||
|
|
background: var(--accent);
|
||
|
|
color: var(--bg-primary);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
</style>
|