Spaces:

RepDB
/

repdb-exercise-dataset-explorer

Running

App Files Files Community

Sergei Argutin commited on 5 days ago

Commit

e922599

1 Parent(s): b9f2bbe

Make premium animation preview visible

Browse files

Files changed (1) hide show

index.html +57 -3

index.html CHANGED Viewed

@@ -79,13 +79,38 @@
   .samples img{width:100%;aspect-ratio:1;object-fit:contain}
   .samples figcaption{color:var(--mut);font-size:.75rem;margin-top:4px;background:var(--bg);border-radius:6px;padding:2px 4px}
   .samples .tag{color:var(--acc);font-weight:700}
 </style>
 </head>
 <body>
 <header>
   <h1>Free Exercise Dataset — JSON + Images</h1>
   <p class="sub">The free tier of <b>RepDB</b>: <b class="jscount">400</b> fitness exercises with flat illustrations, target muscles, equipment, MET, and instructions in English, German &amp; Spanish. Free for personal and commercial in-app use with attribution — see <a href="https://github.com/sergei-argutin/exercise-dataset/blob/main/LICENSE-DATA.md">LICENSE-DATA.md</a>. The full paid dataset keeps growing and adds high-res classic images, transparency and animations.</p>
-  <a class="cta" href="https://repdb.co/pricing">Get the full dataset →</a>
 </header>
 <div class="bar">
@@ -97,7 +122,7 @@
 <main>
   <div class="promo">
     <span>This is the <b>free tier</b> — <b><span class="jscount">400</span> exercises</b>, flat style, 512&nbsp;px, EN/DE/ES, attribution license. The full paid dataset keeps growing and ships classic white-background 1024&nbsp;px images, transparent backgrounds and looping animations.</span>
-    <a class="cta" href="https://repdb.co/pricing">See pricing →</a>
   </div>
   <div class="count" id="count"></div>
   <div class="grid" id="grid"></div>
@@ -105,7 +130,7 @@
   <section class="upgrade">
     <h2>Upgrade samples — Standard tier preview</h2>
     <p class="note"><b>Standard tier quality — evaluation only, see <a href="https://github.com/sergei-argutin/exercise-dataset/blob/main/LICENSE-DATA.md">LICENSE-DATA.md</a>.</b>
-      Looping, transparent-background exercise animations — the same clips shown on <a href="https://repdb.co">repdb.co</a> (checkerboard shows the transparency). The Standard tier adds looping animations like these for most exercises → <a href="https://repdb.co/pricing">repdb.co/pricing</a>.</p>
     <div class="samples">
       <figure><img src="https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/upgrade-samples/bench-leg-pull-in.webp" alt="Bench Leg Pull-in — looping transparent animation" loading="lazy"><figcaption>Bench Leg Pull-in · <span class="tag">animation</span></figcaption></figure>
       <figure><img src="https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/upgrade-samples/cossack-squat.webp" alt="Cossack Squat — looping transparent animation" loading="lazy"><figcaption>Cossack Squat · <span class="tag">animation</span></figcaption></figure>
@@ -116,11 +141,23 @@
   </section>
 </main>
 <dialog id="dlg"><button class="x" aria-label="Close" onclick="dlg.close()">×</button><div class="modal" id="modal"></div></dialog>
 <script>
 let DATA=[];
 const ASSET_BASE='https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/';
 const grid=document.getElementById('grid'), q=document.getElementById('q'),
       bodySel=document.getElementById('body'), equipSel=document.getElementById('equip'),
       countEl=document.getElementById('count'), dlg=document.getElementById('dlg'), modal=document.getElementById('modal');
