-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
141 lines (130 loc) · 5.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glyph Tools 🇻🇳</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<header class="text-center mb-5">
<h1 class="display-4 fw-bold">Glyph Tools 🇻🇳</h1>
<p class="lead">Generate glyphs and convert between hex and emoji</p>
</header>
<div id="mobileAlert" class="alert alert-warning alert-dismissible fade show d-md-none" role="alert"
style="display: none;">
<strong>Mobile User Notice:</strong> For the best experience, we recommend using this tool on a desktop
device. We're working on improving mobile responsiveness.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-header bg-primary text-white">
<h2 class="h5 mb-0">Glyph Generator</h2>
</div>
<div class="card-body">
<div class="mb-3">
<div class="input-group">
<input type="text" id="glyph-input" class="form-control"
placeholder="E0 used by default">
<button id="generate-glyph" class="btn btn-primary">
<i class="fas fa-sync-alt me-2"></i>Generate
</button>
</div>
</div>
<div class="mb-3">
<strong>Upload your glyph</strong> <span class="text-muted">(PNG format, name:
glyph_XX.png)</span>
<input type="file" class="form-control" id="glyphUpload" accept=".png">
</div>
<div id="glyphSuccessMsg" class="alert alert-success alert-dismissible fade show d-none"
role="alert">
Glyph generated successfully!
</div>
<div id="glyphErrorMsg" class="alert alert-danger alert-dismissible fade show d-none"
role="alert">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-header bg-primary text-white">
<h2 class="h5 mb-0">Hex ↔ Emoji Converter</h2>
</div>
<div class="card-body">
<div class="mb-3">
<button id="conversionModeButton"
class="btn btn-outline-primary w-100 conversion-mode-text">
Hex to Emoji
</button>
</div>
<div class="input-group mb-3 converter-input-group">
<span id="inputPrefix" class="input-group-text">0x</span>
<input type="text" id="converterInput" class="form-control" placeholder="Enter hex value">
<button id="convertButton" class="btn btn-primary">
<i class="fas fa-exchange-alt me-2"></i>Convert
</button>
</div>
<div class="input-group converter-input-group">
<input type="text" class="form-control" id="converterOutput" readonly
placeholder="Conversion result">
<button id="copyButton" class="btn btn-secondary">
<i class="far fa-copy me-2"></i>Copy
</button>
</div>
<div id="errorMsg" class="alert alert-danger d-none mt-3" role="alert"></div>
<div id="successMsg" class="alert alert-success d-none mt-3" role="alert"></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="h5 mb-0">Generated Glyph</h5>
<button id="darkModeToggle" class="btn btn-outline-light btn-sm">
<i class="fas fa-moon"></i> Toggle Dark Mode
</button>
</div>
<div class="card-body">
<div id="glyph-output" class="glyph-grid"></div>
</div>
</div>
</div>
</div>
<footer class="container mt-5 mb-3">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="d-flex justify-content-center flex-wrap gap-3">
<a href="https://github.com/NhanAZ/glyph" class="text-decoration-none text-muted"
target="_blank" rel="noopener noreferrer">
<i class="fab fa-github me-2"></i>Contribute on GitHub
</a>
<a href="https://wiki.bedrock.dev/concepts/emojis.html" class="text-decoration-none text-muted"
target="_blank" rel="noopener noreferrer">
<i class="fas fa-book me-2"></i>Emojis & Symbols Docs
</a>
<a href="https://discord.gg/j2X83ujT6c" class="text-decoration-none text-muted" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-discord me-2"></i>Join our Discord
</a>
<a href="https://github.com/NhanAZ" class="text-decoration-none text-muted" target="_blank"
rel="noopener noreferrer">
<i class="fas fa-user me-2"></i>Author's GitHub Profile
</a>
</div>
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>