Compare commits
No commits in common. "f37019c3efce97d51c9f83fca20dc9a46c756784" and "2329f5235a29bf710564ea2c1149672ddf59888b" have entirely different histories.
f37019c3ef
...
2329f5235a
3 changed files with 3 additions and 50 deletions
|
@ -1,34 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let time = new Date();
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
setInterval(() => {
|
|
||||||
time = new Date();
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="clock">
|
|
||||||
<div class="h">{time.getHours()}</div>
|
|
||||||
<div class="separator">:</div>
|
|
||||||
<div class="m">{time.getMinutes().toString().padStart(2, '0')}</div>
|
|
||||||
<div class="separator">:</div>
|
|
||||||
<div class="s">{time.getSeconds().toString().padStart(2, '0')}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.clock {
|
|
||||||
display: flex;
|
|
||||||
font-size: 3em;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
position: relative;
|
|
||||||
bottom: .15em;
|
|
||||||
margin: 0 .05em;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -5,16 +5,14 @@
|
||||||
|
|
||||||
let screenResolution = '... x ...';
|
let screenResolution = '... x ...';
|
||||||
let windowResolution = '';
|
let windowResolution = '';
|
||||||
let dpr = "1";
|
|
||||||
|
|
||||||
function updateResolution() {
|
function updateResolution() {
|
||||||
const realWidth = Math.round(screen.width) * window.devicePixelRatio;
|
const realWidth = Math.round(screen.width);
|
||||||
const realHeight = Math.round(screen.height) * window.devicePixelRatio;
|
const realHeight = Math.round(screen.height);
|
||||||
const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
|
const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
|
||||||
const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
|
const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
|
||||||
screenResolution = `${realWidth} x ${realHeight}`;
|
screenResolution = `${realWidth} x ${realHeight}`;
|
||||||
windowResolution = `${windowWidth} x ${windowHeight}`;
|
windowResolution = `${windowWidth} x ${windowHeight}`;
|
||||||
dpr = String(Math.round(window.devicePixelRatio * 100) / 100);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
@ -35,23 +33,19 @@
|
||||||
<div class="value">{windowResolution}</div>
|
<div class="value">{windowResolution}</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if dpr !== "1"}
|
|
||||||
<div class="dpr">{$i18n.t("Device Pixel Ratio")}: {dpr}</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.info {
|
.info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.window, .dpr {
|
.window {
|
||||||
margin-top: calc(1em / 0.8);
|
margin-top: calc(1em / 0.8);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
import Axes from '$lib/Axes.svelte';
|
import Axes from '$lib/Axes.svelte';
|
||||||
import ColorGradient from '$lib/ColorGradient.svelte';
|
import ColorGradient from '$lib/ColorGradient.svelte';
|
||||||
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
||||||
import Clock from '$lib/Clock.svelte';
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
const dispatch = createEventDispatcher<{ focus: void }>();
|
const dispatch = createEventDispatcher<{ focus: void }>();
|
||||||
|
|
||||||
|
@ -49,7 +48,6 @@
|
||||||
<div class="inner"></div>
|
<div class="inner"></div>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<Clock />
|
|
||||||
<ScreenInfo />
|
<ScreenInfo />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -119,11 +117,6 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
|
|
Loading…
Add table
Reference in a new issue