claw-toolbox/index.html at main · kszongic/claw-toolbox · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🦞 Claw's Toolbox</title>
<style>
  :root[data-theme="dark"] {
    --bg: #0d1117; --bg2: #161b22; --border: #30363d; --text: #e6edf3;
    --text2: #8b949e; --accent: #58a6ff; --accent-bg: #1f6feb22;
    --hover-shadow: rgba(88,166,255,0.15); --card-hover: #58a6ff;
  }
  :root[data-theme="light"] {
    --bg: #f6f8fa; --bg2: #ffffff; --border: #d0d7de; --text: #1f2328;
    --text2: #656d76; --accent: #0969da; --accent-bg: #ddf4ff;
    --hover-shadow: rgba(9,105,218,0.12); --card-hover: #0969da;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 2rem; transition: background .3s, color .3s; }
  .container { max-width: 800px; margin: 0 auto; }
  .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
  h1 { font-size: 2rem; }
  .theme-toggle { background: var(--bg2); border: 1px solid var(--border); border-radius: 50px; padding: 6px 14px; cursor: pointer; font-size: 1.2rem; transition: all .2s; color: var(--text); display: flex; align-items: center; gap: 6px; }
  .theme-toggle:hover { border-color: var(--accent); }
  .subtitle { color: var(--text2); margin-bottom: 2rem; font-size: 0.95rem; }
  .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
  .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: all 0.2s; text-decoration: none; color: inherit; display: block; }
  .card:hover { border-color: var(--card-hover); transform: translateY(-2px); box-shadow: 0 4px 12px var(--hover-shadow); }
  .card-emoji { font-size: 2rem; margin-bottom: 0.75rem; }
  .card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent); }
  .card-desc { color: var(--text2); font-size: 0.85rem; line-height: 1.5; }
  .tag { display: inline-block; background: var(--accent-bg); color: var(--accent); padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; margin-top: 0.75rem; margin-right: 4px; }
  footer { margin-top: 3rem; text-align: center; color: var(--text2); font-size: 0.8rem; }
  footer a { color: var(--accent); text-decoration: none; }
  .status-bar { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
  .status-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; font-size: 0.75rem; color: var(--text2); display: flex; align-items: center; gap: 4px; }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; display: inline-block; }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>🦞 Claw's Toolbox</h1>
    <button class="theme-toggle" id="themeBtn" title="Toggle light/dark mode">
      <span id="themeIcon">☀️</span>
    </button>
  </div>
  <p class="subtitle">Built by Claw for Henry. All tools run 100% in your browser — no server, no tracking.</p>

  <div class="status-bar">
    <div class="status-chip"><span class="status-dot"></span> Auth: Server-side</div>
    <div class="status-chip">🔒 Cloudflare Edge</div>
    <div class="status-chip" id="toolCount">🧰 10 tools</div>
  </div>

  <div class="grid">
    <a class="card" href="finance-dashboard.html">
      <div class="card-emoji">💰</div>
      <div class="card-title">Finance Dashboard</div>
      <div class="card-desc">Full personal finance tracker — net worth, portfolio P/L, savings rate, FI calculator, cash flow analysis.</div>
      <span class="tag">finance</span><span class="tag">interactive</span>
    </a>

    <a class="card" href="net-worth-dashboard.html">
      <div class="card-emoji">📊</div>
      <div class="card-title">Net Worth Dashboard</div>
      <div class="card-desc">Track net worth over time with asset allocation charts, monthly snapshots, and growth projections.</div>
      <span class="tag">finance</span><span class="tag">charts</span>
    </a>

    <a class="card" href="portfolio-dashboard.html">
      <div class="card-emoji">📈</div>
      <div class="card-title">Portfolio Dashboard</div>
      <div class="card-desc">Investment portfolio tracker with holdings, allocation visualization, and performance metrics.</div>
      <span class="tag">investing</span><span class="tag">portfolio</span>
    </a>

    <a class="card" href="portfolio-rebalancer.html">
      <div class="card-emoji">⚖️</div>
      <div class="card-title">Portfolio Rebalancer</div>
      <div class="card-desc">Calculate exactly how much to buy/sell to hit target allocation with visual deviation tracking.</div>
      <span class="tag">investing</span><span class="tag">calculator</span>
    </a>

    <a class="card" href="synth-ocean.html">
      <div class="card-emoji">🎹</div>
      <div class="card-title">Synth Ocean</div>
      <div class="card-desc">Browser synthesizer with piano keyboard, waveform visualizer, ADSR envelope, reverb/delay effects, and a step sequencer.</div>
      <span class="tag">music</span><span class="tag">creative</span>
    </a>

    <a class="card" href="json-wizard.html">
      <div class="card-emoji">
      <div class="card-emoji">🧙</div>
      <div class="card-title">JSON Wizard</div>
      <div class="card-desc">Format, minify, diff, query, tree view, convert to CSV/YAML/XML/TypeScript. The ultimate JSON toolkit.</div>
      <span class="tag">dev-tools</span><span class="tag">json</span>
    </a>

    <a class="card" href="loot-box.html">
      <div class="card-emoji">🎰</div>
      <div class="card-title">Loot Box Simulator</div>
      <div class="card-desc">Open gacha boxes, collect 30 ridiculous items across 6 rarity tiers. Pity system included. No real money harmed.</div>
      <span class="tag">fun</span><span class="tag">gacha</span><span class="tag">collection</span>
    </a>

    <a class="card" href="pixel-art.html">
      <div class="card-emoji">🎨</div>
      <div class="card-title">Pixel Art Studio</div>
      <div class="card-desc">Draw pixel art with a 16/32/64 grid, fill tool, eyedropper, undo/redo, and export to PNG. Keyboard shortcuts included.</div>
      <span class="tag">creative</span><span class="tag">art</span><span class="tag">fun</span>
    </a>

    <a class="card" href="art-generator.html">
      <div class="card-emoji">🌌</div>
      <div class="card-title">Abstract Art Generator</div>
      <div class="card-desc">Procedural generative art — nebulae, flow fields, plasma, voronoi shatter, circle packing. Every click is unique.</div>
      <span class="tag">creative</span><span class="tag">generative</span><span class="tag">art</span>
    </a>

    <a class="card" href="anime-season-tracker.html">
      <div class="card-emoji">🎌</div>
      <div class="card-title">Anime Season Tracker</div>
      <div class="card-desc">Track currently airing anime, manage your watchlist, never miss a new episode.</div>
      <span class="tag">anime</span><span class="tag">entertainment</span>
    </a>
  </div>

  <footer>
    Built with 🦞 by Claw · All data stays in your browser (localStorage) · <a href="https://github.com/kszongic/claw-toolbox">Source</a>
  </footer>
</div>

<script>
// Theme toggle
const html = document.documentElement;
const themeBtn = document.getElementById('themeBtn');
const themeIcon = document.getElementById('themeIcon');

// Load saved theme
const saved = localStorage.getItem('claw_theme') || 'dark';
html.setAttribute('data-theme', saved);
themeIcon.textContent = saved === 'dark' ? '☀️' : '🌙';

themeBtn.addEventListener('click', () => {
  const current = html.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-theme', next);
  localStorage.setItem('claw_theme', next);
  themeIcon.textContent = next === 'dark' ? '☀️' : '🌙';
});
</script>
</body>
</html>