-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex
77 lines (59 loc) · 2.97 KB
/
index
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
<!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>generate your own meme-images</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="https://www.favicon.cc/logo3d/396223.png" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="meme-header">
<h1>Meme Generator</h1>
<p>Make Your Meme In Just A few Steps</p>
</div>
<div class="meme-section">
<div class="meme-generator">
<canvas id="meme"></canvas>
</div>
<div class="meme-input-section">
<div class="input-file-section">
<input type="file" id="imageFileInput">
<label for="imageFileInput">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-hand-index-thumb-fill" viewBox="0 0 16 16">
<path
d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716.075.09.141.175.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0z" />
</svg>
Choose a Image
</label>
</div>
<div class="button_section">
<button type="button" id="export">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
class="rW1DZNdb5THuH-xexbQ-9" style="vertical-align:middle" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"></path>
</svg>
Download Image
</button>
</div>
<div class="text-section">
<div class="top-text">
<input type="text" id="topTextInput" placeholder="Top Text">
</div>
<div class="bottom-text">
<input type="text" id="bottomTextInput" placeholder="Bottom Text">
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>