Cleaned up the look of the application and then made it worse for fun,

learned some gradients and backgrounds including gradient borders.

added primary and secondary color palletes that are calculated, played
with gradients

Added the JSON and CSV for applications, mailed them to Giac and me

src/routes/+layout.svelte

@@ -14,7 +14,10 @@
     while (Math.abs(random - hue) <= TOLERANCE) {
       random = Math.floor(Math.random() * 360);
     }
-    document.documentElement.style.setProperty("--primary", String(random));
+    document.documentElement.style.setProperty(
+      "--primary",
+      String(random + "deg"),
+    );
   }
 </script>
 
@@ -42,30 +45,131 @@
     --br: 0.375rem;
     --bs: 2px 2px 9px var(--primary-8);
 
-    --primary: 42;
-    --primary-1: oklch(0.91 0.046 var(--primary));
-    --primary-2: oklch(0.843 0.083 var(--primary));
-    --primary-3: oklch(0.777 0.122 var(--primary));
-    --primary-4: oklch(0.71 0.163 var(--primary));
-    --primary-5: oklch(0.643 0.179 var(--primary));
-    --primary-6: oklch(0.577 0.161 var(--primary));
-    --primary-7: oklch(0.51 0.142 var(--primary));
-    --primary-8: oklch(0.443 0.124 var(--primary));
-    --primary-9: oklch(0.377 0.105 var(--primary));
-    --primary-10: oklch(0.31 0.086 var(--primary));
-    --primary-11: oklch(0.243 0.068 var(--primary));
-    --primary-12: oklch(0.177 0.049 var(--primary));
-    --primary-13: oklch(0.11 0.031 var(--primary));
+    --primary: 42deg;
+    --gradient-degree: var(--primary, 42deg);
+    // --gradient-degree: 42deg;
+    --l-base: 0.91;
+    --l-step: 0.067;
+    --c-peak: 0.179;
+
+    --primary-1: oklch(
+      calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--primary)
+    );
+    --primary-2: oklch(
+      calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
+        var(--primary)
+    );
+    --primary-3: oklch(
+      calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
+        var(--primary)
+    );
+    --primary-4: oklch(
+      calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
+        var(--primary)
+    );
+    --primary-5: oklch(
+      calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--primary)
+    );
+    --primary-6: oklch(
+      calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
+        var(--primary)
+    );
+    --primary-7: oklch(
+      calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
+        var(--primary)
+    );
+    --primary-8: oklch(
+      calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
+        var(--primary)
+    );
+    --primary-9: oklch(
+      calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
+        var(--primary)
+    );
+    --primary-10: oklch(
+      calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
+        var(--primary)
+    );
+    --primary-11: oklch(
+      calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
+        var(--primary)
+    );
+    --primary-12: oklch(
+      calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
+        var(--primary)
+    );
+    --primary-13: oklch(
+      calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
+        var(--primary)
+    );
+
+    --secondary: calc(180deg - var(--primary));
+
+    --secondary-1: oklch(
+      calc(var(--l-base)) calc(var(--c-peak) * 0.26) var(--secondary)
+    );
+    --secondary-2: oklch(
+      calc(var(--l-base) - var(--l-step)) calc(var(--c-peak) * 0.46)
+        var(--secondary)
+    );
+    --secondary-3: oklch(
+      calc(var(--l-base) - var(--l-step) * 2) calc(var(--c-peak) * 0.68)
+        var(--secondary)
+    );
+    --secondary-4: oklch(
+      calc(var(--l-base) - var(--l-step) * 3) calc(var(--c-peak) * 0.91)
+        var(--secondary)
+    );
+    --secondary-5: oklch(
+      calc(var(--l-base) - var(--l-step) * 4) var(--c-peak) var(--secondary)
+    );
+    --secondary-6: oklch(
+      calc(var(--l-base) - var(--l-step) * 5) calc(var(--c-peak) * 0.9)
+        var(--secondary)
+    );
+    --secondary-7: oklch(
+      calc(var(--l-base) - var(--l-step) * 6) calc(var(--c-peak) * 0.79)
+        var(--secondary)
+    );
+    --secondary-8: oklch(
+      calc(var(--l-base) - var(--l-step) * 7) calc(var(--c-peak) * 0.69)
+        var(--secondary)
+    );
+    --secondary-9: oklch(
+      calc(var(--l-base) - var(--l-step) * 8) calc(var(--c-peak) * 0.59)
+        var(--secondary)
+    );
+    --secondary-10: oklch(
+      calc(var(--l-base) - var(--l-step) * 9) calc(var(--c-peak) * 0.48)
+        var(--secondary)
+    );
+    --secondary-11: oklch(
+      calc(var(--l-base) - var(--l-step) * 10) calc(var(--c-peak) * 0.38)
+        var(--secondary)
+    );
+    --secondary-12: oklch(
+      calc(var(--l-base) - var(--l-step) * 11) calc(var(--c-peak) * 0.27)
+        var(--secondary)
+    );
+    --secondary-13: oklch(
+      calc(var(--l-base) - var(--l-step) * 12) calc(var(--c-peak) * 0.17)
+        var(--secondary)
+    );
   }
   #buddy {
     min-height: 100vh;
