Update docs for Glyph Generator

index.html

@@ -25,7 +25,13 @@ <h2 class="h5 mb-0">Glyph Generator</h2>
 					</div>
 					<div class="card-body">
 						<div class="mb-3">
-							<label for="glyph-input" class="form-label">Enter Glyph:</label>
+							<label for="glyph-input" class="form-label glyph-description">The Glyph Generator allows you
+								to create custom glyphs based on hexadecimal input. Enter a 1-2 digit hex value (00-FF)
+								to generate a 16x16 grid of Unicode characters. This tool is useful for creating unique
+								symbols, exploring character sets, or generating visual patterns for creative
+								projects.</label>
+							<label for="glyph-input" class="form-label glyph-input-label"><strong>Enter
+									Glyph:</strong></label>
 							<div class="input-group">
 								<input type="text" id="glyph-input" class="form-control"
 									placeholder="E0 used by default">

styles.css

@@ -183,19 +183,36 @@ body {
 }
 
 @media (min-width: 768px) {
-    .converter-input-group {
-        display: flex;
-    }
+	.converter-input-group {
+		display: flex;
+	}
+
+	.converter-input-group .form-control {
+		flex: 1;
+	}
+
+	.converter-input-group .btn {
+		width: 120px;
+	}
+
+	#inputPrefix {
+		width: auto;
+	}
+}
 
-    .converter-input-group .form-control {
-        flex: 1;
-    }
+.glyph-description {
+	text-align: justify;
+	color: #6c757d;
+	font-size: 0.9em;
+}
 
-    .converter-input-group .btn {
-        width: 120px; /* Điều chỉnh chiều rộng này nếu cần */
-    }
+.glyph-input-label {
+	font-weight: bold;
+}
 
-    #inputPrefix {
-        width: auto;
-    }
+@media (min-width: 768px) {
+	.glyph-description {
+		padding-right: 1rem;
+		padding-left: 1rem;
+	}
 }