From abde58c0f92c8aa2fc2b9da149a2cc21f6d62a64 Mon Sep 17 00:00:00 2001
From: Jeff Moe <moe@spacecruft.org>
Date: Sun, 25 Dec 2022 15:50:53 -0700
Subject: [PATCH] Add multiple form fields

---
 src/routes/+page.svelte | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c276a35..a0c5db3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,7 +15,10 @@ function colorCallback(rgba) {
 
 /** @type {import('./$types').ActionData} */
 export let form;
-let chyron_text = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
+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 = ''
 
 </script>
 
@@ -27,18 +30,24 @@ let chyron_text = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjk
     <div class="picker">
 		<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
 	</div>
-    <p></p>
 	<div class="form">
-		  <p><input bind:value={chyron_text} placeholder="{chyron_text}">
-		  </p>
+		<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>
 	</div>
-
-    <div class="horizontal">
-         <!-- delay affects text starting point offset-->
-        <Ticker pausing=false duration=60 delay=-5>
-			{chyron_text}
-        </Ticker>
-    </div>
+</div>
+<p></p>
+<div class="horizontal">
+	<!-- delay affects text starting point offset-->
+   <Ticker pausing=false duration=60 delay=-10>
+	   {chyron_text_01}
+	   {chyron_text_02}
+	   {chyron_text_03}
+	   {chyron_text_04}
+   </Ticker>
 </div>
 
 
@@ -52,11 +61,11 @@ let chyron_text = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjk
 		margin:30px 5px;
 	}
     .horizontal{
-        padding:376px;
+        padding:424px;
 		font-family: Verdana, sans-serif;
 		font-weight: 600;
 		font-size: 2.75em;
-		background: rgba(128, 128, 128, 0);
+		background: rgba(30, 24, 150, 0.4);
         @keyframes horizontal {
 		100% { transform: translateX(-50%); }
     	}