Diff -- /var/www/vhosts/3dshawn.com/shop.3dshawn.com/TEMPLATES/store_layouts/tabs.html

O Operator
Diff

/var/www/vhosts/3dshawn.com/shop.3dshawn.com/TEMPLATES/store_layouts/tabs.html

added on local at 2026-07-01 22:10:05

Added
+115
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to 6123695e0023
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1<!-- =====================================================================
2 LAYOUT: Tabs
3 Categorized tabbed sections. Click between collections.
4===================================================================== -->
5
6<style>
7:root { $theme_css_vars }
8.tb-tabs { display:flex; gap:0; border-bottom:1px solid var(--col-border); padding:0 32px; max-width:1400px; margin:0 auto; flex-wrap:wrap; }
9.tb-tab { padding:18px 22px; font-size:14px; font-weight:600; color:var(--col-text-2); cursor:pointer; border-bottom:3px solid transparent; transition:color 0.15s, border-color 0.15s; text-decoration:none; display:flex; align-items:center; gap:8px; }
10.tb-tab:hover { color:var(--col-text); }
11.tb-tab.active { color:var(--col-accent-bright); border-bottom-color: var(--col-accent); }
12.tb-tab .count { font-family:var(--font-mono,monospace); font-size:11px; opacity:0.7; }
13.tb-pane { padding: 32px; max-width:1400px; margin:0 auto; }
14.tb-card { background:var(--col-surface-1); border:1px solid var(--col-border); border-radius:10px; overflow:hidden; text-decoration:none; display:block; transition:border-color 0.15s, transform 0.15s; }
15.tb-card:hover { border-color:var(--col-accent); transform: translateY(-2px); }
16.tb-card .img { aspect-ratio: 4/3; background-size:cover; background-position:center; }
17</style>
18
19<script>
20document.addEventListener('click', function(e) {
21 var tab = e.target.closest('[data-tb-tab]');
22 if (!tab) return;
23 e.preventDefault();
24 var key = tab.dataset.tbTab;
25 document.querySelectorAll('[data-tb-tab]').forEach(function(t) { t.classList.toggle('active', t.dataset.tbTab === key); });
26 document.querySelectorAll('[data-tb-pane]').forEach(function(p) { p.style.display = p.dataset.tbPane === key ? 'block' : 'none'; });
27});
28</script>
29
30[if:$preview_banner]<div style="position:sticky;top:0;z-index:9999;background:#0a0e1c;border-bottom:1px solid rgba(59,130,246,0.40);box-shadow:0 4px 16px rgba(0,0,0,0.55);padding:10px 20px;text-align:center;font-size:13px;color:#93c5fd;font-weight:600">$preview_banner</div>[/if]
31
32<header style="background:var(--col-bg-2);padding:20px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--col-border);flex-wrap:wrap">
33 <a href="/store.cgi?id=$store_id" style="display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0">
34 <div class="brand-mark" style="background:linear-gradient(130deg, var(--col-accent), var(--col-accent-bright))">$store_initials</div>
35 <span style="font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--col-text)">$store_name</span>
36 </a>
37 <nav style="display:flex;gap:18px;align-items:center;flex-wrap:wrap">
38 [loop:@nav_pages]<a href="$loop1.href" style="font-size:13px;color:var(--col-text-2);font-weight:600;text-decoration:none">$loop1.title</a>[/loop]
39 </nav>
40 <div style="flex:1;display:flex;justify-content:center;min-width:0">$store_search_form</div>
41 <div style="display:inline-flex;gap:8px;align-items:center;margin-left:8px">$store_signin_link $store_cart_link</div>
42</header>
43
44[if:$is_specific_page]
45 [if:$page_not_found]<section style="padding:120px 32px;text-align:center"><h1 class="hero-title" style="font-size:48px">Page not found</h1></section>[/if]
46 [if:!$page_not_found]<section style="padding:60px 32px;max-width:900px;margin:0 auto"><h1 class="hero-title" style="font-size:42px">$page_title</h1><div class="text-secondary" style="font-size:16px;line-height:1.7;margin-top:18px;white-space:pre-wrap">$page_body</div></section>[/if]
47[/if]
48
49[if:!$is_specific_page]
50<!-- Hero strip -->
51<section style="padding:48px 32px 24px;max-width:1400px;margin:0 auto">
52 <span style="font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--col-accent-bright);font-weight:700">Browse the collections</span>
53 <h1 style="font-family:var(--font-display);font-size:clamp(36px,5vw,56px);font-weight:800;color:var(--col-text);line-height:1.1;letter-spacing:-0.02em;margin:10px 0 12px">$store_name</h1>
54 <p style="font-size:15px;color:var(--col-text-2);max-width:680px;margin:0">$store_tagline</p>
55</section>
56
57<!-- Tab strip -->
58<nav class="tb-tabs">
59 <a href="#" class="tb-tab active" data-tb-tab="all">All <span class="count">$product_count</span></a>
60 <a href="#" class="tb-tab" data-tb-tab="featured">Featured <span class="count">3</span></a>
61 <a href="#" class="tb-tab" data-tb-tab="new">New drops <span class="count">4</span></a>
62 <a href="#" class="tb-tab" data-tb-tab="bundles">Bundles <span class="count">2</span></a>
63</nav>
64
65<!-- Tab panes (all visible by default; first one shown) -->
66<section id="shop" class="tb-pane" data-tb-pane="all">
67 <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px">
68 [loop:@products]
69 <a href="/listing_details.cgi?id=$loop1.id" class="tb-card">
70 <div class="img" style="background-image:url('$loop1.hero_image')"></div>
71 <div style="padding:14px">
72 <div style="font-size:14px;font-weight:600;color:var(--col-text);margin-bottom:8px">$loop1.title</div>
73 <div style="display:flex;justify-content:space-between;align-items:center">
74 <span style="font-size:16px;font-weight:700;color:var(--col-accent-bright)">$loop1.price</span>
75 $loop1.rating_html
76 </div>
77 </div>
78 </a>
79 [/loop]
80 $pagination_html
81 </div>
82</section>
83
84<section class="tb-pane" data-tb-pane="featured" style="display:none">
85 <div style="text-align:center;padding:60px 24px;color:var(--col-text-2)">
86 <h2 style="font-family:var(--font-display);font-size:32px;color:var(--col-text);margin:0 0 8px">Featured</h2>
87 <p>Curated picks from the catalog. Switch tabs to see more.</p>
88 </div>
89</section>
90
91<section class="tb-pane" data-tb-pane="new" style="display:none">
92 <div style="text-align:center;padding:60px 24px;color:var(--col-text-2)">
93 <h2 style="font-family:var(--font-display);font-size:32px;color:var(--col-text);margin:0 0 8px">New drops</h2>
94 <p>This week's releases. Filter by date soon.</p>
95 </div>
96</section>
97
98<section class="tb-pane" data-tb-pane="bundles" style="display:none">
99 <div style="text-align:center;padding:60px 24px;color:var(--col-text-2)">
100 <h2 style="font-family:var(--font-display);font-size:32px;color:var(--col-text);margin:0 0 8px">Bundles</h2>
101 <p>Multi-item bundles. Save more, get more.</p>
102 </div>
103</section>
104
105<section id="about" style="background:var(--col-bg-2);padding:60px 32px;border-top:1px solid var(--col-border)">
106 <div style="max-width:760px;margin:0 auto;text-align:center">
107 <h2 style="font-family:var(--font-display);font-size:28px;color:var(--col-text)">About $store_name</h2>
108 <p style="font-size:15px;color:var(--col-text-2);line-height:1.8;margin-top:14px">$store_about</p>
109 </div>
110</section>
111[/if]
112
113<footer style="border-top:1px solid var(--col-border);padding:24px 32px;text-align:center">
114 <div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">$store_name &middot; powered by shop.3dshawn.com</div>
115</footer>