-    background-color: var(--primary-11);
+    // background-color:;
     // '3px-tile.png',
     // 'arabesque.png',
     // 'beige-paper.png',
     // 'binding-dark.png',
     // '45-degree-fabric-light.png'
-    background-image: url("/patterns/arabesque.png");
+    background-image: url("/patterns/arabesque.png"),
+      linear-gradient(
+        var(--gradient-degree),
+        var(--primary-12) 10%,
+        var(--primary-10) 70%
+      );
     background-attachment: fixed;
   }
 
@@ -126,7 +230,7 @@
       border: 0;
       font-size: 100%;
       // font: inherit;
-      color: var(--primary-1);
+      color: var(--primary-2);
       font-family: "Garamond", serif;
       font-size-adjust: 0.75;
       vertical-align: baseline;
@@ -166,9 +270,9 @@
       font-size: 1.5rem;
       line-height: 1.5rem;
       font-weight: 900;
-      color: var(--primary-1);
+      color: var(--primary-100);
       &:hover {
-        background: var(--primary-10);
+        background: var(--primary-1);
       }
     }
   }

src/routes/+page.svelte

@@ -64,7 +64,6 @@
       }
     }
     h3 {
-      // color: oklch(from var(--primary-4) calc(l + 0.2) c h);
       color: var(--primary-9);
       font-size: 0.75rem;
     }

src/routes/fest/apply/+page.server.ts

