Spaces:
Running
Running
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.
bc1d1af
verified
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| #qrcode { | |
| display: inline-block; | |
| } | |
| .qr-container { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .qr-code-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 2rem; | |
| } | |
| .btn-primary { | |
| background-color: #3b82f6; | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #2563eb; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background-color: #737373; | |
| color: white; | |
| border: none; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #525252; | |
| transform: translateY(-2px); | |
| } | |
| .download-options { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .option-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .option-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| @media (max-width: 640px) { | |
| .download-options { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .option-btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } |