PageSourceSearch

https://www.stratiq.capital/portfolio.html

html stratiq.capital collected 2026-10-05 23:19:14 UTC 32,343 bytes, 856 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>STRATIQ // PORTFOLIO</title>
7<link rel="stylesheet" href="css/style.css">
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
12<style>
13/* ════════════════════════════════════════════════════════
14   STRATIQ PORTFOLIO — minimal terminal catalog
15   Shares only design tokens (colors, font) from style.css
16════════════════════════════════════════════════════════ */
17
18body {
19  background: var(--bg);
20  color: var(--ink);
21  font-family: var(--mono);
22  overflow-x: hidden;
23  min-height: 100vh;
24  font-size: 12px;
25}
26a { text-decoration: none; color: inherit; }
27
28/* ── TOP BAR ──────────────────────────────────────── */
29.pf-bar {
30  position: sticky; top: 0; z-index: 50;
31  background: var(--bg2);
32  border-bottom: 1px solid var(--line2);
33  height: 36px;
34  display: flex; align-items: center;
35  padding: 0 14px;
36  gap: 14px;
37}
38.pf-bar-back {
39  display: inline-flex; align-items: center; gap: 6px;
40  font-size: 9px; letter-spacing: 0.16em;
41  color: var(--ink3); text-transform: uppercase;
42  border: 1px solid var(--line2);
43  padding: 4px 9px;
44  transition: 0.12s;
45  font-weight: 500;
46}
47.pf-bar-back:hover { border-color: var(--or2); color: var(--or2); background: rgba(255,102,0,0.04); }
48.pf-bar-back .ar { font-size: 10px; line-height: 1; }
49
50.pf-bar-brand {
51  display: flex; align-items: center; gap: 8px;
52  font-size: 10px; letter-spacing: 0.18em;
53  font-weight: 700;
54}
55.pf-bar-brand svg { width: 16px; height: 16px; }
56.pf-bar-brand .br { color: var(--ink3); }
57.pf-bar-brand .nm { color: var(--or); }
58.pf-bar-brand .pg { color: var(--ink2); }
59
60.pf-bar-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
61.pf-bar-stat {
62  font-size: 8px; letter-spacing: 0.18em;
63  color: var(--ink3); text-transform: uppercase;
64}
65.pf-bar-stat b { color: var(--ink); font-weight: 600; }
66.pf-bar-live {
67  display: inline-flex; align-items: center; gap: 6px;
68  font-size: 8px; letter-spacing: 0.18em;
69  color: var(--G); font-weight: 600;
70  text-transform: uppercase;
71}
72.pf-bar-live .d {
73  width: 5px; height: 5px; background: var(--G);
74  box-shadow: 0 0 5px var(--G);
75  animation: pf-pulse 1.6s ease-in-out infinite;
76}
77@keyframes pf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
78
79/* ── PAGE WRAP ────────────────────────────────────── */
80.pf-wrap {
81  max-width: 1100px;
82  margin: 0 auto;
83  padding: 0 14px;
84  background:
85    repeating-linear-gradient(0deg,  transparent, transparent 23px, rgba(255,102,0,.012) 24px),
86    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(255,102,0,.008) 24px);
87}
88
89/* ── HERO — terminal listing ──────────────────────── */
90.pf-hero {
91  padding: 32px 0 26px;
92  border-bottom: 1px dashed var(--line2);
93}
94.pf-prompt {
95  font-size: 10px;
96  color: var(--ink3);
97  letter-spacing: 0.04em;
98  margin-bottom: 16px;
99}
100.pf-prompt .pmt { color: var(--or); font-weight: 600; }
101.pf-prompt .cmd { color: var(--ink2); }
102.pf-prompt .arg { color: var(--G); }
103.pf-prompt .blink {
104  color: var(--or);
105  animation: pf-blink 1s steps(2) infinite;
106}
107@keyframes pf-blink { 50% { opacity: 0; } }
108
109.pf-h1 {
110  font-size: 18px;
111  font-weight: 600;
112  line-height: 1.35;
113  letter-spacing: 0.02em;
114  color: var(--ink);
115  margin-bottom: 12px;
116  max-width: 720px;
117}
118.pf-h1 .or { color: var(--or); }
119.pf-h1 .dim { color: var(--ink3); }
120
121/* one-line stats with real text separators (copy-paste safe) */
122.pf-stats-line {
123  display: flex; align-items: center;
124  flex-wrap: wrap;
125  font-size: 10px; color: var(--ink3);
126  letter-spacing: 0.16em;
127  text-transform: uppercase;
128  column-gap: 10px;
129  row-gap: 4px;
130}
131.pf-stats-line b {
132  color: var(--ink);
133  font-weight: 700;
134  font-variant-numeric: tabular-nums;
135  font-size: 11px;
136}
137.pf-stats-line .sep { color: var(--ink4); user-select: none; }
138.pf-stats-line .or { color: var(--or); }
139.pf-stats-line .or b { color: var(--or); }
140
141/* ── SECTION HEADER ───────────────────────────────── */
142.pf-sect { padding-top: 4px; }
143.pf-sect-h {
144  display: flex; align-items: baseline;
145  gap: 12px;
146  padding: 18px 0 10px;
147  font-size: 9px;
148  letter-spacing: 0.2em;
149  text-transform: uppercase;
150  flex-wrap: wrap;
151}
152.pf-sect-tit {
153  color: var(--ink);
154  font-weight: 700;
155  letter-spacing: 0.22em;
156  font-size: 10px;
157}
158.pf-sect-tit .t-or { color: var(--or); margin-right: 2px; }
159.pf-sect-sub {
160  color: var(--ink3);
161  font-weight: 500;
162}
163.pf-sect-c {
164  margin-left: auto;
165  color: var(--ink3);
166  font-size: 9px;
167}
168.pf-sect-c b {
169  color: var(--or);
170  font-weight: 700;
171  font-variant-numeric: tabular-nums;
172}
173
174/* ── DIVIDER between sections ─────────────────────── */
175.pf-divider {
176  display: flex; align-items: center;
177  margin: 22px 0 4px;
178  user-select: none;
179}
180.pf-divider-line {
181  flex: 1;
182  height: 1px;
183  background: linear-gradient(90deg, transparent, var(--line2) 12%, var(--line2) 88%, transparent);
184}
185.pf-divider-tx {
186  font-size: 7.5px;
187  letter-spacing: 0.32em;
188  color: var(--ink4);
189  font-weight: 600;
190  text-transform: uppercase;
191}
192
193/* ── GRID ─────────────────────────────────────────── */
194.pf-grid {
195  display: grid;
196  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
197  gap: 10px;
198  padding-bottom: 36px;
199}
200
201/* ── PRODUCT CARD ─────────────────────────────────── */
202.pf-card {
203  background: var(--bg2);
204  border: 1px solid var(--line2);
205  display: flex; flex-direction: column;
206  position: relative;
207  transition: 0.15s;
208}
209.pf-card:hover {
210  border-color: var(--or2);
211  background: var(--bg3);
212}
213.pf-card.solo:hover { border-color: var(--C); }
214
215.pf-card-head {
216  padding: 10px 12px 9px;
217  border-bottom: 1px solid var(--line2);
218}
219.pf-card-row1 {
220  display: flex; align-items: center;
221  justify-content: space-between;
222  margin-bottom: 7px;
223  gap: 6px;
224}
225.pf-tags { display: flex; gap: 4px; flex-wrap: wrap; }
226.pf-tag {
227  font-size: 7px;
228  letter-spacing: 0.16em;
229  font-weight: 700;
230  padding: 2px 5px;
231  border: 1px solid;
232  text-transform: uppercase;
233  white-space: nowrap;
234  display: inline-flex; align-items: center; gap: 3px;
235  line-height: 1.3;
236}
237.pf-tag.live { color: var(--G); border-color: var(--G); background: rgba(34,170,68,0.06); }
238.pf-tag.live::before {
239  content: ''; width: 4px; height: 4px;
240  background: var(--G); border-radius: 50%;
241  animation: pf-pulse 1.6s ease-in-out infinite;
242}
243.pf-tag.pack { color: var(--or); border-color: var(--or2); background: rgba(255,102,0,0.06); }
244.pf-tag.solo { color: var(--C); border-color: var(--C); background: rgba(34,153,187,0.06); }
245
246.pf-card-idx {
247  font-size: 8px;
248  color: var(--ink4);
249  letter-spacing: 0.18em;
250  font-weight: 600;
251  font-variant-numeric: tabular-nums;
252}
253.pf-card-name {
254  font-size: 14px;
255  font-weight: 700;
256  letter-spacing: 0.05em;
257  color: var(--ink);
258  line-height: 1.2;
259  margin-bottom: 3px;
260}
261.pf-card-tag {
262  font-size: 9.5px;
263  color: var(--ink2);
264  line-height: 1.45;
265}
266
267/* ── EQUITY CURVE ─────────────────────────────────── */
268.pf-curve {
269  position: relative;
270  height: 72px;
271  background:
272    repeating-linear-gradient(0deg,  transparent, transparent 11px, rgba(255,102,0,0.025) 12px),
273    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(255,102,0,0.012) 12px),
274    var(--bg);
275  border-bottom: 1px solid var(--line2);
276  overflow: hidden;
277}
278.pf-curve.solo {
279  background:
280    repeating-linear-gradient(0deg,  transparent, transparent 11px, rgba(34,153,187,0.028) 12px),
281    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(34,153,187,0.014) 12px),
282    var(--bg);
283}
284.pf-curve svg { width: 100%; height: 100%; display: block; }
285.pf-curve-l, .pf-curve-r {
286  position: absolute; top: 5px;
287  font-size: 6.5px; letter-spacing: 0.2em;
288  color: var(--ink3); text-transform: uppercase;
289  font-weight: 600;
290}
291.pf-curve-l { left: 7px; }
292.pf-curve-r { right: 7px; }
293.pf-curve-r b { color: var(--G); font-weight: 700; }
294
295/* ── INLINE STATS ─────────────────────────────────── */
296.pf-stats {
297  display: flex;
298  align-items: center;
299  border-bottom: 1px solid var(--line2);
300  padding: 8px 12px;
301  gap: 0;
302}
303.pf-stat {
304  flex: 1;
305  display: flex; flex-direction: column;
306  gap: 2px;
307  text-align: left;
308  position: relative;
309}
310.pf-stat:not(:last-child)::after {
311  content: '';
312  position: absolute;
313  right: 0; top: 15%; bottom: 15%;
314  width: 1px;
315  background: var(--line);
316}
317.pf-stat-l {
318  font-size: 6.5px; color: var(--ink3);
319  letter-spacing: 0.18em; text-transform: uppercase;
320  font-weight: 600;
321}
322.pf-stat-v {
323  font-size: 12px;
324  font-weight: 700;
325  color: var(--ink);
326  font-variant-numeric: tabular-nums;
327  letter-spacing: -0.01em;
328  line-height: 1;
329}
330.pf-stat-v.gn { color: var(--G); }
331.pf-stat-v.rn { color: var(--R); }
332
333/* ── FOOTER ROW ───────────────────────────────────── */
334.pf-foot {
335  padding: 10px 12px;
336  display: flex; align-items: center;
337  justify-content: space-between;
338  gap: 10px;
339}
340.pf-foot-l {
341  display: flex; flex-direction: column; gap: 2px;
342}
343.pf-cov-line {
344  font-size: 7.5px;
345  color: var(--ink3);
346  letter-spacing: 0.14em;
347  text-transform: uppercase;
348}
349.pf-cov-line b { color: var(--ink2); font-weight: 600; }
350.pf-price {
351  display: flex; align-items: baseline; gap: 3px;
352}
353.pf-price-am {
354  font-size: 17px;
355  font-weight: 700;
356  color: var(--ink);
357  font-variant-numeric: tabular-nums;
358  letter-spacing: -0.02em;
359  line-height: 1;
360}
361.pf-price-pe {
362  font-size: 8.5px; color: var(--ink3);
363  letter-spacing: 0.08em;
364  font-weight: 500;
365}
366.pf-cta {
367  font-size: 9px; letter-spacing: 0.18em;
368  color: var(--or); font-weight: 700;
369  border: 1px solid var(--or2);
370  padding: 7px 11px;
371  background: rgba(255,102,0,0.06);
372  text-transform: uppercase;
373  transition: 0.12s;
374  cursor: pointer;
375  font-family: var(--mono);
376}
377.pf-card:hover .pf-cta {
378  background: var(--or);
379  color: #000;
380  border-color: var(--or);
381}
382.pf-card.solo .pf-cta {
383  color: var(--C);
384  border-color: var(--C);
385  background: rgba(34,153,187,0.06);
386}
387.pf-card.solo:hover .pf-cta {
388  background: var(--C);
389  color: #000;
390  border-color: var(--C);
391}
392
393/* ── PAGE FOOTER ──────────────────────────────────── */
394.pf-pgf {
395  border-top: 1px solid var(--line2);
396  padding: 18px 14px 24px;
397  background: var(--bg2);
398  font-size: 9px;
399  color: var(--ink3);
400  letter-spacing: 0.18em;
401  text-transform: uppercase;
402}
403.pf-pgf-row {
404  max-width: 1100px;
405  margin: 0 auto;
406  display: flex;
407  justify-content: space-between;
408  flex-wrap: wrap;
409  gap: 8px;
410}
411.pf-pgf-row b { color: var(--ink2); font-weight: 600; }
412.pf-pgf-row .or { color: var(--or); }
413
414/* ── CLI FOOTER (mirror of index.html social bar) ── */
415.pf-cli {
416  border-top: 1px solid var(--line2);
417  background: var(--bg);
418  display: flex; align-items: center;
419  flex-wrap: wrap;
420  padding: 9px 22px;
421  gap: 10px;
422  font-size: 9px;
423  letter-spacing: 0.12em;
424}
425.pf-cli-prompt {
426  color: var(--or2); font-weight: 700;
427  letter-spacing: 0.06em;
428}
429.pf-cli-state {
430  display: inline-flex; align-items: center; gap: 5px;
431  font-size: 8px; letter-spacing: 0.2em;
432  color: var(--G); font-weight: 700;
433}
434.pf-cli-state .dot {
435  width: 6px; height: 6px; border-radius: 50%;
436  background: var(--G);
437  box-shadow: 0 0 6px var(--G);
438  animation: pf-pulse 1.6s ease-in-out infinite;
439}
440@keyframes pf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
441.pf-cli-sep {
442  color: var(--ink4);
443  margin: 0 2px;
444}
445.pf-cli-msg {
446  color: var(--ink3); font-size: 8.5px;
447  letter-spacing: 0.08em;
448  flex: 1; min-width: 0;
449  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
450}
451.pf-cli-msg .ck { color: var(--or2); font-weight: 600; }
452.pf-cli-soc {
453  display: flex; gap: 6px;
454  margin-left: auto;
455}
456.pf-cli-soc a {
457  display: inline-flex; align-items: center; justify-content: center;
458  width: 28px; height: 28px;
459  border: 1px solid var(--line2);
460  position: relative;
461  transition: 0.15s;
462}
463.pf-cli-soc a:hover {
464  border-color: var(--or);
465  background: rgba(255,102,0,0.05);
466}
467.pf-cli-soc a svg {
468  width: 14px; height: 14px;
469  fill: var(--ink3);
470  transition: 0.15s;
471}
472.pf-cli-soc a:hover svg { fill: var(--or); }
473.pf-soc-tip {
474  position: absolute;
475  bottom: calc(100% + 6px);
476  left: 50%;
477  transform: translateX(-50%);
478  font-size: 7px;
479  letter-spacing: 0.16em;
480  color: var(--or);
481  background: var(--bg);
482  border: 1px solid var(--or2);
483  padding: 3px 7px;
484  white-space: nowrap;
485  opacity: 0;
486  pointer-events: none;
487  transition: 0.15s;
488  font-weight: 600;
489}
490.pf-cli-soc a:hover .pf-soc-tip { opacity: 1; }
491
492/* ── RESPONSIVE ───────────────────────────────────── */
493@media (max-width: 700px) {
494  .pf-bar { padding: 0 10px; gap: 10px; height: 34px; }
495  .pf-bar-stat { display: none; }
496  .pf-bar-brand .pg, .pf-bar-brand .br { display: none; }
497  .pf-wrap { padding: 0 10px; }
498  .pf-hero { padding: 24px 0 20px; }
499  .pf-h1 { font-size: 16px; }
500  .pf-grid { grid-template-columns: 1fr; }
501  .pf-pgf-row { font-size: 8px; }
502  .pf-cli { padding: 8px 14px; gap: 6px; }
503  .pf-cli-msg { display: none; }
504}
505</style>
506</head>
507<body>
508
509<!-- ═════════════════════════════════════════════════════
510     TOP BAR
511═══════════════════════════════════════════════════════ -->
512<div class="pf-bar">
513  <a href="index.html" class="pf-bar-back">
514    <span class="ar">&larr;</span> HOME
515  </a>
516  <div class="pf-bar-brand">
517    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
518      <g fill="none" stroke="#ff6600" stroke-width="6" stroke-linejoin="round" stroke-linecap="round">
519        <path d="M 50,14 L 66,38 L 50,44 Z"/>
520        <path d="M 78.6,32.6 L 69.3,56.9 L 57.9,50.2 Z"/>
521        <path d="M 81,67.4 L 56,62.1 L 57.9,49.8 Z"/>
522        <path d="M 50,86 L 34,62 L 50,56 Z"/>
523        <path d="M 21.4,67.4 L 30.7,43.1 L 42.1,49.8 Z"/>
524        <path d="M 19,32.6 L 44,37.9 L 42.1,50.2 Z"/>
525      </g>
526    </svg>
527    <span class="br">[</span><span class="nm">STRATIQ</span><span class="br">::</span><span class="pg">PORTFOLIO</span><span class="br">]</span>
528  </div>
529  <div class="pf-bar-r">
530    <div class="pf-bar-stat"><b id="bar-prods">3</b> PRODUCTS</div>
531    <div class="pf-bar-live"><span class="d"></span><span id="bar-live">3</span> LIVE</div>
532  </div>
533</div>
534
535<!-- ═════════════════════════════════════════════════════
536     PAGE
537═══════════════════════════════════════════════════════ -->
538<main class="pf-wrap">
539
540  <!-- HERO — terminal listing -->
541  <section class="pf-hero">
542    <div class="pf-prompt">
543      <span class="pmt">stratiq@quant:~$</span>
544      <span class="cmd">portfolio --list</span>
545      <span class="arg">--regime=any</span>
546      <span class="blink">_</span>
547    </div>
548    <h1 class="pf-h1">
549      Regime-diverse strategy packs<span class="dim"> &amp; standalone systems</span> &mdash; <span class="or">live-tracked</span>, monthly-updated.
550    </h1>
551    <div class="pf-stats-line">
552      <span><b>3</b>&nbsp;products</span>
553      <span class="sep">&middot;</span>
554      <span><b>6</b>&nbsp;strategies</span>
555      <span class="sep">&middot;</span>
556      <span class="or"><b>3</b>&nbsp;live</span>
557      <span class="sep">&middot;</span>
558      <span>from&nbsp;<b>$49</b>/mo</span>
559    </div>
560  </section>
561
562  <!-- SOLO SECTION -->
563  <section class="pf-sect" id="sect-solo">
564    <div class="pf-sect-h">
565      <span class="pf-sect-tit"><span class="t-or">//</span> SOLO SYSTEMS</span>
566      <span class="pf-sect-sub">FOUNDATIONAL &middot; ANY-REGIME</span>
567      <span class="pf-sect-c"><b id="solo-count">2</b> shown</span>
568    </div>
569    <div class="pf-grid" id="grid-solo"></div>
570  </section>
571
572  <!-- DIVIDER -->
573  <div class="pf-divider" aria-hidden="true">
574    <span class="pf-divider-line"></span>
575    <span class="pf-divider-tx">&nbsp;&nbsp;PACKS BELOW&nbsp;&nbsp;</span>
576    <span class="pf-divider-line"></span>
577  </div>
578
579  <!-- PACKS SECTION -->
580  <section class="pf-sect" id="sect-pack">
581    <div class="pf-sect-h">
582      <span class="pf-sect-tit"><span class="t-or">//</span> STRATEGY PACKS</span>
583      <span class="pf-sect-sub">MULTI-STRATEGY &middot; DIVERSIFIED</span>
584      <span class="pf-sect-c"><b id="pack-count">1</b> shown</span>
585    </div>
586    <div class="pf-grid" id="grid-pack"></div>
587  </section>
588</main>
589
590<!-- ═════════════════════════════════════════════════════
591     CLI FOOTER (social / contact bar)
592═══════════════════════════════════════════════════════ -->
593<div class="pf-cli">
594  <span class="pf-cli-prompt">
594stratiq@quant:~$</span>
595  <span class="pf-cli-state"><span class="dot"></span>READY</span>
596  <span class="pf-cli-sep">│</span>
597  <span class="pf-cli-msg">channels online &middot; <span class="ck">tradingview</span> &mdash; <span class="ck">discord</span> &mdash; <span class="ck">telegram</span> &mdash; <span class="ck">x</span> &mdash; <span class="ck">email</span></span>
598
599  <div class="pf-cli-soc">
600    <a href="https://www.tradingview.com/u/wielkieef/" target="_blank" rel="noopener" aria-label="TradingView">
601      <span class="pf-soc-tip">TRADINGVIEW</span>
602      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
603        <polygon points="4.5 14.453 4.5 22.273 11.865 22.273 11.865 33.547 19.685 33.547 19.685 14.453 4.5 14.453"/>
604        <polygon points="26.202 33.547 34.326 14.453 43.5 14.453 35.376 33.547 26.202 33.547"/>
605        <circle cx="25.8407" cy="18.3627" r="3.9101"/>
606      </svg>
607    </a>
608    <a href="https://x.com/Wielkieef" target="_blank" rel="noopener" aria-label="X / Twitter">
609      <span class="pf-soc-tip">X / TWITTER</span>
610      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
611        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/>
612      </svg>
613    </a>
614    <a href="https://discord.gg/5u4Ppbu8" target="_blank" rel="noopener" aria-label="Discord">
615      <span class="pf-soc-tip">DISCORD</span>
616      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
617        <path d="M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.140 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.240 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.800 1.681 7.536 1.681s5.329-0.620 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.150 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.430-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z"/>
618      </svg>
619    </a>
620    <a href="https://t.me/+lpw0k2jOqg44ZmY0" target="_blank" rel="noopener" aria-label="Telegram">
621      <span class="pf-soc-tip">TELEGRAM</span>
622      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
623        <path d="M22.122 10.040c0.006-0 0.014-0 0.022-0 0.209 0 0.403 0.065 0.562 0.177l-0.003-0.002c0.116 0.101 0.194 0.243 0.213 0.403l0 0.003c0.020 0.122 0.031 0.262 0.031 0.405 0 0.065-0.002 0.129-0.007 0.193l0-0.009c-0.225 2.369-1.201 8.114-1.697 10.766-0.21 1.123-0.623 1.499-1.023 1.535-0.869 0.081-1.529-0.574-2.371-1.126-1.318-0.865-2.063-1.403-3.342-2.246-1.479-0.973-0.52-1.51 0.322-2.384 0.221-0.23 4.052-3.715 4.127-4.031 0.004-0.019 0.006-0.040 0.006-0.062 0-0.078-0.029-0.149-0.076-0.203l0 0c-0.052-0.034-0.117-0.053-0.185-0.053-0.045 0-0.088 0.009-0.128 0.024l0.002-0.001q-0.198 0.045-6.316 4.174c-0.445 0.351-1.007 0.573-1.619 0.599l-0.006 0c-0.867-0.105-1.654-0.298-2.401-0.573l0.074 0.024c-0.938-0.306-1.683-0.467-1.619-0.985q0.051-0.404 1.114-0.827 6.548-2.853 8.733-3.761c1.607-0.853 3.470-1.555 5.429-2.010l0.157-0.031zM15.93 1.025c-8.302 0.020-15.025 6.755-15.025 15.060 0 8.317 6.742 15.060 15.060 15.060s15.060-6.742 15.060-15.060c0-8.305-6.723-15.040-15.023-15.060h-0.002q-0.035-0 -0.070 0z"/>
624      </svg>
625    </a>
626    <a href="mailto:[email protected]" aria-label="Email">
627      <span class="pf-soc-tip">EMAIL</span>
628      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
629        <path d="M1.5 6.75v10.5c0 .69.56 1.25 1.25 1.25h2.5V10.5l6.75 5.063L18.75 10.5v8h2.5c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25h-1.25L12 11.625 3.75 5.5H2.75c-.69 0-1.25.56-1.25 1.25z"/>
630      </svg>
631    </a>
632  </div>
633</div>
634
635<!-- ═════════════════════════════════════════════════════
636     PAGE FOOTER
637═══════════════════════════════════════════════════════ -->
638<footer class="pf-pgf">
639  <div class="pf-pgf-row">
640    <div>STRATIQ&nbsp;CAPITAL <span class="or">&copy;</span> 2026</div>
641    <div>PINE&nbsp;SCRIPT&nbsp;v5 &middot; <b>MONTHLY UPDATES</b> &middot; LIVE TRACKING</div>
642    <div>NOT FINANCIAL ADVICE</div>
643  </div>
644</footer>
645
646<!-- ═════════════════════════════════════════════════════
647     DATA + RENDER
648═══════════════════════════════════════════════════════ -->
649<script>
650/* ─── PRODUCT DATA (mock — replace with xlsx-parsed data) ─── */
651const PRODUCTS = [
652  {
653    id: 'crypto-light', idx: '01', type: 'pack', status: 'live',
654    name: 'CRYPTO LIGHT',
655    tag: '4 regime-diverse strategies on BTC &amp; ETH. The flagship pack.',
656    strategies: 4, assets: ['BTC', 'ETH'],
657    metrics: { profit: 184.2, dd: 12.4, winRate: 64.3, trades: 412 },
658    price: 99,
659    seed: 17
660  },
661  {
662    id: 'pkama-trail', idx: '02', type: 'solo', status: 'live',
663    name: 'PERFECT PKAMA TRAIL',
664    tag: 'Standalone trailing-stop trend-follower on BTCUSD 1h. The PKAMA flagship.',
665    strategies: 1, assets: ['BTC'],
666    metrics: { profit: 0, dd: 0, winRate: 0, trades: 0 },
667    price: 49,
668    seed: 11
669  }
670];
671
672/* ─── MOCK EQUITY CURVE GENERATOR ─── */
673function seededRng(seed){
674  let s = seed | 0;
675  return () => {
676    s = (s * 1664525 + 1013904223) | 0;
677    return ((s >>> 0) % 100000) / 100000;
678  };
679}
680function buildCurve(seed, points = 60){
681  const rng = seededRng(seed);
682  const drift = 0.012 + rng()*0.01;
683  const vol   = 0.04  + rng()*0.03;
684  let v = 1.0;
685  const arr = [v];
686  for (let i = 1; i < points; i++){
687    const r = (rng() - 0.5) * 2 * vol + drift;
688    v = Math.max(0.4, v * (1 + r));
689    arr.push(v);
690  }
691  return arr;
692}
693function curveSvg(curve, color, w = 380, h = 72, pad = 5){
694  const min = Math.min(...curve), max = Math.max(...curve);
695  const range = max - min || 1;
696  const xs = curve.map((_, i) => pad + (i / (curve.length-1)) * (w - 2*pad));
697  const ys = curve.map(v => h - pad - ((v - min) / range) * (h - 2*pad));
698  const line = xs.map((x,i) => `${i===0?'M':'L'} ${x.toFixed(1)} ${ys[i].toFixed(1)}`).join(' ');
699  const fill = `${line} L ${xs[xs.length-1].toFixed(1)} ${h-pad} L ${pad} ${h-pad} Z`;
700  const lastReturn = ((curve[curve.length-1] / curve[0]) - 1) * 100;
701  const gid = 'g-' + color.replace(/[^a-z0-9]/gi,'') + '-' + Math.floor(Math.random()*1e6);
702  return {
703    svg: `<svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
704      <defs>
705        <linearGradient id="${gid}" x1="0" x2="0" y1="0" y2="1">
706          <stop offset="0%"  stop-color="${color}" stop-opacity="0.26"/>
707          <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
708        </linearGradient>
709      </defs>
710      <path d="${fill}" fill="url(#${gid})" stroke="none"/>
711      <path d="${line}" fill="none" stroke="${color}" stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/>
712    </svg>`,
713    pct: lastReturn
714  };
715}
716
717/* ─── RENDER ─── */
718function cardHtml(p){
719  const colorH = p.type === 'solo' ? '#2299bb' : '#ff6600';
720  const { svg, pct } = curveSvg(buildCurve(p.seed), colorH);
721  const pctTxt = (pct >= 0 ? '+' : '') + pct.toFixed(1) + '%';
722  const typeTag = p.type === 'pack'
723    ? `PACK · ${p.strategies} STRATS`
724    : `SOLO`;
725  const cov = p.assets.join(' · ');
726  return `
727  <a href="portfolio-detail.html?p=${p.id}" class="pf-card ${p.type}" data-id="${p.id}">
728    <div class="pf-card-head">
729      <div class="pf-card-row1">
730        <div class="pf-tags">
731          <span class="pf-tag ${p.type}">${typeTag}</span>
732          <span class="pf-tag live">LIVE</span>
733        </div>
734        <div class="pf-card-idx">[${p.idx}]</div>
735      </div>
736      <div class="pf-card-name">${p.name}</div>
737      <div class="pf-card-tag">${p.tag}</div>
738    </div>
739
740    <div class="pf-curve ${p.type === 'solo' ? 'solo' : ''}">
741      <div class="pf-curve-l">EQUITY · 5Y SIM</div>
742      <div class="pf-curve-r"><b>${pctTxt}</b></div>
743      ${svg}
744    </div>
745
746    <div class="pf-stats">
747      <div class="pf-stat">
748        <div class="pf-stat-l">PROFIT</div>
749        <div class="pf-stat-v gn">${(p.metrics.profit>=0?'+':'') + p.metrics.profit.toFixed(1)}%</div>
750      </div>
751      <div class="pf-stat">
752        <div class="pf-stat-l">MAX DD</div>
753        <div class="pf-stat-v rn">-${p.metrics.dd.toFixed(1)}%</div>
754      </div>
755      <div class="pf-stat">
756        <div class="pf-stat-l">WIN RATE</div>
757        <div class="pf-stat-v">${p.metrics.winRate.toFixed(1)}%</div>
758      </div>
759      <div class="pf-stat">
760        <div class="pf-stat-l">TRADES</div>
761        <div class="pf-stat-v">${p.metrics.trades}</div>
762      </div>
763    </div>
764
765    <div class="pf-foot">
766      <div class="pf-foot-l">
767        <div class="pf-cov-line">COVERS · <b>${cov}</b></div>
768        <div class="pf-price">
769          <span class="pf-price-am">$${p.price}</span>
770          <span class="pf-price-pe">/mo</span>
771        </div>
772      </div>
773      <span class="pf-cta">VIEW &rsaquo;</span>
774    </div>
775  </a>`;
776}
777
778function renderProducts(){
779  const solo = PRODUCTS.filter(p => p.type === 'solo');
780  const pack = PRODUCTS.filter(p => p.type === 'pack');
781
782  document.getElementById('grid-solo').innerHTML = solo.map(cardHtml).join('');
783  document.getElementById('grid-pack').innerHTML = pack.map(cardHtml).join('');
784
785  document.getElementById('solo-count').textContent = solo.length;
786  document.getElementById('pack-count').textContent = pack.length;
787
788  // hide a section if it ends up empty
789  document.getElementById('sect-solo').style.display = solo.length ? '' : 'none';
790  document.getElementById('sect-pack').style.display = pack.length ? '' : 'none';
791  document.querySelector('.pf-divider').style.display =
792    (solo.length && pack.length) ? '' : 'none';
793}
794
795/* ─── COUNTERS ─── */
796function updateCounters(){
797  const total  = PRODUCTS.length;
798  const live   = PRODUCTS.filter(p => p.status === 'live').length;
799  document.getElementById('bar-prods').textContent = total;
800  document.getElementById('bar-live').textContent = live;
801}
802
803/* ─── DATA LOADING (priority: public json → localStorage → mock) ─── */
804const STORAGE_PREFIX = 'stratiq:portfolio:';
805const DATA_DIR = 'data/';
806
807async function loadProductData(p){
808  // 1) Public JSON in /data/{id}.json — what customers see (committed in repo)
809  try {
810    const res = await fetch(DATA_DIR + p.id + '.json', { cache: 'no-store' });
811    if (res.ok){
812      const d = await res.json();
813      if (d && d.metrics){
814        p.metrics = { ...p.metrics, ...d.metrics };
815        if (d.equityCurve && d.equityCurve.length > 5) p._realCurve = d.equityCurve;
816        if (d.lastUpdated) p._lastUpdated = d.lastUpdated;
817        p._source = 'public';
818        return;
819      }
820    }
821  } catch(_) { /* fetch failed — file:// or 404 — fall through */ }
822
823  // 2) localStorage — admin preview (only this browser)
824  try {
825    const raw = localStorage.getItem(STORAGE_PREFIX + p.id);
826    if (raw){
827      const d = JSON.parse(raw);
828      if (d && d.metrics){
829        p.metrics = { ...p.metrics, ...d.metrics };
830        if (d.equityCurve && d.equityCurve.length > 5) p._realCurve = d.equityCurve;
831        if (d.lastUpdated) p._lastUpdated = d.lastUpdated;
832        p._source = 'local';
833      }
834    }
835  } catch(_) { /* corrupt localStorage — fall through to mock */ }
836}
837
838/* If a product has _realCurve, use it instead of seeded mock */
839const _origBuildCurve = buildCurve;
840buildCurve = function(seedOrProduct, points){
841  const p = PRODUCTS.find(x => x.seed === seedOrProduct);
842  if (p && p._realCurve) return p._realCurve.slice();
843  return _origBuildCurve(seedOrProduct, points);
844};
845
846/* ─── INIT ─── */
847async function init(){
848  await Promise.all(PRODUCTS.map(loadProductData));
849  updateCounters();
850  renderProducts();
851}
852init();
853</script>
853
854
855</body>
856</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.