FEUCalcSite/index.html at main · jareddo-kun/FEUCalcSite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>FEU Grade Calculator — Activation Web App</title>
  <meta name="description" content="Official activation web app for FEU Grade Calculator. Activate, configure, and manage your copy securely through Google Apps Script." />
  <link rel="canonical" href="https://g.jareddo06.ovh/" />
  <link rel="icon" href="https://ssl.gstatic.com/docs/doclist/images/icon_11_spreadsheet_list.png" type="image/png" />
  <style>
    :root {
      --bg: #fafafa;
      --card: #fff;
      --accent: #1a237e;
      --accent2: #2e7d32;
      --muted: #555;
      --maxw: 880px;
    }
    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: var(--bg);
      color: #222;
      margin: 0;
      line-height: 1.6;
    }
    header {
      background: var(--accent);
      color: white;
      text-align: center;
      padding: 48px 16px 56px;
    }
    header h1 {
      margin: 0;
      font-size: 2rem;
      letter-spacing: 0.3px;
    }
    header p {
      max-width: 700px;
      margin: 10px auto 0;
      font-weight: 400;
      font-size: 1.05rem;
      opacity: 0.9;
    }
    main {
      max-width: var(--maxw);
      background: var(--card);
      margin: -40px auto 60px;
      border-radius: 14px;
      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
      padding: 36px 30px;
    }
    h2 {
      color: var(--accent);
      border-left: 4px solid var(--accent2);
      padding-left: 10px;
      margin-top: 34px;
      margin-bottom: 10px;
      font-size: 1.4rem;
    }
    p, li {
      color: #222;
    }
    a {
      color: var(--accent2);
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    .cta {
      display: inline-block;
      background: var(--accent2);
      color: white;
      padding: 14px 24px;
      font-weight: 600;
      border-radius: 8px;
      font-size: 1rem;
      margin-top: 14px;
      transition: background 0.2s ease;
      border: none;
      cursor: pointer;
    }
    .cta:hover {
      background: #256427;
    }
    input[type="text"] {
      width: 80%;
      max-width: 420px;
      padding: 10px;
      font-size: 1rem;
      border-radius: 6px;
      border: 1px solid #ccc;
      margin-top: 14px;
    }
    ul {
      margin-left: 1.2rem;
    }
    hr {
      margin: 40px 0;
      border: none;
      border-top: 1px solid #eee;
    }
    footer {
      text-align: center;
      font-size: 13px;
      color: var(--muted);
      margin-top: 40px;
    }
    footer a {
      color: var(--accent);
    }
  </style>
</head>

<body>
  <header>
    <h1>FEU Grade Calculator — Activation Web App</h1>
    <p>Activate and manage your own FEU Grade Calculator Google Sheet securely through Google Apps Script.</p>

    <!-- 🔹 New Input + Button (replaces old link) -->
    <div style="margin-top: 20px;">
      <input type="text" id="sheetInput" placeholder="Enter Spreadsheet Link or ID" />
      <button id="launchBtn" class="cta">🔑 Activate Spreadsheet</button>
    </div>
    <p id="launchStatus" style="margin-top:10px;font-weight:500;"></p>
  </header>

  <main>
     <section style="margin-top: 40px;">
      <h2>📄 Original Spreadsheet Template</h2>
      <p>
        To get started, click the link below to make a copy of the official FEU Grade Calculator template below:
        <br>
        <strong><a href="https://docs.google.com/spreadsheets/d/1OGZKkXOVmqkOobwyutm80UWmTUQWMXjqXGlre93Iwnc/copy" target="_blank">
          FEU Grade Calculator [vg2.2 Distributable]
        </a></strong>
         <!--
         <br>
        <strong><a href="https://docs.google.com/spreadsheets/d/1OGZKkXOVmqkOobwyutm80UWmTUQWMXjqXGlre93Iwnc/edit?usp=sharing" target="_blank">
          FEU Grade Calculator [vg2.2 Distributable]
        </a></strong>
        <br>
        <strong><a href="https://docs.google.com/spreadsheets/d/1OGZKkXOVmqkOobwyutm80UWmTUQWMXjqXGlre93Iwnc/copy" target="_blank">
          Click here to automatically create a copy of the sheet
        </a></strong>-->

      </p>
      <p class="muted">
        After making a copy, paste your new Spreadsheet’s <strong>link or ID</strong> into the box above to activate it.
      </p>
    </section>

    <section>
      <h2>🌐 Live App</h2>
      <p>
        You can launch the app directly in your browser:
        <br>
        <strong><a href="https://jareddo-kun.github.io/FEUCalcSite/" target="_blank">https://jareddo-kun.github.io/FEUCalcSite/</a></strong>
      </p>
      <p class="muted">
        The app runs completely client-side and communicates only with your Google account through a verified Apps Script connection.
      </p>
    </section>

    <section>
      <h2>🧩 Features</h2>
      <ul>
        <li>Automatically activates the FEU Grade Calculator spreadsheet.</li>
        <li>Configures Apps Script triggers and setup scripts.</li>
        <li>Protects essential formula cells from accidental edits.</li>
        <li>Clean and lightweight HTML + JavaScript interface.</li>
        <li>Hosted on GitHub Pages with Google Apps Script integration.</li>
      </ul>
    </section>

    <section>
      <h2>⚙️ How It Works</h2>
      <ol>
        <li>Open the web app — you’ll see a simple activation interface.</li>
        <li>Enter your <strong>Spreadsheet ID</strong> (from your Sheet URL).</li>
        <li>The app securely connects to the Apps Script backend (<code>Code.gs</code>).</li>
        <li>The script performs activation and setup automatically.</li>
        <li>When finished, a success message confirms activation.</li>
      </ol>
    </section>

    <section>
      <h2>🔐 Privacy & Security</h2>
      <p>
        This app only accesses the spreadsheets you authorize. It:
      </p>
      <ul>
        <li>Operates entirely within Google’s secure Apps Script environment.</li>
        <li>Does <strong>not</strong> collect or store personal data externally.</li>
        <li>Is open-source and auditable for transparency.</li>
      </ul>
      <p>See the full policy here:
      <br>🔗 <a href="https://g.jareddo06.ovh/privacy" target="_blank">Privacy Policy</a></p>
    </section>

    <section>
      <h2>🧠 Tech Stack</h2>
      <ul>
        <li><strong>Frontend:</strong> HTML, CSS, JavaScript (client-side only)</li>
        <li><strong>Backend:</strong> Google Apps Script (<code>Code.gs</code>)</li>
        <li><strong>Hosting:</strong> GitHub Pages</li>
        <li><strong>APIs:</strong> Google Sheets API via Apps Script</li>
      </ul>
    </section>

    <section>
      <h2>🪜 Setup Guide (Developers)</h2>
      <ol>
        <li>Fork or clone this repository.</li>
        <li>Modify the HTML and JavaScript files as needed.</li>
        <li>In Google Apps Script:
          <ul>
            <li>Paste your backend code (<code>Code.gs</code>).</li>
            <li>Deploy as a Web App (execute as <em>me</em>, access by <em>anyone</em>).</li>
          </ul>
        </li>
        <li>Update the script URL in <code>index.html</code>.</li>
        <li>Push to GitHub — Pages redeploys automatically.</li>
      </ol>
    </section>

    <section>
      <h2>🧾 License</h2>
      <p>
        Licensed under the <strong>MIT License</strong> — you are free to reuse, modify, and distribute with attribution.
      </p>
    </section>

    <section>
      <h2>📬 Contact</h2>
      <p>
        For inquiries or support, reach out via email:
        <br><strong>miguel@jareddo06.ovh</strong>
      </p>
    </section>

    <hr>

    <footer>
      <p>© 2025 FEU Grade Calculator Activator. Hosted on <a href="https://pages.github.com/" target="_blank">GitHub Pages</a> • <a href="https://g.jareddo06.ovh/privacy" target="_blank">Privacy Policy</a></p>
    </footer>
  </main>

  <script>
    function extractSheetId(input) {
      const idMatch = input.match(/[-\w]{25,}/);
      return idMatch ? idMatch[0] : null;
    }

    document.getElementById("launchBtn").addEventListener("click", () => {
      const input = document.getElementById("sheetInput").value.trim();
      const id = extractSheetId(input);
      const status = document.getElementById("launchStatus");

      if (!id) {
        status.textContent = "⚠️ Please enter a valid Spreadsheet link or ID.";
        return;
      }

      status.textContent = "Redirecting...";
      window.location.href = "https://feu.jareddo06.ovh/app/?id=" + encodeURIComponent(id);
    });
  </script>
</body>
</html>