Skip to content

Commit f70b6c2

Browse files
CodeSchwertCodeSchwert
committed
feat: add mock login prompt page for poc
1 parent 77b3623 commit f70b6c2

File tree

4 files changed

+1004
-0
lines changed

4 files changed

+1004
-0
lines changed

‎WebviewTestPage/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎WebviewTestPage/index.html‎

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
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>Immutable Passport Login</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16+
background: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
17+
color: #ffffff;
18+
min-height: 100vh;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
padding: 20px;
23+
}
24+
25+
.login-container {
26+
background: #1F2937;
27+
border-radius: 24px;
28+
padding: 32px;
29+
max-width: 380px;
30+
width: 100%;
31+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32+
}
33+
34+
.header {
35+
text-align: center;
36+
margin-bottom: 32px;
37+
}
38+
39+
.header h1 {
40+
font-size: 24px;
41+
font-weight: 600;
42+
color: #ffffff;
43+
margin-bottom: 8px;
44+
}
45+
46+
.header p {
47+
color: #9CA3AF;
48+
font-size: 14px;
49+
margin-bottom: 4px;
50+
}
51+
52+
.header .subtitle {
53+
color: #8B5CF6;
54+
font-size: 14px;
55+
font-weight: 500;
56+
}
57+
58+
.social-buttons {
59+
display: flex;
60+
justify-content: center;
61+
gap: 16px;
62+
margin-bottom: 24px;
63+
}
64+
65+
.social-btn {
66+
width: 56px;
67+
height: 56px;
68+
border: none;
69+
border-radius: 50%;
70+
cursor: pointer;
71+
transition: all 0.2s ease;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
font-size: 20px;
76+
font-weight: 600;
77+
}
78+
79+
.social-btn:hover {
80+
transform: translateY(-2px);
81+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
82+
}
83+
84+
.google-btn {
85+
background: #ffffff;
86+
color: #4285F4;
87+
}
88+
89+
.google-btn:hover {
90+
background: #f8f9fa;
91+
}
92+
93+
.apple-btn {
94+
background: #ffffff;
95+
color: #000000;
96+
}
97+
98+
.apple-btn:hover {
99+
background: #f8f9fa;
100+
}
101+
102+
.facebook-btn {
103+
background: #ffffff;
104+
color: #1877f2;
105+
}
106+
107+
.facebook-btn:hover {
108+
background: #f8f9fa;
109+
}
110+
111+
.divider {
112+
text-align: center;
113+
margin: 24px 0;
114+
color: #9CA3AF;
115+
font-size: 14px;
116+
}
117+
118+
.email-form {
119+
margin-bottom: 24px;
120+
}
121+
122+
.form-group {
123+
margin-bottom: 16px;
124+
}
125+
126+
.form-group label {
127+
display: block;
128+
margin-bottom: 6px;
129+
font-size: 14px;
130+
font-weight: 500;
131+
color: rgba(255, 255, 255, 0.9);
132+
}
133+
134+
.email-input-container {
135+
position: relative;
136+
margin-bottom: 20px;
137+
}
138+
139+
.form-group input {
140+
width: 100%;
141+
padding: 16px 48px 16px 16px;
142+
border: 1px solid #374151;
143+
border-radius: 12px;
144+
background: #374151;
145+
color: #ffffff;
146+
font-size: 16px;
147+
transition: all 0.2s ease;
148+
}
149+
150+
.form-group input:focus {
151+
outline: none;
152+
border-color: #8B5CF6;
153+
background: #4B5563;
154+
}
155+
156+
.form-group input::placeholder {
157+
color: #9CA3AF;
158+
}
159+
160+
.submit-btn {
161+
position: absolute;
162+
right: 8px;
163+
top: 50%;
164+
transform: translateY(-50%);
165+
width: 32px;
166+
height: 32px;
167+
background: #8B5CF6;
168+
color: #ffffff;
169+
border: none;
170+
border-radius: 8px;
171+
font-size: 16px;
172+
cursor: pointer;
173+
transition: all 0.2s ease;
174+
display: flex;
175+
align-items: center;
176+
justify-content: center;
177+
}
178+
179+
.submit-btn:hover {
180+
background: #7C3AED;
181+
}
182+
183+
.submit-btn:disabled {
184+
opacity: 0.6;
185+
cursor: not-allowed;
186+
transform: none;
187+
}
188+
189+
.terms-section {
190+
margin: 24px 0 16px 0;
191+
text-align: center;
192+
}
193+
194+
.terms-text {
195+
font-size: 12px;
196+
color: #9CA3AF;
197+
line-height: 1.4;
198+
}
199+
200+
.terms-link {
201+
color: #8B5CF6;
202+
text-decoration: none;
203+
}
204+
205+
.terms-link:hover {
206+
text-decoration: underline;
207+
}
208+
209+
.marketing-consent {
210+
margin-top: 16px;
211+
}
212+
213+
.checkbox-group {
214+
display: flex;
215+
align-items: flex-start;
216+
gap: 12px;
217+
}
218+
219+
.checkbox-group input[type="checkbox"] {
220+
width: 16px;
221+
height: 16px;
222+
margin-top: 2px;
223+
accent-color: #8B5CF6;
224+
}
225+
226+
.checkbox-group label {
227+
font-size: 12px;
228+
line-height: 1.4;
229+
color: #9CA3AF;
230+
cursor: pointer;
231+
}
232+
233+
.status-message {
234+
margin-top: 16px;
235+
padding: 12px 16px;
236+
border-radius: 8px;
237+
font-size: 14px;
238+
text-align: center;
239+
display: none;
240+
}
241+
242+
.status-message.success {
243+
background: rgba(76, 175, 80, 0.2);
244+
border: 1px solid #4caf50;
245+
color: #4caf50;
246+
}
247+
248+
.status-message.error {
249+
background: rgba(244, 67, 54, 0.2);
250+
border: 1px solid #f44336;
251+
color: #f44336;
252+
}
253+
254+
.status-message.info {
255+
background: rgba(33, 150, 243, 0.2);
256+
border: 1px solid #2196f3;
257+
color: #2196f3;
258+
}
259+
260+
/* Social icons using Unicode symbols */
261+
.social-icon {
262+
font-size: 18px;
263+
}
264+
</style>
265+
</head>
266+
<body>
267+
<div class="login-container">
268+
<div class="header">
269+
<h1>Continue to Passport Sample Application - Sandbox</h1>
270+
<p>with <span class="subtitle">Immutable Passport</span></p>
271+
</div>
272+
273+
<div class="social-buttons">
274+
<button class="social-btn google-btn" onclick="handleSocialLogin('google')" title="Continue with Google">
275+
G
276+
</button>
277+
278+
<button class="social-btn apple-btn" onclick="handleSocialLogin('apple')" title="Continue with Apple">
279+
🍎
280+
</button>
281+
282+
<button class="social-btn facebook-btn" onclick="handleSocialLogin('facebook')" title="Continue with Facebook">
283+
f
284+
</button>
285+
</div>
286+
287+
<div class="divider">
288+
<span>or</span>
289+
</div>
290+
291+
<form class="email-form" onsubmit="handleEmailLogin(event)">
292+
<div class="form-group">
293+
<div class="email-input-container">
294+
<input
295+
type="email"
296+
id="email"
297+
name="email"
298+
placeholder="Enter email address"
299+
required
300+
>
301+
<button type="submit" class="submit-btn" title="Submit">
302+
→
303+
</button>
304+
</div>
305+
</div>
306+
</form>
307+
308+
<div class="terms-section">
309+
<p class="terms-text">
310+
By continuing, you agree to our <a href="#" class="terms-link">Terms of Service</a>, and acknowledge you have understood our <a href="#" class="terms-link">Privacy Policy</a> and <a href="#" class="terms-link">Collection Statement</a>
311+
</p>
312+
</div>
313+
314+
<div class="marketing-consent">
315+
<div class="checkbox-group">
316+
<input type="checkbox" id="marketing-consent" name="marketing-consent">
317+
<label for="marketing-consent">
318+
I don't want to receive rewards, exclusive content, promos and more from Immutable
319+
</label>
320+
</div>
321+
</div>
322+
323+
<div id="status-message" class="status-message"></div>
324+
</div>
325+
326+
<script>
327+
function showStatus(message, type = 'info') {
328+
const statusElement = document.getElementById('status-message');
329+
statusElement.textContent = message;
330+
statusElement.className = `status-message ${type}`;
331+
statusElement.style.display = 'block';
332+
333+
// Auto-hide after 5 seconds
334+
setTimeout(() => {
335+
statusElement.style.display = 'none';
336+
}, 5000);
337+
}
338+
339+
function handleSocialLogin(provider) {
340+
const marketingConsent = document.getElementById('marketing-consent').checked;
341+
const timestamp = new Date().toLocaleTimeString();
342+
343+
const loginData = {
344+
"provider": provider,
345+
"email": null,
346+
"marketing_consent": marketingConsent
347+
};
348+
349+
console.log(`[${timestamp}] 🔐 Social login data:`, loginData);
350+
showStatus(`${provider.charAt(0).toUpperCase() + provider.slice(1)} login captured`, 'success');
351+
352+
// Send to Unity WebView if available
353+
if (typeof uwb !== 'undefined' && uwb.ExecuteJsMethod) {
354+
uwb.ExecuteJsMethod('HandleLoginData', JSON.stringify(loginData));
355+
}
356+
}
357+
358+
function handleEmailLogin(event) {
359+
event.preventDefault();
360+
361+
const email = document.getElementById('email').value;
362+
const marketingConsent = document.getElementById('marketing-consent').checked;
363+
const timestamp = new Date().toLocaleTimeString();
364+
365+
if (!email) {
366+
showStatus('Please enter your email address', 'error');
367+
return;
368+
}
369+
370+
const loginData = {
371+
"provider": "email",
372+
"email": email,
373+
"marketing_consent": marketingConsent
374+
};
375+
376+
console.log(`[${timestamp}] 📧 Email login data:`, loginData);
377+
showStatus('Email login captured', 'success');
378+
379+
// Send to Unity WebView if available
380+
if (typeof uwb !== 'undefined' && uwb.ExecuteJsMethod) {
381+
uwb.ExecuteJsMethod('HandleLoginData', JSON.stringify(loginData));
382+
}
383+
}
384+
385+
// Log when page loads
386+
document.addEventListener('DOMContentLoaded', function() {
387+
const loadMessage = `🚀 Immutable Passport Login page loaded at ${new Date().toLocaleTimeString()}`;
388+
console.log(loadMessage);
389+
showStatus('Login page ready', 'info');
390+
});
391+
</script>
392+
</body>
393+
</html>

0 commit comments

Comments
 (0)