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