<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRIDIUM QR Generator</title>
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/qr-code-styling/lib/qr-code-styling.js"></script>
</head>
<body>
<div class="background"></div>
<div class="container">
<!---------------- LEFT PANEL ---------------->
<div class="sidebar">
<div class="logo">
<h1>
<i class="fa-solid fa-qrcode"></i>
IRIDIUM QR
</h1>
<p>Create Professional QR Codes</p>
</div>
<!------------ QR TYPE ------------>
<div class="card">
<h3>
<i class="fa-solid fa-layer-group"></i>
QR Type
</h3>
<select id="qrType">
<option value="text">Text</option>
<option value="url">Website</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="sms">SMS</option>
<option value="wifi">WiFi</option>
<option value="whatsapp">WhatsApp</option>
<option value="vcard">vCard</option>
</select>
</div>
<!------------ CONTENT ------------>
<div class="card">
<h3>
<i class="fa-solid fa-pen"></i>
Content
</h3>
<textarea
id="qrText"
placeholder="Enter text or URL..."
rows="5"></textarea>
</div>
<!------------ QR STYLE ------------>
<div class="card">
<h3>
<i class="fa-solid fa-shapes"></i>
QR Style
</h3>
<select id="dotStyle">
<option value="square">Square</option>
<option value="dots">Dots</option>
<option value="rounded">Rounded</option>
<option value="classy">Classy</option>
<option value="classy-rounded">Classy Rounded</option>
</select>
</div>
<!------------ EYE STYLE ------------>
<div class="card">
<h3>
<i class="fa-solid fa-eye"></i>
Eye Style
</h3>
<select id="cornerStyle">
<option value="square">Square</option>
<option value="extra-rounded">Rounded</option>
<option value="dot">Dot</option>
</select>
</div>
<!------------ COLORS ------------>
<div class="card">
<h3>
<i class="fa-solid fa-palette"></i>
QR Colors
</h3>
<label>Primary</label>
<input type="color" id="color1" value="#000000">
<label>Secondary</label>
<input type="color" id="color2" value="#3B82F6">
<label>Background</label>
<input type="color" id="bgColor" value="#FFFFFF">
</div>
<!------------ GRADIENT ------------>
<div class="card">
<h3>
<i class="fa-solid fa-fill-drip"></i>
Gradient
</h3>
<select id="gradientType">
<option value="none">None</option>
<option value="linear">Linear</option>
<option value="radial">Radial</option>
</select>
</div>
<!------------ LOGO ------------>
<div class="card">
<h3>
<i class="fa-solid fa-image"></i>
Logo
</h3>
<input type="file"
id="logoUpload"
accept="image/*">
<label>
Logo Size
</label>
<input
type="range"
id="logoSize"
min="0.10"
max="0.40"
step="0.01"
value="0.20">
</div>
<!------------ ERROR ------------>
<div class="card">
<h3>
<i class="fa-solid fa-shield"></i>
Error Correction
</h3>
<select id="errorLevel">
<option value="L">L</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H" selected>H</option>
</select>
</div>
<!------------ BUTTONS ------------>
<div class="buttons">
<button id="generateBtn">
<i class="fa-solid fa-bolt"></i>
Generate
</button>
<button id="downloadPNG">
<i class="fa-solid fa-download"></i>
PNG
</button>
<button id="downloadSVG">
<i class="fa-solid fa-download"></i>
SVG
</button>
<button id="resetBtn">
<i class="fa-solid fa-rotate-left"></i>
Reset
</button>
</div>
</div>
<!---------------- RIGHT PANEL ---------------->
<div class="preview">
<div class="preview-card">
<h2>
Live Preview
</h2>
<div id="canvas"></div>
<p>
Your customized QR Code will appear here.
</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>