pwa page updates
Hunter
Sunday, February 1st, 2026 at 4:48 PM
37 padding-bottom: 5px;
38 margin-top: 0;
39 }
-
40 +
41 .toc {
42 border: 1px solid #ccc;
43 padding: 15px;
65 color: #0000EE;
66 }
67
- .auto-detected {
68 + a.auto-detected,
69 + a.auto-detected:visited {
70 background: linear-gradient(to top right, #64b5f6 0%, #e3f2fd 100%);
71 padding: 12px;
72 font-weight: bold;
75 text-align: center;
76 cursor: pointer;
77 border-radius: 12px;
78 + text-decoration: none;
79 + color: #ffffff;
80 }
81
82 .auto-detected p {
83 padding: 10px;
84 }
85
- .auto-detected #detected-link span {
86 + .auto-detected #detected-link {
87 color: #0000EE;
88 + text-decoration: underline;
89 }
90
91 .lightbulb {
93 font-size: 1.4em;
94 vertical-align: middle;
95 line-height: 1;
96 + user-select: none;
97 }
98
99
113 }
114
115 #pwa-emoji {
116 + display: none;
117 float: right;
118 margin: 15px;
119 margin-top: 40px;
304 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
305 }
306
- .auto-detected {
307 + a.auto-detected,
308 + a.auto-detected:visited {
309 background: linear-gradient(to top right, #1a1a3a 0%, #47496b 100%);
310 text-shadow: 0px 1px 1px rgb(0, 0, 0);
311 + color: #ffffff;
312 }
313
314 .pwa-icon {
323 color: #80d4ff;
324 }
325
- .auto-detected #detected-link span {
326 + .auto-detected #detected-link {
327 color: #80d4ff;
328 }
329
411 <p>You can use the instructions below to install PWAs directly from your web browser.</p>
412 </div>
413
- <div id="auto-detected" class="auto-detected">
414 + <a id="auto-detected" class="auto-detected" href="#">
415 <p><span class="lightbulb">💡</span> Based on your system, you might want to jump directly to: <span id="detected-link"></span></p>
- </div>
416 + </a>
417
418 <div id="safari-ios" class="section">
419 <h2>Safari (iOS / iPadOS)</h2>
554 }
555
556 const isPhone = (detectedOS === 'Android' || detectedOS === 'iOS');
- if (!isPhone) {
- document.getElementById('pwa-emoji').style.display = 'none';
557 + if (isPhone) {
558 + document.getElementById('pwa-emoji').style.display = 'inline';
559 + } else {
560 document.getElementById('pwa-infrared').style.display = 'block';
561 }
562
564 const autoDetectedDiv = document.getElementById('auto-detected');
565 const detectedLink = document.getElementById('detected-link');
566
- detectedLink.innerHTML = `<span style="text-decoration: underline;">${detectedBrowser} on ${detectedOS}</span>`;
567 + autoDetectedDiv.href = `#${targetSection}`;
568 + detectedLink.textContent = `${detectedBrowser} on ${detectedOS}`;
569 autoDetectedDiv.style.display = 'block';
-
- autoDetectedDiv.addEventListener('click', function() {
- document.getElementById(targetSection).scrollIntoView({ behavior: 'smooth' });
- });
570 }
571 }
572