オフラインでもキャッシュ表示を伝えるバナー

<div class="d11-14-07-wrap">
          <div class="d11-14-07-frame">
            <div class="d11-14-07-banner" id="d1963Banner">
              <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 3a9 9 0 100 18 9 9 0 000-18z" fill="none" stroke="#92400e" stroke-width="1.6"/><path d="M12 7v5l3.5 2" fill="none" stroke="#92400e" stroke-width="1.6" stroke-linecap="round"/></svg>
              <span>オフライン表示中・保存済みのキャッシュを表示しています</span>
            </div>
            <div class="d11-14-07-body" id="d1963Body">
              <p class="d11-14-07-line">記事: 週末のおすすめスポット5選</p>
              <p class="d11-14-07-line">記事: 初心者向け家庭菜園ガイド</p>
            </div>
            <p class="d11-14-07-sync" id="d1963Sync">最終同期: --:--</p>
          </div>
          <button type="button" class="d11-14-07-toggle" id="d1963Toggle">オフラインで閲覧する</button>
        </div>

.prev.d11-14-07{align-items:flex-start;justify-content:flex-start}
        .d11-14-07-wrap{width:100%}
        .d11-14-07-frame{padding:0;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3;overflow:hidden}
        .d11-14-07-banner{display:none;align-items:center;gap:7px;background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;font-size:10.5px;font-weight:700;padding:8px 12px}
        .d11-14-07-banner.show{display:flex}
        .d11-14-07-body{padding:12px;display:flex;flex-direction:column;gap:8px;transition:filter .3s}
        .d11-14-07-body.is-cached{filter:saturate(.6)}
        .d11-14-07-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-07-sync{margin:0;padding:0 12px 10px;font-size:10px;color:#9ca3af;text-align:right}
        .d11-14-07-toggle{margin-top:10px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-07-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-07');
        var banner=root.querySelector('#d1963Banner');
        var body=root.querySelector('#d1963Body');
        var sync=root.querySelector('#d1963Sync');
        var btn=root.querySelector('#d1963Toggle');
        var offline=false;
        function pad(n){return n<10?'0'+n:''+n;}
        btn.addEventListener('click',function(){
          offline=!offline;
          banner.classList.toggle('show',offline);
          body.classList.toggle('is-cached',offline);
          if(offline){
            var now=new Date();
            sync.textContent='最終同期: '+pad(now.getHours())+':'+pad(now.getMinutes());
            btn.textContent='オンラインに戻す';
          }else{
            btn.textContent='オフラインで閲覧する';
          }
        });
      })();