add ns-contact modal (CSS + HTML + JS) — info@naturaltextilewallpaper.com

b4fde9fab557da7446037757975ba9678ea5f96f · 2026-05-19 22:10:25 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M server.js

Diff

commit b4fde9fab557da7446037757975ba9678ea5f96f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 22:10:25 2026 -0700

    add ns-contact modal (CSS + HTML + JS) — info@naturaltextilewallpaper.com
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 server.js | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 137 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index f0aba31..720b99f 100644
--- a/server.js
+++ b/server.js
@@ -268,6 +268,88 @@ function headHTML(title, description) {
   {"@context":"https://schema.org","@type":"Organization","name":"Natural Textile Wallpaper","url":"https://${SITE_DOMAIN}","email":"${SITE_EMAIL}","description":"${description}","sameAs":["https://designerwallcoverings.com"]}
   </script>
   <script src="/corner-nav.js" defer></script>
+<style id="ns-modal-css">
+/* ── Contact modal (.ns-modal) — added by fanout-12 ── */
+.ns-modal {
+  display: none;
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(10,10,10,0.78);
+  backdrop-filter: blur(6px);
+  align-items: center; justify-content: center;
+  padding: 24px;
+  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
+}
+.ns-modal.show { display: flex; }
+.ns-modal-card {
+  position: relative;
+  background: #f5f1e8;
+  color: #0a0a0a;
+  width: 100%; max-width: 480px;
+  padding: 36px 32px 32px;
+  border-radius: 4px;
+  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
+  animation: nsModalIn 220ms cubic-bezier(.2,.7,.2,1);
+}
+@keyframes nsModalIn { from { opacity:0; transform: translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
+.ns-modal-card .close-x {
+  position: absolute; top: 10px; right: 12px;
+  width: 32px; height: 32px;
+  background: transparent; border: 0; cursor: pointer;
+  font-size: 22px; line-height: 1; color: #6e6e68;
+}
+.ns-modal-card .close-x:hover { color: #0a0a0a; }
+.ns-modal-card h3 {
+  margin: 0 0 4px;
+  font: 300 22px/1.2 -apple-system, "SF Pro Display", system-ui, sans-serif;
+  letter-spacing: -0.005em;
+  color: #0a0a0a;
+}
+.ns-modal-card .sub {
+  margin: 0 0 22px;
+  font: 13px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
+  color: #6e6e68;
+  letter-spacing: 0.005em;
+}
+.ns-actions { display: flex; flex-direction: column; gap: 10px; }
+.ns-action {
+  display: flex; align-items: center; gap: 14px;
+  padding: 14px 16px;
+  background: #ffffff;
+  border: 1px solid rgba(10,10,10,0.08);
+  border-radius: 3px;
+  color: #0a0a0a !important;
+  text-decoration: none !important;
+  font: 400 14px/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif;
+  cursor: pointer;
+}
+.ns-action:hover { background: #fffdf7; border-color: rgba(10,10,10,0.18); }
+.ns-action .ico {
+  flex-shrink: 0;
+  width: 38px; height: 38px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: rgba(10,10,10,0.04);
+  border-radius: 50%;
+  font-size: 18px;
+}
+.ns-action .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+.ns-action .txt b { font-weight: 500; font-size: 14px; color: #0a0a0a; }
+.ns-action .txt span {
+  font-weight: 400; font-size: 12px; color: #6e6e68;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (max-width: 480px) {
+  .ns-modal { padding: 14px; }
+  .ns-modal-card { padding: 28px 22px 22px; }
+}
+[data-theme="dark"] .ns-modal-card { background: #14110c; color: #f5f1e8; }
+[data-theme="dark"] .ns-modal-card h3 { color: #f5f1e8; }
+[data-theme="dark"] .ns-modal-card .sub { color: #a39c8b; }
+[data-theme="dark"] .ns-action { background: rgba(245,241,232,0.04); border-color: rgba(245,241,232,0.10); color: #f5f1e8 !important; }
+[data-theme="dark"] .ns-action:hover { background: rgba(245,241,232,0.08); border-color: rgba(245,241,232,0.22); }
+[data-theme="dark"] .ns-action .ico { background: rgba(245,241,232,0.08); }
+[data-theme="dark"] .ns-action .txt b { color: #f5f1e8; }
+[data-theme="dark"] .ns-action .txt span { color: #a39c8b; }
+</style>
 </head>
 <body>`;
 }
@@ -506,6 +588,24 @@ function renderIndex(q, material, sort) {
       loadPage(); // initial load
     }
   </script>
+<!-- Contact modal — invisible until nsContactOpen() adds .show class. Added by fanout-12. -->
+<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
+  <div class="ns-modal-card">
+    <button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">&times;</button>
+    <h3 id="nsContactTitle">How can we help?</h3>
+    <p class="sub">Trade-account replies within one business day.</p>
+    <div class="ns-actions">
+      <a class="ns-action" href="mailto:info@naturaltextilewallpaper.com?subject=Naturaltextilewallpaper%20inquiry"><span class="ico">&#9993;</span><div class="txt"><b>Email Us</b><span>info@naturaltextilewallpaper.com</span></div></a>
+      <a class="ns-action" href="tel:888-373-4564"><span class="ico">&#128222;</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 &middot; M&ndash;F, 9&ndash;5 PT</span></div></a>
+    </div>
+  </div>
+</div>
+<script>
+  if (typeof window.nsContactOpen !== 'function') {
+    window.nsContactOpen = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); };
+    window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
+  }
+</script>
 </body>
 </html>`;
 }
@@ -562,6 +662,24 @@ function renderDetail(p, matLabel) {
   <script>
     (function(){var btn=document.getElementById('theme-toggle');if(!btn)return;function sync(){var t=document.documentElement.getAttribute('data-theme');btn.setAttribute('aria-pressed',t==='dark'?'true':'false');}sync();btn.addEventListener('click',function(){var cur=document.documentElement.getAttribute('data-theme')||'light';var nxt=cur==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',nxt);try{localStorage.setItem('ntw_theme',nxt);}catch(e){}sync();});})();
   </script>
+<!-- Contact modal — invisible until nsContactOpen() adds .show class. Added by fanout-12. -->
+<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
+  <div class="ns-modal-card">
+    <button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">&times;</button>
+    <h3 id="nsContactTitle">How can we help?</h3>
+    <p class="sub">Trade-account replies within one business day.</p>
+    <div class="ns-actions">
+      <a class="ns-action" href="mailto:info@naturaltextilewallpaper.com?subject=Naturaltextilewallpaper%20inquiry"><span class="ico">&#9993;</span><div class="txt"><b>Email Us</b><span>info@naturaltextilewallpaper.com</span></div></a>
+      <a class="ns-action" href="tel:888-373-4564"><span class="ico">&#128222;</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 &middot; M&ndash;F, 9&ndash;5 PT</span></div></a>
+    </div>
+  </div>
+</div>
+<script>
+  if (typeof window.nsContactOpen !== 'function') {
+    window.nsContactOpen = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); };
+    window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
+  }
+</script>
 </body>
 </html>`;
 }
@@ -572,7 +690,25 @@ function page404() {
     <h1>Pattern not found</h1>
     <p><a href="/">Browse all natural textile wallcoverings →</a></p>
   </div>
-  </body></html>`;
+  <!-- Contact modal — invisible until nsContactOpen() adds .show class. Added by fanout-12. -->
+<div class="ns-modal" id="nsContactModal" role="dialog" aria-modal="true" aria-labelledby="nsContactTitle" onclick="if(event.target===this)nsContactClose()">
+  <div class="ns-modal-card">
+    <button type="button" class="close-x" onclick="nsContactClose()" aria-label="Close">&times;</button>
+    <h3 id="nsContactTitle">How can we help?</h3>
+    <p class="sub">Trade-account replies within one business day.</p>
+    <div class="ns-actions">
+      <a class="ns-action" href="mailto:info@naturaltextilewallpaper.com?subject=Naturaltextilewallpaper%20inquiry"><span class="ico">&#9993;</span><div class="txt"><b>Email Us</b><span>info@naturaltextilewallpaper.com</span></div></a>
+      <a class="ns-action" href="tel:888-373-4564"><span class="ico">&#128222;</span><div class="txt"><b>Call Us</b><span>(888) 373-4564 &middot; M&ndash;F, 9&ndash;5 PT</span></div></a>
+    </div>
+  </div>
+</div>
+<script>
+  if (typeof window.nsContactOpen !== 'function') {
+    window.nsContactOpen = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); };
+    window.nsContactClose = function () { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); };
+  }
+</script>
+</body></html>`;
 }
 
 function escHtml(s) {

← 3418104 add corner-nav.js — universal top-right nav per _shared/corn · back to Naturaltextilewallpaper · make server.js self-contained — gate _shared/admin-catalog b 151be03 →