Spaces:

build-small-hackathon
/

epic-errands

Sleeping

App Files Files Community

curieous commited on Jun 13

Commit

d7e5038

verified ·

1 Parent(s): eaa8d34

Update Epic Errands V1 visual design

Browse files

Files changed (5) hide show

README.md +4 -2
epic_errands_space/quest_generation.py +4 -4
frontend/index.html +7 -12
frontend/scripts/app.js +21 -21
frontend/styles/app.css +44 -31

README.md CHANGED Viewed

@@ -20,8 +20,10 @@ the public app is not a `gr.HTML` island inside `gr.Blocks`.
 The prototype includes:
 - Home, Parent Goals, Kid Goals, and disabled DIY Lab navigation.
-- Classroom, Magical, and Comic style switching.
-- Theme-based parent/kid titles such as Chief Wizard and Junior Wizard.
 - Kid completion state separated from parent approval/reward state.
 - Parent approve-only reward flow.
 - Disabled V1.1 audio hook.

 The prototype includes:
 - Home, Parent Goals, Kid Goals, and disabled DIY Lab navigation.
+- Quest, Classroom, and Comic app theme switching.
+- Quest is the default visible theme; the internal style id `magical` is kept
+  only for V1 compatibility.
+- Theme-based parent/kid titles such as Quest Keeper and Young Adventurer.
 - Kid completion state separated from parent approval/reward state.
 - Parent approve-only reward flow.
 - Disabled V1.1 audio hook.

epic_errands_space/quest_generation.py CHANGED Viewed

@@ -124,7 +124,7 @@ def _quest_title(goal_text: str, tone: str) -> str:
     tone_word = {
         "cozy": "Cozy",
         "brave": "Brave",
-        "magical": "Magic",
         "silly": "Silly",
         "epic": "Epic",
     }.get(tone, "Cozy")
@@ -146,9 +146,9 @@ def _why_it_helps(goal_text: str) -> str:
 def _prompt_for_goal(goal: dict[str, str], tone: str) -> str:
     return (
-        "A delightful storybook classroom adventure hero image for a children's "
-        "goal-planning app. Warm handcrafted illustration, cozy school supplies, "
-        "sunny classroom, gentle fantasy quest mood, no readable text, no UI, "
         "kid-safe, expressive, polished. "
         f"Tone: {tone}. Ordinary goal transformed visually: {goal['text']}."
     )

     tone_word = {
         "cozy": "Cozy",
         "brave": "Brave",
+        "magical": "Quest",
         "silly": "Silly",
         "epic": "Epic",
     }.get(tone, "Cozy")
 def _prompt_for_goal(goal: dict[str, str], tone: str) -> str:
     return (
+        "A delightful family questbook hero image for a children's "
+        "goal-planning app. Warm handcrafted illustration, parchment storybook "
+        "mood, clear everyday adventure, no readable text, no UI, "
         "kid-safe, expressive, polished. "
         f"Tone: {tone}. Ordinary goal transformed visually: {goal['text']}."
     )

frontend/index.html CHANGED Viewed

@@ -2,21 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="theme-color" content="#fffdf8">
-    <title>Epic Errands</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@700;800;900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,600,0,0&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/frontend/styles/app.css">
   </head>
   <body>
-    <main class="epic-app" aria-label="Epic Errands mobile prototype">
-      <div id="epic-errands-app"></div>
-    </main>
-    <script>
-      window.EPIC_ASSET_BASE = "/assets/";
-    </script>
-    <script src="/frontend/scripts/app.js" defer></script>
   </body>
 </html>

 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Epic Errands V1 - Mobile Review Prototype</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Lora:wght@600;700&family=Nunito:wght@500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0" rel="stylesheet">
+    <link rel="stylesheet" href="styles/app.css">
   </head>
   <body>
+    <main id="epic-errands-app" class="epic-app" aria-label="Epic Errands V1 mobile review prototype"></main>
+    <script src="scripts/app.js"></script>
   </body>
 </html>

frontend/scripts/app.js CHANGED Viewed

@@ -12,17 +12,17 @@
       kidTitle: "Star Student",
       rewardNoun: "badge",
       waitingCopy: "Waiting for Classroom Captain approval.",
