-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (156 loc) · 9.83 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JN8SZ25FF5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JN8SZ25FF5');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<meta name="title" content="HandPickd.">
<meta name="description" content="Find nail polishes matching any color!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://handpickd.app/">
<meta property="og:title" content="HandPickd.">
<meta property="og:description" content="Find nail polishes matching any color!">
<meta property="og:image" content="https://handpickd.app/static/img/meta.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="http://handpickd.app/">
<meta property="twitter:title" content="HandPickd.">
<meta property="twitter:description" content="Find nail polishes matching any color!">
<meta property="twitter:image" content="https://handpickd.app/static/img/meta.png">
<title>HandPickd</title>
<link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Pickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/77d041732e.js" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css" />
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<div class="container">
<div class="modal" id="socialModal" tabindex="-1" aria-labelledby="socialModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center">Share HandPickd</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body mx-auto p-5">
<a target="_blank" rel="noopener" href="https://www.facebook.com/sharer.php?u=https://handpickd.app" class="social-button share-facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
<a target="_blank" rel="noopener" href="https://reddit.com/submit?url=https://handpickd.app&title=HandPickd%20-%20Find%20nail%20polish%20matching%20any%20color" class="social-button share-reddit"><i class="fab fa-reddit-alien"></i> Reddit</a>
<a target="_blank" rel="noopener" href="https://twitter.com/share?url=https://handpickd.app&text=Find%20nail%20polishes%20matching%20any%20color%20with%20HandPickd!&via=HandPickdApp" class="social-button share-twitter"><i class="fab fa-twitter"></i> Twitter</a>
<a target="_blank" rel="noopener" href="https://www.linkedin.com/shareArticle?url=https://handpickd.app&title=Find%20nail%20polishes%20matching%20any%20color%20with%20HandPickd!" class="social-button share-linkedin"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="header">
<a href="https://handpickd.app" style="text-decoration: none;">
<h1 id="logo1">HandPickd.</h1>
<h1 id="logo2" style="display: none;">HandPickd.</h1>
</a>
<p style="display: inline-flex;">Every shade at your fingertips!</p>
<p id="switchToPicker" class="stageSwitchBtn btn btn-header" style="display: none;">Switch to Color Picker</p>
<p id="switchToImage" class="stageSwitchBtn btn btn-header" style="display: none;">Switch to Eyedropper</p>
</div>
<div id="main" class="main text-center">
<!-- Stage Zero -->
<div id="stageZero">
<h5 id="subtitle1" class="mb-4">Meet your personal nail polish shopper 💅</h5>
<p id="subtitle2" class="mb-5 mx-auto">Turn any color into a personalized catalog of nail polishes
with the touch of a button.
</p>
<p id="getStarted" class="btn btn-lg btn-rainbow">Get Started</p>
</div>
<!-- Stage One: choose picker or image -->
<div id="stageOne" style="display: none;">
<h5 class="my-5">Let's find your color! 🎨</h5>
<div class="row v-h-center">
<div class="col-md-4">
<div id="btnPicker" class="card btn btn-card">
<div class="card-body v-h-center">
<p><b>Color Picker</b><br>The whole rainbow</p>
</div>
</div>
</div>
<div class="col-md-4">
<div id="btnImage" class="card btn btn-card cursor-disabled">
<div class="card-body v-h-center">
<p id="eyedropperEnabled"><b>Eyedropper</b><br>Choose from image</p>
<p id="eyedropperDisabled"><b>Eyedropper</b><br>Coming soon to mobile!</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stage Two (picker) -->
<div id="stageTwoPicker" style="display: none;">
<div class="row">
<div class="col-md-4 v-h-center">
<div class="card-body">
<h5 class="mb-3">Select a color</h5>
<div class="color-picker"></div>
</div>
</div>
<div class="col-md-8" style="text-align: left;">
<div id="productCatalog1" class="productCatalog scrollContent container mt-5 pt-3" style="border: 1px solid lightgray; border-radius: 5px;"></div>
</div>
</div>
</div>
<!-- Stage Two (image) -->
<div id="stageTwoImage" style="display: none;">
<div class="row">
<div class="col-md-5">
<div class="card-body">
<div id="filetypeAlert" class="alert alert-danger mt-5" style="display: none;">Oops! Make sure to upload an image!</div>
<h5 id="stageTwoImageText" class="mt-5 mb-3">Upload an image</h5>
<input class="form-control w-75 mx-auto" type="file" id="formFile">
<canvas id="canvas" style="display: none;" class="mt-4 mx-auto">Your web browser does not support HTML5 canvas.</canvas>
<p id="canvasCaption" class="text-center text-muted mt-4" style="display: none;">Click and drag to find the perfect color!</p>
</div>
</div>
<div class="col-md-7 v-h-center mx-auto">
<div id="productCatalog2" class="productCatalog scrollContent container mt-5 pt-3" style="border: 1px solid lightgray; border-radius: 5px;"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted mt-auto py-5 v-h-center" style="height: 100px; position: sticky;">
<div class="container">
<p id="share" class="likeLink" style="display: inline-block;"><i class="fas fa-share-square"></i> Share</p>
</div>
</footer>
<img src="static/img/meta.png" style="display: none;">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="static/js/main.js"></script>
<script src="static/js/pickr.js"></script>
<script src="static/js/canvas.js"></script>
<script>
document.getElementById('share').addEventListener('click', async () => {
let modal = new bootstrap.Modal(document.getElementById('socialModal'));
modal.show();
});
</script>
</body>
</html>