Spaces:

BlackMonsterMedia
/

undefined

Running

App Files Files Community

BlackMonsterMedia commited on Oct 13, 2025

Commit

b453440

verified ·

1 Parent(s): 789fbd9

publish the site

Browse files

Files changed (4) hide show

README.md +9 -5
index.html +279 -18
privacidade.html +56 -0
termos.html +59 -0

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 👀
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: red
+colorTo: red
+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,280 @@
-<!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="pt-PT">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>A Cidade dos 20 — Alma Shopping</title>
+  <meta name="description" content="Instala a app do Alma, encontra os 20 Corações espalhados por Coimbra, ganha moedas com QR codes e troca por prémios durante o 21º aniversário. Entra na Cidade dos 20." />
+  <!-- Open Graph / Social -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="A Cidade dos 20 — Joga por Coimbra, ganha no Alma" />
+  <meta property="og:description" content="20 corações. Mil prémios. Instala a app, segue o mapa e entra no jogo do 21º aniversário do Alma Shopping." />
+  <meta property="og:image" content="http://static.photos/red/1200x630/42" />
+  <meta property="og:url" content="https://almaheartquest.com" />
+  <meta name="twitter:card" content="summary_large_image" />
+<link rel="icon" href="/favicon.ico" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            alma: {
+              bg: '#0B0C10',
+              ink: '#FFFFFF',
+              soft: '#C9CDD4',
+              red: '#FF2A4D',
+              redsoft: '#FF2A4D22'
+            }
+          },
+          fontFamily: {
+            sans: ['Inter','ui-sans-serif','system-ui']
+          },
+          boxShadow: {
+            glow: '0 0 0 4px rgba(255,42,77,0.25)'
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .grain{position:relative}
+    .grain:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'140\' height=\'140\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.8\' numOctaves=\'2\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'table\' tableValues=\'0 0 0 0 0 0.08 0\'/></feComponentTransfer></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>');mix-blend-mode:soft-light;opacity:.35}
+  </style>
+</head>
+<body class="bg-alma-bg text-alma-ink font-sans antialiased">
+  <!-- Sticky mobile CTA -->
+  <div class="fixed bottom-0 inset-x-0 z-50 md:hidden bg-black/80 backdrop-blur border-t border-white/10 px-4 py-3 flex items-center justify-between">
+    <span class="text-sm">A Cidade dos 20 já começou</span>
+    <a href="#download" class="px-4 py-2 rounded-xl bg-alma-red font-semibold">Descarregar</a>
+  </div>
+  <!-- HERO -->
+  <header class="relative overflow-hidden grain">
+    <div aria-hidden="true" class="absolute -top-40 right-[-10%] h-[40rem] w-[40rem] rounded-full bg-alma-redsoft blur-3xl"></div>
+    <div class="max-w-7xl mx-auto px-6 pt-16 pb-20 md:pt-28 md:pb-28 relative">
+      <div class="max-w-3xl">
+        <p class="uppercase tracking-widest text-alma-soft/80 text-xs mb-3">Revelação • 01.04.2026</p>
+        <h1 class="text-4xl md:text-6xl font-extrabold leading-tight">A Cidade dos 20</h1>
+        <p class="mt-4 text-lg md:text-xl text-alma-soft">O centro não fechou. <span class="text-white font-semibold">Espalhou-se por Coimbra.</span> Encontra <span class="font-semibold text-white">20 Corações</span>, scana os <span class="font-semibold text-white">QR codes</span>, ganha <span class="font-semibold text-white">moedas na app</span> e troca por <span class="font-semibold text-white">prémios</span> durante o 21º aniversário do Alma.</p>
+        <div class="mt-8 flex flex-col sm:flex-row gap-3">
+          <a href="#download" class="inline-flex items-center justify-center px-5 py-3 rounded-2xl bg-alma-red font-semibold shadow-glow">Descarregar a App</a>
+          <a href="#como-funciona" class="inline-flex items-center justify-center px-5 py-3 rounded-2xl border border-white/20 hover:border-white/40">Como funciona</a>
+        </div>
+        <div class="mt-6 text-sm text-alma-soft">Disponível para iOS e Android</div>
+      </div>
+    </div>
+  </header>
+  <!-- TRUST / DOWNLOAD -->
+  <section id="download" class="bg-white text-black">
+    <div class="max-w-7xl mx-auto px-6 py-12 md:py-16 grid md:grid-cols-2 gap-10 items-center">
+      <div>
+        <h2 class="text-2xl md:text-3xl font-extrabold">Entra no jogo</h2>
+        <p class="mt-3 text-zinc-700">Instala a app do Alma, cria conta e ativa a localização. Segue o mapa, encontra os 20 Corações e ganha moedas com os QR codes. Troca as tuas moedas por prémios durante o mês de abril.</p>
+        <div class="mt-6 flex flex-wrap gap-3">
+        <!-- App download links -->
+        <a href="https://apps.apple.com/pt/app/alma-shopping/id1234567890" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">App Store</a>
+        <a href="https://play.google.com/store/apps/details?id=pt.alma.shopping" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">Google Play</a>
+        <a href="#qr" class="px-4 py-3 rounded-xl border border-black/20">Ler QR code</a>
+</div>
+        <ul class="mt-6 space-y-2 text-sm text-zinc-700">
+          <li>• Requer iOS 14+ ou Android 9+</li>
+          <li>• Permitir localização para ver o mapa</li>
+          <li>• Permitir câmara para ler QR codes</li>
+        </ul>
+      </div>
+      <div class="relative">
+        <div class="aspect-[10/16] w-full rounded-3xl bg-zinc-100 border border-zinc-200 shadow-xl flex items-center justify-center">
+          <span class="text-zinc-400">Mockup do ecrã da app (placeholder)</span>
+        </div>
+        <div class="absolute -bottom-4 -left-4 hidden md:block rotate-[-6deg] bg-black text-white px-4 py-2 rounded-xl text-sm">A Cidade dos 20 já começou</div>
+</div>
+    </div>
+  </section>
+  <!-- HOW IT WORKS -->
+  <section id="como-funciona" class="relative">
+    <div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
+      <div class="max-w-3xl">
+        <h2 class="text-2xl md:text-4xl font-extrabold">Como funciona</h2>
+        <p class="mt-3 text-alma-soft max-w-prose">Duas formas de ganhar moedas — joga na cidade e no Alma.</p>
+      </div>
+      <div class="grid md:grid-cols-4 gap-6 mt-10">
+        <div class="p-5 rounded-2xl border border-white/10 bg-white/5">
+          <div class="text-4xl">1</div>
+          <h3 class="mt-2 font-semibold text-xl">Instala a app</h3>
+          <p class="mt-1 text-alma-soft">Cria conta e ativa a localização.</p>
+        </div>
+        <div class="p-5 rounded-2xl border border-white/10 bg-white/5">
+          <div class="text-4xl">2</div>
+          <h3 class="mt-2 font-semibold text-xl">Explora a cidade</h3>
+          <p class="mt-1 text-alma-soft">Encontra os 20 Corações no mapa.</p>
+        </div>
+        <div class="p-5 rounded-2xl border border-white/10 bg-white/5">
+          <div class="text-4xl">3</div>
+          <h3 class="mt-2 font-semibold text-xl">Scana e ganha</h3>
+          <p class="mt-1 text-alma-soft">Lê os QR codes e recebe moedas.</p>
+        </div>
+        <div class="p-5 rounded-2xl border border-white/10 bg-white/5">
+          <div class="text-4xl">4</div>
+          <h3 class="mt-2 font-semibold text-xl">Troca por prémios</h3>
+          <p class="mt-1 text-alma-soft">Descontos, experiências e surpresas.</p>
+        </div>
+      </div>
+      <div class="mt-12 grid md:grid-cols-2 gap-6">
+        <div class="p-6 rounded-3xl border border-white/10 bg-white/5">
+          <h3 class="font-semibold text-xl">Na cidade</h3>
+          <p class="text-alma-soft mt-2">Segue o mapa, encontra os 20 Corações e lê os QR codes. Alguns têm bónus, incluindo o <span class="text-white font-semibold">Coração Dourado</span>.</p>
+          <ul class="mt-4 space-y-2 text-alma-soft">
+            <li>• Pistas diárias nas redes sociais</li>
+            <li>• Bónus por completar 5 / 10 / 20 corações</li>
+            <li>• Leaderboard com prémios semanais</li>
+          </ul>
+        </div>
+        <div class="p-6 rounded-3xl border border-white/10 bg-white/5">
+          <h3 class="font-semibold text-xl">No Alma</h3>
+          <p class="text-alma-soft mt-2">Durante abril, <span class="text-white font-semibold">cada compra</span> no Alma dá-te <span class="text-white font-semibold">moedas extra</span>. Mostra o teu QR da app na caixa.</p>
+          <ul class="mt-4 space-y-2 text-alma-soft">
+            <li>• Multiplicadores em dias especiais</li>
+            <li>• Parceiros com ofertas exclusivas</li>
+            <li>• Surpresas instantâneas via app</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- REWARDS -->
+  <section id="premios" class="bg-white text-black">
+    <div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
+      <div class="max-w-3xl">
+        <h2 class="text-2xl md:text-4xl font-extrabold">Prémios & Experiências</h2>
+        <p class="mt-3 text-zinc-700">Troca as tuas moedas por ofertas no Alma. Exemplos ilustrativos (podem variar):</p>
+      </div>
+      <div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Descontos em lojas aderentes</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Vestuário, tecnologia, beleza e mais.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Cinema & experiências</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Bilhetes, menus e sessões especiais.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Gastronomia</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Vouchers e menus de aniversário.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Coração Dourado</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Um prémio especial para quem o encontrar.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Prémios semanais</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Para o top do leaderboard.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Surpresas na app</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Drop de moedas e desafios flash.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- LEADERBOARD & REGRAS -->
+  <section id="regras" class="relative">
+    <div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
+      <div class="grid md:grid-cols-2 gap-10 items-start">
+        <div>
+          <h2 class="text-2xl md:text-4xl font-extrabold">Leaderboard & Desafios</h2>
+          <p class="mt-3 text-alma-soft">Sobe posições ao colecionar corações e completar desafios semanais.</p>
+          <ul class="mt-6 space-y-2 text-alma-soft">
+            <li>• +50 moedas por cada coração encontrado</li>
+            <li>• Bónus por completar 5/10/20 corações</li>
+            <li>• Desafios relâmpago anunciados nas redes</li>
+          </ul>
+        </div>
+        <div class="p-6 rounded-3xl border border-white/10 bg-white/5">
+          <h3 class="font-semibold text-xl">Regras essenciais</h3>
+          <ol class="list-decimal pl-5 mt-3 space-y-2 text-alma-soft">
+            <li>Participação gratuita com a app instalada.</li>
+            <li>Um scan por coração/conta (anti-fraude ativo).</li>
+            <li>As moedas expiram a 30/04; troca antes dessa data.</li>
+            <li>Compras no Alma: apresenta o QR da app na caixa.</li>
+            <li>Consulta termos completos na app/landing.</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- FAQ -->
+  <section id="faq" class="bg-white text-black">
+    <div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
+      <div class="max-w-3xl">
+        <h2 class="text-2xl md:text-4xl font-extrabold">Perguntas frequentes</h2>
+      </div>
+      <div class="mt-8 grid md:grid-cols-2 gap-6">
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">Como começo?</h3>
+          <p class="text-zinc-600 mt-1">Instala a app, cria conta e permite localização e câmara. O mapa mostra-te os corações mais próximos.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">Preciso de pagar?</h3>
+          <p class="text-zinc-600 mt-1">Não. Participar é gratuito. Ganhas moedas na cidade e com compras no Alma (opcional).</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">Onde troco as moedas?</h3>
+          <p class="text-zinc-600 mt-1">Na app, na secção Prémios. Resgata e apresenta no balcão/loja aderente.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">E se não conseguir encontrar todos?</h3>
+          <p class="text-zinc-600 mt-1">Não faz mal — cada coração vale moedas. Há prémios por patamares e desafios semanais.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">Privacidade</h3>
+          <p class="text-zinc-600 mt-1">Usamos apenas localização aproximada para ativar o mapa. Os dados são tratados segundo o RGPD.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white">
+          <h3 class="font-semibold">Validade</h3>
+          <p class="text-zinc-600 mt-1">Campanha válida durante abril de 2026. Consulta termos completos na app.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- FINAL CTA -->
+  <section id="cta" class="relative grain">
+    <div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
+      <div class="rounded-3xl border border-white/10 bg-white/5 p-8 md:p-12 text-center">
+        <h2 class="text-3xl md:text-4xl font-extrabold">O jogo começou. Estás dentro?</h2>
+        <p class="mt-3 text-alma-soft max-w-2xl mx-auto">Instala a app, segue o coração e celebra os 21 anos do Alma por toda a cidade.</p>
+        <div class="mt-6 flex flex-wrap gap-3 justify-center">
+          <a href="https://apps.apple.com/pt/app/alma-shopping/id1234567890" class="px-5 py-3 rounded-2xl bg-alma-red font-semibold shadow-glow">Descarregar App</a>
+          <a href="#download" class="px-5 py-3 rounded-2xl border border-white/20 hover:border-white/40">Saber mais</a>
+        </div>
+        <div class="mt-8 mx-auto max-w-sm border border-white/10 rounded-2xl p-4">
+          <div class="text-sm text-alma-soft">Preferes em desktop?</div>
+          <div class="mt-2 bg-white text-black rounded-xl aspect-square flex items-center justify-center">
+            <img src="http://api.qrserver.com/v1/create-qr-code/?data=https://almaheartquest.com&size=200x200&margin=10" alt="QR Code para o site" class="w-full h-full rounded-xl"/>
+          </div>
+        </div>
+</div>
+    </div>
+  </section>
+  <footer class="border-t border-white/10">
+    <div class="max-w-7xl mx-auto px-6 py-10 text-sm text-alma-soft flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
+      <div>© 2026 Alma Shopping — A Cidade dos 20</div>
+      <div class="flex flex-wrap gap-4">
+        <a href="/termos.html" class="hover:text-white">Termos & Condições</a>
+        <a href="/privacidade.html" class="hover:text-white">Política de Privacidade</a>
+        <a href="mailto:info@almaheartquest.com" class="hover:text-white">Contactos</a>
+      </div>
+</div>
+  </footer>
+</body>
 </html>

