Hugging Face's logo

Spaces:
GuaccO
/
githubsupabasesync-wizard
Running

App Files Community
GuaccO commited on
Commit
f82a422
·
verified ·
1 Parent(s): 00ccdc3

<!DOCTYPE html>

Browse files

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>VATANA - AI-Powered VAT Compliance Platform</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Roboto:wght@400;500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', 'Outfit', sans-serif;
}
</style>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5F9EA0",
"secondary": "#FFB347",
"background-light": "#F0F0F0",
"background-dark": "#05060A",
"text-light": "#E0E0E0",
"text-dark": "#1F1F1F"
},
fontFamily: {
"display": ["Inter", "sans-serif"],
"body": ["Roboto", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px"},
boxShadow: {
'glow-primary': '0 0 15px 0px rgba(95, 158, 160, 0.6)',
'glow-secondary': '0 0 15px 0px rgba(255, 179, 71, 0.7)',
}
},
},
}
</script>
</head>
<body class="bg-background-dark font-body text-text-light">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center py-5">
<div class="layout-content-container flex w-full flex-col max-w-6xl px-4 md:px-10">
<!-- TopNavBar -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-primary/20 px-4 sm:px-10 py-4">
<div class="flex items-center gap-4 text-text-light">
<div class="size-5 text-primary">
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M12.0799 24L4 19.2479L9.95537 8.75216L18.04 13.4961L18.0446 4H29.9554L29.96 13.4961L38.0446 8.75216L44 19.2479L35.92 24L44 28.7521L38.0446 39.2479L29.96 34.5039L29.9554 44H18.0446L18.04 34.5039L9.95537 39.2479L4 28.7521L12.0799 24Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-text-light text-xl font-bold font-display leading-tight tracking-[-0.015em]">VATANA</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-text-light/80 hover:text-text-light text-sm font-medium leading-normal transition-colors" href="#">Features</a>
<a class="text-text-light/80 hover:text-text-light text-sm font-medium leading-normal transition-colors" href="#">Pricing</a>
<a class="text-text-light/80 hover:text-text-light text-sm font-medium leading-normal transition-colors" href="#">Docs</a>
</div>
<div class="flex gap-2">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary text-background-dark text-sm font-bold leading-normal tracking-[0.015em] transition-all hover:bg-secondary hover:shadow-glow-secondary">
<span class="truncate">Start Free Trial</span>
</button>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-text-light/10 text-text-light text-sm font-bold leading-normal tracking-[0.015em] transition-colors hover:bg-text-light/20">
<span class="truncate">Sign In</span>
</button>
</div>
</div>
</header>
<!-- HeroSection -->
<main class="flex flex-col items-center">
<div class="w-full @container py-20 text-center">
<div class="flex min-h-[480px] flex-col items-center justify-center gap-8 bg-cover bg-center bg-no-repeat p-4" data-alt="Dynamic Global Compliance Network animation with glowing lines on a dark translucent map of Europe" style="background-image: linear-gradient(rgba(5, 6, 10, 0.8) 0%, rgba(5, 6, 10, 1) 100%), url('https://lh3.googleusercontent.com/aida-public/AB6AXuCv8POc0TtnTxlw4MrILKO4IU7OcA3gyaX-79rOlJ24uC_M9OwfdIlzyPUes-Aj_rrCT984oKpAmJTXPN6_dN1MevzZHmIX_pxSfoi4dqvPRsJVeR271_4i1Lu1VsFGLlW5c-FKfNDblofkHsbX-MRiXfmYZVPEQrXxxl6cBeAFV2gaFck-0_4kx7lMo3hyC4nWUdZXX3auuTeko7uqLJIh5FtP3TZU-DvLMZho3txBHqPeznXyj18oDxuvoXsEoADoznX-4guB8bs');">
<div class="flex flex-col gap-4">
<h1 class="font-display text-4xl font-black leading-tight tracking-[-0.033em] text-text-light @[480px]:text-6xl">
✨ <span class="text-primary" style="text-shadow: 0 0 10px #5F9EA0;">AI-Powered</span> VAT Compliance Platform
</h1>
<h2 class="mx-auto max-w-2xl text-base font-normal leading-normal text-text-light/80 @[480px]:text-lg">
Automate Your VAT Compliance in Minutes, Focus on What Matters.
</h2>
</div>
<div class="flex flex-wrap items-center justify-center gap-4">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-primary text-background-dark text-base font-bold leading-normal tracking-[0.015em] transition-all hover:bg-secondary hover:shadow-glow-secondary">
<span class="truncate">Start Free Trial →</span>
</button>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 border border-text-light/50 text-text-light text-base font-bold leading-normal tracking-[0.015em] transition-all hover:border-secondary hover:text-secondary hover:shadow-glow-secondary">
<span class="truncate">Watch Demo</span>
</button>
</div>
</div>
</div>
<!-- Key Metric/KPI Overview -->
<div class="flex w-full max-w-4xl flex-col gap-4 p-4 md:flex-row">
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-lg border border-primary/50 bg-background-dark p-6 shadow-glow-primary/20 transition-all hover:border-primary hover:shadow-glow-primary">
<p class="text-base font-medium leading-normal text-text-light/80">VAT Saved</p>
<p class="font-display text-3xl font-bold leading-tight tracking-tight text-text-light">€127,450</p>
<p class="text-base font-medium leading-normal text-green-400">+13.5%</p>
</div>
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-lg border border-primary/50 bg-background-dark p-6 shadow-glow-primary/20 transition-all hover:border-primary hover:shadow-glow-primary">
<p class="text-base font-medium leading-normal text-text-light/80">Compliance Score</p>
<p class="font-display text-3xl font-bold leading-tight tracking-tight text-text-light">98.2%</p>
<p class="text-base font-medium leading-normal text-green-400">+2.1%</p>
</div>
<div class="flex min-w-[158px] flex-1 flex-col gap-2 rounded-lg border border-primary/50 bg-background-dark p-6 shadow-glow-primary/20 transition-all hover:border-primary hover:shadow-glow-primary">
<p class="text-base font-medium leading-normal text-text-light/80">Active Countries</p>
<p class="font-display text-3xl font-bold leading-tight tracking-tight text-text-light">6/27</p>
<p class="text-base font-medium leading-normal text-text-light/60">EU Coverage</p>
</div>
</div>
<!-- Features Section -->
<div class="flex w-full flex-col gap-10 px-4 py-20 @container ">
<div class="flex flex-col gap-4 text-center">
<h1 class="font-display text-4xl font-black leading-tight tracking-[-0.033em] text-text-light @[480px]:text-5xl">
Everything you need for compliance
</h1>
<p class="mx-auto max-w-3xl text-base font-normal leading-normal text-text-light/80 @[480px]:text-lg">
Discover how VATANA's AI-powered features can streamline your VAT compliance and save you time and money.
</p>
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4 p-0">
<div class="group flex flex-1 flex-col gap-4 rounded-lg border border-primary/30 bg-background-dark/50 p-6 transition-all hover:border-secondary hover:shadow-glow-secondary">
<span class="material-symbols-outlined text-3xl text-primary transition-colors group-hover:text-secondary">verified_user</span>
<div class="flex flex-col gap-1">
<h2 class="font-display text-lg font-bold leading-tight text-text-light">Automated Validation</h2>
<p class="text-sm font-normal leading-normal text-text-light/70">Real-time validation of VAT numbers and transaction data to ensure accuracy.</p>
</div>
</div>
<div class="group flex flex-1 flex-col gap-4 rounded-lg border border-primary/30 bg-background-dark/50 p-6 transition-all hover:border-secondary hover:shadow-glow-secondary">
<span class="material-symbols-outlined text-3xl text-primary transition-colors group-hover:text-secondary">bar_chart_4_bars</span>
<div class="flex flex-col gap-1">
<h2 class="font-display text-lg font-bold leading-tight text-text-light">Smart Analytics</h2>
<p class="text-sm font-normal leading-normal text-text-light/70">Gain insights from your data with our intelligent analytics dashboard.</p>
</div>
</div>
<div class="group flex flex-1 flex-col gap-4 rounded-lg border border-primary/30 bg-background-dark/50 p-6 transition-all hover:border-secondary hover:shadow-glow-secondary">
<span class="material-symbols-outlined text-3xl text-primary transition-colors group-hover:text-secondary">upload_file</span>
<div class="flex flex-col gap-1">
<h2 class="font-display text-lg font-bold leading-tight text-text-light">Seamless Filing</h2>
<p class="text-sm font-normal leading-normal text-text-light/70">File your VAT returns directly through our platform with just a few clicks.</p>
</div>
</div>
<div class="group flex flex-1 flex-col gap-4 rounded-lg border border-primary/30 bg-background-dark/50 p-6 transition-all hover:border-seconda

