-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (96 loc) · 4.75 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
<!DOCTYPE html>
<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>QR Code Generator</title>
<!-- Link Style.css File -->
<link rel="stylesheet" href="style.css">
<!-- Image on Title Bar -->
<link rel="icon" href="images/portfolio.png" type="image/gif">
</head>
<body>
<!-- Display image in FullScreen -->
<div class="fullscreen" >
<span onclick="hide()"> X </span>
</div>
<div class="backH">
<button onclick="backHome()" title="Back Home"> Back Home👈 </button>
</div>
<!-- Loading Screen -->
<div class="loading">
<img draggable="false" src="images/load.gif" alt="Loading..." id="loading">
</div>
<!-- Hello.gif Image -->
<div class="hello" id="theImage">
<img src="images/hello.gif">
</div>
<!-- WhoAmI.gif Image -->
<button onclick="showImage()" class="btn" id="btn" title="Who Am I ?👻"> <img src="images/who.gif"></button>
<!-- Funny-Face.gif Image -->
<button onclick="showImage1()" class="btn1" id="btn1" title="About this Project!🤔"> <img src="images/funny-face.gif"></button>
<!-- Portfolio QR Code Image after, Click's on WhoAmI.gif Image -->
<div class="fullimg" id="showig">
<h1>SCAN ME </h1>
<img src="images/portfolio.png" alt="" >
<span onclick="hide()"> X </span>
</div>
<!-- Display Message's -->
<p id="demo">⚠️ Please, Paste URL or Enter Text to Continue !🙂</p>
<p id="demo1">Wanna, Generate a New QR Code😜..? <br> <span style="padding-top:1px;font-size:12.5px;color: #d2d1d1;"> Edit the Text🖋️ / URL🔗</span> </p>
<p id="demo2">Downloading...⬇️</p>
<!-- QR Code Generator Section -->
<div class="wrapper" >
<div class="card__corner">
<div class="card__corner-triangle">
</div>
<!-- Header Section -->
<header>
<h1>QR Code Generator</h1>
<p>Paste URL or Enter Text to generate a QR Code !</p>
</header>
<div class="form">
<input type="text" id="text1" name="qrCode" placeholder="Enter Text or URL" required>
<button onClick="inputtext()" id="myBtn" class="myBtn">Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" title="View QR Code in Full Screen👀" onclick="FullScreenImg()" class="imgfull">
</div>
<button class="dbtn" onclick="downloadIg(this)" title="Download QR Code">DOWNLOAD</button>
</div>
<!-- About this Project Section -->
<div class="about" id="abt">
<!-- Close Button -->
<span onclick="hide()" id="x"> X </span>
<!-- Text in the About Section -->
<div class="txt">
<h1> About this Project <span> < QR Code Generator/></span></h1>
<p>
➼ A QR Code (Quick Response Code) is a type of matrix barcode or two-dimensional barcode.
<p>
➼ QR codes use four standardised encoding modes ( Numeric, Alpha-Numeric, Byte/Binary, and Kanji) to store data
efficiently.
</p>
<p>
➼ The Quick Response system became popular outside the automotive industry due to its fast readability and greater storage
capacity compared to standard UPC barcodes.
</p>
<p>
➼ A QR Code consists of black squares arranged in a square grid on a white background, which can be read by an imaging
device such as a camera and processed using Reed-Solomon error correction.
</p>
<p>
➼ To know, more about the QR Code, Visit <a href="https://en.wikipedia.org/wiki/QR_code" target="_blank">👉 QR Code</a>
</p>
</p>
</div>
</div>
<!-- Footer Section -->
<footer>
Designed with ❤️ by <a href="https://github.com/anishhh20" target="_blank"> Anish Teli.</a>
</footer>
<!-- Linked a JS file -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>