looking better and better

This commit is contained in:
2025-03-06 15:22:21 +01:00
parent 7bd76c1d4a
commit 27eadaeca4
9 changed files with 91 additions and 40 deletions

View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 749 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 KiB

View File

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

View File

@@ -61,7 +61,7 @@
<div class="flex h-screen items-center justify-center">
<div class="relative">
<img
src="/scene_drawing.png"
src="/revy25_scene_psn_tekst.png"
alt=""
bind:this={image}
class="max-w-screen max-h-screen"

View File

@@ -75,7 +75,8 @@
onpointerup={onPointerUp}
onpointermove={onPointerMove}
style={`transform: translate(${vis_x}px, ${vis_y}px)`}
class="absolute flex h-32 w-32 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
${selected === id ? 'bg-green-400 border-green-400' : 'bg-red-400 border-red-400'}`}
>
Tracker {id}
</div>

View File

@@ -30,16 +30,15 @@
);
};
let z_viz = $derived((trackers[selected].z * 2).toFixed(2))
let z_viz = $derived((trackers[selected].z).toFixed(2))
</script>
<div>
<label for="z">Z</label>
<div class="slider-container">
<input
type="range"
id="z"
min="0"
max="1"
max="4"
step="0.01"
oninput="{onchange}"
bind:value={trackers[selected].z}
@@ -48,12 +47,38 @@
</div>
<style>
.slider-container {
display: flex;
flex-direction: column;
align-items: center;
}
input {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 26px;
appearance: none;
width: 75px;
height: 50%;
vertical-align: bottom;
}
/* WebKit Browsers (Chrome, Safari, Edge) */
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px; /* Larger size */
height: 50px;
background: red; /* Customize color */
margin-left: -22px; /* Center the thumb */
border-radius: 50%;
cursor: pointer;
}
input::-webkit-slider-runnable-track {
background: lightgray; /* Customize track */
width: 6px;
border-radius: 3px;
}
</style>

View File

@@ -5,13 +5,13 @@ import Container from "../components/Container.svelte";
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/webp" href="/favicon.webp" />
<meta name="generator" content={Astro.generator} />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>Astro</title>
<title>Followspot</title>
</head>
<body class="flex h-dvh w-screen items-center justify-center overflow-hidden">
<Container client:load />