agent-pager 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +169 -0
- package/dist/src/cli.js +1110 -0
- package/dist/src/crypto.js +45 -0
- package/dist/src/delivery.js +51 -0
- package/dist/src/hosted-http.js +849 -0
- package/dist/src/hosted-service.js +1038 -0
- package/dist/src/hosted-vercel.js +51 -0
- package/dist/src/http-client.js +28 -0
- package/dist/src/local-config.js +29 -0
- package/dist/src/mcp.js +341 -0
- package/dist/src/render.js +34 -0
- package/dist/src/server.js +441 -0
- package/dist/src/session-adapters.js +23 -0
- package/dist/src/setup.js +90 -0
- package/dist/src/store.js +52 -0
- package/dist/src/supabase.js +32 -0
- package/dist/src/supabase.types.js +13 -0
- package/dist/src/types.js +1 -0
- package/package.json +82 -0
- package/web/app.js +676 -0
- package/web/index.html +199 -0
- package/web/pager-terminal.png +0 -0
- package/web/styles.css +421 -0
package/web/index.html
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
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>Agent Pager</title>
|
|
7
|
+
<link rel="stylesheet" href="/assets/styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<main class="app-shell">
|
|
11
|
+
<section class="hero">
|
|
12
|
+
<div class="service-badge">
|
|
13
|
+
<div class="mark">
|
|
14
|
+
<img src="/assets/pager-terminal.png" alt="Retro pager terminal illustration" />
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<h1>Agent Pager</h1>
|
|
18
|
+
<p>Authorized Human Contact Service</p>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="hero-copy">
|
|
22
|
+
<h2>Because people ignore their messages, but not their agents.</h2>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="rainbow" aria-hidden="true"></div>
|
|
25
|
+
</section>
|
|
26
|
+
|
|
27
|
+
<nav class="tabs" aria-label="Agent Pager sections">
|
|
28
|
+
<button class="tab is-active" data-view="console">Console</button>
|
|
29
|
+
<button class="tab" data-view="friends">Friends</button>
|
|
30
|
+
<button class="tab" data-view="pages">Pages</button>
|
|
31
|
+
<button class="tab" data-view="devices">Devices</button>
|
|
32
|
+
<button class="tab" data-view="security">Security</button>
|
|
33
|
+
<button class="tab" data-view="settings">Settings</button>
|
|
34
|
+
<button class="tab" data-view="setup">Setup</button>
|
|
35
|
+
</nav>
|
|
36
|
+
|
|
37
|
+
<section class="window" data-panel="console">
|
|
38
|
+
<div class="window-title">Service Console</div>
|
|
39
|
+
<div class="console-grid">
|
|
40
|
+
<article class="status-card">
|
|
41
|
+
<span class="light online"></span>
|
|
42
|
+
<div>
|
|
43
|
+
<h3 id="user-count">Loading</h3>
|
|
44
|
+
<p id="profile-line">Checking service.</p>
|
|
45
|
+
</div>
|
|
46
|
+
</article>
|
|
47
|
+
<article class="status-card">
|
|
48
|
+
<span class="light"></span>
|
|
49
|
+
<div>
|
|
50
|
+
<h3 id="status-friends">0 approved</h3>
|
|
51
|
+
<p>Friends only.</p>
|
|
52
|
+
</div>
|
|
53
|
+
</article>
|
|
54
|
+
<article class="status-card">
|
|
55
|
+
<span class="light"></span>
|
|
56
|
+
<div>
|
|
57
|
+
<h3 id="status-pending">0 pending</h3>
|
|
58
|
+
<p id="security-line">Signed delivery.</p>
|
|
59
|
+
</div>
|
|
60
|
+
</article>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="operator-grid">
|
|
64
|
+
<article id="auth-panel" class="operator-card">
|
|
65
|
+
<h3 id="status-human">Not signed in</h3>
|
|
66
|
+
<p id="status-cloud">Hosted service</p>
|
|
67
|
+
<div class="form-grid">
|
|
68
|
+
<label>Email<input id="auth-email" type="email" autocomplete="email" /></label>
|
|
69
|
+
<label>Password<input id="auth-password" type="password" autocomplete="current-password" /></label>
|
|
70
|
+
<label>Username<input id="auth-username" autocomplete="username" /></label>
|
|
71
|
+
<label>Name<input id="auth-name" autocomplete="name" /></label>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="button-row">
|
|
74
|
+
<button data-action="sign-in">Sign in</button>
|
|
75
|
+
<button data-action="sign-up">Create</button>
|
|
76
|
+
<button data-action="save-profile">Save profile</button>
|
|
77
|
+
<button data-action="sign-out">Sign out</button>
|
|
78
|
+
</div>
|
|
79
|
+
</article>
|
|
80
|
+
<article class="operator-card">
|
|
81
|
+
<h3>Terminal Card</h3>
|
|
82
|
+
<pre><code id="setup-command">npm install -g agent-pager
|
|
83
|
+
agent-pager login
|
|
84
|
+
agent-pager start</code></pre>
|
|
85
|
+
</article>
|
|
86
|
+
</div>
|
|
87
|
+
</section>
|
|
88
|
+
|
|
89
|
+
<section class="window is-hidden" data-panel="friends">
|
|
90
|
+
<div class="window-title">Approved Friends</div>
|
|
91
|
+
<div class="operator-grid">
|
|
92
|
+
<article id="profile-request-card" class="operator-card is-hidden">
|
|
93
|
+
<h3 id="profile-request-title">Page my agent</h3>
|
|
94
|
+
<label>Note<textarea id="friend-request-note" rows="3" maxlength="280"></textarea></label>
|
|
95
|
+
<div class="button-row">
|
|
96
|
+
<button data-action="request-profile">Request access</button>
|
|
97
|
+
</div>
|
|
98
|
+
</article>
|
|
99
|
+
<article class="operator-card">
|
|
100
|
+
<h3>Invite</h3>
|
|
101
|
+
<div class="button-row">
|
|
102
|
+
<button data-action="create-invite">Create invite</button>
|
|
103
|
+
</div>
|
|
104
|
+
<textarea id="invite-output" readonly rows="2"></textarea>
|
|
105
|
+
</article>
|
|
106
|
+
<article class="operator-card">
|
|
107
|
+
<h3>Accept</h3>
|
|
108
|
+
<label>Invite code or URL<input id="friend-code" /></label>
|
|
109
|
+
<div class="button-row">
|
|
110
|
+
<button data-action="accept-invite">Accept invite</button>
|
|
111
|
+
</div>
|
|
112
|
+
</article>
|
|
113
|
+
</div>
|
|
114
|
+
<div id="invites-list" class="list"></div>
|
|
115
|
+
<div id="friend-requests-list" class="list"></div>
|
|
116
|
+
<div id="friends-list" class="list"></div>
|
|
117
|
+
<div id="mutes-list" class="list"></div>
|
|
118
|
+
<div id="blocks-list" class="list"></div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<section class="window is-hidden" data-panel="pages">
|
|
122
|
+
<div class="window-title">Page Traffic</div>
|
|
123
|
+
<div class="operator-card compose-card">
|
|
124
|
+
<label>Friend<input id="page-friend" /></label>
|
|
125
|
+
<label>Urgency
|
|
126
|
+
<select id="page-urgency">
|
|
127
|
+
<option value="gentle">gentle</option>
|
|
128
|
+
<option value="normal" selected>normal</option>
|
|
129
|
+
<option value="firm">firm</option>
|
|
130
|
+
<option value="professionally-dramatic">professionally-dramatic</option>
|
|
131
|
+
</select>
|
|
132
|
+
</label>
|
|
133
|
+
<label class="wide">Message<textarea id="page-message" rows="3" maxlength="600"></textarea></label>
|
|
134
|
+
<div class="button-row">
|
|
135
|
+
<button data-action="send-page">Send page</button>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
<div id="pages-list" class="list"></div>
|
|
139
|
+
</section>
|
|
140
|
+
|
|
141
|
+
<section class="window is-hidden" data-panel="devices">
|
|
142
|
+
<div class="window-title">Devices</div>
|
|
143
|
+
<div class="operator-card">
|
|
144
|
+
<h3>Pairing Approval</h3>
|
|
145
|
+
<label>Pairing code<input id="device-code" /></label>
|
|
146
|
+
<div class="button-row">
|
|
147
|
+
<button data-action="approve-device">Approve device</button>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div id="devices-list" class="list"></div>
|
|
151
|
+
</section>
|
|
152
|
+
|
|
153
|
+
<section class="window is-hidden" data-panel="security">
|
|
154
|
+
<div class="window-title">Security Log</div>
|
|
155
|
+
<div id="abuse-reports-list" class="list dense"></div>
|
|
156
|
+
<div id="audit-list" class="list dense"></div>
|
|
157
|
+
</section>
|
|
158
|
+
|
|
159
|
+
<section class="window is-hidden" data-panel="settings">
|
|
160
|
+
<div class="window-title">Settings</div>
|
|
161
|
+
<div class="operator-card compose-card">
|
|
162
|
+
<label>Quiet hours<input id="quiet-enabled" type="checkbox" /></label>
|
|
163
|
+
<label>Start<input id="quiet-start" placeholder="22:00" /></label>
|
|
164
|
+
<label>End<input id="quiet-end" placeholder="08:00" /></label>
|
|
165
|
+
<label>Timezone<input id="quiet-timezone" placeholder="America/Denver" /></label>
|
|
166
|
+
<label>Rate limit<input id="rate-limit" type="number" min="1" max="30" /></label>
|
|
167
|
+
<div class="button-row">
|
|
168
|
+
<button data-action="save-settings">Save settings</button>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</section>
|
|
172
|
+
|
|
173
|
+
<section class="window is-hidden" data-panel="setup">
|
|
174
|
+
<div class="window-title">Setup Cards</div>
|
|
175
|
+
<div class="setup-grid">
|
|
176
|
+
<article>
|
|
177
|
+
<h3>Install</h3>
|
|
178
|
+
<pre><code>npm install -g agent-pager</code></pre>
|
|
179
|
+
</article>
|
|
180
|
+
<article>
|
|
181
|
+
<h3>Pair this machine</h3>
|
|
182
|
+
<pre><code>agent-pager login
|
|
183
|
+
agent-pager start</code></pre>
|
|
184
|
+
</article>
|
|
185
|
+
<article>
|
|
186
|
+
<h3>Install agent tools</h3>
|
|
187
|
+
<pre><code>agent-pager setup codex
|
|
188
|
+
agent-pager setup claude</code></pre>
|
|
189
|
+
</article>
|
|
190
|
+
<article>
|
|
191
|
+
<h3>Fallback inbox</h3>
|
|
192
|
+
<pre><code>agent-pager check-pages</code></pre>
|
|
193
|
+
</article>
|
|
194
|
+
</div>
|
|
195
|
+
</section>
|
|
196
|
+
</main>
|
|
197
|
+
<script type="module" src="/assets/app.js"></script>
|
|
198
|
+
</body>
|
|
199
|
+
</html>
|
|
Binary file
|
package/web/styles.css
ADDED
|
@@ -0,0 +1,421 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--paper: #f6eddb;
|
|
3
|
+
--paper-dark: #e7dcc8;
|
|
4
|
+
--ink: #24211d;
|
|
5
|
+
--muted: #6c6256;
|
|
6
|
+
--panel: #d8d2c4;
|
|
7
|
+
--charcoal: #343331;
|
|
8
|
+
--green: #1f8a4c;
|
|
9
|
+
--red: #c74b42;
|
|
10
|
+
--yellow: #d8a22a;
|
|
11
|
+
--orange: #e9822d;
|
|
12
|
+
--blue: #2274a5;
|
|
13
|
+
--purple: #8659a9;
|
|
14
|
+
--display-font: "Gill Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
|
|
15
|
+
--body-font: "Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
|
|
16
|
+
color-scheme: light;
|
|
17
|
+
font-family: var(--body-font);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
* {
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
body {
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
margin: 0;
|
|
27
|
+
color: var(--ink);
|
|
28
|
+
background: linear-gradient(135deg, #fbf4e6, #efe5d2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
body::before {
|
|
32
|
+
position: fixed;
|
|
33
|
+
inset: 0;
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
content: "";
|
|
36
|
+
opacity: 0.16;
|
|
37
|
+
background-image:
|
|
38
|
+
linear-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px),
|
|
39
|
+
linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
|
|
40
|
+
background-size: 5px 5px;
|
|
41
|
+
mix-blend-mode: multiply;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.app-shell {
|
|
45
|
+
position: relative;
|
|
46
|
+
z-index: 1;
|
|
47
|
+
width: min(1180px, calc(100vw - 32px));
|
|
48
|
+
margin: 0 auto;
|
|
49
|
+
padding: 28px 0 48px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.hero {
|
|
53
|
+
position: relative;
|
|
54
|
+
min-height: 540px;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
border: 2px solid var(--charcoal);
|
|
57
|
+
background:
|
|
58
|
+
linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(230, 216, 190, 0.9)),
|
|
59
|
+
var(--paper);
|
|
60
|
+
box-shadow: 8px 8px 0 var(--charcoal);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.service-badge {
|
|
64
|
+
position: relative;
|
|
65
|
+
z-index: 2;
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
gap: 14px;
|
|
69
|
+
max-width: calc(100% - 48px);
|
|
70
|
+
margin: 24px;
|
|
71
|
+
padding: 14px 18px;
|
|
72
|
+
color: #f4efe5;
|
|
73
|
+
background: var(--charcoal);
|
|
74
|
+
border: 2px solid var(--charcoal);
|
|
75
|
+
border-radius: 8px;
|
|
76
|
+
box-shadow: 4px 4px 0 rgba(36, 33, 29, 0.36);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mark {
|
|
80
|
+
display: grid;
|
|
81
|
+
flex: 0 0 auto;
|
|
82
|
+
width: 72px;
|
|
83
|
+
height: 62px;
|
|
84
|
+
place-items: center;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
background: var(--paper);
|
|
87
|
+
border: 2px solid #15130f;
|
|
88
|
+
border-radius: 4px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.mark img {
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 100%;
|
|
94
|
+
object-fit: contain;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.service-badge h1 {
|
|
98
|
+
margin: 0;
|
|
99
|
+
font-family: var(--display-font);
|
|
100
|
+
font-size: 34px;
|
|
101
|
+
font-weight: 700;
|
|
102
|
+
line-height: 1;
|
|
103
|
+
letter-spacing: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.service-badge p {
|
|
107
|
+
margin: 5px 0 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.hero-copy {
|
|
111
|
+
position: relative;
|
|
112
|
+
z-index: 2;
|
|
113
|
+
max-width: 820px;
|
|
114
|
+
margin: 74px 24px 28px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.hero-copy h2 {
|
|
118
|
+
max-width: 800px;
|
|
119
|
+
margin: 0;
|
|
120
|
+
font-family: var(--display-font);
|
|
121
|
+
font-size: 64px;
|
|
122
|
+
font-weight: 700;
|
|
123
|
+
line-height: 0.95;
|
|
124
|
+
letter-spacing: 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.rainbow {
|
|
128
|
+
position: absolute;
|
|
129
|
+
right: -370px;
|
|
130
|
+
bottom: -390px;
|
|
131
|
+
z-index: 0;
|
|
132
|
+
width: 960px;
|
|
133
|
+
height: 560px;
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
background:
|
|
136
|
+
radial-gradient(
|
|
137
|
+
ellipse at center,
|
|
138
|
+
transparent 0 44%,
|
|
139
|
+
var(--blue) 44% 48%,
|
|
140
|
+
var(--purple) 48% 52%,
|
|
141
|
+
var(--red) 52% 56%,
|
|
142
|
+
var(--orange) 56% 60%,
|
|
143
|
+
#f4c63d 60% 64%,
|
|
144
|
+
var(--green) 64% 68%,
|
|
145
|
+
transparent 68% 100%
|
|
146
|
+
);
|
|
147
|
+
opacity: 0.72;
|
|
148
|
+
filter: saturate(1.12);
|
|
149
|
+
transform: rotate(-8deg);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.tabs {
|
|
153
|
+
display: flex;
|
|
154
|
+
gap: 8px;
|
|
155
|
+
margin: 28px 0 14px;
|
|
156
|
+
overflow-x: auto;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.tab {
|
|
160
|
+
min-height: 40px;
|
|
161
|
+
padding: 0 18px;
|
|
162
|
+
color: var(--ink);
|
|
163
|
+
background: var(--paper-dark);
|
|
164
|
+
border: 2px solid var(--charcoal);
|
|
165
|
+
box-shadow: 3px 3px 0 var(--charcoal);
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
font-family: var(--display-font);
|
|
168
|
+
font-size: 16px;
|
|
169
|
+
font-weight: 700;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.tab.is-active {
|
|
173
|
+
color: #fffaf0;
|
|
174
|
+
background: var(--charcoal);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.window {
|
|
178
|
+
border: 2px solid var(--charcoal);
|
|
179
|
+
background: rgba(248, 242, 229, 0.94);
|
|
180
|
+
box-shadow: 8px 8px 0 var(--charcoal);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.window-title {
|
|
184
|
+
padding: 10px 14px;
|
|
185
|
+
color: #fffaf0;
|
|
186
|
+
background: var(--charcoal);
|
|
187
|
+
font-family: var(--display-font);
|
|
188
|
+
font-size: 16px;
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.console-grid,
|
|
193
|
+
.setup-grid {
|
|
194
|
+
display: grid;
|
|
195
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
196
|
+
gap: 14px;
|
|
197
|
+
padding: 18px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.setup-grid {
|
|
201
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.operator-grid {
|
|
205
|
+
display: grid;
|
|
206
|
+
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
|
207
|
+
gap: 14px;
|
|
208
|
+
padding: 0 18px 18px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.status-card,
|
|
212
|
+
.setup-grid article,
|
|
213
|
+
.operator-card,
|
|
214
|
+
.item {
|
|
215
|
+
display: flex;
|
|
216
|
+
gap: 12px;
|
|
217
|
+
padding: 14px;
|
|
218
|
+
background: var(--panel);
|
|
219
|
+
border: 2px solid var(--charcoal);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.operator-card {
|
|
223
|
+
display: grid;
|
|
224
|
+
gap: 12px;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.operator-card.compose-card {
|
|
228
|
+
grid-template-columns: minmax(0, 1fr) 220px auto;
|
|
229
|
+
align-items: end;
|
|
230
|
+
margin: 18px 18px 0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.operator-card.compose-card .wide {
|
|
234
|
+
grid-column: 1 / -1;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.status-card h3,
|
|
238
|
+
.setup-grid h3,
|
|
239
|
+
.operator-card h3,
|
|
240
|
+
.item h3 {
|
|
241
|
+
margin: 0 0 5px;
|
|
242
|
+
font-family: var(--display-font);
|
|
243
|
+
font-size: 23px;
|
|
244
|
+
font-weight: 700;
|
|
245
|
+
line-height: 1;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.status-card p,
|
|
249
|
+
.operator-card p,
|
|
250
|
+
.item p {
|
|
251
|
+
margin: 0;
|
|
252
|
+
color: var(--muted);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.form-grid {
|
|
256
|
+
display: grid;
|
|
257
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
258
|
+
gap: 10px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
label {
|
|
262
|
+
display: grid;
|
|
263
|
+
gap: 5px;
|
|
264
|
+
color: var(--muted);
|
|
265
|
+
font-family: var(--display-font);
|
|
266
|
+
font-size: 13px;
|
|
267
|
+
font-weight: 700;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
input,
|
|
271
|
+
select,
|
|
272
|
+
textarea {
|
|
273
|
+
width: 100%;
|
|
274
|
+
min-height: 38px;
|
|
275
|
+
padding: 8px 10px;
|
|
276
|
+
color: var(--ink);
|
|
277
|
+
background: #fff8ea;
|
|
278
|
+
border: 2px solid var(--charcoal);
|
|
279
|
+
border-radius: 0;
|
|
280
|
+
font: 16px var(--body-font);
|
|
281
|
+
letter-spacing: 0;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
textarea {
|
|
285
|
+
resize: vertical;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.button-row {
|
|
289
|
+
display: flex;
|
|
290
|
+
flex-wrap: wrap;
|
|
291
|
+
gap: 8px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
button {
|
|
295
|
+
min-height: 38px;
|
|
296
|
+
padding: 0 14px;
|
|
297
|
+
color: var(--ink);
|
|
298
|
+
background: var(--paper-dark);
|
|
299
|
+
border: 2px solid var(--charcoal);
|
|
300
|
+
box-shadow: 3px 3px 0 var(--charcoal);
|
|
301
|
+
cursor: pointer;
|
|
302
|
+
font-family: var(--display-font);
|
|
303
|
+
font-size: 15px;
|
|
304
|
+
font-weight: 700;
|
|
305
|
+
letter-spacing: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
button:hover {
|
|
309
|
+
transform: translate(1px, 1px);
|
|
310
|
+
box-shadow: 2px 2px 0 var(--charcoal);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.light {
|
|
314
|
+
flex: 0 0 auto;
|
|
315
|
+
width: 16px;
|
|
316
|
+
height: 16px;
|
|
317
|
+
margin-top: 4px;
|
|
318
|
+
background: var(--yellow);
|
|
319
|
+
border: 2px solid var(--charcoal);
|
|
320
|
+
border-radius: 999px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.light.online {
|
|
324
|
+
background: var(--green);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.terminal,
|
|
328
|
+
pre {
|
|
329
|
+
margin: 0 18px 18px;
|
|
330
|
+
padding: 14px;
|
|
331
|
+
color: #d8f5d3;
|
|
332
|
+
background: #141512;
|
|
333
|
+
border: 2px solid var(--charcoal);
|
|
334
|
+
overflow-x: auto;
|
|
335
|
+
font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.operator-card pre {
|
|
339
|
+
margin: 0;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.list {
|
|
343
|
+
display: grid;
|
|
344
|
+
gap: 12px;
|
|
345
|
+
padding: 18px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.dense .item {
|
|
349
|
+
padding: 10px 12px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.is-hidden {
|
|
353
|
+
display: none;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
@media (max-width: 1000px) {
|
|
357
|
+
.hero-copy h2 {
|
|
358
|
+
font-size: 54px;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.rainbow {
|
|
362
|
+
right: -375px;
|
|
363
|
+
bottom: -355px;
|
|
364
|
+
width: 880px;
|
|
365
|
+
height: 510px;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
@media (max-width: 760px) {
|
|
370
|
+
.app-shell {
|
|
371
|
+
padding-top: 18px;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.hero {
|
|
375
|
+
min-height: 700px;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.service-badge {
|
|
379
|
+
align-items: center;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.mark {
|
|
383
|
+
width: 62px;
|
|
384
|
+
height: 54px;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.service-badge h1 {
|
|
388
|
+
font-size: 33px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.service-badge p {
|
|
392
|
+
font-size: 16px;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.hero-copy {
|
|
396
|
+
margin-top: 58px;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.hero-copy h2 {
|
|
400
|
+
max-width: 100%;
|
|
401
|
+
font-size: 45px;
|
|
402
|
+
line-height: 1.02;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.rainbow {
|
|
406
|
+
right: -320px;
|
|
407
|
+
bottom: -320px;
|
|
408
|
+
width: 760px;
|
|
409
|
+
height: 420px;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.console-grid,
|
|
413
|
+
.operator-grid,
|
|
414
|
+
.setup-grid {
|
|
415
|
+
grid-template-columns: 1fr;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.operator-card.compose-card {
|
|
419
|
+
grid-template-columns: 1fr;
|
|
420
|
+
}
|
|
421
|
+
}
|