auto-save: 2026-07-30T12:17:59 (1 files) — public/collections/graduate-collection.html

dea377141fe0cfc477f0cea9fa002746bbd4e7fd · 2026-07-30 12:18:06 -0700 · Steve Abrams
Files touched

M public/collections/graduate-collection.html
Diff

commit dea377141fe0cfc477f0cea9fa002746bbd4e7fd
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 30 12:18:06 2026 -0700

    auto-save: 2026-07-30T12:17:59 (1 files) — public/collections/graduate-collection.html
---
 public/collections/graduate-collection.html | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/public/collections/graduate-collection.html b/public/collections/graduate-collection.html
index eb1d751..c013ca1 100644
--- a/public/collections/graduate-collection.html
+++ b/public/collections/graduate-collection.html
@@ -39,12 +39,14 @@
   .dw-vctl .k{ width:38px; text-transform:uppercase; letter-spacing:.1em; opacity:.8; }
   .dw-vctl input[type=range]{ width:92px; accent-color:#b08212; }
   .dw-vctl .v{ width:36px; text-align:right; opacity:.9; }
-  .dw-share{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
-  .dw-share .lbl{ text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--gold); }
-  .dw-share a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
-    border:1px solid var(--line); border-radius:50%; color:var(--ink); text-decoration:none; transition:.15s; }
-  .dw-share a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
-  .dw-share svg{ width:17px; height:17px; fill:currentColor; }
+  /* social icons overlaid on the video, bottom-right (static, always visible) */
+  .dw-vshare{ position:absolute; right:12px; bottom:54px; z-index:5; display:flex; gap:8px;
+    background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
+    padding:6px 9px; border-radius:22px; }
+  .dw-vshare a{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
+    border-radius:50%; color:#fff; background:rgba(255,255,255,.10); text-decoration:none; transition:.15s; }
+  .dw-vshare a:hover{ background:var(--gold); }
+  .dw-vshare svg{ width:15px; height:15px; fill:currentColor; }
 
   .cta{ text-align:center; padding:34px 24px 8px; }
   .cta a{ display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:13px; color:#fff;
@@ -78,19 +80,17 @@
       </video>
       <div class="dw-vctl">
         <label><span class="k">Speed</span><input type="range" class="dw-speed" min="0.25" max="2" step="0.05" value="1"><span class="v dw-speed-v">1×</span></label>
-        <label><span class="k">Vol</span><input type="range" class="dw-vol" min="0" max="1" step="0.05" value="1"><span class="v dw-vol-v">100%</span></label>
       </div>
-    </div>
-    <div class="note">🔊 <b>Sound on</b> — leaf through all 55 patterns, narrated in Steve Abrams' voice.</div>
-    <div class="dw-share">
-      <span class="lbl">Share</span>
+      <div class="dw-vshare">
       <a class="dw-dl" href="/reels/graduate-collection-flipbook.mp4" download title="Download video"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
       <a class="dw-fb" target="_blank" rel="noopener" title="Share on Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
       <a class="dw-x" target="_blank" rel="noopener" title="Share on X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
       <a class="dw-pin" target="_blank" rel="noopener" title="Share on Pinterest"><svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z"/></svg></a>
       <a class="dw-li" target="_blank" rel="noopener" title="Share on LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg></a>
       <a class="dw-mail" title="Share by email"><svg viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z"/></svg></a>
+      </div>
     </div>
+    <div class="note">🔊 <b>Sound on</b> — leaf through all 55 patterns, narrated in Steve Abrams' voice.</div>
     <script>
       (function(){
         var page="https://www.designerwallcoverings.com/collections/the-graduate-collection";
@@ -106,10 +106,9 @@
         document.querySelectorAll('.dw-vctl').forEach(function(ctl){
           var v=ctl.parentElement.querySelector('video'); if(!v)return;
           var sp=ctl.querySelector('.dw-speed'), spv=ctl.querySelector('.dw-speed-v');
-          var vo=ctl.querySelector('.dw-vol'), vov=ctl.querySelector('.dw-vol-v');
+          if(!sp)return;
           function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)/100)+'×';}
-          function uv(){v.volume=parseFloat(vo.value);vov.textContent=Math.round(vo.value*100)+'%';}
-          sp.addEventListener('input',us); vo.addEventListener('input',uv); us(); uv();
+          sp.addEventListener('input',us); us();
         });
       })();
     </script>
← f62526c Graduate flipbook: bottom-left speed+volume sliders + downlo · back to Dw Marketing Reels · Graduate flipbook player: speed-only bottom-left, social ico 904e5cb →