Files changed (3) hide show
  1. index.html +50 -14
  2. script.js +33 -8
  3. style.css +31 -20
index.html CHANGED
@@ -1,19 +1,55 @@
 
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>GitHub ↔️ Supabase Connector</title>
7
- <link rel="stylesheet" href="style.css">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://unpkg.com/feather-icons"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
- <body class="bg-gray-50 min-h-screen">
14
- <custom-navbar></custom-navbar>
15
-
16
- <main class="container mx-auto px-4 py-12">
 
 
17
  <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">
18
  <div class="text-center mb-10">
19
  <h1 class="text-3xl font-bold text-gray-800 mb-2">Connect GitHub ↔️ Supabase</h1>
 
1
+
2
  <!DOCTYPE html>
3
+ <html class="dark" lang="en"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>VATANA - AI-Powered VAT Compliance Platform</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com" rel="preconnect"/>
9
+ <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;family=Roboto:wght@400;500&amp;display=swap" rel="stylesheet"/>
11
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
12
+ <style>
13
+ body {
14
+ font-family: 'Roboto', 'Source Sans Pro', sans-serif;
15
+ }
16
+ h1, h2, h3, h4, h5, h6 {
17
+ font-family: 'Inter', 'Outfit', sans-serif;
18
+ }
19
+ </style>
20
+ <script>
21
+ tailwind.config = {
22
+ darkMode: "class",
23
+ theme: {
24
+ extend: {
25
+ colors: {
26
+ "primary": "#5F9EA0",
27
+ "secondary": "#FFB347",
28
+ "background-light": "#F0F0F0",
29
+ "background-dark": "#05060A",
30
+ "text-light": "#E0E0E0",
31
+ "text-dark": "#1F1F1F"
32
+ },
33
+ fontFamily: {
34
+ "display": ["Inter", "sans-serif"],
35
+ "body": ["Roboto", "sans-serif"]
36
+ },
37
+ borderRadius: {"DEFAULT": "0.5rem", "lg": "0.75rem", "xl": "1rem", "full": "9999px"},
38
+ boxShadow: {
39
+ 'glow-primary': '0 0 15px 0px rgba(95, 158, 160, 0.6)',
40
+ 'glow-secondary': '0 0 15px 0px rgba(255, 179, 71, 0.7)',
41
+ }
42
+ },
43
+ },
44
+ }
45
+ </script>
46
  </head>
