SerialGen___Random-Serial-Number-Generator/index.html at main · Ahmed-Maher77/SerialGen___Random-Serial-Number-Generator · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
        <!-- Primary Meta Tags -->
		<meta charset="UTF-8" />
        <title>SerialGen | Random Serial Number Generator</title>
        <meta name="title" content="SerialGen | Random Serial Number Generator">
        <meta name="description" content="Generate secure, customizable serial numbers with SerialGen — a responsive, accessible web app built with HTML, CSS, and OOP-based JavaScript. Includes copy to clipboard, color customization, and more.">
        <meta name="keywords" content="serial generator, random code, JavaScript OOP, clipboard API, color picker, responsive web app, accessibility, secure random generator, web tool">
        <meta name="author" content="Ahmed Maher Algohary">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Favicon -->
        <link rel="icon" href="./images/logo.png" type="image/x-icon">
        <!-- Open Graph / Facebook -->
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/">
        <meta property="og:title" content="SerialGen | Random Serial Number Generator">
        <meta property="og:description" content="Generate secure, customizable serial numbers with SerialGen — a responsive, accessible web app built with HTML, CSS, and OOP-based JavaScript.">
        <meta property="og:image" content="./images/logo.png">
        <!-- Twitter -->
        <meta property="twitter:card" content="summary_large_image">
        <meta property="twitter:url" content="https://ahmed-maher77.github.io/SerialGen___Random-Serial-Number-Generator/">
        <meta property="twitter:title" content="SerialGen | Random Serial Number Generator">
        <meta property="twitter:description" content="Generate secure, customizable serial numbers with SerialGen — a responsive, accessible web app built with HTML, CSS, and OOP-based JavaScript.">
        <meta property="twitter:image" content="./images/logo.png">
        <!-- Fonts -->
		<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=Inter:wght@400;500;600;700&display=swap"
			rel="stylesheet"
		/>
        <!-- Font Awesome -->
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
		/>
        <!-- CSS Styles -->
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<!-- Random Serial Number -->
		<main>
			<div class="container">
				<div class="serial">Random Serial Number: <span></span></div>
				<!-- Copy Serial -->
				<div class="copy">
					Copy Serial
					<i class="fa-solid fa-copy"></i>
				</div>
				<!-- Generate Button -->
				<button>
					<span>Generate</span>
					<i class="fa-solid fa-rotate-right"></i>
				</button>
			</div>
			<!-- Select Background Color -->
			<div class="color">
				<label for="color">Change The Page Color:</label>
				<input type="color" id="color" />
			</div>
		</main>

		<!-- Footer -->
		<footer>
			<p>
				Copyright &copy; <span id="copyright-year"></span> Developed By
				<a
					href="https://ahmedmaher-portfolio.vercel.app"
					title="About Developer"
					target="_blank"
					>Ahmed Maher</a
				>
			</p>
			<span>All Rights Reserved</span>
		</footer>

		<!-- JavaScript -->
		<script src="./js/app.js"></script>
	</body>
</html>