-      copy: "Warm school adventure with stickers, notebooks, and sunny goals.",
     },
     magical: {
-      label: "Magical",
-      icon: "auto_fix_high",
-      goalNoun: "Spell Quest",
-      parentTitle: "Chief Wizard",
-      kidTitle: "Junior Wizard",
-      rewardNoun: "charm",
-      waitingCopy: "Waiting for Chief Wizard approval.",
-      copy: "Cozy spellbook fantasy with gentle magic and glowing rewards.",
     },
     comic: {
       label: "Comic",
@@ -119,7 +119,7 @@
   function goalTitle(goal) {
     const style = goalStyle(goal);
     const lower = goal.ordinaryGoal.toLowerCase();
-    if (goal.styleId === "magical" && lower.includes("class project")) return `${style.goalNoun}: Bright Idea Bridge`;
     if (goal.styleId === "comic" && lower.includes("laundry")) return `${style.goalNoun}: Laundry Launch`;
     if (lower.includes("read")) return `${style.goalNoun}: Reading Lantern`;
     return `${style.goalNoun}: ${titleCase(goal.ordinaryGoal)}`;
@@ -127,7 +127,7 @@
   function rewardLabel(goal) {
     const style = goalStyle(goal);
-    if (goal.styleId === "magical") return `Glow ${style.rewardNoun}`;
     if (goal.styleId === "comic") return `Pow ${style.rewardNoun}`;
     return `Helper ${style.rewardNoun}`;
   }
@@ -151,9 +151,9 @@
     const style = goalStyle(goal);
     if (goal.styleId === "magical") {
       return [
-        "Gather your project ideas",
-        "Build the first bright piece",
-        "Check your spellbook notes",
       ];
     }
     if (goal.styleId === "comic") {
@@ -167,19 +167,19 @@
     return `
       <section class="screen" data-design-id="home-screen" aria-labelledby="home-title">
         <div class="screen-head">
-          <h1 class="screen-title" id="home-title">Choose today's style</h1>
-          <p class="screen-copy">${escapeHtml(style.parentTitle)} and ${escapeHtml(style.kidTitle)} will use this style for new goals.</p>
         </div>
         <section class="panel" data-design-id="style-mode-picker" aria-labelledby="style-label">
-          <h2 class="section-label" id="style-label">Goal style</h2>
           <div class="style-grid">
             ${Object.entries(styles).map(([id, item]) => `
               <button class="style-option" data-action="select-style" data-style="${id}" aria-pressed="${state.defaultStyleId === id}">
                 <span class="style-mark">${icon(item.icon)}</span>
                 <span>
                   <span class="style-name">${item.label}</span>
-                  <span class="style-meta">${item.goalNoun} / ${item.rewardNoun}. ${item.copy}</span>
                 </span>
                 <span class="selected-dot" aria-hidden="true"></span>
               </button>
@@ -233,7 +233,7 @@
         <form class="goal-create panel" data-design-id="parent-goal-create" aria-labelledby="create-goal-title">
           <div>
             <h2 class="section-label" id="create-goal-title">Create goal</h2>
-            <p class="goal-create-copy">New goals snapshot the current ${escapeHtml(style.label)} style.</p>
           </div>
           <label class="goal-input-label" for="new-goal-input">Ordinary goal</label>
           <div class="goal-create-row">
@@ -273,7 +273,7 @@
       <section class="screen" data-design-id="kid-goals-screen" aria-labelledby="kid-title">
         <div class="screen-head">
           <h1 class="screen-title" id="kid-title">Kid Goals</h1>
-          <p class="screen-copy">Tap a thumbnail to open the goal card, finish it, then wait for your grown-up's themed approval.</p>
         </div>
         <div class="kid-grid" data-design-id="kid-goal-thumbnail-grid">
           ${state.goals.map((goal) => {
@@ -392,7 +392,7 @@
         <header class="app-top">
           <div class="brand-row">
             <div class="brand-lockup">
-              <p class="eyebrow">V1 mobile review</p>
               <h1 class="brand-title">Epic Errands</h1>
             </div>
             <span class="status-pill">${icon(style.icon)} ${escapeHtml(style.label)}</span>

       kidTitle: "Star Student",
       rewardNoun: "badge",
       waitingCopy: "Waiting for Classroom Captain approval.",
+      copy: "Bright school adventure with stickers, notebooks, and sunny goals.",
     },
     magical: {
+      label: "Quest",
+      icon: "auto_stories",
+      goalNoun: "Quest",
+      parentTitle: "Quest Keeper",
+      kidTitle: "Young Adventurer",
+      rewardNoun: "crest",
+      waitingCopy: "Waiting for Quest Keeper approval.",
+      copy: "Premium questbook fantasy with warm paper, ink lines, and earned crests.",
     },
     comic: {
       label: "Comic",
   function goalTitle(goal) {
     const style = goalStyle(goal);
     const lower = goal.ordinaryGoal.toLowerCase();
+    if (goal.styleId === "magical" && lower.includes("class project")) return `${style.goalNoun}: Bridge of Bright Ideas`;
     if (goal.styleId === "comic" && lower.includes("laundry")) return `${style.goalNoun}: Laundry Launch`;
     if (lower.includes("read")) return `${style.goalNoun}: Reading Lantern`;
     return `${style.goalNoun}: ${titleCase(goal.ordinaryGoal)}`;
   function rewardLabel(goal) {
     const style = goalStyle(goal);
+    if (goal.styleId === "magical") return `Orderkeeper ${style.rewardNoun}`;
     if (goal.styleId === "comic") return `Pow ${style.rewardNoun}`;
     return `Helper ${style.rewardNoun}`;
   }
     const style = goalStyle(goal);
     if (goal.styleId === "magical") {
       return [
+        "Gather the scattered clues",
+        "Build the first brave piece",
+        "Check the questbook notes",
       ];
     }
     if (goal.styleId === "comic") {
     return `
       <section class="screen" data-design-id="home-screen" aria-labelledby="home-title">
         <div class="screen-head">
+          <h1 class="screen-title" id="home-title">Set the app theme</h1>
+          <p class="screen-copy">Quest is the default visual style. Switch to Classroom or Comic before creating a new goal.</p>
         </div>
         <section class="panel" data-design-id="style-mode-picker" aria-labelledby="style-label">
+          <h2 class="section-label" id="style-label">App theme</h2>
           <div class="style-grid">
             ${Object.entries(styles).map(([id, item]) => `
               <button class="style-option" data-action="select-style" data-style="${id}" aria-pressed="${state.defaultStyleId === id}">
                 <span class="style-mark">${icon(item.icon)}</span>
                 <span>
                   <span class="style-name">${item.label}</span>
+                  <span class="style-meta">${item.parentTitle} / ${item.rewardNoun}. ${item.copy}</span>
                 </span>
                 <span class="selected-dot" aria-hidden="true"></span>
               </button>
         <form class="goal-create panel" data-design-id="parent-goal-create" aria-labelledby="create-goal-title">
           <div>
             <h2 class="section-label" id="create-goal-title">Create goal</h2>
+            <p class="goal-create-copy">New goals snapshot the current ${escapeHtml(style.label)} app theme.</p>
           </div>
           <label class="goal-input-label" for="new-goal-input">Ordinary goal</label>
           <div class="goal-create-row">
       <section class="screen" data-design-id="kid-goals-screen" aria-labelledby="kid-title">
         <div class="screen-head">
           <h1 class="screen-title" id="kid-title">Kid Goals</h1>
+          <p class="screen-copy">Tap a thumbnail to open the goal card, finish it, then wait for your grown-up's approval.</p>
         </div>
         <div class="kid-grid" data-design-id="kid-goal-thumbnail-grid">
           ${state.goals.map((goal) => {
         <header class="app-top">
           <div class="brand-row">
             <div class="brand-lockup">
+              <p class="eyebrow">V1 visual review</p>
               <h1 class="brand-title">Epic Errands</h1>
             </div>
             <span class="status-pill">${icon(style.icon)} ${escapeHtml(style.label)}</span>

frontend/styles/app.css CHANGED Viewed

@@ -1,12 +1,14 @@
 :root {
   --font-display: "Baloo 2", system-ui, sans-serif;
   --font-body: "Nunito", system-ui, sans-serif;
-  --ink: #1f2a37;
-  --muted: #607086;
-  --line: rgba(31, 42, 55, 0.14);
-  --paper: #fffdf8;
   --surface: #ffffff;
-  --soft: #f4f7fb;
   --primary: #e3403a;
   --primary-ink: #ffffff;
   --success: #128a55;
@@ -32,7 +34,7 @@ body {
 body {
   margin: 0;
-  background: #dfe9f7;
   color: var(--ink);
   font-family: var(--font-body);
   overflow: hidden;
@@ -77,8 +79,9 @@ input:focus-visible {
   padding: 18px;
   overflow: hidden;
   background:
-    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.92), transparent 30%),
-    linear-gradient(135deg, #d8ebff 0%, #fff2d8 52%, #f5e9ff 100%);
 }
 .phone {
@@ -91,12 +94,13 @@ input:focus-visible {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   border: 1px solid rgba(31, 42, 55, 0.16);
-  border-radius: 30px;
   background: var(--paper);
   box-shadow: var(--shadow);
 }
 .phone[data-style="classroom"] {
   --theme: #e3403a;
   --theme-2: #1467b3;
   --theme-3: #f7c948;
@@ -107,16 +111,20 @@ input:focus-visible {
 }
 .phone[data-style="magical"] {
-  --theme: #7652c7;
-  --theme-2: #0f877e;
-  --theme-3: #efb84a;
-  --theme-soft: #f2eaff;
-  --theme-panel: #fff7e4;
-  --theme-border: #c5b2f3;
-  --reward: #b36b00;
 }
 .phone[data-style="comic"] {
   --theme: #136bd9;
   --theme-2: #d62957;
   --theme-3: #ffd33d;
@@ -129,7 +137,7 @@ input:focus-visible {
 .app-top {
   padding: 22px 20px 12px;
   background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.42)),
     var(--theme-panel);
   border-bottom: 1px solid var(--line);
 }
@@ -156,9 +164,9 @@ input:focus-visible {
 .brand-title {
   margin: 0;
   color: var(--ink);
-  font-family: var(--font-display);
   font-size: 29px;
-  line-height: 0.95;
 }
 .status-pill {
@@ -183,7 +191,7 @@ input:focus-visible {
   -webkit-overflow-scrolling: touch;
   padding: 18px 18px calc(var(--nav-h) + 18px);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
     var(--theme-panel);
 }
@@ -199,9 +207,9 @@ input:focus-visible {
 .screen-title {
   margin: 0;
-  font-family: var(--font-display);
   font-size: 28px;
-  line-height: 1;
 }
 .screen-copy {
@@ -220,8 +228,8 @@ input:focus-visible {
 .avatar-slot,
 .goal-create {
   border: 1px solid var(--line);
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow-tight);
 }
@@ -264,13 +272,14 @@ input:focus-visible {
   width: 46px;
   height: 46px;
   place-items: center;
-  border-radius: 14px;
   background: var(--theme-soft);
   color: var(--theme);
 }
 .style-name {
   display: block;
   font-size: 18px;
   font-weight: 1000;
 }
@@ -365,7 +374,7 @@ input:focus-visible {
 .counter strong {
   color: var(--theme);
-  font-family: var(--font-display);
   font-size: 38px;
   line-height: 0.9;
 }
@@ -444,6 +453,7 @@ input:focus-visible {
 }
 .goal-name {
   font-size: 17px;
   font-weight: 1000;
 }
@@ -485,7 +495,7 @@ input:focus-visible {
 .create-button {
   min-height: 44px;
   border: 0;
-  border-radius: 999px;
   padding: 0 14px;
   background: var(--theme);
   color: var(--primary-ink);
@@ -523,6 +533,7 @@ input:focus-visible {
   overflow: hidden;
   text-align: left;
   color: var(--ink);
 }
 .kid-tile img {
@@ -608,7 +619,7 @@ input:focus-visible {
   max-width: calc(100% - 24px);
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, 0.72);
-  border-radius: 999px;
   background: rgba(255, 255, 255, 0.9);
   color: var(--theme);
   font-size: 12px;
@@ -619,14 +630,16 @@ input:focus-visible {
   display: grid;
   gap: 12px;
   padding: 14px;
-  background: var(--surface);
 }
 .goal-card h2 {
   margin: 0;
-  font-family: var(--font-display);
   font-size: 28px;
-  line-height: 0.98;
 }
 .step-list {

 :root {
   --font-display: "Baloo 2", system-ui, sans-serif;
+  --font-quest: "Lora", Georgia, serif;
   --font-body: "Nunito", system-ui, sans-serif;
+  --font-heading: var(--font-display);
+  --ink: #241d19;
+  --muted: #655f59;
+  --line: rgba(62, 47, 33, 0.16);
+  --paper: #fff8e8;
   --surface: #ffffff;
+  --soft: #f5efe3;
   --primary: #e3403a;
   --primary-ink: #ffffff;
   --success: #128a55;
 body {
   margin: 0;
+  background: #e9dcc5;
   color: var(--ink);
   font-family: var(--font-body);
   overflow: hidden;
   padding: 18px;
   overflow: hidden;
   background:
+    radial-gradient(circle at 16% 12%, rgba(255, 252, 240, 0.95), transparent 28%),
+    radial-gradient(circle at 86% 16%, rgba(109, 84, 53, 0.18), transparent 22%),
+    linear-gradient(135deg, #d7c29e 0%, #fff1d5 48%, #dfe7d5 100%);
 }
 .phone {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   border: 1px solid rgba(31, 42, 55, 0.16);
+  border-radius: 26px;
   background: var(--paper);
   box-shadow: var(--shadow);
 }
 .phone[data-style="classroom"] {
+  --font-heading: var(--font-display);
   --theme: #e3403a;
   --theme-2: #1467b3;
   --theme-3: #f7c948;
 }
 .phone[data-style="magical"] {
+  --font-heading: var(--font-quest);
+  --theme: #31583e;
+  --theme-2: #5a3f78;
+  --theme-3: #c79335;
+  --theme-soft: #f2e6cc;
+  --theme-panel: #fff6e3;
+  --theme-border: #aa8752;
+  --reward: #2f6b45;
+  --line: rgba(95, 66, 33, 0.24);
+  --surface: #fffaf0;
 }
 .phone[data-style="comic"] {
+  --font-heading: var(--font-display);
   --theme: #136bd9;
   --theme-2: #d62957;
   --theme-3: #ffd33d;
 .app-top {
   padding: 22px 20px 12px;
   background:
+    linear-gradient(90deg, rgba(255, 252, 244, 0.96), rgba(255, 252, 244, 0.55)),
     var(--theme-panel);
   border-bottom: 1px solid var(--line);
 }
 .brand-title {
   margin: 0;
   color: var(--ink);
+  font-family: var(--font-heading);
   font-size: 29px;
+  line-height: 1;
 }
 .status-pill {
   -webkit-overflow-scrolling: touch;
   padding: 18px 18px calc(var(--nav-h) + 18px);
   background:
+    linear-gradient(180deg, rgba(255, 253, 247, 0.72), rgba(255, 255, 255, 0)),
     var(--theme-panel);
 }
 .screen-title {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: 28px;
+  line-height: 1.05;
 }
 .screen-copy {
 .avatar-slot,
 .goal-create {
   border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 253, 247, 0.92);
   box-shadow: var(--shadow-tight);
 }
   width: 46px;
   height: 46px;
   place-items: center;
+  border-radius: 12px;
   background: var(--theme-soft);
   color: var(--theme);
 }
 .style-name {
   display: block;
+  font-family: var(--font-heading);
   font-size: 18px;
   font-weight: 1000;
 }
 .counter strong {
   color: var(--theme);
+  font-family: var(--font-heading);
   font-size: 38px;
   line-height: 0.9;
 }
 }
 .goal-name {
+  font-family: var(--font-heading);
   font-size: 17px;
   font-weight: 1000;
 }
 .create-button {
   min-height: 44px;
   border: 0;
+  border-radius: 12px;
   padding: 0 14px;
   background: var(--theme);
   color: var(--primary-ink);
   overflow: hidden;
   text-align: left;
   color: var(--ink);
+  background: var(--theme-soft);
 }
 .kid-tile img {
   max-width: calc(100% - 24px);
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, 0.72);
+  border-radius: 12px;
   background: rgba(255, 255, 255, 0.9);
   color: var(--theme);
   font-size: 12px;
   display: grid;
   gap: 12px;
   padding: 14px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)),
+    var(--surface);
 }
 .goal-card h2 {
   margin: 0;
+  font-family: var(--font-heading);
   font-size: 28px;
+  line-height: 1.05;
 }
 .step-list {