3dvr-web/pocket-workstation.html at main · tmsteph/3dvr-web · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3dvr Pocket Workstation</title>
  <meta
    name="description"
    content="Turn your phone into a builder console with the 3dvr Pocket Workstation: notes, commands, projects, and a Termux install flow."
  />
  <script defer src="/_vercel/insights/script.js"></script>
  <style>
    :root {
      --bg: #08111a;
      --bg-soft: #112030;
      --panel: rgba(255, 255, 255, 0.08);
      --line: rgba(255, 255, 255, 0.12);
      --text: #f5f8fb;
      --muted: #bdd0e4;
      --signal: #8fffd1;
      --accent: #ffb867;
      --shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(143, 255, 209, 0.18), transparent 25%),
        linear-gradient(180deg, #0a1520 0%, #08111a 48%, #05090f 100%);
      line-height: 1.65;
    }

    a { color: inherit; text-decoration: none; }

    .shell {
      width: min(1100px, calc(100% - 1.5rem));
      margin: 0 auto;
    }

    .hero,
    .section {
      padding: 4.5rem 0;
    }

    .hero-grid,
    .two-up,
    .steps {
      display: grid;
      gap: 1rem;
    }

    .hero-grid,
    .two-up {
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
      align-items: start;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 1rem;
      color: var(--signal);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.82rem;
      font-weight: 700;
    }

    h1, h2, h3 {
      margin-top: 0;
      line-height: 1.02;
    }

    h1 {
      font-size: clamp(2.6rem, 7vw, 5rem);
      margin-bottom: 1rem;
    }

    h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 0.85rem;
    }

    p {
      color: var(--muted);
      margin-top: 0;
    }

    .panel,
    .step-card,
    .command-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }

    .panel {
      padding: 1.35rem;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-top: 1.4rem;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0.9rem 1.2rem;
      border-radius: 999px;
      font-weight: 800;
    }

    .button-primary {
      background: linear-gradient(135deg, var(--signal), #d9ff7d);
      color: #04110c;
    }

    .button-secondary {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
    }

    .command-card {
      padding: 1.1rem;
    }

    .command-card code {
      display: block;
      padding: 1rem;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.28);
      color: #c7fff0;
      white-space: pre-wrap;
      word-break: break-word;
      margin: 0.85rem 0;
    }

    .steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .step-card {
      padding: 1.2rem;
    }

    .step-card strong {
      display: block;
      margin-bottom: 0.4rem;
      color: var(--text);
    }

    .list {
      margin: 0;
      padding-left: 1.1rem;
      color: var(--muted);
    }

    .foot {
      padding: 0 0 2.5rem;
      color: var(--muted);
      text-align: center;
    }

    @media (max-width: 900px) {
      .hero-grid,
      .two-up,
      .steps {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <div class="shell hero-grid">
        <div>
          <p class="eyebrow">3dvr Pocket Workstation</p>
          <h1>Turn your phone into a builder console.</h1>
          <p>
            Pocket Workstation gives you one portable place for notes, commands, projects, and guided next steps.
            It works in the browser right now and can bootstrap a real Termux setup on Android.
          </p>
          <div class="button-row">
            <a class="button button-primary" href="https://www.3dvr.tech/install">Copy the install route</a>
            <a class="button button-secondary" href="https://portal.3dvr.tech/pocket-workstation/">Open the dashboard</a>
          </div>
        </div>
        <aside class="command-card">
          <h2>Install in Termux</h2>
          <p>Run this once on Android inside Termux:</p>
          <code>curl -Ls https://3dvr.tech/install | bash</code>
          <p>
            Then run <code>3dvr connect</code> and link the short code in the Pocket Workstation dashboard.
          </p>
        </aside>
      </div>
    </section>

    <section class="section">
      <div class="shell">
        <div class="two-up">
          <div class="panel">
            <p class="eyebrow">What it does</p>
            <h2>Simple first. Useful immediately.</h2>
            <ul class="list">
              <li>Save notes for deployments, ideas, and live project context.</li>
              <li>Save reusable commands so you do not keep rebuilding your memory from scratch.</li>
              <li>Track projects and the next action that moves them forward.</li>
              <li>Use the lightweight helper to turn “I need to deploy this” into concrete steps.</li>
            </ul>
          </div>
          <div class="panel">
            <p class="eyebrow">Why it matters</p>
            <h2>One system across devices.</h2>
            <ul class="list">
              <li>Android gets local power through Termux.</li>
              <li>iPhone gets the same dashboard as a clean control panel.</li>
              <li>Desktop gets the same workspace with more room.</li>
              <li>The center stays your projects, not a generic terminal toy.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="shell">
        <p class="eyebrow">How it works</p>
        <h2>Three clear steps</h2>
        <div class="steps">
          <article class="step-card">
            <strong>1. Install</strong>
            Run the one-line install command in Termux.
          </article>
          <article class="step-card">
            <strong>2. Connect</strong>
            Run <code>3dvr connect</code>, then approve the short code in the dashboard.
          </article>
          <article class="step-card">
            <strong>3. Pull your setup</strong>
            Use <code>3dvr commands pull</code> or <code>3dvr projects</code> to bring your workspace in.
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="foot">
    <div class="shell">
      <p>3dvr Pocket Workstation v0.1</p>
    </div>
  </footer>
</body>
</html>