@@ -6,16 +6,74 @@ export async function load({ }) {
 export const actions = {
   default: async ({ request }) => {
     let data = await request.formData();
-    console.log("apply", data);
+    // console.log("apply", data);
+    let artist = {
+      name: data.get('artist_name'),
+      city: data.get('artist_city'),
+      contact: {
+        name: data.get('artist_contact_name'),
+        number: data.get('artist_contact_number'),
+        email: data.get('artist_contact_email')
+      },
+      type: data.get("act_type") != 'other' ? data.get("act_type") : data.get('other_act'),
+      genre: data.get("act_genre"),
+      amount_performers: data.get("act_performer_amount"),
+      biography: data.get("act_bio"),
+      links: data.get("act_links"),
+      performance_time: data.get('perf_time') != 'other' ? data.get('perf_time') : data.get('other_time'),
+      performance_length: data.get('perf_length') != 'other' ? data.get('perf_length') : data.get('other_length'),
+      tech_needs: data.get("performance_needs"),
+      what_drew_you: data.get('olt_draw'),
+      any_other_questions: data.get("olt_know"),
+      donation_acceptance: data.get('donation_confirmation')
+
+    }
+    console.log("appl", artist)
+
+    const artist_string = [
+      artist.name,
+      artist.city,
+      artist.contact?.name,
+      artist.contact?.number,
+      artist.contact?.email,
+      artist.type,
+      artist.genre,
+      artist.amount_performers,
+      artist.biography,
+      artist.links,
+      artist.performance_time,
+      artist.performance_length,
+      artist.tech_needs,
+      artist.what_drew_you,
+      artist.any_other_questions,
+      artist.donation_acceptance
+    ].map(v => {
+      // Escape for CSV safety
+      const s = String(v ?? '');
+      return s.includes(',') || s.includes('"') ? `"${s.replace(/"/g, '""')}"` : s;
+    }).join(', ');
+
+    // console.log(artist_string)
     transporter.sendMail({
       from: SMTP_USERNAME,
-      to: "fuckyou@sludge.link",
-      subject: "This is a test",
+      to: "fuckyou@sludge.link, black.ga@protonmail.com",
+      subject: "Sludge Fest Application for " + artist.name,
+      attachments: [{
+
+        filename: artist.name + '-application.csv',
+        content: artist_string
+      },
+      {
+        filename: artist.name + '-application.json',
+        content: JSON.stringify(artist)
+      }
+      ],
       html: `
         <!DOCTYPE html>
         <html>
         <body>
-          <h1>Hello email</h1 >
+        <h1>New App just dropped!! </h1>
+        <pre> ${JSON.stringify(artist, null, 2).replace(/&/g, '&amp').replace(/</g, '&lt').replace(/>/g, '&gt')} </pre>
         </body>
         </html
           `

src/routes/fest/apply/+page.svelte

@@ -26,23 +26,23 @@
     <fieldset>
       <legend> Who are You? </legend>
       <label>
-        Band/Artist Name
+        <p>Band/Artist Name</p>
         <input type="text" name="artist_name" />
       </label>
       <label>
-        Primary Contact Name
+        <p>Primary Contact Name</p>
         <input type="text" name="artist_contact_name" />
       </label>
       <label>
-        Phone Number
+        <p>Phone Number</p>
         <input type="text" name="artist_contact_number" />
       </label>
       <label>
-        Email
+        <p>Email</p>
         <input type="text" name="artist_contact_email" />
       </label>
       <label>
-        City & State of Origin
+        <p>City & State of Origin</p>
         <input type="text" name="artist_city" />
       </label>
     </fieldset>
@@ -93,19 +93,19 @@
         </ul>
       </label>
       <label>
-        Genre(s)
+        <p>Genre(s)</p>
         <input type="text" name="act_genre" />
       </label>
       <label>
-        Number of Members Performing
+        <p>Number of Members Performing</p>
         <input type="text" name="act_performer_amount" />
       </label>
       <label>
-        Brief Bio
+        <p>Brief Bio</p>
         <input type="text" name="act_bio" />
       </label>
       <label>
-        Links - BandCamp | Spotify | Youtube | Website | Social Media
+        <p>Links - BandCamp | Spotify | Youtube | Website | Social Media</p>
         <input type="text" name="act_links" />
       </label>
     </fieldset>
@@ -197,12 +197,12 @@
     <fieldset>
       <legend>One Last Thing</legend>
       <label>
-        What drew you to Sludge Fest?
+        <p>What drew you to Sludge Fest?</p>
         <input type="text" name="olt_draw" />
       </label>
       <label>
-        Anything else you'd like us to know?
-        <input type="text" name="olt_know" />
+        <p>Anything else you'd like us to know?</p>
+        <textarea name="olt_know"></textarea>
       </label>
       <label>
         Preferred Time
@@ -243,6 +243,16 @@
   section {
     max-width: 50rem;
     margin: 0 auto;
+    div {
+      h1 {
+        font-size: 2rem;
+        font-weight: 900;
+      }
+      p,
+      li {
+        font-size: 1.15rem;
+      }
+    }
     form {
       display: flex;
       flex-direction: column;
@@ -266,13 +276,32 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      border: thick outset var(--primary-5);
+      border: thick solid transparent;
+      background:
+        url("/patterns/45-degree-fabric-light.png") padding-box,
+        linear-gradient(
+            var(--gradient-degree),
+            var(--primary-12) 0%,
+            var(--primary-11) 100%
+          )
+          padding-box,
+        linear-gradient(
+            var(--gradient-degree),
+            var(--secondary-7),
+            var(--secondary-3)
+          )
+          border-box;
       padding: 0 1rem 1rem 1rem;
       border-radius: var(--br);
       legend {
         font-weight: 900;
         font-size: 1.125rem;
         margin-left: 1rem;
+        padding: 0 0.5rem;
+        background: url("/patterns/45-degree-fabric-light.png"),
+          var(--primary-11);
+
+        border-radius: var(--br) var(--br) 0 0;
       }
       label {
         display: flex;
@@ -280,15 +309,32 @@
         &:has(ul) {
           flex-direction: column;
         }
+        p {
+          flex-basis: 50%;
+          text-align: right;
+        }
         input {
-          background: var(--primary-9);
+          height: 2rem;
+          align-self: center;
+        }
+        input,
+        textarea {
+          flex-basis: 50%;
+          background: linear-gradient(
+            var(--gradient-degree),
+            var(--primary-11),
+            var(--primary-10)
+          );
           border: none;
           outline: none;
           border-radius: var(--br);
           color: var(--primary-1);
           font-size: 1rem;
           padding: 0 0.5rem;
-          accent-color: var(--primary-6);
+          accent-color: var(--primary-8);
+        }
+        input[type="radio"] {
+          flex-basis: 1rem;
         }
         ul {
           display: flex;