129 lines
3.5 KiB
Svelte
129 lines
3.5 KiB
Svelte
<script>
|
|
import Ticker from 'svelte-ticker';
|
|
import {HsvPicker} from 'svelte-color-picker';
|
|
import { enhance } from '$app/forms';
|
|
|
|
|
|
function ticker_font_color_Callback(ticker_font_color) {
|
|
let r = ticker_font_color.detail.r;
|
|
let g = ticker_font_color.detail.g;
|
|
let b = ticker_font_color.detail.b;
|
|
let a = ticker_font_color.detail.a;
|
|
let horizontal = document.querySelector(".horizontal");
|
|
horizontal.style.color = `rgba(${r},${g},${b},${a})`;
|
|
}
|
|
|
|
function ticker_background_color_Callback(ticker_background_color) {
|
|
let rb = ticker_background_color.detail.r;
|
|
let gb = ticker_background_color.detail.g;
|
|
let bb = ticker_background_color.detail.b;
|
|
let ab = ticker_background_color.detail.a;
|
|
let hz_background = document.querySelector(".horizontal");
|
|
hz_background.style.background = `rgba(${rb},${gb},${bb},${ab})`;
|
|
}
|
|
|
|
/** @type {import('./$types').ActionData} */
|
|
export let form;
|
|
let ticker_text_01 = 'ticker text here. Mooooo.';
|
|
let ticker_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. ticker text here. Mooooo. 555.';
|
|
let ticker_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
|
let ticker_text_04 = ' 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
|
|
|
let ticker_font_size = 2.75;
|
|
let ticker_font_weight = 600;
|
|
let ticker_speed = 30;
|
|
|
|
</script>
|
|
|
|
<div class="horizontal">
|
|
<!-- delay affects text starting point offset-->
|
|
<Ticker duration={ticker_speed} delay=0 pausing=false>
|
|
<span
|
|
style="font-size: {ticker_font_size}em;
|
|
font-weight: {ticker_font_weight}
|
|
">
|
|
{ticker_text_01}
|
|
{ticker_text_02}
|
|
{ticker_text_03}
|
|
{ticker_text_04}
|
|
</span>
|
|
</Ticker>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="container">
|
|
<!-- <center><h3>Scrolltron</h3></center> -->
|
|
</div>
|
|
<br>
|
|
<div class="font_color_picker">
|
|
Font Color: <HsvPicker on:colorChange={ticker_font_color_Callback} startColor={"#00FF00"}/>
|
|
</div>
|
|
<p></p>
|
|
<div class="background_color_picker">
|
|
Background Color: <HsvPicker on:colorChange={ticker_background_color_Callback} startColor={"#5500FF"}/>
|
|
</div>
|
|
<div class="form">
|
|
<p>
|
|
<input bind:value={ticker_text_01} placeholder="{ticker_text_01}">
|
|
<input bind:value={ticker_text_02} placeholder="{ticker_text_02}">
|
|
<input bind:value={ticker_text_03} placeholder="{ticker_text_03}">
|
|
<input bind:value={ticker_text_04} placeholder="{ticker_text_04}">
|
|
</p>
|
|
Font Size: <input type=range min="0.5" max="40" bind:value={ticker_font_size}>
|
|
Font Weight: <input type=range min="200" max="600" bind:value={ticker_font_weight}>
|
|
Speed: <input type=range min="5" max="200" bind:value={ticker_speed}>
|
|
|
|
</div>
|
|
</div>
|
|
<p></p>
|
|
|
|
|
|
<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);
|
|
}
|
|
.font_color_picker{
|
|
color: rgb(61, 177, 206);
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
.background_color_picker{
|
|
color: rgb(197, 123, 27);
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
</style>
|