ethercalc/start.html at main · audreyt/ethercalc · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>EtherCalc — the web spreadsheet</title>
  <meta charset="utf-8" />
  <script src="./static/start-bootstrap.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="EtherCalc is a web spreadsheet. No sign-up — create a sheet, share its URL, and edit together in real time. Import and export CSV, ODS, and XLSX." />
  <meta name="referrer" content="no-referrer" />
  <meta name="theme-color" content="#0c3159" />
  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16">
  <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#0c3159">
  <link href="./static/passkey/ui.css" rel="stylesheet" type="text/css">
  <link href="./static/start.css" rel="stylesheet" type="text/css">
  <!-- Custom-element upgrade race (see docs/superpowers/specs/2026-07-11-passkey-ui-m3e-design.md):
       m3e-theme only gets display:contents from its own shadow styles once
       Lit registers it. Pin the pre-upgrade state to match. -->
  <style>m3e-theme:not(:defined) { display: contents; }</style>
</head>

<body id="framedpagebody" class="home">
<m3e-theme color="#0c3159" scheme="light" variant="expressive" motion="expressive">

  <!-- Gsheet-inspired: no full-width chrome bar. The brand stays a slim
       in-flow page title (like a doc's filename); project links become
       a floating pill cluster fixed to the viewport's top-right corner
       (persists on scroll), the way Sheets floats its own icon row over
       the sheet rather than reserving a dedicated top-bar band. -->
  <header class="ec-top">
    <h1 class="ec-brand">
      <svg class="ec-brand__glyph" viewBox="0 0 20 20" aria-hidden="true" focusable="false">
        <rect x="1.5" y="1.5" width="17" height="17" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/>
        <line x1="10" y1="1.5" x2="10" y2="18.5" stroke="currentColor" stroke-width="1.2"/>
        <line x1="1.5" y1="10" x2="18.5" y2="10" stroke="currentColor" stroke-width="1.2"/>
        <rect x="2.6" y="2.6" width="6.3" height="6.3" rx="1.4" fill="currentColor" stroke="none"/>
      </svg>
      EtherCalc
    </h1>
  </header>

  <nav class="ec-floatnav ec-floatnav--top" aria-label="Project links">
    <a class="ec-floatnav__link" href="https://docs.ethercalc.net" target="_blank" rel="noopener">Docs</a>
    <a class="ec-floatnav__link" href="https://github.com/audreyt/ethercalc/blob/main/API.md" target="_blank" rel="noopener">API</a>
    <a class="ec-floatnav__link" href="https://github.com/audreyt/ethercalc" target="_blank" rel="noopener">GitHub</a>
  </nav>

  <main class="ec-main">

    <!-- The hero is a sheet: EtherCalc's own material. The headline is
         typed into cell A1 — selection marquee, fill handle, highlighted
         headers and the formula bar mirroring the active cell, exactly as
         a spreadsheet renders it. -->
    <section class="ec-sheet" aria-label="EtherCalc">
      <div class="ec-formulabar" aria-hidden="true">
        <span class="ec-formulabar__ref">A1</span>
        <span class="ec-formulabar__fx">fx</span>
        <span class="ec-formulabar__value" id="ec-fx-value">Share the URL. Edit together.</span>
      </div>
      <div class="ec-grid">
        <div class="ec-grid__corner" aria-hidden="true"></div>
        <div class="ec-grid__col ec-grid__col--active" aria-hidden="true">A</div>
        <div class="ec-grid__col" aria-hidden="true">B</div>
        <div class="ec-grid__col ec-grid__hide-sm" aria-hidden="true">C</div>
        <div class="ec-grid__col ec-grid__hide-sm" aria-hidden="true">D</div>

        <div class="ec-grid__row ec-grid__row--active" aria-hidden="true">1</div>
        <div class="ec-grid__cell ec-grid__cell--a1">
          <h2 class="ec-headline">Share the URL. Edit together.</h2>
          <span class="ec-fillhandle" aria-hidden="true"></span>
        </div>
        <div class="ec-grid__cell" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>

        <div class="ec-grid__row" aria-hidden="true">2</div>
        <div class="ec-grid__cell ec-grid__cell--a2">
          <p class="ec-subline">A web spreadsheet — no sign-up, no install. Every change appears on all screens as you type.</p>
        </div>
        <div class="ec-grid__cell" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>

        <div class="ec-grid__row" aria-hidden="true">3</div>
        <div class="ec-grid__cell" aria-hidden="true"></div>
        <div class="ec-grid__cell" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>
        <div class="ec-grid__cell ec-grid__hide-sm" aria-hidden="true"></div>
      </div>
    </section>

    <!-- #intro-links is an async enhancement slot: static public CTA in
         normal flow; the passkey bundle appends #ec-landing-actions after
         whoami() succeeds (never when auth is disabled). min-height in CSS
         reserves the row so late injection causes no layout shift. -->
    <div id="intro-links">
      <a id="newpadbutton" class="ec-cta" href="./=_new"><span>Create spreadsheet</span></a>
    </div>

    <section id="drop" class="ec-drop" aria-label="Import a spreadsheet">
      <svg class="ec-drop__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path fill="currentColor" d="M11 15.6 8.7 13.3l-1.4 1.4L12 19.4l4.7-4.7-1.4-1.4L13 15.6V9h-2v6.6ZM5 3h14a2 2 0 0 1 2 2v4h-2V5H5v4H3V5a2 2 0 0 1 2-2Z"/>
      </svg>
      <p class="ec-drop__text" id="ec-drop-status" role="status" aria-live="polite">Drop a .csv, .ods, or .xlsx file here to import it</p>
      <p class="ec-drop__browse-row">
        <label class="ec-drop__browse" for="ec-file-input">or browse for a file</label>
        <input type="file" id="ec-file-input" accept=".csv,.ods,.xlsx,.xls,text/csv">
      </p>
      <label class="ec-drop__rename"><input type="checkbox" id="rename_sheet" name="rename_sheet"> Rename sheet(s) after upload</label>
    </section>

    <p class="ec-facts">By <a href="https://audreyt.org/" target="_blank" rel="noopener">Audrey Tang</a> since 2011</p>

  </main>

  <script src="./static/jszip.js"></script>
  <script src="./static/xlsx.core.min.js"></script>
  <script src="./static/shim.js"></script>
  <script type="module" src="./static/passkey/ui.js"></script>

<script src="./static/start-page.js"></script>
</m3e-theme>
</body>
</html>