Spaces:

MonaZYX
/

DailyPal-Interactive

Running

App Files Files Community

Mona commited on Nov 4, 2025

Commit

090e374

1 Parent(s): af1d617

Upload DailyPal Interactive Prototype

Browse files

Files changed (2) hide show

README.md +16 -12
index.html +283 -17

README.md CHANGED Viewed

@@ -1,12 +1,16 @@
----
-title: DailyPal Interactive
-emoji: 🐨
-colorFrom: green
-colorTo: gray
-sdk: static
-pinned: false
-license: mit
-short_description: DailyPal Interactive Web
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# DailyPal • Interactive Prototype (Static HTML)
+This folder contains a **single-page interactive prototype** (no backend) that runs in any modern browser.
+## Files
+- `index.html` — the interactive prototype (clickable toggles, draggable sliders, Apple-style home screen)
+- `README.md` — this file
+## Deploy to Hugging Face Spaces (Static HTML Site)
+1. Create a new Space at https://huggingface.co/spaces → **Static HTML Site**
+2. Upload `index.html` (and `README.md` optional). Make sure `index.html` is at the **root**.
+3. Once the build finishes, your live link will look like:
+   `https://huggingface.co/spaces/<YourName>/DailyPal-Interactive`
+## Local run
+Just open `index.html` in your browser.

index.html CHANGED Viewed

