Skip to content

Commit dc7a287

Browse files
thefirstsparkthefirstspark
committed
Add Two Clocks tool: inner date clock vs worn-name outer clock
1 parent 27ce4de commit dc7a287

1 file changed

Lines changed: 189 additions & 0 deletions

File tree

‎two-clocks.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
5+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
6+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
7+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
8+
})(window,document,'script','dataLayer','GTM-K4TKPMG9');</script>
9+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SKL8XQ51ZH"></script>
10+
<script>
11+
window.dataLayer = window.dataLayer || [];
12+
function gtag(){dataLayer.push(arguments);}
13+
gtag('js', new Date());
14+
gtag('config', 'G-SKL8XQ51ZH');
15+
</script>
16+
<meta charset="UTF-8">
17+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18+
<meta name="theme-color" content="#050508">
19+
<title>Two Clocks — Worn Name & Life Path | The First Spark</title>
20+
<meta name="description" content="Birth date is the inner clock. The name you answer to is the outer clock. Run each worn name separately. A name change retunes the address, not the lesson.">
21+
<link rel="canonical" href="https://thefirstspark.shop/two-clocks.html">
22+
<meta property="og:title" content="Two Clocks — The First Spark">
23+
<meta property="og:description" content="Inner clock from the birth date. Outer clock from the worn name. Never mash the spans.">
24+
<meta property="og:type" content="website">
25+
<meta property="og:url" content="https://thefirstspark.shop/two-clocks.html">
26+
<meta property="og:image" content="https://thefirstspark.shop/og-home.png">
27+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
28+
<link rel="preconnect" href="https://fonts.googleapis.com">
29+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30+
<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">
31+
<style>
32+
:root {
33+
--void: #050508; --spark: #fbbf24; --nebula: #8b5cf6;
34+
--cyan: #22d3ee; --hot-pink: #ec4899;
35+
--white: rgba(255,255,255,0.92); --dim: rgba(255,255,255,0.58); --dimmer: rgba(255,255,255,0.1);
36+
}
37+
* { margin:0; padding:0; box-sizing:border-box; }
38+
body { background:var(--void); color:var(--white); font-family:'Space Mono',monospace; min-height:100vh; }
39+
#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); border-bottom:1px solid var(--dimmer); }
40+
.nav-logo { font-family:'Orbitron',sans-serif; font-weight:900; font-size:.8em; letter-spacing:.22em; color:var(--white); text-decoration:none; }
41+
.nav-right { display:flex; gap:18px; flex-wrap:wrap; }
42+
.nav-right a { font-size:.66em; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-decoration:none; }
43+
.nav-right a:hover { color:var(--cyan); }
44+
.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; }
45+
@media (max-width:760px){ .nav-right{display:none;} }
46+
.wrap { max-width:980px; margin:0 auto; padding:56px 24px 96px; }
47+
.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:22px; }
48+
h1 { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(32px,6vw,58px); line-height:1.02; margin-bottom:16px; }
49+
h1 span { color:var(--spark); }
50+
.lede { font-size:15px; line-height:1.7; color:var(--dim); max-width:680px; margin-bottom:36px; }
51+
.lede strong { color:var(--white); font-weight:400; }
52+
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
53+
@media (max-width:720px){ .grid2 { grid-template-columns:1fr; } }
54+
.card { border:1px solid var(--dimmer); border-radius:12px; padding:22px; background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
55+
.card h2 { font-family:'Orbitron',sans-serif; font-size:.85em; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px; }
56+
.card.outer h2 { color:var(--spark); }
57+
label { display:block; font-size:.62em; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:12px 0 6px; }
58+
input, select { width:100%; background:#0b0b10; border:1px solid var(--dimmer); color:var(--white); padding:10px 12px; border-radius:6px; font-family:inherit; font-size:14px; }
59+
input:focus { outline:none; border-color:var(--cyan); }
60+
button.act { margin-top:16px; background:var(--spark); color:var(--void); border:0; padding:12px 18px; border-radius:6px; font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
61+
button.ghost { background:transparent; color:var(--cyan); border:1px solid rgba(34,211,238,.35); padding:8px 12px; border-radius:6px; font-family:inherit; font-size:.7em; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; margin-top:10px; }
62+
.readout { margin-top:14px; font-size:13px; line-height:1.65; color:var(--dim); }
63+
.readout b { color:var(--white); }
64+
.big { font-family:'Orbitron',sans-serif; font-size:2.1em; color:var(--spark); letter-spacing:.06em; }
65+
.spans { display:flex; flex-direction:column; gap:10px; }
66+
.span-row { border:1px solid var(--dimmer); border-radius:8px; padding:12px; }
67+
.span-row.current { border-color:rgba(251,191,36,.45); }
68+
.flag { font-size:.58em; letter-spacing:.2em; text-transform:uppercase; color:var(--spark); }
69+
.note { margin-top:28px; font-size:13px; line-height:1.7; color:var(--dim); border-top:1px solid var(--dimmer); padding-top:22px; }
70+
footer { border-top:1px solid var(--dimmer); padding:28px 24px 48px; font-size:.7em; color:var(--dim); }
71+
footer .f { max-width:980px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
72+
footer a { color:var(--dim); text-decoration:none; }
73+
footer a:hover { color:var(--cyan); }
74+
</style>
75+
<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>
76+
</head>
77+
<body>
78+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K4TKPMG9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
79+
<nav id="nav">
80+
<a href="/" class="nav-logo">THE FIRST SPARK</a>
81+
<div class="nav-right">
82+
<a href="free-tools.html">Free Tools</a>
83+
<a href="numbers.html">Numbers</a>
84+
<a href="soul-pattern-generator.html">Soul Pattern</a>
85+
<a href="selector-model.html">Selector</a>
86+
<a href="shop.html">Shop</a>
87+
</div>
88+
<a href="map.html" class="nav-cta">Soul Map · $22</a>
89+
</nav>
90+
<main class="wrap">
91+
<span class="kicker">Selector protocol · public</span>
92+
<h1>Two clocks.<br><span>One body.</span></h1>
93+
<p class="lede"><strong>The birth date cannot be renamed.</strong> That is the inner clock — Life Path, day number, the line you walk this year. <strong>The name you answer to can slip.</strong> That is the outer clock — Expression of the worn name, the mailbox. Run every name span separately. A name change retunes the right column only.</p>
94+
<div class="grid2">
95+
<div class="card">
96+
<h2>Inner clock · date</h2>
97+
<label>Birth date</label>
98+
<input type="date" id="dob" value="1988-05-19">
99+
<label>As-of year (Personal Year)</label>
100+
<input type="number" id="asof" value="2026" min="1900" max="2100">
101+
<button class="act" type="button" onclick="runInner()">Read inner clock</button>
102+
<div class="readout" id="innerOut">Date in. Name stays out of this column.</div>
103+
</div>
104+
<div class="card outer">
105+
<h2>Outer clock · worn names</h2>
106+
<div class="spans" id="spans"></div>
107+
<button class="ghost" type="button" onclick="addSpan()">+ Add a worn span</button>
108+
<button class="act" type="button" onclick="runOuter()">Score each span</button>
109+
<div class="readout" id="outerOut">Do not average childhood + marriage + now.</div>
110+
</div>
111+
</div>
112+
<p class="note">Compounds stay visible: 11 and 22 on path and expression; 13, 14, 16, 19 on the day. Personal Year uses month + day + the as-of year. Cosmic line is age modulo 12 (0 written as 12). Outer-clock lag: a new worn name finishes old routing at the end of the current Personal Year. This page does not compute past lives.</p>
113+
<p class="note" style="border:0;padding-top:0;margin-top:8px;">
114+
Next: <a href="soul-pattern-generator.html" style="color:var(--cyan)">Soul Pattern Generator</a> ·
115+
<a href="numbers.html" style="color:var(--cyan)">Numbers Decoder</a> ·
116+
<a href="map.html" style="color:var(--spark)">Full Soul Map · $22</a>
117+
</p>
118+
</main>
119+
<footer><div class="f"><span>© The First Spark</span><span><a href="free-tools.html">Free tools</a> <a href="privacy-policy.html">Privacy</a></span></div></footer>
120+
<script>
121+
const PYTH = {A:1,B:2,C:3,D:4,E:5,F:6,G:7,H:8,I:9,J:1,K:2,L:3,M:4,N:5,O:6,P:7,Q:8,R:9,S:1,T:2,U:3,V:4,W:5,X:6,Y:7,Z:8};
122+
function digitSum(n){ n=Math.abs(n|0); let s=0; while(n>0){s+=n%10;n=Math.floor(n/10);} return s; }
123+
function reduceKeepMaster(n){
124+
while(n>9 && n!==11 && n!==22 && n!==33) n=digitSum(n);
125+
return n;
126+
}
127+
function reduceAll(n){ while(n>9) n=digitSum(n); return n; }
128+
function nameSum(str){
129+
let t=0, letters=0;
130+
for(const ch of str.toUpperCase()){
131+
if(PYTH[ch]){ t+=PYTH[ch]; letters++; }
132+
}
133+
return {raw:t, letters, expr: reduceKeepMaster(t)};
134+
}
135+
function fmtCompound(raw, reduced){
136+
if(raw===reduced) return String(reduced);
137+
return raw + ' → ' + reduced;
138+
}
139+
function addSpan(name, from, current){
140+
const box=document.getElementById('spans');
141+
const row=document.createElement('div');
142+
row.className='span-row'+(current?' current':'');
143+
row.innerHTML=`<label>Worn name</label><input class="nm" value="${name||''}" placeholder="the name they answer to">
144+
<label>Worn from (year)</label><input class="yr" type="number" value="${from||''}" placeholder="2015">
145+
<label><input type="checkbox" class="cur" ${current?'checked':''}> current address</label>`;
146+
box.appendChild(row);
147+
}
148+
function runInner(){
149+
const v=document.getElementById('dob').value;
150+
const asof=+document.getElementById('asof').value || new Date().getFullYear();
151+
if(!v){ document.getElementById('innerOut').textContent='Need a date.'; return; }
152+
const [Y,M,D]=v.split('-').map(Number);
153+
const lpRaw=M+D+Y;
154+
const lp=reduceKeepMaster(lpRaw);
155+
const dayKeep=[13,14,16,19].includes(D)?D:reduceKeepMaster(D);
156+
const py=reduceAll(M+D+asof);
157+
const today=new Date();
158+
let a=asof-Y;
159+
const bdThis=new Date(asof,M-1,D);
160+
if(asof===today.getFullYear() && today<bdThis) a-=1;
161+
if(a<0) a=0;
162+
const line=a%12===0?12:a%12;
163+
document.getElementById('innerOut').innerHTML=
164+
`<div class="big">${lp}</div>
165+
Life Path ${fmtCompound(lpRaw, lp)}<br>
166+
Day ${dayKeep}${dayKeep!==reduceAll(D)?' (passage)':''}<br>
167+
Personal Year ${asof}: <b>${py}</b><br>
168+
Age ${a} → cosmic line <b>${line}</b><br>
169+
This column does not move when the name does.`;
170+
}
171+
function runOuter(){
172+
const rows=[...document.querySelectorAll('.span-row')];
173+
if(!rows.length){ document.getElementById('outerOut').textContent='Add a worn span.'; return; }
174+
const bits=rows.map((r)=>{
175+
const nm=r.querySelector('.nm').value.trim();
176+
const yr=r.querySelector('.yr').value;
177+
const cur=r.querySelector('.cur').checked;
178+
const s=nameSum(nm);
179+
r.classList.toggle('current',cur);
180+
return `<div><b>${nm||'(blank)'}</b> ${cur?'<span class="flag">current address</span>':''}<br>
181+
from ${yr||'—'} · letters ${s.letters} · raw ${s.raw} · Expression <b>${s.expr}</b></div>`;
182+
});
183+
document.getElementById('outerOut').innerHTML=bits.join('<hr style="border:0;border-top:1px solid rgba(255,255,255,.08);margin:10px 0">')+
184+
'<p style="margin-top:12px">Name change retunes this column only. Expect lag through the rest of the Personal Year.</p>';
185+
}
186+
addSpan('', '', true);
187+
</script>
188+
</body>
189+
</html>

0 commit comments

Comments
 (0)