-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfree-tools.html
More file actions
301 lines (282 loc) · 21.4 KB
/
Copy pathfree-tools.html
File metadata and controls
301 lines (282 loc) · 21.4 KB
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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/3f69bab8ef6446338dce0b642/00b83e9d1853cf9c1078884a5.js");</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K4TKPMG9');</script>
<!-- End Google Tag Manager -->
<!-- TikTok Pixel Code Start -->
<script>
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
ttq.load('DABS2BBC77U98E0UJH30');
ttq.page();
}(window, document, 'ttq');
</script>
<!-- TikTok Pixel Code End -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SKL8XQ51ZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SKL8XQ51ZH', { send_page_view: false });
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#050508">
<title>Free Tools — The Sparkverse | The First Spark</title>
<meta name="description" content="Nine free consciousness tools. No email, no signup. Weave your Soul Pattern, decode your numbers, ask the Oracle, forge a sigil, reset in five minutes.">
<link rel="canonical" href="https://thefirstspark.shop/free-tools.html">
<meta property="og:title" content="Free Tools — The Sparkverse">
<meta property="og:description" content="Nine free consciousness tools. No email, no signup. Play in the open.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://thefirstspark.shop/free-tools.html">
<meta property="og:site_name" content="The First Spark">
<meta property="og:image" content="https://thefirstspark.shop/og-home.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Tools — The Sparkverse">
<meta name="twitter:description" content="Nine free consciousness tools. No email, no signup.">
<meta name="twitter:image" content="https://thefirstspark.shop/og-home.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
:root {
--void: #050508;
--spark: #fbbf24;
--nebula: #8b5cf6;
--cyan: #22d3ee;
--hot-pink: #ec4899;
--white: rgba(255,255,255,0.92);
--dim: rgba(255,255,255,0.58);
--dimmer: rgba(255,255,255,0.1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
background:var(--void); color:var(--white);
font-family:'Space Mono','Courier New',monospace;
min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* cosmos */
.cosmos { position:fixed; inset:0; z-index:0; pointer-events:none; }
.stars {
position:absolute; inset:0; opacity:.55;
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9) 50%, transparent 51%),
radial-gradient(1px 1px at 33% 72%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 58% 28%, rgba(255,255,255,.85) 50%, transparent 51%),
radial-gradient(1px 1px at 77% 61%, rgba(255,255,255,.6) 50%, transparent 51%),
radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,.8) 50%, transparent 51%),
radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 45% 48%, rgba(34,211,238,.9) 50%, transparent 51%),
radial-gradient(1px 1px at 68% 84%, rgba(251,191,36,.9) 50%, transparent 51%),
radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,.6) 50%, transparent 51%),
radial-gradient(1px 1px at 84% 38%, rgba(139,92,246,.9) 50%, transparent 51%);
background-size: 900px 700px;
animation: drift 120s linear infinite;
}
@keyframes drift { to { background-position: 900px 700px; } }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; }
.orb-a { width:560px; height:560px; left:-180px; top:-160px; background:radial-gradient(circle, var(--nebula), transparent 70%); }
.orb-b { width:480px; height:480px; right:-160px; top:35%; background:radial-gradient(circle, var(--cyan), transparent 70%); opacity:.22; }
.orb-c { width:400px; height:400px; left:40%; bottom:-200px; background:radial-gradient(circle, var(--spark), transparent 70%); opacity:.14; }
/* nav */
#nav {
position:sticky; top:0; z-index:10;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:16px 24px;
background:rgba(5,5,8,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--dimmer);
}
.nav-logo { font-family:'Orbitron',sans-serif; font-weight:900; font-size:.8em; letter-spacing:.22em; color:var(--white); text-decoration:none; }
.nav-right { display:flex; gap:22px; flex-wrap:wrap; }
.nav-right a { font-size:.66em; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-decoration:none; transition:color .2s; }
.nav-right a:hover { color:var(--cyan); }
.nav-cta { font-size:.66em; letter-spacing:.12em; text-transform:uppercase; color:var(--void); background:var(--spark); padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:700; white-space:nowrap; }
@media (max-width:760px){ .nav-right{display:none;} }
.wrap { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:72px 24px 96px; }
/* hero */
.kicker { display:inline-flex; align-items:center; gap:10px; font-size:.66em; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(34,211,238,.35); padding:8px 14px; border-radius:4px; margin-bottom:26px; }
.kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
h1 { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(38px,7vw,78px); line-height:.98; letter-spacing:-.01em; margin-bottom:20px; }
h1 .em { color:var(--spark); }
.lede { font-size:clamp(14px,1.6vw,17px); line-height:1.7; color:var(--dim); max-width:640px; margin-bottom:38px; }
.lede strong { color:var(--white); font-weight:400; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:64px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:8px; text-decoration:none; font-size:.72em; letter-spacing:.14em; text-transform:uppercase; font-weight:700; transition:transform .2s, box-shadow .2s, border-color .2s; }
.btn-p { background:var(--spark); color:var(--void); }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 12px 32px -10px rgba(251,191,36,.6); }
.btn-g { border:1px solid rgba(255,255,255,.18); color:var(--white); }
.btn-g:hover { border-color:var(--cyan); color:var(--cyan); }
/* section label */
.sec-k { display:flex; align-items:center; gap:16px; font-size:.64em; letter-spacing:.32em; text-transform:uppercase; color:var(--dim); margin-bottom:22px; }
.sec-k::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--dimmer), transparent); }
/* grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; margin-bottom:72px; }
.tool {
position:relative; display:flex; flex-direction:column; gap:12px;
padding:26px 24px 22px; text-decoration:none; color:inherit;
border:1px solid var(--dimmer); border-radius:12px;
background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
transition:transform .25s, border-color .25s, box-shadow .25s;
overflow:hidden;
}
.tool::after { content:''; position:absolute; inset:auto -40% -60% auto; width:220px; height:220px; border-radius:50%; filter:blur(40px); opacity:0; transition:opacity .3s; background:var(--c, var(--nebula)); }
.tool:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.22); box-shadow:0 24px 50px -30px rgba(0,0,0,.9); }
.tool:hover::after { opacity:.28; }
.tool-top { display:flex; justify-content:space-between; align-items:baseline; }
.num { font-family:'Orbitron',sans-serif; font-weight:700; font-size:.78em; letter-spacing:.2em; color:var(--c, var(--nebula)); }
.tag { font-size:.58em; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); border:1px solid var(--dimmer); padding:4px 8px; border-radius:3px; }
.tool h2 { font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05em; letter-spacing:.02em; line-height:1.25; }
.tool p { font-size:.8em; line-height:1.6; color:var(--dim); flex:1; }
.go { font-size:.68em; letter-spacing:.16em; text-transform:uppercase; color:var(--c, var(--nebula)); }
.tool:hover .go { color:var(--white); }
.c-spark { --c: var(--spark); } .c-cyan { --c: var(--cyan); } .c-nebula { --c: var(--nebula); } .c-pink { --c: var(--hot-pink); }
.tool.featured { grid-column: span 1; border-color:rgba(251,191,36,.45); background:linear-gradient(160deg, rgba(251,191,36,.08), rgba(255,255,255,.01)); }
@media (min-width:960px){ .tool.featured { grid-column: span 2; } .tool.featured h2 { font-size:1.35em; } }
/* also free */
.strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; margin-bottom:72px; }
.strip a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--dimmer); border-radius:8px; text-decoration:none; color:var(--white); font-size:.78em; transition:border-color .2s; }
.strip a:hover { border-color:var(--cyan); }
.strip small { display:block; font-size:.78em; color:var(--dim); margin-top:3px; }
.strip span.arr { color:var(--cyan); }
/* next step */
.next { border:1px solid rgba(251,191,36,.35); border-radius:14px; padding:34px 30px; background:linear-gradient(135deg, rgba(139,92,246,.12), rgba(251,191,36,.06)); display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.next h3 { font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.1em; margin-bottom:8px; }
.next p { font-size:.82em; line-height:1.65; color:var(--dim); max-width:560px; }
.next > div:first-child { flex:1; min-width:260px; }
.next .ctas { margin:0; }
footer { position:relative; z-index:1; border-top:1px solid var(--dimmer); padding:32px 24px 48px; }
.f-in { max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:.7em; color:var(--dim); }
.f-in a { color:var(--dim); text-decoration:none; margin-left:16px; letter-spacing:.06em; }
.f-in a:hover { color:var(--cyan); }
</style>
<script>!function(w,d,s,u,n,a,b){if(w[n])return;a=w[n]={q:[],t:+new Date,s:[],o:u,track:function(){a.q.push([+new Date].concat([].slice.call(arguments)))},setScope:function(){a.s=[].slice.call(arguments).filter(function(x){return typeof x==="string"});a.q.push([+new Date,"setScope"].concat(a.s))},scope:function(){var c=[].slice.call(arguments);return{track:function(){a.q.push([+new Date].concat([].slice.call(arguments)).concat([{__scope:c}]))}}}};b=d.createElement(s);b.async=1;b.src=u+"/s.js";d.getElementsByTagName(s)[0].parentNode.insertBefore(b,d.getElementsByTagName(s)[0])}(window,document,"script","https://t.whop.tw","whop");whop.setScope("biz_0xcayhWXVnKO9y");whop.track("page");</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K4TKPMG9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div class="cosmos" aria-hidden="true">
<div class="stars"></div>
<div class="orb orb-a"></div><div class="orb orb-b"></div><div class="orb orb-c"></div>
</div>
<nav id="nav">
<a href="/" class="nav-logo">THE FIRST SPARK</a>
<div class="nav-right">
<a href="ecosystem.html">Start Here</a>
<a href="what-is-a-soul-map.html">What Is a Soul Map</a>
<a href="https://frequency.thefirstspark.shop" target="_blank" rel="noopener noreferrer">Freq Match</a>
<a href="/dark-shadows/">Dark Shadows</a>
<a href="shop.html">Shop</a>
<a href="https://sparkverse.thefirstspark.shop/" target="_blank" rel="noopener noreferrer" style="color:var(--nebula)">Sparkverse</a>
</div>
<a href="map.html" class="nav-cta">Soul Map · $22</a>
</nav>
<main class="wrap">
<span class="kicker">No email · No signup · No catch</span>
<h1>Nine free tools.<br><span class="em">Play in the open.</span></h1>
<p class="lede"><strong>Everything on this page runs in your browser and asks nothing back.</strong> Start with the Soul Pattern if you have thirty seconds. Come back for the rest when you need a reset, a read, or a sigil.</p>
<div class="ctas">
<a href="soul-pattern-generator.html" class="btn btn-p" data-track="free_tools_pattern">Weave Your Soul Pattern →</a>
<a href="https://whop.com/sparkverse-511c/spark-access/" class="btn btn-g" target="_blank" rel="noopener noreferrer" data-track="free_tools_lobby">Join the free community</a>
</div>
<div class="sec-k">Pick a tool</div>
<div class="grid">
<a class="tool featured c-spark" href="soul-pattern-generator.html">
<div class="tool-top"><span class="num">01</span><span class="tag">Preview</span></div>
<h2>Soul Pattern Generator</h2>
<p>Type your name and birth date. Watch your pattern weave itself in real time. This is the free front door to a full Soul Map: the same math, a fraction of the reading.</p>
<span class="go">Weave it →</span>
</a>
<a class="tool c-cyan" href="numbers.html">
<div class="tool-top"><span class="num">02</span><span class="tag">Decoder</span></div>
<h2>Numbers Decoder</h2>
<p>Life Path, Expression, Soul Urge. Find the code you have been running since birth and what each number actually means.</p>
<span class="go">Read the numbers →</span>
</a>
<a class="tool c-nebula" href="oracle.html">
<div class="tool-top"><span class="num">03</span><span class="tag">Ask</span></div>
<h2>The Oracle</h2>
<p>One question, one transmission. Ask the thing you keep circling and take the answer you get.</p>
<span class="go">Ask →</span>
</a>
<a class="tool c-spark" href="daily-reset.html">
<div class="tool-top"><span class="num">04</span><span class="tag">5 min</span></div>
<h2>Daily Reset</h2>
<p>Breath, intention, release. A five-minute calibration for when the day has already gotten loud.</p>
<span class="go">Start reset →</span>
</a>
<a class="tool c-cyan" href="lunar-wisdom.html">
<div class="tool-top"><span class="num">05</span><span class="tag">Timing</span></div>
<h2>Lunar Wisdom</h2>
<p>Where the moon is right now, what that phase is good for, and when to launch, rest, or let go.</p>
<span class="go">Check the moon →</span>
</a>
<a class="tool c-pink" href="sigil.html">
<div class="tool-top"><span class="num">06</span><span class="tag">Generator</span></div>
<h2>Sigil Generator</h2>
<p>Write the intention, strip the letters, get the glyph. Download it, draw it, set it as a lock screen.</p>
<span class="go">Forge a sigil →</span>
</a>
<a class="tool c-nebula" href="intention-setter.html">
<div class="tool-top"><span class="num">07</span><span class="tag">Focus</span></div>
<h2>Intention Setter</h2>
<p>Name the one thing. Lock it in. A small ritual for pointing the day before the day points you.</p>
<span class="go">Set intention →</span>
</a>
<a class="tool c-spark" href="energy-checkin.html">
<div class="tool-top"><span class="num">08</span><span class="tag">Read</span></div>
<h2>Energy Check-In</h2>
<p>Thirty seconds of honesty about where your energy actually is, and one move that fits it.</p>
<span class="go">Check in →</span>
</a>
<a class="tool c-cyan" href="void-portal.html">
<div class="tool-top"><span class="num">09</span><span class="tag">Anonymous</span></div>
<h2>Text the Void</h2>
<p>Say the thing you cannot say anywhere else. No name, no account, no reply expected. The Void listens.</p>
<span class="go">Open the portal →</span>
</a>
</div>
<div class="sec-k">Also free</div>
<div class="strip">
<a href="framework.html"><span>The Framework<small>Seven layers. How every tool here fits together.</small></span><span class="arr">→</span></a>
<a href="https://sparkverse.thefirstspark.shop/" target="_blank" rel="noopener noreferrer"><span>The Sparkverse<small>The doorway. Enter the universe these tools live in.</small></span><span class="arr">→</span></a>
<a href="https://frequency.thefirstspark.shop" target="_blank" rel="noopener noreferrer"><span>Frequency Match<small>Collide two Soul Cards. One score.</small></span><span class="arr">→</span></a>
<a href="/dark-shadows/"><span>Dark Shadows<small>Five chapters through grief. Read in any order.</small></span><span class="arr">→</span></a>
<a href="/mythos/"><span>Book Zero: The Mythos<small>Seven chapters. Where the Sparkverse starts.</small></span><span class="arr">→</span></a>
<a href="https://soul-maps.thefirstspark.shop/color-codex.html" target="_blank" rel="noopener noreferrer"><span>The Color Codex<small>Every soul color and what it means.</small></span><span class="arr">→</span></a>
</div>
<div class="next">
<div>
<h3>When the free version stops being enough</h3>
<p>A Soul Map is the full reading: your pattern, your work, what to focus on now, on a private page you keep forever. Hand-built from your name and birth date. $22 once, no subscription.</p>
</div>
<div class="ctas">
<a href="map.html" class="btn btn-p" data-track="free_tools_buy">Get Your Soul Map · $22</a>
<a href="https://soul-maps.thefirstspark.shop/KJP51988.html" class="btn btn-g" target="_blank" rel="noopener noreferrer">See a real one</a>
</div>
</div>
</main>
<footer>
<div class="f-in">
<span>© The First Spark · Reality is programmable.</span>
<span>
<a href="ecosystem.html">Start Here</a>
<a href="tools.html">All Tools</a>
<a href="shop.html">Shop</a>
<a href="https://whop.com/sparkverse-511c/spark-access/" target="_blank" rel="noopener noreferrer">Community</a>
<a href="privacy-policy.html">Privacy</a>
<a href="terms-of-service.html">Terms</a>
</span>
</div>
</footer>
</body>
</html>