Hugging Face's logo

Spaces:
mvbhr
/
qr-generator-pro
Running

App Files Community
mvbhr commited on
Commit
bc1d1af
·
verified ·
1 Parent(s): 968bdcb

criar uma webapp que gera qrcodes de links e textos, não precisa salvar nada em banco de dados, deve somente gerar os qrcodes na tela para o usuário salvar no formatdo PNG com fundo branco ou transparente. o visual da home deve ser com textos e fontes grandes e cores agradáveis. não salvar nada em banco de dados, não será necessário login de usuário, Não será necessário integrações externas.

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +83 -19
  3. style.css +78 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Qr Generator Pro
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: QR Generator Pro
3
+ colorFrom: gray
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,83 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QR Generator Pro</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
12
+ </head>
13
+ <body class="bg-blue-50 min-h-screen flex flex-col">
14
+ <header class="bg-white shadow-sm py-6">
15
+ <div class="container mx-auto px-4">
16
+ <h1 class="text-3xl md:text-4xl font-bold text-center text-blue-600">QR Generator Pro</h1>
17
+ <p class="text-center text-neutral-600 mt-2">Create beautiful QR codes instantly</p>
18
+ </div>
19
+ </header>
20
+
21
+ <main class="flex-grow container mx-auto px-4 py-8">
22
+ <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
23
+ <div class="mb-6">
24
+ <label for="content" class="block text-lg font-medium text-neutral-700 mb-2">Enter Text or URL</label>
25
+ <textarea
26
+ id="content"
27
+ rows="4"
28
+ class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg"
29
+ placeholder="Type your text or paste a URL here..."></textarea>
30
+ </div>
31
+
32
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
33
+ <div>
34
+ <label class="block text-lg font-medium text-neutral-700 mb-2">Size</label>
35
+ <select id="size" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg">
36
+ <option value="200">Small (200px)</option>
37
+ <option value="300" selected>Medium (300px)</option>
38
+ <option value="400">Large (400px)</option>
39
+ <option value="500">Extra Large (500px)</option>
40
+ </select>
41
+ </div>
42
+
43
+ <div>
44
+ <label class="block text-lg font-medium text-neutral-700 mb-2">Background</label>
45
+ <select id="background" class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg">
46
+ <option value="white">White</option>
47
+ <option value="transparent">Transparent</option>
48
+ </select>
49
+ </div>
50
+ </div>
51
+
52
+ <button id="generateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">
53
+ Generate QR Code
54
+ </button>
55
+
56
+ <div id="qrResult" class="mt-10 items-center justify-center hidden">
57
+ <div class="flex justify-center mb-6">
58
+ <div id="qrcode" class="border-4 border-neutral-200 rounded-lg p-4 bg-white inline-block"></div>
59
+ </div>
60
+
61
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
62
+ <button id="downloadPng" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition duration-300 flex items-center justify-center">
63
+ <i data-feather="download" class="mr-2"></i> Download PNG
64
+ </button>
65
+ <button id="newQr" class="bg-neutral-600 hover:bg-neutral-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition duration-300 flex items-center justify-center">
66
+ <i data-feather="plus" class="mr-2"></i> New QR Code
67
+ </button>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </main>
72
+
73
+ <footer class="bg-white border-t border-neutral-200 py-6 mt-8">
74
+ <div class="container mx-auto px-4 text-center text-neutral-600">
75
+ <p>© 2023 QR Generator Pro. All rights reserved.</p>
76
+ </div>
77
+ </footer>
78
+
79
+ <script src="script.js"></script>
80
+ <script>feather.replace();</script>
81
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
82
+ </body>
83
+ </html>
style.css CHANGED
@@ -1,28 +1,88 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Poppins', sans-serif;
5
+ }
6
+
7
+ #qrcode {
8
+ display: inline-block;
9
+ }
10
+
11
+ .qr-container {
12
+ background-color: white;
13
+ padding: 20px;
14
+ border-radius: 8px;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+
18
+ .qr-code-wrapper {
19
+ display: flex;
20
+ justify-content: center;
21
+ margin-bottom: 2rem;
22
  }
23
 
24
+ .btn-primary {
25
+ background-color: #3b82f6;
26
+ color: white;
27
+ border: none;
28
+ padding: 0.75rem 1.5rem;
29
+ border-radius: 0.5rem;
30
+ font-weight: 600;
31
+ cursor: pointer;
32
+ transition: all 0.3s ease;
33
  }
34
 
35
+ .btn-primary:hover {
36
+ background-color: #2563eb;
37
+ transform: translateY(-2px);
 
 
38
  }
39
 
40
+ .btn-secondary {
41
+ background-color: #737373;
42
+ color: white;
43
+ border: none;
44
+ padding: 0.75rem 1.5rem;
45
+ border-radius: 0.5rem;
46
+ font-weight: 600;
47
+ cursor: pointer;
48
+ transition: all 0.3s ease;
49
  }
50
 
51
+ .btn-secondary:hover {
52
+ background-color: #525252;
53
+ transform: translateY(-2px);
54
  }
55
+
56
+ .download-options {
57
+ display: flex;
58
+ gap: 1rem;
59
+ justify-content: center;
60
+ flex-wrap: wrap;
61
+ }
62
+
63
+ .option-btn {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 0.5rem;
67
+ padding: 0.75rem 1.5rem;
68
+ border-radius: 0.5rem;
69
+ font-weight: 500;
70
+ cursor: pointer;
71
+ transition: all 0.2s ease;
72
+ }
73
+
74
+ .option-btn:hover {
75
+ transform: translateY(-2px);
76
+ }
77
+
78
+ @media (max-width: 640px) {
79
+ .download-options {
80
+ flex-direction: column;
81
+ align-items: center;
82
+ }
83
+
84
+ .option-btn {
85
+ width: 100%;
86
+ justify-content: center;
87
+ }
88
+ }