-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (243 loc) · 12 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<link href="lib/fontawesome-5.1.0/css/all.css" rel="stylesheet">
<link href="lib/hamburgers/hamburgers.min.css" rel="stylesheet">
<link href="css/hexagons.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" />
<link rel="icon" href="img/icon.png" type="image/png">
<title>Memer | Meme Generator</title>
</head>
<body class="flex column" onload="initPage()" onresize="renderMeme()">
<!-- Opacity cover when side-nav menu is open -->
<div class="menu-opacity" onclick="toggleMenu()"></div>
<!-- Navigation bar -->
<header>
<nav class="container flex space-between align-items-center">
<div class="logo flex" onclick="location.reload()">Memer</div>
<div class="btn-toggle-menu hamburger hamburger--collapse" type="button" onclick="toggleMenu()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
<ul class="main-menu clean-list">
<li>
<a href="#" onclick="toShowGallery(); toggleMenu()">Gallery</a>
</li>
<li>
<a href="#" onclick="smoothScroll('about-us', event); toggleMenu()">About</a>
</li>
<li>
<a href="#" onclick="smoothScroll('contact', event); toggleMenu()">Get In Touch</a>
</li>
</ul>
</nav>
</header>
<main class="flex column">
<!-- Display & Search Memes -->
<section class="container gallery-wrapper gallery-wrapper-open">
<div class="keywords-display flex space-evenly align-items-center"></div>
<section class="search-keywords upload-image flex column align-items-center">
<span class="flex">
<input type="search" class="search-imgs" list="keywords" onkeyup="searchImgs(this.value)" />
<datalist id="keywords"></datalist>
<button type="button" class="btn-show" onclick="renderImgGallery()">Show all</button>
</span>
<input type="file" name="image" onchange="onFileInputChange(event)" />
</section>
<div class="no-result"></div>
<ul class="gallery clean-list" id="hexGrid"></ul>
</section>
<p class="font-charge">.</p>
<!-- Meme Editor -->
<section class="container meme-editor-wrapper">
<div class="meme-editor flex align-items-center">
<section class="meme-canvas flex column align-items-center">
<canvas>
Your browser does not support HTML5 Canvas
</canvas>
</section>
<!-- Text Editor -->
<section class="txt-editor flex column">
<!-- <div class="back-to-gallery">
<button class="btn-edit back-gallery" onclick="toggleSections()">Back to gallery</button>
</div> -->
<ul class="control-box clean-list flex">
<li class="input-wrapper">
<span>
<input class="user-txt-box" type="text" placeholder="Insert text..." onkeyup="readUserLine(this.value)" />
</span>
</li>
<!-- enlarge text -->
<li>
<button class="btn-edit bigger-txt" onclick="readUserTxtSize('plus')">A</button>
</li>
<li>
<button class="btn-edit smaller-txt" onclick="readUserTxtSize('minus')">A</button>
</li>
</ul>
<ul class="control-box clean-list flex">
<li>
<input class="btn-edit user-txt-color jscolor" onchange="readUserTxtColor(this.value)">
</li>
<li>
<button class="btn-edit txt-shadow" onclick="readUserTxtShadow()">A</button>
</li>
<li>
<button class="btn-edit txt-outline btn-active" onclick="readUserTxtOutline()">A</button>
</li>
<li>
<select class="user-txt-font" onchange="readUserTxtFont(this.value)">
<option value="Impact">Impact</option>
<option value="Arial">Arial</option>
<option value="Sans-Serif">Sans-Serif</option>
</select>
</li>
<!-- Move text -->
<li class="dropdown" onclick="toggleDropdown()">
<span class="dropdown-wrapper">
<button class="btn-edit btn-align">
<i class="fas fa-align-center"></i>
</button>
</span>
<ul class="dropdown-list flex clean-list txt-align">
<li>
<button class="btn-edit btn-align" value="center" onclick="readUserTxtAlign(this.value)">
<i class="dropdown-link fas fa-align-center"></i>
</button>
</li>
<li>
<button class="btn-edit btn-align" value="left" onclick="readUserTxtAlign(this.value)">
<i class="dropdown-link fas fa-align-left"></i>
</button>
</li>
<li>
<button class="btn-edit btn-align" value="right" onclick="readUserTxtAlign(this.value)">
<i class="dropdown-link fas fa-align-right"></i>
</button>
</li>
</ul>
</li>
<li>
<button class="btn-edit" onclick="readUserTxtHeightOnCanvas('up')">▲</button>
</li>
<li>
<button class="btn-edit" onclick="readUserTxtHeightOnCanvas('down')">▼</button>
</li>
</ul>
<ul class="control-box share-list clean-list flex">
<li>
<button class="btn-edit btn-control-lines add-line" onclick="addLine()">+</button>
</li>
<li>
<button class="btn-edit btn-control-lines next-line" onclick="updateLine()">Line ➤</button>
</li>
<li>
<button class="btn-edit btn-control-lines delete-line" onclick="deleteLine()">🗑</button>
</li>
<li>
<button class="btn-share btn-download">
<a onclick="downloadMeme()" id="download">Download</a>
</button>
</li>
<li>
<form action="" method="POST" enctype="multipart/form-data" onsubmit="uploadImg(this, event)">
<input name="img" id="imgData" type="hidden" />
<button type="submit" class="btn-share btn-publish">Publish</button>
</form>
</li>
<li>
<button class="share-container">
</button>
</li>
</ul>
</section>
</div>
</section>
</main>
<section class="about-wrapper" id="about-us">
<div class="about container flex">
<div class="team-member flex align-items-center">
<div class="member-img">
<img src="img/team/kareen.jpg" />
</div>
<div class="member-data flex column space-between">
<h2 class="member-name">Kareen Ben Ari</h2>
<h4 class="member-title">Full Stack Developer</h4>
<p>
28 year old web programming student based in Tel Aviv. Learning the ropes and enthusiastic about memes.
</p>
<ul class="social-links clean-list flex">
<li>
<a href="https://www.facebook.com/kareenb">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/kareen-ben-ari-b76a30159/">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="mailto:kareenb89@gmail.com">
<i class="fas fa-envelope"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="team-member flex align-items-center">
<div class="member-img">
<img src="img/team/shlomi.jpg" />
</div>
<div class="member-data flex column space-between">
<h2 class="member-name">Shlomi Hafif</h2>
<h4 class="member-title">Full Stack Developer</h4>
<p>
24 years old web programming student from Rishon Lezion. A huge fan of Muki, Puki and the mighty Baba.
</p>
<ul class="social-links clean-list flex">
<li>
<a href="https://www.facebook.com/ShlomiHafif">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/shlomi-hafif-452304aa/">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="mailto:shlomixg@gmail.com">
<i class="fas fa-envelope"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="contact-wrapper" id="contact">
<section class="contact container">
<h2>Get In Touch</h2>
<h3>Fill the form and send us a message:</h3>
<form class="contact-form flex column">
<input class="user-name" type="text" placeholder="Name" />
<input class="msg-subj" type="text" placeholder="Subject" />
<textarea type="text" placeholder="Write your message here..."></textarea>
<button onclick="sendUserMsg()">Send</button>
</form>
</section>
</section>
<!-- Scripts -->
<script src="lib/js-color-picker/jscolor.js"></script>
<script src="js/utils.js"></script>
<script src="js/meme-service.js"></script>
<script src="js/keywords-service.js"></script>
<script src="js/editor-controller.js"></script>
<script src="js/upload-service.js"></script>
<script src="js/main.js"></script>
</body>
</html>