-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (55 loc) · 2.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap-reboot.css"/>
<link rel="stylesheet" href="css/main.css"/>
<title>Emojity</title>
</head>
<body>
<div class="card m-3 p-2 w-75 mx-auto">
<div class="container">
<div class="row">
<div class="alert alert-primary text-center w-100">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-emoji-sunglasses mb-3" viewBox="0 0 16 16">
<path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"/>
</svg>
<div class="h1">Emojity - Avatar Creator</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<label for="emojiInput" class="mb-1 mt-3">Emoji or Symbol:</label>
<input type="text" value="😎" id="emojiInput" class="form-control">
</div>
<div class="row">
<label for="bgColorInput" class="mb-1 mt-3">Background Color:</label>
<input type="color" id="bgColorInput" class="form-control">
</div>
<div class="row">
<label for="sizeInput" class="mb-1 mt-3">Image Size:</label>
<select id="sizeInput" class="form-select">
<option value="128">128x128</option>
<option value="256">256x256</option>
<option value="512">512x512</option>
<option value="1024">1024x1024</option>
<option value="2048">2048x2048</option>
</select>
</div>
<button id="exportBtn" class="btn btn-primary row mt-5">Export to PNG</button>
</div>
<div class="col">
<div id="canvasWrapper" class="rounded mx-auto d-block text-bg-light p-3 mt-4 img-fluid" style="width: 16rem; height: 16rem;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
<script src="js/bootstrap.bundle.js"></script>
</html>