-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (150 loc) · 8.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>MemeGen</title>
</head>
<body onload="onInit()">
<div class="screen-menu" onclick="onToggleMenu()"></div>
<div class="screen-modal" onclick="onToggleModal()"></div>
<div class="modal-container">
<div class="modal flex column align-center center">
<div class="modal-content">
Meme Saved
</div>
</div>
</div>
<div class="about-modal-container">
<div class="modal flex column align-center ">
<div class="modal-title"><img class="logo-img" src="images/logo.png" alt=""></div>
<div class="modal-content">
<p class="p1"> Welcome to the most fun Meme Generator online, it was created by <span class="bold">Shon
Shinkarenko</span></p>
<p class="p2">Some of features of this Meme Generator are:</p>
<p>
<ul>
<li>Creating Memes with provided photos or uploading your photo</li>
<li>Customize your meme with colored text</li>
<li>Customize your meme with different fonts</li>
<li>Changing the size of the text</li>
<li>Drag&drop your text anywhere</li>
<li>Share, download and save your meme (All borders around the text will dissapear)</li>
</ul>
</p>
<i onclick="onToggleModal()" class="close-icon fas fa-times"></i>
</div>
</div>
</div>
<div class="page-container flex column center">
<header class="flex align-center ">
<div class="header-content flex space-between align-center main-layout">
<div class="logo">
<a href=""><img class="logo-img" src="images/logo.png" alt=""></a>
</div>
<ul class="nav main-nav main-layout clean-list flex flex-end">
<li><a href="">Gallery</a></li>
<li><a onclick="onRenderSavedMemes()" href="#">Memes</a></li>
<li><a onclick="onToggleAbout()" href="#">About</a></li>
</ul>
<ul class="main-nav-mobile clean-list flex column ">
<li><a href="">Gallery</a></li>
<li><a onclick="onRenderSavedMemes()" href="#">Memes</a></li>
<li><a onclick="onToggleAbout(true)" href="#">About</a></li>
</ul>
<i onclick="onToggleMenu()" class="fa fa-bars btn-menu-toggle"></i>
</div>
</header>
<section class="gallery-container-main main-layout flex column ">
<div class="gallery-nav flex space-between align-center main-layout">
<div class="input-container">
<input oninput="onFilterMemesInput(this.value)" class="search-input" type="text" />
<img class="search-img" src="images/search.png" alt="">
</div>
<div class="nav-filter ">
<ul class="nav-filter-container clean-list flex space-between align-center">
<li onclick="onFilterMemes(this)">All</li>
<li onclick="onFilterMemes(this)">Men</li>
<li onclick="onFilterMemes(this)">Funny</li>
<li onclick="onFilterMemes(this)">Animal</li>
<li onclick="onFilterMemes(this)">Smile</li>
<li onclick="onFilterMemes(this)">Comic</li>
</ul>
</div>
<button>More</button>
</div>
<div class="gallery-container">
<div class="images-container grid "></div>
</div>
</section>
<!-- <section class="content-container flex main-layout align-center "> -->
<!-- <div class="gallery-container grid main-layout"></div> -->
<section class="edit-container main-layout flex space-between hidden">
<div class="canvas-container">
<canvas class="canvas" width="500" height="500"></canvas>
</div>
<div class="options-container flex column align-center">
<input class="txt-input" type="text" oninput="onSetLineTxt(this.value)" placeholder="Text Goes Here">
<div class="top-btns flex space-between">
<div class="flex center align-center hover" onclick="onChangeLine()"><img class="top-btn-img"
src="images/changelines.png" alt=""></div>
<div class=" flex center align-center hover" onclick="onAddNewLine()"><img class="top-btn-img"
src="images/addline.png" alt=""></div>
<div class=" flex center align-center hover" onclick="onDeleteLine()">
<img class="top-btn-img" src="images/deleteline.png" alt="">
</div>
</div>
<div class="text-edit-btns grid">
<div onclick="onIncreaseFontSize()" class="flex center align-center hover"><img class="top-btn-img"
src="images/fontsizeup.png" alt="">
</div>
<div onclick="onDecreaseFontSize()" class="flex center align-center hover"><img class="top-btn-img"
src="images/fontsizedown.png" alt="">
</div>
<div onclick="onAlignText('left')" class="flex center align-center hover"><img class="top-btn-img"
src="images/textalignleft.png" alt="">
</div>
<div onclick="onAlignText('center')" class="flex center align-center hover"><img class="top-btn-img"
src="images/textaligncenter.png" alt=""></div>
<div onclick="onAlignText('right')" class="flex center align-center hover"><img class="top-btn-img"
src="images/textalignright.png" alt="">
</div>
<div class="font"><select onchange="onChangeFont(this.value)" class="font">
<option value="impact">Impact</option>
<option value="arial">Arial</option>
<option value="Lato-regular">Lato</option>
</select></div>
<div class="flex center align-center hover" onclick="onSetStroke()"><img class="top-btn-img"
src="images/textstroke.png" alt=""></div>
<label for="color">
<div class="flex center align-center hover"><img class="top-btn-img" src="images/textcolor.png"
alt="">
</label>
<input oninput="onSetFontColor(this.value)" class="color-input hover" type="color" id="color">
</div>
</div>
<div class="share-download flex space-between">
<a href="#" onclick="uploadImg(this)">
<div class="share hover"><img class="share-img" src="images/share.png" alt=""></div>
</a>
<button class="save-btn hover" onclick="onSaveMeme()">Save</button>
<a onclick="onDownloadMeme(this)" href="#" download="myPhoto">
<div class="download hover"><img class="download-img" src="images/download.png" alt=""></div>
</a>
</div>
<div class="share-container"></div>
</section>
<!-- </section> -->
</div>
<script src="js/storage-service.js"></script>
<script src="js/meme-controller.js"></script>
<script src="js/meme-service.js"></script>
<script src="js/upload-service.js"></script>
<script src="js/utils-service.js"></script>
</body>
</html>