Spaces:

trishaeesha
/

quantumlink-qrizer

Running

App Files Files Community

trishaeesha commited on Oct 18, 2025

Commit

10030d2

verified ·

1 Parent(s): d97e585

file:///C:/Users/user/Desktop/g.html give me the futuristic and advanced way of this with url and convert it into QR code

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +185 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quantumlink Qrizer
-emoji: 🚀
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: QuantumLink QRizer 🚀
+colorFrom: red
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,186 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuantumLink QRizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
+    <style>
+        .glow {
+            text-shadow: 0 0 10px rgba(100, 255, 255, 0.7);
+        }
+        .input-glow {
+            box-shadow: 0 0 15px rgba(100, 200, 255, 0.5);
+        }
+        .qr-container {
+            transition: all 0.5s ease;
+        }
+        .qr-container:hover {
+            transform: scale(1.05);
+            filter: drop-shadow(0 0 15px rgba(100, 255, 255, 0.7));
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div id="vanta-bg"></div>
+    <div class="container mx-auto px-4 py-12 relative z-10">
+        <div class="max-w-3xl mx-auto text-center mb-12">
+            <h1 class="text-5xl md:text-6xl font-bold mb-4 glow">
+                Quantum<span class="text-cyan-400">Link</span> QRizer
+            </h1>
+            <p class="text-xl text-cyan-200">
+                Transform any URL into a futuristic QR code with quantum encryption
+            </p>
+        </div>
+        <div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-8 shadow-2xl border border-cyan-500 border-opacity-30">
+            <div class="grid md:grid-cols-2 gap-8 items-center">
+                <div>
+                    <div class="mb-6">
+                        <label for="url-input" class="block text-cyan-300 mb-2 text-lg">
+                            <i data-feather="link" class="inline mr-2"></i> Enter URL
+                        </label>
+                        <input
+                            type="text"
+                            id="url-input"
+                            placeholder="https://example.com"
+                            class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-cyan-500 text-white focus:outline-none focus:ring-2 focus:ring-cyan-400 input-glow"
+                        >
+                    </div>
+                    <div class="flex flex-wrap gap-4">
+                        <button
+                            id="generate-btn"
+                            class="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-medium hover:from-cyan-400 hover:to-blue-500 transition-all transform hover:scale-105 flex items-center"
+                        >
+                            <i data-feather="zap" class="mr-2"></i> Generate QR
+                        </button>
+                        <button
+                            id="download-btn"
+                            class="px-6 py-3 bg-gray-700 rounded-lg font-medium hover:bg-gray-600 transition-all flex items-center"
+                            disabled
+                        >
+                            <i data-feather="download" class="mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+                <div class="qr-container p-6 bg-white rounded-lg">
+                    <div id="qr-code" class="mx-auto w-48 h-48 flex items-center justify-center text-gray-400">
+                        <p class="text-center">Your QR will appear here</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-12 pt-8 border-t border-gray-700">
+                <h3 class="text-xl font-semibold text-cyan-300 mb-4">
+                    <i data-feather="info" class="inline mr-2"></i> How it works
+                </h3>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-cyan-500">
+                        <div class="text-cyan-400 mb-2">
+                            <i data-feather="edit" class="inline mr-2"></i>
+                            <span class="font-medium">1. Enter URL</span>
+                        </div>
+                        <p class="text-gray-300">Paste any web address you want to convert</p>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-cyan-500">
+                        <div class="text-cyan-400 mb-2">
+                            <i data-feather="zap" class="inline mr-2"></i>
+                            <span class="font-medium">2. Generate</span>
+                        </div>
+                        <p class="text-gray-300">Click generate to create your quantum QR code</p>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-cyan-500">
+                        <div class="text-cyan-400 mb-2">
+                            <i data-feather="download" class="inline mr-2"></i>
+                            <span class="font-medium">3. Download</span>
+                        </div>
+                        <p class="text-gray-300">Save your QR code as PNG for future use</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer class="text-center py-6 text-gray-400 text-sm mt-12">
+        <p>Powered by Quantum Technology © 2023</p>
+        <p class="mt-1">Scan the future today</p>
+    </footer>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.NET({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00ffff,
+            backgroundColor: 0x0a0a14,
+            points: 10.00,
+            maxDistance: 18.00,
+            spacing: 16.00
+        });
+        // Initialize feather icons
+        feather.replace();
+        // QR Code Generation
+        document.getElementById('generate-btn').addEventListener('click', function() {
+            const urlInput = document.getElementById('url-input').value.trim();
+            if (!urlInput) {
+                alert('Please enter a valid URL');
+                return;
+            }
+            // Add http:// if not present
+            let finalUrl = urlInput;
+            if (!/^https?:\/\//i.test(urlInput)) {
+                finalUrl = 'http://' + urlInput;
+            }
+            // Generate QR code
+            const qrCodeElement = document.getElementById('qr-code');
+            qrCodeElement.innerHTML = '';
+            QRCode.toCanvas(qrCodeElement, finalUrl, {
+                width: 180,
+                margin: 2,
+                color: {
+                    dark: '#000000',
+                    light: '#ffffff'
+                }
+            }, function(error) {
+                if (error) {
+                    console.error(error);
+                    alert('Error generating QR code');
+                } else {
+                    document.getElementById('download-btn').disabled = false;
+                }
+            });
+        });
+        // Download QR Code
+        document.getElementById('download-btn').addEventListener('click', function() {
+            const canvas = document.querySelector('#qr-code canvas');
+            if (!canvas) {
+                alert('Please generate a QR code first');
+                return;
+            }
+            const link = document.createElement('a');
+            link.download = 'quantum-qr.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        });
+    </script>
+</body>
 </html>