plotflow.github.io/product.html at main · plotflow/plotflow.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1HJ4VQ4K1B"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-1HJ4VQ4K1B');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edition · PLOTFLOW*</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="styles/styles.css">
<meta name="description" content="A made-to-order, machine-drawn PLOTFLOW edition. Drawn in ink on Strathmore Bristol, signed and numbered.">
<link rel="canonical" href="https://plotflow.io/product.html">
<meta name="theme-color" content="#43463e">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<meta property="og:type" content="product">
<meta property="og:site_name" content="PLOTFLOW">
<meta property="og:title" content="Edition · PLOTFLOW*">
<meta property="og:description" content="A made-to-order, machine-drawn PLOTFLOW edition. Drawn in ink on Strathmore Bristol, signed and numbered.">
<meta property="og:url" content="https://plotflow.io/product.html">
<meta property="og:image" content="https://plotflow.io/assets/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Edition · PLOTFLOW*">
<meta name="twitter:description" content="A made-to-order, machine-drawn PLOTFLOW edition. Drawn in ink on Strathmore Bristol, signed and numbered.">
<meta name="twitter:image" content="https://plotflow.io/assets/og.png">
</head>
<body>

<nav><div class="nav-in">
  <a href="/" class="brand">Plotflow<i>*</i></a>
  <div style="display:flex;align-items:center;gap:16px">
    <div class="nav-links"><a href="/#shop">The Work</a><a href="/#process">Process</a><a href="/#feature">Live Plot</a></div>
    <button class="cart">Cart [0]</button>
  </div>
</div></nav>

<section class="page">
  <div class="wrap">
    <a class="pd-back tiny" href="/#shop">← All editions</a>

    <div class="pd" id="pd" hidden>
      <!-- LEFT: live plot preview on Strathmore Bristol -->
      <div class="pd-stage-wrap">
        <div class="pd-stage" id="pdStage">
          <span class="pd-bedlabel tiny" id="pdBedlabel"></span>
          <canvas id="pdCanvas"></canvas>
          <svg id="pdSvg" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path id="pdPath" d=""></path></svg>
          <button class="pd-replay" id="pdReplay" hidden>▶&#xFE0E; Watch it plot</button>
        </div>
        <div class="pd-stage-meta tiny"><span id="pdInk">マシンドロー</span><span id="pdSize"></span></div>
        <button class="pd-wallpaper tiny" id="pdWallpaper">↓ Download phone wallpaper</button>
        <div class="pd-nudge" id="pdNudge" hidden>
          <p class="pd-nudge-copy tiny">Saved to your phone. Want first dibs when the next edition drops?</p>
          <form class="pd-nudge-form" id="pdNudgeForm" novalidate>
            <input type="email" id="pdNudgeEmail" placeholder="you@example.com" aria-label="Email address" autocomplete="email" />
            <button type="submit">Notify me</button>
          </form>
          <p class="pd-nudge-msg tiny" id="pdNudgeMsg" hidden></p>
        </div>
      </div>

      <!-- RIGHT: details + acquire -->
      <div class="pd-info">
        <div class="pd-head">
          <div class="pd-code tiny" id="pdCode"></div>
          <h1 class="pd-name" id="pdName"></h1>
          <div class="jp pd-jp" id="pdJp"></div>
        </div>

        <div class="pd-edrow">
          <span class="pd-ed tiny" id="pdEd"></span>
          <span class="pd-price" id="pdPrice"></span>
        </div>
        <div class="pd-stock tiny" id="pdStock" hidden></div>

        <p class="pd-lore" id="pdLore"></p>

        <div class="pd-field">
          <span class="pd-field-label tiny">Pen color</span>
          <div class="pd-swatches" id="pdSwatches" role="radiogroup" aria-label="Pen color"></div>
        </div>

        <button class="pd-acquire" id="pdAcquire">Acquire · <span id="pdAcquirePrice"></span></button>
        <p class="pd-note tiny">Plotted to order in your chosen ink. Shipping + any taxes calculated at checkout.</p>

        <div class="pd-specs">
          <h3>Materials &amp; specs</h3>
          <ul>
            <li><strong>Paper:</strong> Strathmore 300 Series Bristol, smooth, 11×14″</li>
            <li><strong>Ink:</strong> Staedtler Triplus 0.3mm fineliner, pigment-based &amp; lightfast</li>
            <li><strong>Made by:</strong> AxiDraw pen plotter, drawn line by line</li>
            <li><strong>Finishing:</strong> Inspected, signed, and numbered by hand</li>
          </ul>
          <h3>Shipping &amp; returns</h3>
          <p>Each edition is plotted to order. Please allow up to 2–3 weeks for production before dispatch. Free U.S. shipping; flat $20 international at checkout. Damaged-in-transit pieces are replaced free. See <a href="shipping.html">Shipping</a> &amp; <a href="returns.html">Returns</a>.</p>
        </div>
      </div>
    </div>

    <div class="pd-missing" id="pdMissing" hidden>
      <div class="page-head"><h1>Not found<span class="star">*</span></h1><div class="jp">作品が見つかりません</div></div>
      <div class="page-body"><p>That edition isn't part of the current run. <a href="/#shop">Browse all editions →</a></p></div>
    </div>
  </div>
</section>

<footer>
  <div class="grain"></div>
  <div class="wrap">
    <div class="foot-mast">PLOTFLOW<span class="s">*</span></div>
    <div class="foot-cols">
      <div class="fc"><h5>Shop*</h5><a href="/#shop">All editions</a><a href="commissions.html">Commissions</a></div>
      <div class="fc"><h5>Studio*</h5><a href="/#process">Process</a><a href="about.html">About</a><a href="contact.html">Contact</a></div>
      <div class="fc"><h5>Info*</h5><a href="shipping.html">Shipping</a><a href="returns.html">Returns</a><a href="faq.html">FAQ</a></div>
      <div class="fc"><h5>マシンドロー</h5><a href="https://instagram.com/plotflow" target="_blank" rel="noopener">@plotflow</a><a href="/#newsletter">Newsletter</a><span class="est">est. 2026</span></div>
    </div>
    <div class="foot-bot tiny"><span>© 2026 PLOTFLOW* · PLOTTED IN THE U.S.A.</span><span>マシンドロー · DRAWN BY MACHINE</span></div>
  </div>
</footer>

<!-- data first, then components -->
<script src="data/editions.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/stock.js"></script>
<script src="scripts/subscribe.js"></script>
<script src="scripts/product.js"></script>
<script src="scripts/cart.js"></script>
</body>
</html>