qrcode.github.io/index.html at main · ashishyadav2/qrcode.github.io · 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
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="img.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>QR Code Generator</title>
</head>
<body>
    <!-- main container of  app -->
<div class="container">
    <!-- left side container to hold qr code -->
    <div class="leftDiv">
        <div class="imgDiv">
            <img src="img.png" alt="QR Code Image" class="image">
        </div>
        <p class="label">Data in QR Code</p>
        <p class="textEntered">Empty</p>
        <a download="#" href="#" class="download" ><button>Download</button></a>
        <p class="len">Length : 0</p>
    </div>
    <!-- right side div for controls -->
    <div class="rightDiv">
        <!-- contains heading and text field -->
        <div class="header">
        <p id="heading"><i class="fa fa-qrcode" aria-hidden="true"></i> QR Code</p>
        <textarea cols="30" rows="10" class="inputText" placeholder="Enter Text..." maxlength="150"></textarea>
    </div>
    <!-- options- color and size -->
        <div class="options">
        <span>
        <p class="colorFgLabel">Foreground Color: </p>
        <input type="color" id="colorChooserFG">
        </span>
        <span>
            <p class="colorFgLabel">Background Color: </p>
        <input type="color" id="colorChooserBG">
        </span>
        <span>
        <p class="size">Size: </p>
        <select id="menu">
            <option value="150">150x150 px</option>
            <option value="250">250x250 px</option>
            <option value="350">350x350 px</option>
            <option value="450">450x450 px</option>
            <option value="650">650x650 px</option>
        </select>
    </span>
    </div>
    <!-- btn controls -->
    <div class="btnDiv">
        <button><i class="fa fa-cogs" aria-hidden="true"></i>Generate</button>
        <p class="bottom">QR Code Generator</p>
    </div>
    </div>
</div>
<!-- notification  -->
<p class="toast">Successfully Generated</p>

<p class="heading">History</p><br>
<div class="history">
    <div class="leftBox">
        <!-- <div class="leftParent">
        <p class="pText">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum quod dolor nostrum natus porro. Nulla quia placeat alias veritatis, ullam soluta amet reiciendis vitae quam et laborum maiores? Temporibus animi labore, quos saepe consectetur, consequuntur iusto a delectus vitae voluptate aperiam repellat quia dolorem molestias fugit, sit maxime. Asperiores iusto consequatur nobis odio accusamus illo aliquam delectus aperiam placeat. Saepe at error enim, dolorem perspiciatis, id quod recusandae quaerat eaque, totam nisi impedit</p>
    </div> -->
</div>
    <div class="rightBox">
        <!-- <div class="rightParent">
        <img src="img.png" alt="qr code img">
    </div> -->
    </div>
</div>
<!-- clear history button to empty loccal storage -->
<button class="clearHistory" onclick="clearHistory()"><i class="fa fa-trash-o" aria-hidden="true"></i>Clear History</button>
<script src="main.js"></script>
</body>
</html>