privacidade.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<!DOCTYPE html>
+<html lang="pt-PT">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Política de Privacidade - A Cidade dos 20</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            alma: {
+              bg: '#0B0C10',
+              ink: '#FFFFFF',
+              soft: '#C9CDD4',
+              red: '#FF2A4D'
+            }
+          },
+          fontFamily: {
+            sans: ['Inter','ui-sans-serif','system-ui']
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-alma-bg text-alma-ink font-sans antialiased">
+  <div class="max-w-4xl mx-auto px-6 py-16">
+    <a href="/" class="inline-block mb-8 text-alma-red font-semibold">← Voltar à página inicial</a>
+    <h1 class="text-3xl md:text-4xl font-extrabold mb-8">Política de Privacidade</h1>
+    <div class="prose prose-invert max-w-none">
+      <h2>1. Dados Coletados</h2>
+      <p>Coletamos: email, localização aproximada, dados de participação na campanha.</p>
+      <h2>2. Finalidade</h2>
+      <p>Os dados são usados exclusivamente para a campanha "A Cidade dos 20".</p>
+      <h2>3. Partilha de Dados</h2>
+      <p>Não partilhamos dados com terceiros, exceto quando exigido por lei.</p>
+      <h2>4. Direitos do Utilizador</h2>
+      <p>Direito de acesso, retificação e eliminação dos dados pessoais.</p>
+      <h2>5. Segurança</h2>
+      <p>Implementamos medidas técnicas e organizativas para proteger os dados.</p>
+      <h2>6. Contacto</h2>
+      <p>Para exercer direitos: privacy@almaheartquest.com</p>
+    </div>
+  </div>
+</body>
+</html>

termos.html ADDED Viewed

	@@ -0,0 +1,59 @@

+<!DOCTYPE html>
+<html lang="pt-PT">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Termos e Condições - A Cidade dos 20</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            alma: {
+              bg: '#0B0C10',
+              ink: '#FFFFFF',
+              soft: '#C9CDD4',
+              red: '#FF2A4D'
+            }
+          },
+          fontFamily: {
+            sans: ['Inter','ui-sans-serif','system-ui']
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-alma-bg text-alma-ink font-sans antialiased">
+  <div class="max-w-4xl mx-auto px-6 py-16">
+    <a href="/" class="inline-block mb-8 text-alma-red font-semibold">← Voltar à página inicial</a>
+    <h1 class="text-3xl md:text-4xl font-extrabold mb-8">Termos e Condições</h1>
+    <div class="prose prose-invert max-w-none">
+      <h2>1. Aceitação dos Termos</h2>
+      <p>Ao participar na campanha "A Cidade dos 20", o utilizador aceita integralmente estes termos e condições.</p>
+      <h2>2. Elegibilidade</h2>
+      <p>Participação aberta a maiores de 18 anos residentes em Portugal. Requer instalação da app Alma Shopping.</p>
+      <h2>3. Período da Campanha</h2>
+      <p>De 01 a 30 de abril de 2026. As moedas expiram às 23:59 do dia 30/04/2026.</p>
+      <h2>4. Como Participar</h2>
+      <p>Instalar a app, criar conta, permitir localização e câmara. Encontrar os 20 corações pela cidade de Coimbra.</p>
+      <h2>5. Prémios</h2>
+      <p>Os prémios estão sujeitos a disponibilidade. Não são convertíveis em dinheiro.</p>
+      <h2>6. Privacidade</h2>
+      <p>Os dados são tratados conforme a Política de Privacidade do Alma Shopping.</p>
+      <h2>7. Contactos</h2>
+      <p>Para dúvidas: info@almaheartquest.com</p>
+    </div>
+  </div>
+</body>
+</html>