Token-Efficient-Coding/index.html at main · sparkplug604/Token-Efficient-Coding · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta
      name="description"
      content="Token Efficient Coding helps teams understand token utilization, reduce AI waste, lower costs, and build greener AI systems."
    >
    <title>Token Efficient Coding</title>
    <link rel="icon" href="assets/tec-logo-primary.png">
    <link rel="preload" href="assets/hero-earth.jpg" as="image">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="site-header" data-header>
      <a class="brand" href="#home" aria-label="Token Efficient Coding home">
        <img src="assets/tec-logo-primary.png" alt="TEC">
      </a>

      <button class="nav-toggle" type="button" aria-label="Open navigation" aria-expanded="false" data-nav-toggle>
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav class="site-nav" aria-label="Primary navigation" data-nav>
        <a href="#home" class="is-active">Home</a>
        <a href="#solutions">Solutions</a>
        <a href="mission.html">Mission</a>
      </nav>
    </header>

    <main id="home">
      <section class="hero section-pad" aria-labelledby="hero-title">
        <div class="hero-media" aria-hidden="true"></div>
        <div class="shell hero-grid">
          <div class="hero-copy">
            <p class="eyebrow">Token Efficient Coding</p>
            <h1 id="hero-title">
              Code smarter.
              <span>Use fewer tokens.</span>
              Save the planet.
            </h1>
            <p class="lede">
              We provide individuals with solutions that significantly lower token usage to
              reduce cost and unnecessary compute.
            </p>

            <div class="hero-actions" aria-label="Primary actions">
              <a class="button primary" href="#solutions">Explore solutions</a>
            </div>

            <ul class="value-list" aria-label="Core benefits">
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 14a8 8 0 0 0 16 0c0-5-8-11-8-11S4 9 4 14Z"></path><path d="m9 14 2 2 5-6"></path></svg>
                Less waste
              </li>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v10M15 9.5c-.7-.8-1.7-1.2-3-1.2-1.7 0-2.8.8-2.8 2 0 3.2 5.6 1.4 5.6 4.4 0 1.2-1 2.1-2.9 2.1-1.4 0-2.6-.5-3.4-1.4"></path></svg>
                Lower costs
              </li>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4C12 4 5 9 5 17c0 2 1 3 1 3s1-1 3-1c8 0 11-7 11-15Z"></path><path d="M5 19c3-4 7-6 12-7"></path></svg>
                Greener planet
              </li>
            </ul>
          </div>

          <aside class="telemetry-card" aria-label="TEC token telemetry preview">
            <div class="telemetry-window">
              <span></span>
              <span></span>
              <span></span>
              <strong>TEC Token Telemetry</strong>
            </div>
            <div class="telemetry-body">
              <div class="telemetry-toolbar" aria-label="Telemetry controls">
                <span>Usage Guard</span>
                <span>Live</span>
                <span>Safe</span>
              </div>
              <h2>Protect Yourself</h2>
              <p class="telemetry-lede">
                A token control surface for tracking usage, efficiency, and AI platform limits
                before costs surprise you.
              </p>
              <div class="telemetry-stats">
                <div>
                  <span>Run tokens</span>
                  <strong>50,548</strong>
                  <em>Historical usage import</em>
                </div>
                <div>
                  <span>Limit</span>
                  <strong>Safe</strong>
                  <em>95% left in 5h</em>
                </div>
                <div>
                  <span>Efficiency</span>
                  <strong>Normal run</strong>
                  <em>Baseline validated</em>
                </div>
              </div>
              <div class="telemetry-panel">
                <div><span>Measured calls</span><strong>5 LLM responses</strong></div>
                <div><span>5h used</span><strong>5%</strong></div>
                <div><span>5h remaining</span><strong>95%</strong></div>
                <div><span>Weekly remaining</span><strong>76%</strong></div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section class="problem section-pad" aria-labelledby="problem-title">
        <div class="shell split">
          <div>
            <p class="eyebrow">The Problem</p>
            <h2 id="problem-title">AI token waste is out of control.</h2>
          </div>
          <div class="copy-block">
            <p>
              Huge datasets, inefficient prompts, runaway context windows, and opaque pricing
              make it hard to know what AI work really costs. Big AI companies benefit while
              teams carry the spend and the planet carries the load.
            </p>
          </div>
        </div>
      </section>

      <section id="mission" class="mission section-pad" aria-labelledby="mission-title">
        <div class="shell mission-grid">
          <div class="mission-copy">
            <p class="eyebrow">Our Mission</p>
            <h2 id="mission-title">Efficiency is the new innovation.</h2>
            <p>
              We're fighting for efficient AI. AI is rapidly moving toward consumption-based
              pricing models, replacing affordable flat-rate fees that let you code without worry.
            </p>
            <a class="text-link" href="mission.html">Our mission</a>
          </div>

          <div class="chip-visual">
            <img src="assets/tec-chip.jpg" alt="TEC chip glowing red on a circuit board">
          </div>

          <div class="benefit-panel">
            <p>By improving token efficiency, we all win.</p>
            <ul>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"></path><path d="M7 5v4M17 10v4M10 15v4"></path></svg>
                <span><strong>Lower datacenter load</strong>Less energy. Less strain.</span>
              </li>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"></circle><path d="M12 7v10M15 9.5c-.7-.8-1.7-1.2-3-1.2-1.7 0-2.8.8-2.8 2 0 3.2 5.6 1.4 5.6 4.4 0 1.2-1 2.1-2.9 2.1-1.4 0-2.6-.5-3.4-1.4"></path></svg>
                <span><strong>Lower costs</strong>Keep more in your budget.</span>
              </li>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4C12 4 5 9 5 17c0 2 1 3 1 3s1-1 3-1c8 0 11-7 11-15Z"></path><path d="M5 19c3-4 7-6 12-7"></path></svg>
                <span><strong>Lower emissions</strong>Smaller footprint. Better future.</span>
              </li>
              <li>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path><circle cx="10" cy="7" r="4"></circle><path d="M21 21v-2a4 4 0 0 0-3-3.9"></path><path d="M17 3.1a4 4 0 0 1 0 7.8"></path></svg>
                <span><strong>Better AI for everyone</strong>Sustainable innovation at scale.</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section id="solutions" class="solutions section-pad" aria-labelledby="solutions-title">
        <div class="shell solutions-grid">
          <div class="section-intro">
            <p class="eyebrow">Our Solutions</p>
            <h2 id="solutions-title">Tools to help you do more with less.</h2>
            <p>
              From real-time token analytics to intelligent optimization engines, we are
              building the practical toolkit for AI efficiency.
            </p>
            <a class="text-link" href="#documentation">Explore solutions</a>
          </div>

          <article class="solution-card">
            <svg class="solution-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 20V9M12 20V4M19 20v-7"></path></svg>
            <h3>TEC Token Telemetry</h3>
            <ul>
              <li>Understand exactly where every token goes</li>
              <li>Prompt and context breakdowns</li>
              <li>Waste detection and cost analysis</li>
              <li>Historical efficiency trends</li>
            </ul>
            <a class="text-link" href="#documentation">Coming Soon</a>
          </article>

          <article class="solution-card">
            <svg class="solution-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"></path><circle cx="9" cy="7" r="2"></circle><circle cx="15" cy="12" r="2"></circle><circle cx="11" cy="17" r="2"></circle></svg>
            <h3>TEC Skills Reduce Cost</h3>
            <ul>
              <li>Reduce token usage without sacrificing output quality</li>
              <li>Leading-edge chunking optimization</li>
              <li>Prompt refactoring and automated suggestions</li>
              <li>Efficiency scoring before you run</li>
            </ul>
            <p class="coming-soon">Groundbreaking skills to significantly reduce cost have been validated and are coming soon.</p>
          </article>
        </div>
      </section>

      <section id="documentation" class="future section-pad" aria-labelledby="future-title">
        <div class="shell future-grid">
          <div>
            <p class="eyebrow">The Future</p>
            <h2 id="future-title">Built for a faster, smarter, greener AI future.</h2>
            <p>
              We are just getting started. Benchmarks, calculators, and implementation
              guides will live here as the product ecosystem grows.
            </p>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="shell footer-inner">
        <img src="assets/tec-logo-primary.png" alt="TEC">
        <div class="footer-copy">
          <p>Token Efficient Coding. Precise token utilization for a more efficient AI future.</p>
          <p>Operated by Skybolt Solutions Ltd in Vancouver, Canada.</p>
        </div>
        <a href="https://tokenefficientcoding.com">tokenefficientcoding.com</a>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>