clauddy 1.22.0 → 1.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/renderer/index.html +146 -196
- package/renderer/motion.css +531 -0
- package/renderer/pet.js +67 -68
- package/renderer/style.css +514 -684
package/package.json
CHANGED
package/renderer/index.html
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Clauddy</title>
|
|
7
7
|
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
<link rel="stylesheet" href="motion.css" />
|
|
8
9
|
</head>
|
|
9
10
|
<body class="state-idle one-account">
|
|
10
11
|
<div id="card">
|
|
@@ -19,98 +20,79 @@
|
|
|
19
20
|
<div id="acc-backdrop" hidden></div>
|
|
20
21
|
<div id="acc-menu" hidden></div>
|
|
21
22
|
<div id="controls">
|
|
22
|
-
|
|
23
|
+
<!-- icons: lucide (MIT), paths inlined so the renderer stays dependency-free -->
|
|
24
|
+
<button id="gear" title="Settings">
|
|
25
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
26
|
+
<path d="M20 7h-9M14 17H5" />
|
|
27
|
+
<circle cx="17" cy="17" r="3" />
|
|
28
|
+
<circle cx="7" cy="7" r="3" />
|
|
29
|
+
</svg>
|
|
30
|
+
</button>
|
|
23
31
|
<button id="usage" title="Open Usage page">
|
|
24
|
-
<svg viewBox="0 0 24 24"
|
|
25
|
-
<path d="
|
|
32
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
33
|
+
<path d="M7 7h10v10M7 17 17 7" />
|
|
26
34
|
</svg>
|
|
27
35
|
</button>
|
|
28
36
|
<button id="min" title="Minimize / expand">
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
37
|
+
<svg class="ic ic-min" viewBox="0 0 24 24" aria-hidden="true">
|
|
38
|
+
<path d="M5 12h14" />
|
|
39
|
+
</svg>
|
|
40
|
+
<svg class="ic ic-max" viewBox="0 0 24 24" aria-hidden="true">
|
|
41
|
+
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
|
|
42
|
+
</svg>
|
|
43
|
+
</button>
|
|
44
|
+
<button id="close" title="Close">
|
|
45
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
46
|
+
<path d="M18 6 6 18M6 6l12 12" />
|
|
32
47
|
</svg>
|
|
33
48
|
</button>
|
|
34
|
-
<button id="close" title="Close">×</button>
|
|
35
49
|
</div>
|
|
36
50
|
|
|
37
51
|
<!-- Claude pixel pet -->
|
|
38
52
|
<div id="stage">
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<rect x="10.5" y="0.5" width="3" height="5" rx="0.5" />
|
|
45
|
-
<rect x="10.5" y="18.5" width="3" height="5" rx="0.5" />
|
|
46
|
-
<rect x="0.5" y="10.5" width="5" height="3" rx="0.5" />
|
|
47
|
-
<rect x="18.5" y="10.5" width="5" height="3" rx="0.5" />
|
|
48
|
-
</g>
|
|
49
|
-
<use href="#gear-teeth" transform="rotate(45 12 12)" />
|
|
50
|
-
<circle cx="12" cy="12" r="7.5" />
|
|
51
|
-
<circle cx="12" cy="12" r="2.6" fill="#0a0706" />
|
|
52
|
-
</g>
|
|
53
|
-
</defs>
|
|
53
|
+
<svg id="heat-scene" viewBox="0 0 216 135" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
54
|
+
<defs><radialGradient id="heat-pool"><stop stop-color="#ea7434" stop-opacity=".13"/><stop offset="1" stop-color="#ea7434" stop-opacity="0"/></radialGradient></defs>
|
|
55
|
+
<ellipse class="heat-pool" cx="59" cy="110" rx="72" ry="48" fill="url(#heat-pool)"/>
|
|
56
|
+
<g fill="#edb765"><rect class="ember ember-one" x="28" y="56" width="2" height="2"/><rect class="ember ember-two" x="71" y="64" width="2" height="3"/><rect class="ember ember-three" x="103" y="73" width="1.5" height="2"/></g>
|
|
57
|
+
<g class="heat-waves" fill="none" stroke="#b98b68" stroke-width="1" opacity=".18"><path d="M139 110q-4-9 0-17t0-17"/><path d="M157 110q-4-9 0-17t0-17"/><path d="M175 110q-4-9 0-17t0-17"/></g>
|
|
54
58
|
</svg>
|
|
55
|
-
|
|
56
|
-
<svg id="
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<g transform="translate(
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<g transform="translate(118 125) scale(0.6)">
|
|
70
|
-
<g>
|
|
71
|
-
<use href="#gear-unit" x="-12" y="-12" />
|
|
72
|
-
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.8s" repeatCount="indefinite" />
|
|
73
|
-
</g>
|
|
59
|
+
<svg id="scene" viewBox="0 0 216 135" preserveAspectRatio="none"></svg>
|
|
60
|
+
<svg id="reading-room" viewBox="0 0 216 135" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
61
|
+
<defs><linearGradient id="reading-light" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#e6c78d" stop-opacity=".12"/><stop offset="1" stop-color="#e6c78d" stop-opacity="0"/></linearGradient></defs>
|
|
62
|
+
<!-- the pool of light, aimed left so it actually falls on the book -->
|
|
63
|
+
<path class="lamp-light" d="M158 58h24l30 64H62Z" fill="url(#reading-light)"/>
|
|
64
|
+
<!-- the lamp itself: pushed to the right edge and down to 0.72, so it
|
|
65
|
+
stops out-towering the pet and stops standing between him and the
|
|
66
|
+
book. Its base lands back on the floor at y 121. -->
|
|
67
|
+
<g transform="translate(92 34) scale(0.72)">
|
|
68
|
+
<path d="M105 42v78M105 120h16" fill="none" stroke="#82715a" stroke-width="2"/>
|
|
69
|
+
<rect x="94" y="121" width="28" height="3" rx="1" fill="#645849"/>
|
|
70
|
+
<path d="M97 25h22l8 16H89Z" fill="#a88e65"/><path d="M100 25h16l5 16H94Z" fill="#c5ab7e"/>
|
|
71
|
+
<path d="M89 41h38" stroke="#dfc492" stroke-width="1"/><path d="M124 42v11" stroke="#9e8664" stroke-width=".7"/>
|
|
72
|
+
<rect x="123" y="53" width="2" height="3" fill="#baa077"/>
|
|
74
73
|
</g>
|
|
74
|
+
<g class="reading-motes" fill="#ddc298"><circle cx="80" cy="77" r=".65"/><circle cx="93" cy="61" r=".5"/><circle cx="130" cy="61" r=".6"/></g>
|
|
75
75
|
</svg>
|
|
76
|
-
<svg id="scene" viewBox="0 0 216 135" preserveAspectRatio="none"></svg>
|
|
77
76
|
<!-- editing mode: a coding desk (laptop + coffee + plant) behind the pet -->
|
|
78
|
-
<svg id="desk" viewBox="0 0 216 135" preserveAspectRatio="
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
<
|
|
83
|
-
<rect
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
<rect class="
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
<rect class="dk-keys" x="109" y="115.5" width="8" height="2.6" rx="0.5" />
|
|
92
|
-
<rect class="dk-keys" x="119" y="115.5" width="8" height="2.6" rx="0.5" />
|
|
93
|
-
<rect class="dk-keys" x="129" y="115.5" width="18" height="2.6" rx="0.5" />
|
|
94
|
-
<rect class="dk-keys" x="149" y="115.5" width="8" height="2.6" rx="0.5" />
|
|
95
|
-
<rect class="dk-keys" x="159" y="115.5" width="8" height="2.6" rx="0.5" />
|
|
96
|
-
<rect class="c-grn" x="119" y="75" width="4" height="3" />
|
|
97
|
-
<rect class="c-grn" x="126" y="75" width="22" height="3" />
|
|
98
|
-
<rect class="c-grn" x="119" y="82" width="30" height="3" />
|
|
99
|
-
<rect class="c-yel" x="123" y="89" width="26" height="3" />
|
|
100
|
-
<rect class="c-blu" x="119" y="96" width="14" height="3" />
|
|
101
|
-
<rect class="c-yel" x="136" y="96" width="12" height="3" />
|
|
102
|
-
<rect class="c-grn" x="119" y="103" width="10" height="3" />
|
|
103
|
-
<rect class="c-cur" x="132" y="103" width="2.5" height="3.6" />
|
|
104
|
-
</g>
|
|
77
|
+
<svg id="desk" viewBox="0 0 216 135" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
78
|
+
<defs><linearGradient id="monitor-light" x1="0" x2="0" y1="0" y2="1"><stop stop-color="#97b39c" stop-opacity=".065"/><stop offset="1" stop-color="#97b39c" stop-opacity="0"/></linearGradient></defs>
|
|
79
|
+
<path d="M95 81h76l22 39H78Z" fill="url(#monitor-light)"/>
|
|
80
|
+
<path d="M77 115h132v4H77Z" fill="#76604a"/><path d="M81 119v10m122-10v10" stroke="#443729" stroke-width="3"/>
|
|
81
|
+
<path d="M129 91h12v13h-12Z" fill="#a2937b"/><path d="M118 104h34l4 3h-42Z" fill="#b7a78c"/>
|
|
82
|
+
<rect x="91" y="39" width="86" height="55" rx="4" fill="#b5a58b"/><rect x="95" y="43" width="78" height="44" rx="2" fill="#121815"/>
|
|
83
|
+
<path d="M99 47h7m3 0h2" stroke="#6e7d6b" stroke-width="1"/><circle cx="166" cy="91" r=".9" fill="#8b9f75"/>
|
|
84
|
+
<g class="screen-line screen-line-1"><path d="M101 55h13" stroke="#d49472" stroke-width="2"/><path d="M119 55h34" stroke="#b2baa0" stroke-width="2"/></g>
|
|
85
|
+
<g class="screen-line screen-line-2"><path d="M106 63h21m5 0h19" stroke="#92a584" stroke-width="2"/></g>
|
|
86
|
+
<g class="screen-line screen-line-3"><path d="M106 71h13" stroke="#c3a575" stroke-width="2"/><path d="M124 71h31" stroke="#a2ab91" stroke-width="2"/></g>
|
|
87
|
+
<g class="screen-line screen-line-4"><path d="M101 79h7" stroke="#d49472" stroke-width="2"/><rect class="screen-caret" x="114" y="76" width="2" height="5" fill="#d6d5b8"/></g>
|
|
88
|
+
<path d="M108 110h53l5 4h-64Z" fill="#b7a890"/><path d="M111 112h7m3 0h7m3 0h7m3 0h7m3 0h7" stroke="#736959" stroke-width="1"/>
|
|
89
|
+
<ellipse cx="178" cy="112" rx="3" ry="2" fill="#baa68b"/>
|
|
105
90
|
</svg>
|
|
106
91
|
<!-- potted plant, shared by the editing + reading desks -->
|
|
107
|
-
<svg id="plant" viewBox="0 0 216 135" preserveAspectRatio="
|
|
108
|
-
<
|
|
109
|
-
<path
|
|
110
|
-
<
|
|
111
|
-
<path class="dk-leaf" d="M198 103 q-5 -12 -3 -25 q7 9 3 25" />
|
|
112
|
-
<path class="dk-leaf" d="M198 103 q5 -12 3 -25 q-7 9 -3 25" />
|
|
113
|
-
<path class="dk-leaf-c" d="M198 103 q0 -14 0 -27 q3 13 0 27" />
|
|
92
|
+
<svg id="plant" viewBox="0 0 216 135" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
93
|
+
<path d="M187 102h19l-3 12h-13Z" fill="#b27b5b"/><path d="M187 102h19v3h-19Z" fill="#cb9270"/>
|
|
94
|
+
<path d="M196 102V77" fill="none" stroke="#7f906c" stroke-width="1.5"/>
|
|
95
|
+
<g class="plant-leaves"><path d="M196 90q-13 1-12-12 12 0 12 12" fill="#718a61"/><path d="M197 86q12-1 11-14-12 2-11 14" fill="#94a978"/><path d="M196 78q-8-5-3-14 10 5 3 14" fill="#a2b481"/><path d="M196 100q-11-1-12-11 10 0 12 11" fill="#829a6c"/></g>
|
|
114
96
|
</svg>
|
|
115
97
|
<!-- collapsed: a ring around the pet with the session % inside -->
|
|
116
98
|
<svg id="ring" viewBox="0 0 100 100" aria-hidden="true">
|
|
@@ -124,105 +106,58 @@
|
|
|
124
106
|
<g id="body"></g>
|
|
125
107
|
<g id="eyes"></g>
|
|
126
108
|
<rect id="mouth" x="38" y="54" width="24" height="10" rx="2" />
|
|
127
|
-
<!-- reading glasses (reading mode) -->
|
|
128
|
-
<g id="glasses">
|
|
129
|
-
<circle class="gl-lens" cx="35" cy="35" r="8.5" />
|
|
130
|
-
<circle class="gl-lens" cx="65" cy="35" r="8.5" />
|
|
131
|
-
<path class="gl-bridge" d="M43 34 q7 -3 14 0" />
|
|
132
|
-
<line class="gl-arm" x1="26.5" y1="35" x2="20" y2="33" />
|
|
133
|
-
<line class="gl-arm" x1="73.5" y1="35" x2="80" y2="33" />
|
|
134
|
-
</g>
|
|
135
|
-
<!-- mechanic mode (settings): hard hat + screwdriver -->
|
|
136
|
-
<g id="robot">
|
|
137
|
-
<!-- yellow hard hat: pixel-art bitmap, built in pet.js (buildHat) -->
|
|
138
|
-
<g id="hardhat"></g>
|
|
139
|
-
<!-- screwdriver held at an angle to the side, tapping away -->
|
|
140
|
-
<g id="driver">
|
|
141
|
-
<rect class="dr-tip" x="90" y="39" width="6" height="4" />
|
|
142
|
-
<rect class="dr-shaft" x="91" y="43" width="4" height="19" />
|
|
143
|
-
<rect class="dr-hi" x="91" y="43" width="1.6" height="19" />
|
|
144
|
-
<rect class="dr-collar" x="87" y="61" width="12" height="5" rx="1" />
|
|
145
|
-
<rect class="dr-handle" x="84" y="66" width="18" height="24" rx="8" />
|
|
146
|
-
<rect class="dr-handle-hi" x="86.5" y="69" width="2.6" height="17" rx="1.3" />
|
|
147
|
-
<animateTransform attributeName="transform" type="rotate" values="-32 93 70; -26 93 70; -32 93 70" dur="1s" repeatCount="indefinite" />
|
|
148
|
-
</g>
|
|
149
|
-
</g>
|
|
150
109
|
</svg>
|
|
151
110
|
<svg id="zzz" viewBox="0 0 44 44" width="44" height="44">
|
|
152
111
|
<text x="2" y="34" class="z1">Z</text>
|
|
153
112
|
<text x="15" y="23" class="z2">Z</text>
|
|
154
113
|
<text x="26" y="14" class="z3">z</text>
|
|
155
114
|
</svg>
|
|
156
|
-
<
|
|
115
|
+
<svg id="flames" viewBox="0 0 100 110" aria-hidden="true">
|
|
116
|
+
<g class="flame-tongue flame-one"><path d="M12 106Q-5 84 13 35Q9 70 26 80Q40 102 12 106Z" fill="#ed6430"/></g>
|
|
117
|
+
<g class="flame-tongue flame-two"><path d="M28 108Q7 75 37 12Q29 48 47 62Q65 86 47 108Z" fill="#f39135"/><path d="M31 108Q22 87 39 55Q35 77 48 89L43 108Z" fill="#ffd16a"/></g>
|
|
118
|
+
<g class="flame-tongue flame-three"><path d="M48 108Q35 76 68 16Q62 51 79 68Q98 91 77 108Z" fill="#ed6830"/><path d="M55 108Q47 89 67 60Q60 85 75 93L69 108Z" fill="#ffc75c"/></g>
|
|
119
|
+
<g class="flame-tongue flame-four"><path d="M77 108Q66 86 91 36Q85 74 96 87Q103 101 89 108Z" fill="#efa140"/></g>
|
|
120
|
+
</svg>
|
|
157
121
|
<div id="sweat"><i></i><i></i></div>
|
|
158
122
|
<div id="dropzone"></div>
|
|
159
123
|
</div>
|
|
160
124
|
<!-- editing mode, foreground: coffee mug in front of the pet -->
|
|
161
125
|
<!-- mug: its own SVG with UNIFORM scaling (no stage stretch) so it stays perfectly shaped -->
|
|
162
126
|
<svg id="mug" viewBox="0 0 46 44" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
163
|
-
<g class="dk-steam">
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<path class="mug-handle" d="M31 23 q8 1 8 7 q0 6 -8 6.5" />
|
|
168
|
-
<rect class="mug-body" x="12" y="18" width="19" height="26" rx="2.5" />
|
|
169
|
-
<rect class="mug-rim" x="12.5" y="18" width="18" height="3" rx="1.6" />
|
|
170
|
-
<path class="mug-code" d="M17 26 L14 32 L17 38 M20 38 L25 26 M26 26 L29 32 L26 38" />
|
|
127
|
+
<g class="dk-steam"><path class="dk-wisp" d="M19 19q-3-4 0-8t0-8"/><path class="dk-wisp" d="M25 19q-3-4 0-8t0-8" style="animation-delay: 1.4s"/></g>
|
|
128
|
+
<path d="M31 25h3q8 6-3 10" fill="none" stroke="#b8a78d" stroke-width="2.5"/>
|
|
129
|
+
<path d="M13 23h19v15q0 4-4 4H17q-4 0-4-4Z" fill="#b8a78d"/>
|
|
130
|
+
<path d="M15 24h15" stroke="#342820" stroke-width="2"/>
|
|
171
131
|
</svg>
|
|
172
132
|
<!-- running mode: a task log — Claude working (uniform scale) -->
|
|
173
|
-
<svg id="terminal" viewBox="0 0
|
|
174
|
-
|
|
175
|
-
<
|
|
176
|
-
<rect
|
|
177
|
-
<
|
|
178
|
-
<
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
<
|
|
182
|
-
<
|
|
183
|
-
<
|
|
184
|
-
<
|
|
185
|
-
<rect class="tm-cursor" x="43" y="15" width="2.4" height="5.4" />
|
|
186
|
-
<g class="tskA">
|
|
187
|
-
<path class="tm-check" d="M7 30 l1.5 1.5 l2.7 -3.2" />
|
|
188
|
-
<text class="tm-txt" x="14" y="32">Reading files</text>
|
|
189
|
-
</g>
|
|
190
|
-
<g class="tskB">
|
|
191
|
-
<path class="tm-check" d="M7 38 l1.5 1.5 l2.7 -3.2" />
|
|
192
|
-
<text class="tm-txt" x="14" y="40">Editing code</text>
|
|
193
|
-
</g>
|
|
194
|
-
<g class="tskC">
|
|
195
|
-
<path class="tm-check" d="M7 46 l1.5 1.5 l2.7 -3.2" />
|
|
196
|
-
<text class="tm-txt" x="14" y="48">Executing</text>
|
|
197
|
-
</g>
|
|
198
|
-
<g class="tskWait">
|
|
199
|
-
<path class="tm-spin" d="M10.4 54 A2.4 2.4 0 1 1 8 51.6" />
|
|
200
|
-
<text class="tm-txt" x="14" y="56">Waiting</text>
|
|
201
|
-
<text class="tm-dots" x="33" y="56">...</text>
|
|
202
|
-
</g>
|
|
203
|
-
<g class="tskDone">
|
|
204
|
-
<path class="tm-check" d="M7 54 l1.5 1.5 l2.7 -3.2" />
|
|
205
|
-
<text class="tm-done-txt" x="14" y="56">Done</text>
|
|
206
|
-
</g>
|
|
133
|
+
<svg id="terminal" viewBox="0 0 216 135" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
134
|
+
<!-- A job console gives running its own silhouette. -->
|
|
135
|
+
<g class="speed-streaks" stroke="#8d9880" stroke-width="1"><path d="M7 92h8M4 101h11M10 111h6"/></g>
|
|
136
|
+
<rect x="108" y="34" width="99" height="85" rx="5" fill="#111713" stroke="#445347" stroke-width=".8"/>
|
|
137
|
+
<path d="M108 51h99" stroke="#344236" stroke-width=".6"/>
|
|
138
|
+
<path d="M116 41l4 3-4 3" stroke="#b5cba3" stroke-width="1.2" fill="none"/>
|
|
139
|
+
<text x="126" y="46" class="job-label" fill="#becbad">running</text>
|
|
140
|
+
<g class="job-spinner" transform="translate(197 43)"><g class="spinner-rotor"><path d="M0-3a3 3 0 1 1-3 3" stroke="#a3bd8c" stroke-width="1" fill="none"/></g></g>
|
|
141
|
+
<g class="job-row job-row-1"><path d="M116 64l2 2 4-5" stroke="#a5bc8b" stroke-width="1" fill="none"/><text x="128" y="66" class="job-label" fill="#9bab93">build</text><text x="185" y="66" class="job-timing" fill="#61735e">0.4s</text></g>
|
|
142
|
+
<g class="job-row job-row-2"><path d="M116 78l2 2 4-5" stroke="#a5bc8b" stroke-width="1" fill="none"/><text x="128" y="80" class="job-label" fill="#9bab93">test</text><text x="185" y="80" class="job-timing" fill="#61735e">1.2s</text></g>
|
|
143
|
+
<g class="job-row job-row-3"><path d="M116 92l2 2 4-5" stroke="#a5bc8b" stroke-width="1" fill="none"/><text x="128" y="94" class="job-label" fill="#c1d4ab">all done</text></g>
|
|
144
|
+
<path d="M116 108h82" stroke="#2c382d" stroke-width="2"/><path class="job-progress" d="M116 108h82" pathLength="100" stroke="#a5bc8b" stroke-width="2"/>
|
|
207
145
|
</svg>
|
|
208
146
|
<!-- reading mode: a "docs.md" markdown file being read (uniform scale) -->
|
|
209
|
-
<svg id="reading" viewBox="0 0
|
|
210
|
-
<
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
<rect class="dc-body" x="9" y="60" width="40" height="2" />
|
|
224
|
-
<text class="dc-h dc-a" x="7" y="68" style="animation-delay: 3s">## Examples</text>
|
|
225
|
-
<rect class="dc-body" x="9" y="70.5" width="26" height="2" />
|
|
147
|
+
<svg id="reading" viewBox="0 0 96 90" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
148
|
+
<title id="dc-fname">README.md</title>
|
|
149
|
+
<g class="book-float">
|
|
150
|
+
<ellipse cx="48" cy="82" rx="36" ry="3" fill="#d4b993" opacity=".05"/>
|
|
151
|
+
<path d="M6 31l42 9 42-9v42l-42 9L6 73Z" fill="#815644"/>
|
|
152
|
+
<path d="M9 25q19-4 39 8v43Q27 65 9 69Z" fill="#d3c2a2"/>
|
|
153
|
+
<path d="M48 33q20-12 39-8v44q-18-4-39 7Z" fill="#b8a78b"/>
|
|
154
|
+
<path d="M12 22q17-2 36 11v40Q27 62 12 66Z" fill="#e3d2af"/>
|
|
155
|
+
<path d="M48 33q19-13 36-11v44q-15-4-36 7Z" fill="#d6c4a0"/>
|
|
156
|
+
<g fill="none" stroke="#8d7e62" stroke-width="1.6" stroke-linecap="square" opacity=".7"><path d="M18 35l21 6M18 42l21 6M18 49l16 5M18 56l20 6"/><path d="M56 41l20-6M56 48l20-6M56 55l15-4M56 62l20-6"/></g>
|
|
157
|
+
<path d="M48 33v42" stroke="#8b7455" stroke-width="1.3"/>
|
|
158
|
+
<path d="M66 28v21l4-4 4 1V25Z" fill="#b9694e"/>
|
|
159
|
+
<g class="book-page"><path d="M48 33q19-13 36-11v44q-15-4-36 7Z" fill="#e8d9b9"/><g stroke="#a19275" stroke-width="1.5"><path d="M56 41l20-6M56 48l20-6M56 55l15-4M56 62l20-6"/></g></g>
|
|
160
|
+
</g>
|
|
226
161
|
</svg>
|
|
227
162
|
</div>
|
|
228
163
|
|
|
@@ -244,12 +179,9 @@
|
|
|
244
179
|
<span id="status-text">idle</span>
|
|
245
180
|
<span class="sep">·</span>
|
|
246
181
|
<span id="rate">—</span>
|
|
247
|
-
<span class="sep live-only">·</span>
|
|
248
182
|
<span id="live-tag" class="live-only">live</span>
|
|
249
183
|
</div>
|
|
250
184
|
|
|
251
|
-
<div class="divider"></div>
|
|
252
|
-
|
|
253
185
|
<!-- session + weekly (real usage; needs login) -->
|
|
254
186
|
<div id="home-success" hidden>✓ Logged in — your real usage is live</div>
|
|
255
187
|
<div id="limits">
|
|
@@ -279,54 +211,74 @@
|
|
|
279
211
|
</button>
|
|
280
212
|
</div>
|
|
281
213
|
|
|
282
|
-
<div class="divider"></div>
|
|
283
|
-
|
|
284
214
|
<!-- by model (7 days) -->
|
|
285
215
|
<div id="bymodel" class="sec">
|
|
286
216
|
<button class="sec-head" data-sec="bymodel" aria-expanded="true">
|
|
287
217
|
<span class="sec-name">by model · 7 days</span>
|
|
288
218
|
<svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
|
|
289
219
|
</button>
|
|
290
|
-
<div
|
|
220
|
+
<div class="sec-body"><div id="bymodel-list"></div></div>
|
|
291
221
|
</div>
|
|
292
222
|
|
|
293
|
-
<div class="divider"></div>
|
|
294
|
-
|
|
295
223
|
<!-- by project (7 days) -->
|
|
296
224
|
<div id="byproject" class="sec">
|
|
297
225
|
<button class="sec-head" data-sec="byproject" aria-expanded="true">
|
|
298
226
|
<span class="sec-name">by project · 7 days</span>
|
|
299
227
|
<svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
|
|
300
228
|
</button>
|
|
301
|
-
<div
|
|
229
|
+
<div class="sec-body"><div id="byproject-list"></div></div>
|
|
302
230
|
</div>
|
|
303
231
|
|
|
304
|
-
<div class="divider"></div>
|
|
305
|
-
|
|
306
232
|
<!-- 30-day map -->
|
|
307
233
|
<div id="heat">
|
|
308
|
-
<div id="heat-row"></div>
|
|
309
234
|
<div id="heat-meta">
|
|
310
235
|
<span>30 days</span>
|
|
311
236
|
<span id="month-total">0</span>
|
|
312
237
|
</div>
|
|
238
|
+
<div id="heat-row"></div>
|
|
313
239
|
</div>
|
|
314
240
|
</div>
|
|
315
241
|
|
|
316
242
|
<!-- settings panel -->
|
|
317
243
|
<div id="settings">
|
|
244
|
+
<div class="settings-heading">
|
|
245
|
+
<div>
|
|
246
|
+
<h3>A little tune-up</h3>
|
|
247
|
+
<p>Make Clauddy feel at home.</p>
|
|
248
|
+
</div>
|
|
249
|
+
<svg class="ic sh-ico" viewBox="0 0 24 24" aria-hidden="true">
|
|
250
|
+
<path d="M20 7h-9M14 17H5" />
|
|
251
|
+
<circle cx="17" cy="17" r="3" />
|
|
252
|
+
<circle cx="7" cy="7" r="3" />
|
|
253
|
+
</svg>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
318
256
|
<div id="account">
|
|
319
257
|
<!-- who you are comes first: the list, then the login for whichever
|
|
320
258
|
account is active — so "add" and the code field sit together -->
|
|
321
|
-
<div id="acc-connected">
|
|
322
|
-
<span class="
|
|
323
|
-
<
|
|
259
|
+
<div id="acc-connected" class="connect-block">
|
|
260
|
+
<span class="account-avatar" id="acc-avatar">●</span>
|
|
261
|
+
<div>
|
|
262
|
+
<b class="acc-ok" id="acc-ok">Connected</b>
|
|
263
|
+
<span id="acc-sub">your real usage is live</span>
|
|
264
|
+
</div>
|
|
265
|
+
<button id="acc-logout" class="cb-out" title="Sign out" aria-label="Sign out">
|
|
266
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
267
|
+
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
|
|
268
|
+
</svg>
|
|
269
|
+
</button>
|
|
324
270
|
</div>
|
|
325
271
|
<div id="acc-disconnected">
|
|
326
272
|
<div class="set-hint set-hint-left" id="acc-intro">
|
|
327
273
|
Connect your Claude account to show your real usage.
|
|
328
274
|
</div>
|
|
329
|
-
<button id="acc-connect" class="acc-btn">
|
|
275
|
+
<button id="acc-connect" class="acc-btn">
|
|
276
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
277
|
+
<circle cx="12" cy="12" r="10" />
|
|
278
|
+
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20" />
|
|
279
|
+
</svg>
|
|
280
|
+
<span>Log in with browser</span>
|
|
281
|
+
</button>
|
|
330
282
|
<div id="acc-paste">
|
|
331
283
|
<div class="set-hint set-hint-left">Paste the code from the browser page:</div>
|
|
332
284
|
<input id="acc-code" type="text" placeholder="authentication code" />
|
|
@@ -336,30 +288,28 @@
|
|
|
336
288
|
</div>
|
|
337
289
|
</div>
|
|
338
290
|
|
|
291
|
+
<div class="settings-label">where should i live?</div>
|
|
339
292
|
<div id="set-rows">
|
|
293
|
+
<span class="seg settings-segment" id="set-mode">
|
|
294
|
+
<button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
|
|
295
|
+
<button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
|
|
296
|
+
</span>
|
|
340
297
|
<div class="set-row">
|
|
341
|
-
<span class="set-row-label">
|
|
342
|
-
<span class="seg" id="set-mode">
|
|
343
|
-
<button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
|
|
344
|
-
<button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
|
|
345
|
-
</span>
|
|
346
|
-
</div>
|
|
347
|
-
<div class="set-row">
|
|
348
|
-
<span class="set-row-label">Alerts</span>
|
|
298
|
+
<span class="set-row-label">Gentle notifications</span>
|
|
349
299
|
<input id="set-alerts" class="set-toggle" type="checkbox" aria-label="Enable alerts" />
|
|
350
300
|
</div>
|
|
351
|
-
<div class="
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
</div>
|
|
301
|
+
<div class="settings-label threshold-label">alert thresholds</div>
|
|
302
|
+
<div class="set-row set-sub">
|
|
303
|
+
<span class="set-row-label">Heads-up</span>
|
|
304
|
+
<span class="num"><button type="button" class="num-btn" data-for="set-t1" data-step="-1">−</button><span class="num-val"><input id="set-t1" type="number" min="1" max="100" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-t1" data-step="1">+</button></span>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="set-row set-sub">
|
|
307
|
+
<span class="set-row-label">Near limit</span>
|
|
308
|
+
<span class="num"><button type="button" class="num-btn" data-for="set-t2" data-step="-1">−</button><span class="num-val"><input id="set-t2" type="number" min="1" max="100" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-t2" data-step="1">+</button></span>
|
|
360
309
|
</div>
|
|
310
|
+
<div class="settings-label threshold-label">mood thresholds</div>
|
|
361
311
|
<div class="set-row">
|
|
362
|
-
<span class="set-row-label">Catch fire
|
|
312
|
+
<span class="set-row-label">Catch fire</span>
|
|
363
313
|
<span class="num"><button type="button" class="num-btn" data-for="set-fire" data-step="-1">−</button><span class="num-val"><input id="set-fire" type="number" min="1" max="99" step="1" /><i>%</i></span><button type="button" class="num-btn" data-for="set-fire" data-step="1">+</button></span>
|
|
364
314
|
</div>
|
|
365
315
|
<div class="set-row">
|
|
@@ -370,11 +320,11 @@
|
|
|
370
320
|
|
|
371
321
|
<div class="set-actions">
|
|
372
322
|
<button id="set-cancel">Cancel</button>
|
|
373
|
-
<button id="set-save">Save</button>
|
|
323
|
+
<button id="set-save">Save changes</button>
|
|
374
324
|
</div>
|
|
375
325
|
|
|
376
|
-
<div class="set-updates">
|
|
377
|
-
<span class="upd-ver">
|
|
326
|
+
<div class="set-updates version">
|
|
327
|
+
<span class="upd-ver">clauddy v<span id="app-version">—</span></span>
|
|
378
328
|
<span class="upd-right">
|
|
379
329
|
<span id="upd-status"></span>
|
|
380
330
|
<button type="button" id="upd-check" class="acc-link">Check for updates</button>
|