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">←</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"> & standalone systems</span> — <span class="or">live-tracked</span>, monthly-updated. 550 </h1> 551 <div class="pf-stats-line"> 552 <span><b>3</b> products</span> 553 <span class="sep">·</span> 554 <span><b>6</b> strategies</span> 555 <span class="sep">·</span> 556 <span class="or"><b>3</b> live</span> 557 <span class="sep">·</span> 558 <span>from <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 · 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"> PACKS BELOW </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 · 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 · <span class="ck">tradingview</span> — <span class="ck">discord</span> — <span class="ck">telegram</span> — <span class="ck">x</span> — <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 CAPITAL <span class="or">©</span> 2026</div> 641 <div>PINE SCRIPT v5 · <b>MONTHLY UPDATES</b> · 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 & 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 ›</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.