systemprompt_cli/commands/cloud/templates/
checkout.rs1pub const WAITING_HTML: &str = r#"<!DOCTYPE html>
7<html>
8<head>
9 <title>Provisioning in Progress - systemprompt.io</title>
10 <style>
11 body {
12 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 min-height: 100vh;
17 margin: 0;
18 background: #0a0a0a;
19 color: white;
20 }
21 .container {
22 text-align: center;
23 padding: 48px;
24 max-width: 500px;
25 }
26 .spinner {
27 width: 48px;
28 height: 48px;
29 border: 4px solid #27272a;
30 border-top-color: #FF9A2F;
31 border-radius: 50%;
32 animation: spin 1s linear infinite;
33 margin: 0 auto 24px;
34 }
35 @keyframes spin {
36 to { transform: rotate(360deg); }
37 }
38 h1 {
39 margin: 0 0 12px;
40 font-size: 1.5em;
41 font-weight: 600;
42 }
43 p {
44 margin: 0 0 8px;
45 color: #a1a1aa;
46 font-size: 0.95em;
47 }
48 .highlight {
49 color: #FF9A2F;
50 }
51 </style>
52</head>
53<body>
54 <div class="container">
55 <div class="spinner"></div>
56 <h1>Payment Confirmed!</h1>
57 <p>Your tenant is being provisioned...</p>
58 <p class="highlight">Check your terminal for progress.</p>
59 <p style="margin-top: 16px; font-size: 0.85em;">You can close this window.</p>
60 </div>
61</body>
62</html>"#;
63
64pub const SUCCESS_HTML: &str = r#"<!DOCTYPE html>
65<html>
66<head>
67 <title>Purchase Successful - systemprompt.io</title>
68 <style>
69 body {
70 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
71 display: flex;
72 justify-content: center;
73 align-items: center;
74 min-height: 100vh;
75 margin: 0;
76 background: #0a0a0a;
77 color: white;
78 }
79 .container {
80 text-align: center;
81 padding: 48px;
82 max-width: 500px;
83 }
84 .success-icon {
85 width: 64px;
86 height: 64px;
87 border-radius: 50%;
88 background: #22c55e;
89 display: flex;
90 align-items: center;
91 justify-content: center;
92 margin: 0 auto 24px;
93 font-size: 32px;
94 }
95 .spinner {
96 width: 24px;
97 height: 24px;
98 border: 3px solid #27272a;
99 border-top-color: #FF9A2F;
100 border-radius: 50%;
101 animation: spin 1s linear infinite;
102 margin: 0 auto 16px;
103 }
104 @keyframes spin {
105 to { transform: rotate(360deg); }
106 }
107 h1 {
108 margin: 0 0 12px;
109 font-size: 1.5em;
110 font-weight: 600;
111 }
112 p {
113 margin: 0 0 8px;
114 color: #a1a1aa;
115 font-size: 0.95em;
116 }
117 .status-container {
118 margin-top: 24px;
119 padding: 24px;
120 background: #18181b;
121 border-radius: 12px;
122 }
123 .status-message {
124 color: #FF9A2F;
125 font-weight: 500;
126 }
127 .ready-container {
128 margin-top: 16px;
129 }
130 .url-link {
131 color: #FF9A2F;
132 text-decoration: none;
133 word-break: break-all;
134 }
135 .url-link:hover {
136 text-decoration: underline;
137 }
138 .done-message {
139 margin-top: 16px;
140 color: #71717a;
141 font-size: 0.85em;
142 }
143 </style>
144</head>
145<body>
146 <div class="container">
147 <div class="success-icon">✓</div>
148 <h1>Purchase Successful!</h1>
149 <p>Your tenant is being provisioned...</p>
150
151 <div class="status-container" id="status-container">
152 <div class="spinner" id="spinner"></div>
153 <p class="status-message" id="status-message">Initializing...</p>
154 </div>
155 </div>
156
157 <script>
158 const tenantId = '{{TENANT_ID}}';
159 const pollInterval = 2000;
160
161 async function checkStatus() {
162 try {
163 const response = await fetch(`/status/${tenantId}`);
164 const data = await response.json();
165
166 const statusMessage = document.getElementById('status-message');
167 const spinner = document.getElementById('spinner');
168 const statusContainer = document.getElementById('status-container');
169
170 if (data.status === 'ready' || data.status === 'deployed') {
171 spinner.style.display = 'none';
172 statusContainer.innerHTML = `
173 <div class="ready-container">
174 <p style="color: #22c55e; font-weight: 600; margin-bottom: 12px;">Tenant Ready!</p>
175 ${data.app_url ? `<p>URL: <a href="${data.app_url}" class="url-link" target="_blank">${data.app_url}</a></p>` : ''}
176 <p class="done-message">You can close this window and return to the terminal.</p>
177 </div>
178 `;
179 } else if (data.status === 'error' || data.status === 'failed') {
180 spinner.style.display = 'none';
181 statusMessage.style.color = '#ef4444';
182 statusMessage.textContent = data.message || 'Provisioning failed';
183 } else {
184 statusMessage.textContent = data.message || 'Provisioning...';
185 setTimeout(checkStatus, pollInterval);
186 }
187 } catch (e) {
188 console.error('Status check failed:', e);
189 setTimeout(checkStatus, pollInterval);
190 }
191 }
192
193 checkStatus();
194 </script>
195</body>
196</html>"#;
197
198pub const ERROR_HTML: &str = r#"<!DOCTYPE html>
199<html>
200<head>
201 <title>Checkout Failed - systemprompt.io</title>
202 <style>
203 body {
204 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
205 display: flex;
206 justify-content: center;
207 align-items: center;
208 min-height: 100vh;
209 margin: 0;
210 background: #0a0a0a;
211 color: white;
212 }
213 .container {
214 text-align: center;
215 padding: 48px;
216 max-width: 400px;
217 }
218 .error-icon {
219 width: 64px;
220 height: 64px;
221 border-radius: 50%;
222 background: #ef4444;
223 display: flex;
224 align-items: center;
225 justify-content: center;
226 margin: 0 auto 24px;
227 font-size: 32px;
228 }
229 h1 {
230 margin: 0 0 12px;
231 font-size: 1.5em;
232 font-weight: 600;
233 }
234 p {
235 margin: 0;
236 color: #a1a1aa;
237 font-size: 0.95em;
238 }
239 </style>
240</head>
241<body>
242 <div class="container">
243 <div class="error-icon">✗</div>
244 <h1>Checkout Failed</h1>
245 <p>Please try again or contact support.</p>
246 </div>
247</body>
248</html>"#;