Repository navigation
Expand file tree
/
Copy pathHackathonProject.html
More file actions
104 lines (102 loc) · 6.19 KB
/
Copy pathHackathonProject.html
File metadata and controls
104 lines (102 loc) · 6.19 KB
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
<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="style.css">
</head>
<body>
<header id="header">
<nav class="links" style="--items: 2;">
<a href="HackathonProject.html">Meme Generator</a>
<!-- <a href="WhatIsAMeme.html">What is a meme?</a> -->
<a onclick="modeDarkLight();">Dark\Light mode</a>
<span class="line"></span>
</nav>
</header>
<h1>Meme Generator</h1>
<p style="font-size: 14px;">Add text to images or memes.</p>
<div id="flexbox">
<div class="content">
<p> Select a template or upload your own</p>
<form style="margin-top: 20px;">
<input style="margin-left: 75px;" type="file" id="user_picture" onchange="update_image()">
</form>
<div class="row">
<div class="column">
<img id="1" onclick="changeImage(document.getElementById('1').src)" width="60px" height="60px" src="memes/hello1.png">
<img id="2" onclick="changeImage(document.getElementById('2').src)" width="60px" height="60px" src="memes/hello2.png">
<img id="3" onclick="changeImage(document.getElementById('3').src)" width="60px" height="60px" src="memes/hello3.png">
<img id="4" onclick="changeImage(document.getElementById('4').src)" width="60px" height="60px" src="memes/hello4.png">
<img id="5" onclick="changeImage(document.getElementById('5').src)" width="60px" height="60px" src="memes/hello5.png">
<img id="6" onclick="changeImage(document.getElementById('6').src)" width="60px" height="60px" src="memes/hello6.jpg">
<img id="7" onclick="changeImage(document.getElementById('7').src)" width="60px" height="60px" src="memes/hello7.png">
<img id="8" onclick="changeImage(document.getElementById('8').src)" width="60px" height="60px" src="memes/hello8.jpg">
</div>
<div class="column">
<img id="9" onclick="changeImage(document.getElementById('9').src)" width="60px" height="60px" src="memes/hello9.png">
<img id="10" onclick="changeImage(document.getElementById('10').src)" width="60px" height="60px" src="memes/hello10.png">
<img id="11" onclick="changeImage(document.getElementById('11').src)" width="60px" height="60px" src="memes/hello11.png">
<img id="12" onclick="changeImage(document.getElementById('12').src)" width="60px" height="60px" src="memes/hello12.png">
<img id="13" onclick="changeImage(document.getElementById('13').src)" width="60px" height="60px" src="memes/hello13.png">
<img id="14" onclick="changeImage(document.getElementById('14').src)" width="60px" height="60px" src="memes/hello14.png">
<img id="15" onclick="changeImage(document.getElementById('15').src)" width="60px" height="60px" src="memes/hello15.png">
<img id="16" onclick="changeImage(document.getElementById('16').src)" width="60px" height="60px" src="memes/hello16.png">
</div>
<div class="column">
<img id="17" onclick="changeImage(document.getElementById('17').src)" width="60px" height="60px" src="memes/hello17.png">
<img id="18" onclick="changeImage(document.getElementById('18').src)" width="60px" height="60px" src="memes/hello18.jpg">
<img id="19" onclick="changeImage(document.getElementById('19').src)" width="60px" height="60px" src="memes/hello19.jpg">
<img id="20" onclick="changeImage(document.getElementById('20').src)" width="60px" height="60px" src="memes/hello20.jpg">
<img id="21" onclick="changeImage(document.getElementById('21').src)" width="60px" height="60px" src="memes/hello21.jpg">
<img id="22" onclick="changeImage(document.getElementById('22').src)" width="60px" height="60px" src="memes/hello22.jpg">
<img id="23" onclick="changeImage(document.getElementById('23').src)" width="60px" height="60px" src="memes/hello23.jpg">
<img id="24" onclick="changeImage(document.getElementById('24').src)" width="60px" height="60px" src="memes/hello24.png">
</div>
</div>
<div class="box">
<div>
<textarea id="textTop" type="text" class="textarea" placeholder="Top text" oninput="updateTopText()"></textarea>
</div>
</p>
<div>
<textarea id="textBottom" type="text" class="textarea" placeholder="Bottom text"
oninput="updateBottomText()"></textarea>
</p>
</div>
<div id="extraoptions">
<div>
<input onchange="watermark();" type="checkbox" id="watermark" name="watermark" value="watermark">
<label for="Watermark">Remove Watermark</label><br>
</div>
<div style="margin-left: 40px;margin-right: 40px;">
Effect: <select onchange="Effects()" name="effects" id="effects">
<option value="None" selected="selected">None</option>
<option value="Blur">Blur</option>
</select>
</div>
<div>
<!-- <input onclick="newTextBox()" id="addTextButton" type="button" value="Add Text" onclick=";"> -->
</div>
</div>
</div>
<input id="button" type="button" value="Generate Meme" onclick="takeshot()">
<div style="margin-top: 50px;" id="output"></div>
</div>
<div id="photo" class="content">
<div id="memeTopText"></div>
<div id="memeBottomText"></div>
<div style="height: 500px;">
<img id="memeimage" src="memes/hello14.png" height="500" width="600">
<p id="watermarktext">Hackathon1</p>
</div>
<p>
</div>
</div>
<script src="JS.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
</script>
</body>
</html>