106 lines
2.5 KiB
Svelte
106 lines
2.5 KiB
Svelte
<script>
|
|
import Ticker from 'svelte-ticker';
|
|
import {HsvPicker} from 'svelte-color-picker';
|
|
import { enhance } from '$app/forms';
|
|
|
|
function colorCallback(rgba) {
|
|
let r = rgba.detail.r;
|
|
let g = rgba.detail.g;
|
|
let b = rgba.detail.b;
|
|
let a = rgba.detail.a;
|
|
|
|
let horizontal = document.querySelector(".horizontal");
|
|
horizontal.style.color = `rgb(${r},${g},${b})`;
|
|
}
|
|
|
|
/** @type {import('./$types').ActionData} */
|
|
export let form;
|
|
let chyron_text_01 = 'chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
|
let chyron_text_02 = ''
|
|
let chyron_text_03 = ''
|
|
let chyron_text_04 = ''
|
|
|
|
export let chyron_font_size = 2.75;
|
|
export let chyron_font_weight = 600;
|
|
|
|
</script>
|
|
|
|
<div class="main">
|
|
<div class="container">
|
|
<h1>Scrolltron</h1>
|
|
</div>
|
|
<p></p>
|
|
<div class="picker">
|
|
<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
|
|
</div>
|
|
<div class="form">
|
|
<p>
|
|
<input bind:value={chyron_text_01} placeholder="{chyron_text_01}">
|
|
<input bind:value={chyron_text_02} placeholder="{chyron_text_02}">
|
|
<input bind:value={chyron_text_03} placeholder="{chyron_text_03}">
|
|
<input bind:value={chyron_text_04} placeholder="{chyron_text_04}">
|
|
</p>
|
|
<input type=range bind:value={chyron_font_size}>
|
|
<input type=range bind:value={chyron_font_weight}>
|
|
|
|
</div>
|
|
</div>
|
|
<p></p>
|
|
<div class="horizontal">
|
|
<!-- delay affects text starting point offset-->
|
|
<Ticker pausing=false duration=60 delay=-10>
|
|
<span
|
|
style="font-size: {chyron_font_size}em;
|
|
font-weight: {chyron_font_weight}
|
|
">
|
|
{chyron_text_01}
|
|
{chyron_text_02}
|
|
{chyron_text_03}
|
|
{chyron_text_04}
|
|
</span>
|
|
</Ticker>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
h3 {
|
|
padding:0;
|
|
margin:0;
|
|
font-family: sans-serif;
|
|
}
|
|
p {
|
|
margin:30px 5px;
|
|
}
|
|
.horizontal{
|
|
/* padding:426px;*/
|
|
font-family: Verdana, sans-serif;
|
|
background: rgba(30, 24, 150, 0.4);
|
|
@keyframes horizontal {
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
}
|
|
.main {
|
|
}
|
|
.container{
|
|
color: pink;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
.form{
|
|
color: rgb(156, 102, 30);
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
.picker{
|
|
color: rgb(61, 177, 206);
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
</style>
|