47
+ <body class="bg-background-dark font-body text-text-light">
48
+ <div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
49
+ <div class="layout-container flex h-full grow flex-col">
50
+ <div class="flex flex-1 justify-center py-5">
51
+ <div class="layout-content-container flex w-full flex-col max-w-6xl px-4 md:px-10">
52
+ <main class="container mx-auto px-4 py-12">
53
  <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">
54
  <div class="text-center mb-10">
55
  <h1 class="text-3xl font-bold text-gray-800 mb-2">Connect GitHub ↔️ Supabase</h1>
script.js CHANGED
@@ -1,15 +1,40 @@
1
 
2
- // Shared JavaScript across all pages
3
  document.addEventListener('DOMContentLoaded', () => {
4
- // Initialize Supabase client when page loads
5
- let supabase = null;
6
 
7
- // GitHub OAuth flow
8
- document.getElementById('githubAuth').addEventListener('click', () => {
9
- // Redirect to GitHub OAuth
10
- window.location.href = `https://github.com/login/oauth/authorize?client_id=${encodeURIComponent('YOUR_GITHUB_CLIENT_ID')}&scope=${encodeURIComponent('repo,admin:repo_hook')}&redirect_uri=${encodeURIComponent(window.location.origin + '/auth/github/callback')}`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  });
12
- // Supabase connection
13
  document.getElementById('supabaseConnect').addEventListener('click', async () => {
14
  const url = document.getElementById('supabaseUrl').value;
15
  const key = document.getElementById('supabaseKey').value;
 
1
 
2
+ // VATANA Platform JavaScript
3
  document.addEventListener('DOMContentLoaded', () => {
4
+ // Initialize dark mode by default
5
+ document.documentElement.classList.add('dark');
6
 
7
+ // Handle pricing toggle
8
+ const monthlyBtn = document.querySelector('.pricing-toggle button:first-child');
9
+ const annualBtn = document.querySelector('.pricing-toggle button:last-child');
10
+
11
+ if (monthlyBtn && annualBtn) {
12
+ monthlyBtn.addEventListener('click', () => {
13
+ monthlyBtn.classList.add('bg-primary', 'text-background-dark');
14
+ monthlyBtn.classList.remove('text-text-light/70');
15
+ annualBtn.classList.remove('bg-primary', 'text-background-dark');
16
+ annualBtn.classList.add('text-text-light/70');
17
+ // Update pricing display to monthly
18
+ });
19
+
20
+ annualBtn.addEventListener('click', () => {
21
+ annualBtn.classList.add('bg-primary', 'text-background-dark');
22
+ annualBtn.classList.remove('text-text-light/70');
23
+ monthlyBtn.classList.remove('bg-primary', 'text-background-dark');
24
+ monthlyBtn.classList.add('text-text-light/70');
25
+ // Update pricing display to annual
26
+ });
27
+ }
28
+
29
+ // Handle navigation active states
30
+ const navLinks = document.querySelectorAll('header a');
31
+ navLinks.forEach(link => {
32
+ link.addEventListener('click', () => {
33
+ navLinks.forEach(l => l.classList.remove('text-text-light'));
34
+ link.classList.add('text-text-light');
35
+ });
36
  });
37
+ // Supabase connection
38
  document.getElementById('supabaseConnect').addEventListener('click', async () => {
39
  const url = document.getElementById('supabaseUrl').value;
40
  const key = document.getElementById('supabaseKey').value;
style.css CHANGED
@@ -1,11 +1,18 @@
 
1
  /* Shared styles across all pages */
2
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
3
 
4
  body {
5
- font-family: 'Inter', sans-serif;
6
  display: flex;
7
  flex-direction: column;
8
  min-height: 100vh;
 
 
 
 
 
 
9
  }
10
 
11
  /* Button transitions */
@@ -17,8 +24,21 @@ button {
17
  input:focus, select:focus {
18
  outline: none;
19
  ring: 2px;
20
- ring-color: rgba(99, 102, 241, 0.5);
21
- border-color: rgba(99, 102, 241, 0.8);
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
 
24
  /* Animation for status messages */
@@ -30,20 +50,11 @@ input:focus, select:focus {
30
  animation: fadeIn 0.3s ease-out;
31
  }
32
 
33
- /* Drag and drop styles */
34
- #dropZone {
35
- cursor: pointer;
36
- transition: all 0.2s ease;
37
- }
38
-
39
- #dropZone.border-indigo-500 {
40
- border-color: #6366f1;
41
- }
42
-
43
- #fileItems button {
44
- transition: color 0.2s ease;
45
- }
46
-
47
- #fileItems button:hover {
48
- transform: scale(1.1);
49
  }
 
1
+
2
  /* Shared styles across all pages */
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Roboto:wght@400;500&display=swap');
4
 
5
  body {
6
+ font-family: 'Roboto', sans-serif;
7
  display: flex;
8
  flex-direction: column;
9
  min-height: 100vh;
10
+ background-color: #05060A;
11
+ color: #E0E0E0;
12
+ }
13
+
14
+ h1, h2, h3, h4, h5, h6 {
15
+ font-family: 'Inter', sans-serif;
16
  }
17
 
18
  /* Button transitions */
 
24
  input:focus, select:focus {
25
  outline: none;
26
  ring: 2px;
27
+ ring-color: rgba(95, 158, 160, 0.5);
28
+ border-color: rgba(95, 158, 160, 0.8);
29
+ }
30
+
31
+ /* Glow animations */
32
+ @keyframes glow-primary {
33
+ 0% { box-shadow: 0 0 5px 0px rgba(95, 158, 160, 0.3); }
34
+ 50% { box-shadow: 0 0 15px 5px rgba(95, 158, 160, 0.6); }
35
+ 100% { box-shadow: 0 0 5px 0px rgba(95, 158, 160, 0.3); }
36
+ }
37
+
38
+ @keyframes glow-secondary {
39
+ 0% { box-shadow: 0 0 5px 0px rgba(255, 179, 71, 0.3); }
40
+ 50% { box-shadow: 0 0 15px 5px rgba(255, 179, 71, 0.7); }
41
+ 100% { box-shadow: 0 0 5px 0px rgba(255, 179, 71, 0.3); }
42
  }
43
 
44
  /* Animation for status messages */
 
50
  animation: fadeIn 0.3s ease-out;
51
  }
52
 
53
+ /* Material Icons */
54
+ .material-symbols-outlined {
55
+ font-variation-settings:
56
+ 'FILL' 0,
57
+ 'wght' 400,
58
+ 'GRAD' 0,
59
+ 'opsz' 24
 
 
 
 
 
 
 
 
 
60
  }