@@ -1,19 +1,285 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang='en'>
+<meta charset='utf-8'>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>DailyPal Interactive Prototype</title>
+<style>
+  :root { --w:430px; --h:520px; --r:30px; --stroke:#E5E5EA; --bg:#F2F2F7;
+          --green:#34C759; --blue:#007AFF; --dark:#000; --sub:#8E8E93; }
+  body { background:#111; font-family:SF Pro Display, Helvetica, Arial, sans-serif; display:flex; flex-direction:column; align-items:center; gap:16px; min-height:100vh; margin:0; justify-content:center; padding:16px; }
+  .watch svg { border-radius: var(--r); box-shadow:0 20px 60px rgba(0,0,0,.5); max-width:100%; height:auto; }
+  #bar { color:#aaa; font-size:12px; text-align:center; }
+  .btnlike { cursor:pointer; }
+</style>
+<body>
+<div id='screen' class='watch'></div>
+<div id='bar'>Press 0:Home, 1:Dashboard, 2:Popup, 3:Scheduler, 4:Weekly, 5:Settings</div>
+<script>
+const W=430, H=520, R=30;
+const homeSVG = `<svg xmlns='http://www.w3.org/2000/svg' width='430' height='520' viewBox='0 0 430 520'>
+    <defs>
+      <style>
+        .time { font: 700 22px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #FFFFFF; }
+        .label { font: 600 12px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #FFFFFF; }
+      </style>
+    </defs>
+    <rect x='0' y='0' rx='30' ry='30' width='430' height='520' fill='#000000'/>
+    <text class='time' x='20' y='38'>9:41</text>
+    <g id='icon-dailypal' cursor='pointer'>
+      <circle cx='115' cy='210' r='38' fill='#34C759'/>
+      <rect x='100' y='195' width='30' height='24' rx='6' fill='#FFFFFF'/>
+      <circle cx='132' cy='205' r='5' fill='#34C759'/>
+      <text class='label' x='115' y='260' text-anchor='middle'>DailyPal</text>
+    </g>
+    <g>
+      <circle cx='215' cy='180' r='28' fill='#FF3B30'/>
+      <circle cx='280' cy='230' r='32' fill='#FF9500'/>
+      <circle cx='190' cy='270' r='26' fill='#0A84FF'/>
+      <circle cx='260' cy='305' r='24' fill='#BF5AF2'/>
+      <circle cx='158' cy='330' r='22' fill='#64D2FF'/>
+      <circle cx='320' cy='190' r='22' fill='#FFD60A'/>
+    </g>
+    </svg>`;
+function frameStart(title){
+  return `
+  <svg xmlns='http://www.w3.org/2000/svg' width='${W}' height='${H}' viewBox='0 0 ${W} ${H}'>
+    <defs>
+      <style>
+        .title { font: 700 22px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #000; }
+        .section { font: 600 17px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #000; }
+        .body { font: 500 14px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #000; }
+        .note { font: 500 12px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #8E8E93; }
+        .btn { font: 700 16px "SF Pro Display, Helvetica, Arial, sans-serif"; fill: #000; }
+      </style>
+    </defs>
+    <rect x='0' y='0' rx='${R}' ry='${R}' width='${W}' height='${H}' fill='#F2F2F7' stroke='#E5E5EA'/>
+    <text class='note' x='22' y='24'>9:41</text>
+    <text class='title' x='22' y='44'>${title}</text>
+  `;
+}
+function frameEnd(){ return "</svg>"; }
+function pill(x,y,w,h,label,id,fill='#FFFFFF',stroke='#E5E5EA'){
+  return `<g id='${id}' class='btnlike'><rect x='${x}' y='${y}' width='${w}' height='${h}' rx='18' fill='${fill}' stroke='${stroke}'/><text class='btn' x='${x+w/2}' y='${y+h/2+6}' text-anchor='middle'>${label}</text></g>`;
+}
+function toggle(x,y,on,id){
+  const fill = on ? '#34C759' : '#E9E9ED';
+  const knob = x + (on ? 48 : 18);
+  return `<g id='${id}' class='btnlike' data-on='${on?1:0}'>
+    <rect x='${x}' y='${y}' width='66' height='32' rx='16' fill='${fill}' stroke='#E5E5EA'/>
+    <circle cx='${knob}' cy='${y+16}' r='13' fill='#FFFFFF' stroke='#E5E5EA'/>
+  </g>`;
+}
+function checkbox(x,y,checked,label,id){
+  const mark = checked ? `<path d='M ${x+4} ${y+12} l 6 6 l 10 -12' stroke='#007AFF' stroke-width='2' fill='none'/>` : '';
+  return `<g id='${id}' class='btnlike' data-on='${checked?1:0}'>
+    <rect x='${x}' y='${y}' width='24' height='24' rx='6' fill='#FFFFFF' stroke='#E5E5EA'/>
+    ${mark}
+    <text class='body' x='${x+32}' y='${y+17}'>${label}</text>
+  </g>`;
+}
+function slider(x,y,w,label,value,id) {
+  const pos = 0.65;
+  const knobX = x + w*pos;
+  return `<g id='${id}' class='slider' data-x='${x}' data-w='${w}' data-pos='${pos}'>
+    <text class='section' x='${x}' y='${y-12}'>${label}</text>
+    <rect x='${x}' y='${y}' width='${w}' height='6' rx='3' fill='#E5E7EB'/>
+    <circle cx='${knobX}' cy='${y+3}' r='10' fill='#FFFFFF' stroke='#E5E5EA'/>
+    <text class='note' id='${id}-val' x='${x+w}' y='${y-12}' text-anchor='end'>${value}</text>
+  </g>`;
+}
+function weeklyBars(x,y,w,h,vals){
+  let out='<g>';
+  const bw = w/(vals.length*1.6); const gap=bw*0.6;
+  for(let i=0;i<vals.length;i++){
+    const v=vals[i];
+    const color = v>0.75 ? '#B8E6C1' : (v>0.45 ? '#FFDDA6' : '#FFB3A8');
+    const bx = x + i*(bw+gap); const bh=v*h; const by=y+(h-bh);
+    out += `<rect x='${bx}' y='${by}' width='${bw}' height='${bh}' rx='4' fill='${color}' stroke='#E5E5EA'/>`;
+  }
+  out+='</g>'; return out;
+}
+function dashboard(){
+  let s=frameStart('Next dose • 9:00 AM');
+  s += `<text class='note' x='22' y='66'>2 of 3 done today — Doing well!</text>`;
+  function row(y,label,right){
+    return `<g>
+      <rect x='18' y='${y}' width='${W-36}' height='64' rx='16' fill='#FFFFFF' stroke='#E5E5EA'/>
+      <circle cx='40' cy='${y+32}' r='10' fill='#E9F8EF' stroke='#E5E5EA'/>
+      <path d='M 36 ${y+32} l 6 6 l 10 -12' stroke='#34C759' stroke-width='2' fill='none'/>
+      <text class='section' x='58' y='${y+37}'>${label}</text>
+      <text class='note' x='${W-28}' y='${y+37}' text-anchor='end'>${right}</text>
+    </g>`;
+  }
+  s += row(82,'Taken','8:00 AM');
+  s += row(154,'Snoozed','12:00 PM');
+  s += row(226,'Skipped','6:00 PM');
+  s += pill(18,308,W-36,60,'I took it','btn_dashboard_took','#E9F8EF');
+  s += `<text class='note' x='22' y='392'>Weekly summary</text>`;
+  s += pill(18,402,W-36,44,'Open Settings','btn_dashboard_settings','#FFFFFF');
+  s += frameEnd();
+  return s;
+}
+function popup(){
+  let s=frameStart('Time to take medication');
+  s += `<rect x='22' y='54' width='${W-44}' height='96' rx='16' fill='#FFFFFF' stroke='#E5E5EA'/>
+        <circle cx='46' cy='102' r='12' fill='#F2F2F5' stroke='#E5E5EA'/>
+        <text class='section' x='70' y='96'>Aspirin</text><text class='note' x='70' y='116'>1 tablet</text>`;
+  s += pill(22,162,120,52,'Snooze','btn_popup_snooze','#FFF7CC');
+  s += pill(154,162,120,52,'Skip','btn_popup_skip','#FFE9E7','#F0C2C2');
+  s += pill(286,162,120,52,'Taken','btn_popup_taken','#E9F8EF','#B9E6C6');
+  s += frameEnd(); return s;
+}
+function scheduler(){
+  let s=frameStart('Adaptive Scheduler');
+  s += slider(22,78,W-44,'Morning','8:00 AM','sld_morning');
+  s += slider(22,132,W-44,'Noon','12:30 PM','sld_noon');
+  s += slider(22,186,W-44,'Evening','9:00 PM','sld_evening');
+  s += `<text class='section' x='22' y='244'>Quiet Hours 10:00 PM–7:00 AM</text>`;
+  s += toggle(W-22-66,224,true,'tgl_quiet');
+  s += `<text class='section' x='22' y='292'>Auto-learn from your responses</text>`;
+  s += toggle(W-22-66,272,true,'tgl_autolearn');
+  s += pill(22,324,180,56,'Save','btn_scheduler_save','#E9F8EF');
+  s += pill(W-22-180,324,180,56,'Cancel','btn_scheduler_cancel');
+  s += frameEnd(); return s;
+}
+function weekly(){
+  let s=frameStart('Weekly Summary');
+  s += weeklyBars(56,70,W-112,150,[0.92,0.6,0.84,0.72,0.35,0.52,0.64]);
+  const days=['M','T','W','T','F','S','S'];
+  const bw = (W-112)/(days.length*1.6); const gap=bw*0.6;
+  for(let i=0;i<days.length;i++){ const x=56+i*(bw+gap)+bw/2; s+=`<text class='note' x='${x}' y='230' text-anchor='middle'>${days[i]}</text>`; }
+  s += `<text class='body' x='22' y='260'>You missed 2 doses this week — mostly at night.</text>`;
+  s += pill(22,288,W-44,56,'View Details','btn_weekly_view');
+  s += frameEnd(); return s;
+}
+function settings(){
+  let s=frameStart('Reminder Settings');
+  s += `<text class='section' x='22' y='80'>Alert Style</text>`;
+  s += checkbox(22,92,true,'Vibration','chk_vib');
+  s += checkbox(22,128,false,'Sound','chk_sound');
+  s += checkbox(22,164,false,'Light','chk_light');
+  s += `<line x1='22' y1='200' x2='${W-22}' y2='200' stroke='#E5E5EA'/>`;
+  s += `<text class='section' x='22' y='232'>Show pop-ups</text>`;
+  s += toggle(W-22-66,212,false,'tgl_popups');
+  s += `<text class='note' x='22' y='256'>Disable sounds and pop-ups during presentations, etc.</text>`;
+  s += `<line x1='22' y1='284' x2='${W-22}' y2='284' stroke='#E5E5EA'/>`;
+  s += `<text class='section' x='22' y='316'>Quiet Mode</text>`;
+  s += toggle(W-22-66,296,false,'tgl_quietmode');
+  s += pill(22,348,W-44,56,'Done','btn_settings_done');
+  s += frameEnd(); return s;
+}
+const container = document.getElementById('screen');
+function render(name){
+  const map = {home: homeSVG, dashboard: dashboard(), popup: popup(), scheduler: scheduler(), weekly: weekly(), settings: settings()};
+  container.innerHTML = map[name];
+  const svg = container.querySelector('svg');
+  svg.style.width = '430px'; svg.style.height = '520px';
+  const nav = [
+    ['#btn_dashboard_took','weekly'],
+    ['#btn_dashboard_settings','settings'],
+    ['#btn_popup_taken','dashboard'],
+    ['#btn_popup_snooze','dashboard'],
+    ['#btn_popup_skip','dashboard'],
+    ['#btn_scheduler_save','dashboard'],
+    ['#btn_scheduler_cancel','dashboard'],
+    ['#btn_weekly_view','dashboard'],
+    ['#btn_settings_done','dashboard'],
+    ['#icon-dailypal','dashboard']
+  ];
+  nav.forEach(([sel,target])=>{ const el=svg.querySelector(sel); if(el) el.addEventListener('click',()=>render(target)); });
+  // toggles
+  svg.querySelectorAll('[id^=tgl_]').forEach(t=>{
+    t.style.cursor='pointer';
+    t.addEventListener('click',()=>{
+      const rect=t.querySelector('rect');
+      const circ=t.querySelector('circle');
+      const on = rect.getAttribute('fill')!=='#E9E9ED';
+      if(on) {
+        rect.setAttribute('fill','#E9E9ED'); circ.setAttribute('cx', parseFloat(rect.getAttribute('x'))+18);
+      } else {
+        rect.setAttribute('fill','#34C759'); circ.setAttribute('cx', parseFloat(rect.getAttribute('x'))+48);
+      }
+    });
+  });
+  // checkboxes
+  [['#chk_vib'],['#chk_sound'],['#chk_light']].forEach(([sel])=>{
+    const g = svg.querySelector(sel);
+    if(!g) return;
+    g.addEventListener('click',()=>{
+      const path = g.querySelector('path');
+      if(path) path.remove();
+      else {
+        const x = parseFloat(g.querySelector('rect').getAttribute('x'));
+        const y = parseFloat(g.querySelector('rect').getAttribute('y'));
+        const p = document.createElementNS('http://www.w3.org/2000/svg','path');
+        p.setAttribute('d',`M ${x+4} ${y+12} l 6 6 l 10 -12`);
+        p.setAttribute('stroke','#007AFF'); p.setAttribute('stroke-width','2'); p.setAttribute('fill','none');
+        g.appendChild(p);
+      }
+    });
+  });
+  // sliders drag
+  svg.querySelectorAll('.slider').forEach(g=>{
+    const x = parseFloat(g.getAttribute('data-x'));
+    const w = parseFloat(g.getAttribute('data-w'));
+    const circle = g.querySelector('circle');
+    const label = g.querySelector('text.note[id$="-val"]');
+    let dragging=false;
+    function updateByClientX(clientX){
+      const pt = svg.createSVGPoint(); pt.x = clientX; pt.y = 0;
+      const ctm = svg.getScreenCTM().inverse(); const loc = pt.matrixTransform(ctm);
+      let nx = Math.max(x, Math.min(x+w, loc.x));
+      circle.setAttribute('cx', nx);
+      const ratio = (nx - x)/w;
+      const minutes = Math.round(7*60 + ratio*(15*60));
+      const hr = Math.floor(minutes/60); const min = minutes%60;
+      const ampm = hr>=12? 'PM':'AM'; const hr12 = ((hr+11)%12)+1;
+      const mm = String(min).padStart(2,'0');
+      if(label) label.textContent = `${hr12}:${mm} ${ampm}`;
+    }
+    circle.addEventListener('mousedown', (e)=>{ dragging=true; e.preventDefault(); });
+    svg.addEventListener('mousemove',(e)=>{ if(dragging) updateByClientX(e.clientX); });
+    window.addEventListener('mouseup',()=> dragging=false);
+    // touch support
+    circle.addEventListener('touchstart', (e)=>{ dragging=true; e.preventDefault(); });
+    svg.addEventListener('touchmove',(e)=>{ if(dragging) updateByClientX(e.touches[0].clientX); });
+    window.addEventListener('touchend',()=> dragging=false);
+    // tap track
+    g.addEventListener('click',(e)=>{ updateByClientX((e.touches? e.touches[0].clientX : e.clientX)); });
+  });
+}
+render('home');
+document.addEventListener('keydown',(e)=>{
+  if(e.key==='0') render('home');
+  if(e.key==='1') render('dashboard');
+  if(e.key==='2') render('popup');
+  if(e.key==='3') render('scheduler');
+  if(e.key==='4') render('weekly');
+  if(e.key==='5') render('settings');
+});
+</script>
+</body>
 </html>