-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (142 loc) · 8.47 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
<!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">
<title>Meme Generator</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/grid.css">
</head>
<body onload="onInit()">
<div class="main-screen" onclick="toggleMenu()"></div>
<header class="main-header flex space-between align-center">
<div class="logo"><img src="ICONS/LOGO.png"></div>
<ul class="main-nav flex clean-list">
<li class="gallery-nav" onclick="showGallery()"><a>Gallery</a></li>
<li class="memes-nav" onclick="showSaved()"><a>Memes</a></li>
<li class="about-nav"><a>About</a></li>
</ul>
<button class="btn-menu" onclick="toggleMenu(this)">☰</button>
</header>
<section class="meme-editor" hidden>
<div class="meme-editor-main flex main-layout">
<div class="canvas-container flex">
<canvas id="meme-canvas" height="500px" width="460px" style="background-color: white;"
onclick="onClickedCanvas(event)"></canvas>
</div>
<div class="meme-editor-dashboard flex align-center">
<input class="text-line" id="text-line" name="text-line" placeholder="Meme text"
onkeyup="onAddText(this.value)">
<div class="text-functionalities flex">
<button class="btn" onclick="onSwitchLine()"><img
src="ICONS/up-and-down-opposite-double-arrows-side-by-side.png">
</button>
<button class="btn" onclick="onAddLine()"><img src="ICONS/add.png"></button>
<button class="btn" onclick="onDeleteLine()"><img src="ICONS/trash.png"></button>
</div>
<div class="text-prefrences">
<button class="btn" onclick="onChangeFontSize('inc')"><img src="ICONS/increase font - icon.png">
</button>
<button class="btn" onclick="onChangeFontSize('dec')"><img src="ICONS/decrease font - icon.png">
</button>
<button class="btn" onclick="onSetAlignment('left')"><img src="ICONS/align-to-left.png"></button>
<button class="btn" onclick="onSetAlignment('center')"><img
src="ICONS/center-text-alignment.png"></button>
<button class="btn" onclick="onSetAlignment('right')"><img src="ICONS/align-to-right.png"></button>
<select class="font-options" onchange="onSetFontFamily(this.value)">
<option value="IMPACT">Impact</option>
<option value="ARIEL">Arial</option>
<option value="MONOSPACE">MONOSPACE</option>
<option value="FANTASY">FANTASY</option>
</select>
<button class="btn stroke-color">
<input id="stroke-color" name="stroke-color" type="color" onblur="onSetStrokeColor(this.value)">
</button>
<button class="btn font-color">
<input id="font-color" name="font-color" type="color" onblur="onSetFontColor(this.value)">
</button>
</div>
<section class="add-stickers">
<div class="stickers">
<img onclick="onStickerClicked(this)"src="STICKERS/1.gif" />
<img onclick="onStickerClicked(this)" src="STICKERS/2.gif" />
<img onclick="onStickerClicked(this)" src="STICKERS/3.png" />
<img onclick="onStickerClicked(this)" src="STICKERS/4.png" />
<img onclick="onStickerClicked(this)" src="STICKERS/5.png" />
</div>
</section>
<div class="actions">
<button class="share-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="22.997" height="22.992"
viewBox="0 0 22.997 22.992">
<path id="Forme_7" data-name="Forme 7"
d="M764.774,603.617a4.2,4.2,0,0,0-3.3,1.6l-7.182-3.639a4.127,4.127,0,0,0,.16-1.083,4.01,4.01,0,0,0-.19-1.175l7.145-3.623a4.168,4.168,0,1,0-.857-2.509,4.123,4.123,0,0,0,.161,1.083l-7.176,3.639A4.19,4.19,0,1,0,753.6,603l7.145,3.623a4.067,4.067,0,0,0-.2,1.18,4.227,4.227,0,1,0,4.227-4.19Zm0,0"
transform="translate(-746.004 -589.004)" fill="#fff" />
</svg>
<a onclick="onUploadMeme()">Share</a></button>
<button class="download-btn download">
<svg xmlns="http://www.w3.org/2000/svg" width="19.999" height="20.999"
viewBox="0 0 19.999 20.999">
<path id="Forme_8" data-name="Forme 8"
d="M970.389,611A1.4,1.4,0,0,1,969,609.591v-6.206h2.775v4.8H986.22v-4.8H989v6.206A1.4,1.4,0,0,1,987.607,611Zm8.355-8.089-3.974-4.882s-.607-.579.05-.579h2.24v-7.1s-.092-.345.424-.345h3.152c.371,0,.364.291.364.291V597.3h2.067c.795,0,.2.606.2.606s-3.38,4.563-3.856,5.042a.418.418,0,0,1-.3.144A.539.539,0,0,1,978.744,602.91Z"
transform="translate(-968.999 -590)" fill="#fff" />
</svg>
<a href="#" download="my-meme" onclick="onDownloadMeme(this)">Download</a>
</button>
<button class="save-btn" onclick="onSaveMeme()"><img src="ICONS/save.gif" alt="Save Me!"></button>
</div>
</div>
</section>
<main>
<div class="main-content main-layout">
<div class="main-controls flex">
<input class="meme-search" id="keyword" name="keyword" type="search" list="keywords"
placeholder="Search" onkeyup="onEnterKeyWord(this.value)">
<datalist id="keywords">
<option value="Happy">
<option value="Funny">
<option value="Crazy">
<option value="Animal">
<option value="Kids">
<option value="Politics">
</datalist>
<button type="submit" class="search-button" onclick="removeSearchBtn(this)">
<img src="ICONS/search.png">
</button>
<div class="keywords-touch flex">
<ul class="keywords-nav clean-list align-center flex ">
<li><a onclick="onTouchKeyWord(this)">Happy</a></li>
<li><a onclick="onTouchKeyWord(this)">Funny</a></li>
<li><a onclick="onTouchKeyWord(this)">Crazy</a></li>
<li><a onclick="onTouchKeyWord(this)">Animal</a></li>
<li><a onclick="onTouchKeyWord(this)">Kids</a></li>
<li><a onclick="onTouchKeyWord(this)">Politics</a></li>
</ul>
<div class="hidden-keywords hide">
<ul class="keywords-nav clean-list flex align-center">
<li><a onclick="onTouchKeyWord(this)">Weird</a></li>
<li><a onclick="onTouchKeyWord(this)">Movies</a></li>
<li><a onclick="onTouchKeyWord(this)">Dogs</a></li>
<li><a onclick="onTouchKeyWord(this)">Cats</a></li>
<li><a onclick="onTouchKeyWord(this)">Love</a></li>
<li><a onclick="onTouchKeyWord(this)">Shock</a></li>
</ul>
</div>
</div>
<button class="btn-keywords"onclick="onShowMoreKeywords()">More</button>
</div>
<div class="image-gallery-container flex"></div>
</div>
</main>
<section class="saved-memes main-layout" hidden>
<div class="memes-container flex"></div>
</section>
<script src="js/services/storage-service.js"></script>
<script src="js/services/gallery-service.js"></script>
<script src="js/services/memeEditor-service.js"></script>
<script src="js/savedMemes-controller.js"></script>
<script src="js/gallery-controller.js"></script>
<script src="js/memeEditor-controller.js"></script>
</body>
</html>