-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
96 lines (72 loc) · 4.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--Icon Library-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>QR Code Generator</title>
</head>
<body>
<div class="p-3">
<h1 class="text-center">QR code Generator</h1>
<p class="p-3">
QR Coder Generator is To Create the QR Code of Link, Text, Phone. You can add these generated QR code to your slides or Presentations & in the Site for Making your content attractive and easy to access by users.
</p>
</div>
<div class="row p-5 shadow">
<div class="shadow p-3 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<div class="d-flex justify-content-center shadow">
<i class="fa text-center p-2 bg-info m-1 rounded fa-file-text" onclick="formType('planText')"
aria-hidden="true">
<small>Text</small>
</i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-link" onclick="formType('siteUrl')" aria-hidden="true">
<small>Link</small>
</i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-phone" onclick="formType('Phone')" aria-hidden="true">
<small>Phone</small></i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-vcard" onclick="formType('Vcard')" aria-hidden="true"> <small>Vcard</small></i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-android" onclick="formType('App')" aria-hidden="true"> <small>App Link</small></i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-envelope" onclick="formType('Message')" aria-hidden="true"> <small>Message</small></i>
</div>
<div class="p-2 flex align-items-center flex-column justify-content-center">
<div id="formBlock" class="shadow p-2">
</div>
<div class="d-flex align-items-center flex-column">
<input type="submit" onclick="QRCodeGenerator()" value="Generate" id="generateButton"
class="p-2 m-3 bg-secondary text-white rounded border-0 w-50 shadow-lg">
</div>
</div>
</div>
<div class="shadow p-3 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
<h2 class="text-center">QR Code</h2>
<div class="d-flex justify-content-end">
<i class="fa text-center p-2 bg-info m-1 rounded fa-copy" onclick="copyQR()" aria-hidden="true"> <small>Copy</small></i>
<i class="fa text-center p-2 bg-info m-1 rounded fa-download" onclick="downloadQR()" aria-hidden="true"> <small>Download</small></i>
</div>
<div class="p-2">
<div class="d-flex align-items-center flex-column" id="qrcode"></div>
</div>
</div>
</div>
<div class="p-3">
<h1 class="text-center">How to Generate QR Code</h1>
<p class="p-3">
It is very easy to convert your data to Qr Code just Select the Best option related to your content and click on Generate Button to Create the Qr Code Of your data and text.
</p>
</div>
<div class="d-flex p-2 m-3 justify-content-center shadow">
<a href="https://www.facebook.com/thecodepie" class="text-reset"> <i class="fa text-center p-2 bg-info m-1 rounded fa-facebook" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/channel/UCeIKRiHamPwip-_zyPXOYug" class="text-reset"><i class="fa text-center p-2 bg-info m-1 rounded fa-youtube" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/thecodepie/"class="text-reset" ><i class="fa text-center p-2 bg-info m-1 rounded fa-instagram" aria-hidden="true"></i></a>
</div>
<script src="js/qrcode.min.js"></script>
<script src="js/qrcode.js"></script>
</body>
</html>