@@ -137,6 +174,23 @@ fetch(ASSET_BASE+'exercises.json').then(r=>r.json()).then(d=>{
 });
 dlg.onclick=ev=>{ if(ev.target===dlg) dlg.close(); };
 function filtered(){
   const t=q.value.toLowerCase(), b=bodySel.value, eq=equipSel.value;
   return DATA.filter(e=>{

   .samples img{width:100%;aspect-ratio:1;object-fit:contain}
   .samples figcaption{color:var(--mut);font-size:.75rem;margin-top:4px;background:var(--bg);border-radius:6px;padding:2px 4px}
   .samples .tag{color:var(--acc);font-weight:700}
+  .dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:12px;align-items:center;
+    max-width:1100px;margin:0 auto;padding:10px 20px calc(10px + env(safe-area-inset-bottom));
+    background:rgba(15,17,22,.92);backdrop-filter:blur(10px);border:1px solid var(--line);border-bottom:0;
+    border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45);
+    animation:dock-in .55s .5s cubic-bezier(.2,.8,.2,1) both}
+  @keyframes dock-in{from{transform:translateY(130%)}to{transform:translateY(0)}}
+  .dock-open{display:flex;gap:12px;align-items:center;flex:1;min-width:0;
+    background:0;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
+  .dock-open img{width:80px;height:80px;flex:none;object-fit:contain;border-radius:10px;padding:3px;
+    background-image:conic-gradient(#1b1e25 90deg,#0f1217 0 180deg,#1b1e25 0 270deg,#0f1217 0);background-size:12px 12px}
+  .dock-open:hover img,.dock-open:focus-visible img{outline:1px solid var(--acc)}
+  .dock-open:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
+  .dock-copy{min-width:0}
+  .dock-copy b{display:block;font-size:.92rem}
+  .dock-copy b .tag{color:var(--acc)}
+  .dock-copy>span{display:block;color:var(--mut);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .dock .cta{flex:none;padding:9px 14px}
+  @media (max-width:560px){
+    .dock{gap:10px;padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
+    .dock-open img{width:68px;height:68px}
+    .dock-copy>span,.dock-copy b .tag{display:none}
+    .dock-copy b{font-size:.86rem;line-height:1.25}
+    .dock .cta{padding:8px 11px;font-size:.85rem}
+  }
+  @media (prefers-reduced-motion:reduce){.dock{animation:none}}
 </style>
 </head>
 <body>
 <header>
   <h1>Free Exercise Dataset — JSON + Images</h1>
   <p class="sub">The free tier of <b>RepDB</b>: <b class="jscount">400</b> fitness exercises with flat illustrations, target muscles, equipment, MET, and instructions in English, German &amp; Spanish. Free for personal and commercial in-app use with attribution — see <a href="https://github.com/sergei-argutin/exercise-dataset/blob/main/LICENSE-DATA.md">LICENSE-DATA.md</a>. The full paid dataset keeps growing and adds high-res classic images, transparency and animations.</p>
+  <a class="cta" href="https://repdb.co/pricing?utm_source=huggingface">Get the full dataset →</a>
 </header>
 <div class="bar">
 <main>
   <div class="promo">
     <span>This is the <b>free tier</b> — <b><span class="jscount">400</span> exercises</b>, flat style, 512&nbsp;px, EN/DE/ES, attribution license. The full paid dataset keeps growing and ships classic white-background 1024&nbsp;px images, transparent backgrounds and looping animations.</span>
+    <a class="cta" href="https://repdb.co/pricing?utm_source=huggingface">See pricing →</a>
   </div>
   <div class="count" id="count"></div>
   <div class="grid" id="grid"></div>
   <section class="upgrade">
     <h2>Upgrade samples — Standard tier preview</h2>
     <p class="note"><b>Standard tier quality — evaluation only, see <a href="https://github.com/sergei-argutin/exercise-dataset/blob/main/LICENSE-DATA.md">LICENSE-DATA.md</a>.</b>
+      Looping, transparent-background exercise animations — the same clips shown on <a href="https://repdb.co/?utm_source=huggingface">repdb.co</a> (checkerboard shows the transparency). The Standard tier adds looping animations like these for most exercises → <a href="https://repdb.co/pricing?utm_source=huggingface">repdb.co/pricing</a>.</p>
     <div class="samples">
       <figure><img src="https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/upgrade-samples/bench-leg-pull-in.webp" alt="Bench Leg Pull-in — looping transparent animation" loading="lazy"><figcaption>Bench Leg Pull-in · <span class="tag">animation</span></figcaption></figure>
       <figure><img src="https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/upgrade-samples/cossack-squat.webp" alt="Cossack Squat — looping transparent animation" loading="lazy"><figcaption>Cossack Squat · <span class="tag">animation</span></figcaption></figure>
   </section>
 </main>
+<aside class="dock" aria-label="Standard tier preview">
+  <button class="dock-open" id="premiumDock">
+    <img src="https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/upgrade-samples/mountain-climbers.webp" alt="Mountain Climbers — looping transparent animation" />
+    <span class="dock-copy">
+      <b>Standard tier preview <span class="tag">— see the sample</span></b>
+      <span>Transparent looping animations and classic 1024 px images.</span>
+    </span>
+  </button>
+  <a class="cta" href="https://repdb.co/pricing?utm_source=huggingface">See pricing →</a>
+</aside>
 <dialog id="dlg"><button class="x" aria-label="Close" onclick="dlg.close()">×</button><div class="modal" id="modal"></div></dialog>
 <script>
 let DATA=[];
 const ASSET_BASE='https://huggingface.co/datasets/sargutin/exercise-dataset/resolve/main/';
+const PRICING_URL='https://repdb.co/pricing?utm_source=huggingface';
 const grid=document.getElementById('grid'), q=document.getElementById('q'),
       bodySel=document.getElementById('body'), equipSel=document.getElementById('equip'),
       countEl=document.getElementById('count'), dlg=document.getElementById('dlg'), modal=document.getElementById('modal');
 });
 dlg.onclick=ev=>{ if(ev.target===dlg) dlg.close(); };
+document.getElementById('premiumDock').onclick=()=>{
+  const samples = [
+    ['bench-leg-pull-in','Bench Leg Pull-in'],
+    ['cossack-squat','Cossack Squat'],
+    ['bent-arm-barbell-pullover','Bent-arm Barbell Pullover'],
+    ['incline-db-curl','Incline Dumbbell Curl'],
+    ['mountain-climbers','Mountain Climbers']
+  ];
+  modal.innerHTML=`<section class="upgrade" style="margin:0;border:0;padding:0">
+    <h2>Premium samples - Standard tier preview</h2>
+    <p class="note"><b>Standard tier quality.</b> Transparent-background looping animations - the same kind of clips shipped in the paid Standard tier. The checkerboard shows the transparency.</p>
+    <div class="samples">${samples.map(([slug,name])=>`<figure><img src="${ASSET_BASE}upgrade-samples/${slug}.webp" alt="${name} - looping transparent animation"><figcaption>${name} · <span class="tag">animation</span></figcaption></figure>`).join('')}</div>
+    <div class="foot">The full paid dataset keeps growing - classic 1024 px images, transparency &amp; animations at <a href="${PRICING_URL}">repdb.co/pricing</a></div>
+  </section>`;
+  dlg.showModal();
+};
 function filtered(){
   const t=q.value.toLowerCase(), b=bodySel.value, eq=equipSel.value;
   return DATA.filter(e=>{