-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
129 lines (117 loc) · 6.68 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
124
125
126
127
128
129
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Greenfield Fitness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://cdn.hello.coop/images/greenfield-logo.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">
<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>
</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="https://cdn.hello.coop/images/greenfield-logo.png" alt="greenfield fitness" class="h-12" />
<span class="text-2xl ml-2 font-medium">Greenfield Fitness</span>
</div>
<p class="text-sm mt-2 text-gray-light">
This is a demonstration app for you to experience how an app could use Hellō for registration.
</p>
<div class="flex items-center justify-around my-4">
<img src="/1.png" class="h-14" />
<img src="/2.png" class="h-14" />
<img src="/3.png" class="h-14" />
<img src="/4.png" class="h-14" />
</div>
<div id="requires-container" class="text-left rounded-md py-2 px-4 mb-6 w-3/4 mx-auto">
<span class="font-medium text-sm text-gray-light">Greenfield Fitness requires:</span>
<ul class="ml-4 my-2 space-y-2 list-disc list-inside text-sm text-gray-light">
<li>Full Name</li>
<li>Preferred Name</li>
<li>Verified 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>
<button class="hello-about"></button>
</div>
</section>
</div>
<div id="profile-page" class="h-screen" style="display: none;">
<header class="h-12 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="https://cdn.hello.coop/images/greenfield-logo.png" alt="greenfield fitness" class="h-9" />
<span class="text-xl ml-2 font-medium">Greenfield Fitness</span>
</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="/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>
<h1 class="greeting absolute text-xl sm:text-2xl font-medium ml-28 sm:ml-0">Hellō <span
id="preferred-name"></span>!</h1>
<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">
<div class="space-y-4">
<div>
<h3 class="opacity-60">Full Name</h3>
<h2 class="opacity-80" id="full-name"></h2>
</div>
<div>
<h3 class="opacity-60">Email</h3>
<h2 class="opacity-80" id="email"></h2>
</div>
</div>
</div>
</div>
<div class="flex justify-between flex-wrap gap-x-2">
<button id="update-btn" class="mt-16 hello-btn hello-btn-white-and-static"
style="padding: 10px 12px; margin-top: 10px;"
data-label="ō Update Profile with Hellō"></button>
<button id="invite-btn" class="mt-16 hello-btn hello-btn-white-and-static"
style="padding: 10px 12px; margin-top: 10px;"
data-label="ō Invite others to Greenfield Fitness"></button>
</div>
</main>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>