-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmerge.html
166 lines (159 loc) · 5.85 KB
/
merge.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JoyWillJazz++</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"
integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I="
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body id="body-3">
<header>
<div class="top-bar">
<div class="top-bar-left">
<span class="Joy">Joy</span> <span class="Will">Will </span>
<span class="Jazz">Jazz</span> <span class="plus">➕➕</span>
</div>
<ul class="dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#0">Choose a Scan Face App</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="./index.html">Scan Your Face-alizer</a></li>
<li><a href="./Clooney.html">How Clooney Are You?</a></li>
<li><a href="./merge.html">Im-merge-ination</a></li>
</ul>
</li>
</ul>
<div class="top-bar-right">
The World's Most Interesting Face Analyzing App
</div>
</div>
</header>
<div class="card" id="clooney-card">
<div class="card-section">
<h1>Use your "im-merge-ination"!</h1>
<p>
A face analyzing app that will scan and merge a base picture's face
with a face from another picture.
</p>
</div>
</div>
<div class="row">
<div class="columns">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title"
>Directions for using JoyWillJazz++</a
>
<div class="accordion-content" data-tab-content>
<p>
It is so easy! You will need two photos that you would like to
merge. Choose one of the options below as a way to upload your
photos. The "im-merge-ination" process will take place right
before your eyes!
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"
>Upload two files from your device</a
>
<div class="accordion-content" data-tab-content>
<form>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<label for="fileIMG">Your base image here!</label>
<input
type="file"
id="fileIMG"
accept="image/png, image/jpeg"
/>
<label for="fileIMG2"
>Merge a face into base image here!</label
>
<input
type="file"
id="fileIMG2"
accept="image/png, image/jpeg"
/>
<a
class="button radius bordered shadow primary"
id="fileSubmit"
>Submit</a
>
</div>
</div>
</div>
</form>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"
>Paste your links from the internet</a
>
<div class="accordion-content" data-tab-content>
<form>
<div class="medium-6 cell">
<label>Your base image link below! </label>
<input
type="text"
id="imgURL"
placeholder="Input your base img link here!"
/>
<label>Your merging image link below! </label>
<input
type="text"
id="imgURL2"
placeholder="Input your merged img link here!"
/>
<a href="#" class="button primary" id="submitButton"
>Submit</a
>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-section">
<div class="grid-container">
<div class="cell medium-12 error"></div>
<div class="cell medium-12 error2"></div>
<div id="mergedID" class="align-center"></div>
<div class="grid-x grid-margin-x align-center imgdisplay"></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mobile-bottom-bar">
<span class="footer-text center">JoyWillJazz++</span>
<a
href="https://unsplash.com/photos/bvyREnPmsi0?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink"
class="footer-link"
>
<span class="footer-text">Background Photo by Luis Villasmil </span>
</a>
</footer>
<!-- Script Below this line -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"
integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o="
crossorigin="anonymous"
></script>
<script src="./assets/js/merge.js"></script>
</body>
</html>