Merge pull request #195 from hippogriff101/main

Add Woof Draft to YSWS Catalog

data.yml

@@ -922,6 +922,12 @@ indefinite:
   slackChannel: "#foodie"
   status: ended
 drafts:
+- name: Woof
+  description: Spend 5 or more hours making a dog-themed project and get a dog plushie and other cool stuff!
+  website: https://woof-mu.vercel.app/
+  slack: https://hackclub.enterprise.slack.com/archives/C08LCGSECQP
+  slackChannel: "#woof"
+  status: draft
 - name: issued
   description: code to design hack-themed apparel
   detailedDescription: you code to design hack-themed apparel, we ship popular designs as real clothes!

script.js

@@ -300,7 +300,7 @@ function createProgramCard(program) {
     const accelerateClass = program.name === 'Accelerate' ? 'accelerate-card' : '';
     const baubleClass = program.name === 'Bauble' ? 'bauble-card' : '';
     const meowClass = program.name === 'Meow' ? 'meow-card' : '';
-    
+    const woofClass = program.name === 'Woof' ? 'woof-card' : '';
     const encodedProgram = encodeURIComponent(JSON.stringify(program));
     
     const isCompletedByUser = completedPrograms.has(program.name);
@@ -333,7 +333,7 @@ function createProgramCard(program) {
     ` : '';
     
     return `
-        <div class="card program-card ${opensClass} ${blueprintClass} ${accelerateClass} ${baubleClass} ${meowClass}" data-program="${encodedProgram}" data-name="${program.name}">
+        <div class="card program-card ${opensClass} ${blueprintClass} ${accelerateClass} ${baubleClass} ${meowClass} ${woofClass}" data-program="${encodedProgram}" data-name="${program.name}">
             ${baubleSnowflakes}
             <div class="program-header">
                 <h3>${program.name}</h3>

styles.css

@@ -3062,3 +3062,40 @@ html {
 .program-card.meow-card:hover {
   border-color: var(--color-meow-accent) !important;
 }
+
+/* Woof-specific card styling - borrowed from Meow (above) */
+.program-card.woof-card {
+  --color-woof-bg: #e5cd6c;
+  --color-woof-dot: #f9f3b9;
+  --color-woof-text: #010101;
+  --color-woof-accent: #2f1213;
+  background-color: var(--color-woof-bg) !important;
+  background-image: radial-gradient(circle, var(--color-woof-dot) 10px, transparent 15px) !important;
+  background-size: 20px 20px !important;
+  position: relative;
+  color: var(--color-woof-text) !important;
+}
+
+.program-card.woof-card h3,
+.program-card.woof-card p,
+.program-card.woof-card .program-deadline {
+  color: var(--color-woof-text) !important;
+  position: relative;
+  z-index: 1;
+}
+
+.program-card.woof-card a {
+  color: var(--color-woof-accent) !important;
+  position: relative;
+  z-index: 1;
+}
+
+.program-card.woof-card .program-status {
+  color: white !important;
+  position: relative;
+  z-index: 1;
+}
+
+.program-card.woof-card:hover {
+  border-color: var(--color-woof-accent) !important;
+}