-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (112 loc) · 6.39 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>B2B SaaS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.png" />
<link rel="stylesheet" type="text/css" href="https://cdn.hello.coop/css/hello-btn.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="https://cdn.hello.coop/js/hello-btn.js"></script>
</head>
<body class="bg-no-repeat bg-cover bg-center">
<div id="load-spinner" class="spinner" style="display: block;"></div>
<div id="modal-container" class="fixed w-screen h-screen hidden items-center justify-center z-50">
<div id="modal" class="p-4 rounded-md w-96 z-50 flex relative">
<div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-full inline-flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="flex flex-col ml-4">
<h4 class="font-medium">Error</h4>
<button id="close-modal-btn" class="absolute right-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="text-sm opacity-80">
<p id="error-container" class="hidden"><span id="error"></span></p>
<p id="error-description-container" class="mt-2 hidden">Error description: <span
id="error-description"></span></p>
</div>
</div>
</div>
<div class="fixed w-screen h-screen z-40 flex items-center justify-center bg-black bg-opacity-60"></div>
</div>
<div id="login-page" style="visibility: hidden; position: absolute;"
class="px-10 py-16 h-auto flex flex-col justify-center items-center">
<div class="bg-black w-full z-10 h-screen fixed inset-0 bg-opacity-50" aria-hidden="true"></div>
<section id="login-card" class="relative z-40 bg-white flex flex-col rounded-md px-6 pt-4 pb-6 text-center"
style="width: 26rem; margin-bottom: 140px;">
<div class="flex items-center justify-center">
<img src="/assets/logo.png" alt="b2b saas demo" class="h-8" />
</div>
<p class="text-sm mt-4 text-gray-light">
This demo app shows how you can request user information managed by an organization with Hellō.
</p>
<div id="requires-container" class="text-left rounded-md py-2 px-4 my-6 mx-auto">
<div class="flex space-x-3 items-center">
<img src="/assets/managed.png" class="h-14 managed-logo" />
<span class="font-medium text-sm text-gray-light">
B2B SaaS requires logging in with an account from an employer, school, or other organization.
</span>
</div>
<span class="font-medium text-sm text-gray-light mt-3 block">It requests the following data:</span>
<ul class="ml-4 my-2 space-y-2 list-disc list-inside text-sm text-gray-light">
<li>Full Name</li>
<li>Verified Managed Email</li>
<li>Profile Picture</li>
</ul>
</div>
<div class="hello-container">
<button id="login-btn" class="hello-btn hello-btn-black-on-light w-full"></button>
</div>
</section>
</div>
<div id="profile-page" class="h-screen" style="display: none;">
<header class="h-14 shadow-medium fixed w-full z-40">
<div class="h-full flex items-center justify-between container px-6 sm:max-w-5xl mx-auto">
<div class="flex items-center justify-center">
<img src="/assets/logo.png" alt="b2b saas demo" class="h-8" />
</div>
<button id="logout-btn" class="text-sm font-semibold">Log out</button>
</div>
</header>
<main id="profile-page-content" style="display: none;" class="container px-6 sm:max-w-5xl mx-auto pt-20 pb-20">
<div class="relative flex flex-col items-start sm:items-center">
<img src="/assets/bg.jpg" class="h-36 sm:h-64 w-full rounded-md object-cover" />
<div id="picture"
class="shadow-medium border-4 border-white h-20 w-20 sm:h-36 sm:w-36 rounded-md -mt-12 sm:-mt-16 ml-4 sm:ml-0 bg-gray-200 bg-no-repeat bg-cover bg-center">
</div>
</div>
<div class="flex flex-col space-y-8 md:space-y-0 md:flex-row md:space-x-8 mt-10">
<div class="card w-full p-4 rounded-md shadow-medium text-lg font-medium -mt-6 sm:-mt-24">
<div class="space-y-4">
<div>
<h3 class="opacity-60">Full Name</h3>
<h2 class="opacity-80 ml-4" id="full-name"></h2>
</div>
<div>
<h3 class="opacity-60">Email</h3>
<h2 class="opacity-80 ml-4" id="email"></h2>
</div>
<div id="org-container">
<h3 class="opacity-60">Organization</h3>
<h2 class="opacity-80 ml-4 mt-2" id="org-domain"></h2>
<h2 class="opacity-80 ml-4 mt-2" id="org-id"></h2>
</div>
</div>
</div>
</div>
<button id="invite-btn" class="mt-6 hello-btn hello-btn-white-and-static" style="padding: 10px 12px;"
data-label="ō Invite others to B2B SaaS Demo"></button>
</main>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>