https://sheetfacade.com/connect.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  <link rel="icon" href="/favicon.png" type="image/png" />
7  <link rel="apple-touch-icon" href="/favicon.png" />
8  <!-- Send full URL as Referer on cross-origin requests so Google Picker's
9       API key check sees a path, not just origin. Firefox/Safari default to
10       strict-origin which fails Picker referrer validation otherwise. -->
11  <meta name="referrer" content="no-referrer-when-downgrade" />
12  <title>Connect a Sheet — Sheetfacade</title>
13  <link rel="preconnect" href="https://fonts.googleapis.com" />
14  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
16  <link rel="stylesheet" href="/site.css" />
17</head>
18<body class="connect-page">
19  <main class="connect-card">
20    <a class="brand" href="/" style="margin-bottom: 24px;">
21      <img
22        class="brand-logo"
23        src="https://near.tl/logo.png"
24        alt="Formfacade"
25        width="32"
26        height="32"
27      />
28      Sheetfacade
29    </a>
30
31    <h1>Connect a Google Sheet</h1>
32    <p class="subtitle">
33      Pick a sheet to power dropdowns and lookups in your forms. We add a read-only collaborator and keep your data in sync.
34    </p>
35
36    <div id="step-signin" class="step">
37      <button id="signin-btn" class="btn btn-primary">Sign in with Google</button>
38      <p class="hint">
39        We'll ask permission to share the picked sheet with our service account, <code id="editor-email">…</code>, so we can read it.
40      </p>
41    </div>
42
43    <div id="step-pick" class="step hidden">
44      <button id="pick-btn" class="btn btn-primary">Pick a Sheet</button>
45      <p class="hint">Only the sheet you pick is shared — nothing else.</p>
46    </div>
47
48    <div id="step-progress" class="step hidden" style="text-align: center;">
49      <div class="spinner" aria-hidden="true"></div>
50      <p id="progress-text" style="margin-top: 12px;">Connecting…</p>
51    </div>
52
53    <div id="step-done" class="step hidden">
54      <div class="success-icon" aria-hidden="true">✓</div>
55      <h2 style="margin-bottom: 6px;">Connected</h2>
56      <p style="margin-bottom: 16px;">
57        <strong id="done-name"></strong> is ready to use in your forms.
58      </p>
59      <pre id="done-summary"></pre>
60      <div style="margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap;">
61        <button id="connect-another-btn" class="btn btn-secondary">Connect another sheet</button>
62        <a href="/" class="btn btn-ghost">Back to home</a>
63      </div>
64    </div>
65
66    <div id="error-box" class="error hidden"></div>
67  </main>
68
69  

69<script src="https://accounts.google.com/gsi/client" async defer></script>

69
70  

70<script src="https://apis.google.com/js/api.js"></script>

70
71  

71<script src="/js/connect.js"></script>

71
72</body>
73</html>