Home
<section class="hero">
<div class="wrap">
<p class="eyebrow">Four Pillars · Bazi · Saju</p>
<h1>Your chart, computed — not guessed</h1>
<p class="lede">Every app tells you a story. We show you the calculation: solar terms to the minute, historical time zones, true solar time. Then the reading, written from those numbers.</p>
</div>
</section>
<section class="wrap section">
<form class="card chart-form" method="post" action="/api/chart" novalidate>
<input type="hidden" name="locale" value="en">
<h2>Birth details</h2>
<p class="hint">Nothing is stored until you ask us to save it.</p>
<div class="field">
<label for="name">Name (optional)</label>
<input id="name" name="name" type="text" autocomplete="name" maxlength="40"
placeholder="How should we address you?">
</div>
<div class="grid-3">
<div class="field">
<label for="birth_year">Date of birth</label>
<div class="date-row">
<input id="birth_year" name="birth_year" type="number" inputmode="numeric"
min="1900" max="2026" required placeholder="1990" aria-label="Year">
<select name="birth_month" aria-label="Month">
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<select name="birth_day" aria-label="Day">
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select>
</div>
</div>
<div class="field">
<label for="birth_hour">Time of birth</label>
<div class="date-row">
<select id="birth_hour" name="birth_hour" aria-label="Hour">
<option value="">—</option>
<option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option>
</select>
<select name="birth_minute" aria-label="Minute">
<option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option>
</select>
</div>
<label class="check">
<input type="checkbox" name="hour_unknown" value="1" id="hour_unknown">
<span>I do not know my birth time</span>
</label>
<p class="hint">We will compute six characters instead of eight and mark the hour pillar as estimated.</p>
</div>
<div class="field">
<span class="label">Gender</span>
<div class="radio-row">
<label class="radio"><input type="radio" name="gender" value="male" checked><span>Male</span></label>
<label class="radio"><input type="radio" name="gender" value="female"><span>Female</span></label>
</div>
</div>
</div>
<div class="grid-2">
<div class="field">
<span class="label">Calendar</span>
<div class="radio-row">
<label class="radio"><input type="radio" name="calendar" value="solar" checked><span>Solar</span></label>
<label class="radio"><input type="radio" name="calendar" value="lunar"><span>Lunar</span></label>
<label class="check inline"><input type="checkbox" name="is_leap_month" value="1"><span>Leap month</span></label>
</div>
</div>
<div class="field">
<label for="city_id">City</label>
<select id="city_id" name="city_id"><optgroup label="East Asia"><option value="seoul" selected>Seoul</option><option value="busan">Busan</option><option value="tokyo">Tokyo</option><option value="osaka">Osaka</option><option value="beijing">Beijing</option><option value="shanghai">Shanghai</option><option value="guangzhou">Guangzhou</option><option value="hongkong">Hongkong</option><option value="taipei">Taipei</option><option value="ulaanbaatar">Ulaanbaatar</option></optgroup><optgroup label="Southeast Asia"><option value="bangkok">Bangkok</option><option value="chiangmai">Chiangmai</option><option value="phuket">Phuket</option><option value="hanoi">Hanoi</option><option value="hochiminh">Hochiminh</option><option value="jakarta">Jakarta</option><option value="bali">Bali</option><option value="manila">Manila</option><option value="kualalumpur">Kualalumpur</option><option value="singapore">Singapore</option><option value="yangon">Yangon</option><option value="phnompenh">Phnompenh</option></optgroup><optgroup label="South Asia"><option value="delhi">Delhi</option><option value="mumbai">Mumbai</option><option value="bengaluru">Bengaluru</option><option value="kolkata">Kolkata</option><option value="dhaka">Dhaka</option><option value="karachi">Karachi</option><option value="colombo">Colombo</option><option value="kathmandu">Kathmandu</option></optgroup><optgroup label="Middle East"><option value="dubai">Dubai</option><option value="riyadh">Riyadh</option><option value="doha">Doha</option><option value="kuwait">Kuwait</option><option value="tehran">Tehran</option><option value="istanbul">Istanbul</option><option value="ankara">Ankara</option><option value="cairo">Cairo</option><option value="telaviv">Telaviv</option></optgroup><optgroup label="Europe"><option value="london">London</option><option value="dublin">Dublin</option><option value="paris">Paris</option><option value="berlin">Berlin</option><option value="munich">Munich</option><option value="amsterdam">Amsterdam</option><option value="brussels">Brussels</option><option value="zurich">Zurich</option><option value="vienna">Vienna</option><option value="rome">Rome</option><option value="milan">Milan</option><option value="madrid">Madrid</option><option value="barcelona">Barcelona</option><option value="lisbon">Lisbon</option><option value="warsaw">Warsaw</option><option value="prague">Prague</option><option value="budapest">Budapest</option><option value="stockholm">Stockholm</option><option value="oslo">Oslo</option><option value="copenhagen">Copenhagen</option><option value="helsinki">Helsinki</option><option value="athens">Athens</option><option value="kyiv">Kyiv</option><option value="moscow">Moscow</option></optgroup><optgroup label="North America"><option value="newyork">Newyork</option><option value="boston">Boston</option><option value="washington">Washington</option><option value="atlanta">Atlanta</option><option value="miami">Miami</option><option value="chicago">Chicago</option><option value="dallas">Dallas</option><option value="denver">Denver</option><option value="phoenix">Phoenix</option><option value="losangeles">Losangeles</option><option value="sanfrancisco">Sanfrancisco</option><option value="seattle">Seattle</option><option value="vancouver">Vancouver</option><option value="toronto">Toronto</option><option value="montreal">Montreal</option><option value="mexicocity">Mexicocity</option><option value="honolulu">Honolulu</option></optgroup><optgroup label="Latin America"><option value="bogota">Bogota</option><option value="lima">Lima</option><option value="santiago">Santiago</option><option value="buenosaires">Buenosaires</option><option value="saopaulo">Saopaulo</option><option value="riodejaneiro">Riodejaneiro</option><option value="caracas">Caracas</option><option value="guatemala">Guatemala</option></optgroup><optgroup label="Africa"><option value="lagos">Lagos</option><option value="nairobi">Nairobi</option><option value="johannesburg">Johannesburg</option><option value="capetown">Capetown</option><option value="casablanca">Casablanca</option><option value="accra">Accra</option><option value="addisababa">Addisababa</option></optgroup><optgroup label="Oceania"><option value="sydney">Sydney</option><option value="melbourne">Melbourne</option><option value="brisbane">Brisbane</option><option value="perth">Perth</option><option value="auckland">Auckland</option></optgroup></select>
<p class="hint">Used only to correct the time for longitude and time zone.</p>
</div>
</div>
<details class="advanced">
<summary>Advanced</summary>
<div class="grid-2">
<div class="field">
<label for="longitude">Longitude (°E)</label>
<input id="longitude" name="longitude" type="number" step="0.01" min="-180" max="180"
placeholder="126.98">
<p class="hint">Leave empty to use the city value.</p>
</div>
<div class="field">
<label for="correction">Time correction</label>
<select id="correction" name="correction">
<option value="longitude" selected>Longitude only</option>
<option value="astronomical">Longitude + equation of time</option>
<option value="standard">None (use civil time)</option>
</select>
</div>
</div>
</details>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Calculate</button>
<button class="btn btn-ghost" type="reset">Reset</button>
</div>
</form>
</section>
<section class="wrap section">
<ul class="features">
<li>
<h3>Astronomically anchored</h3>
<p>Year and month pillars switch at the exact solar-term instant, not at midnight on the 1st.</p>
</li><li>
<h3>Historical time zones</h3>
<p>Standard-time changes and daylight saving are applied from real time-zone data — the errors most charts silently carry.</p>
</li><li>
<h3>True solar time</h3>
<p>Longitude correction, and optionally the equation of time, so a 09:20 birth is not treated as 09:20 everywhere.</p>
</li><li>
<h3>Audit panel</h3>
<p>We list every adjustment we made. If you disagree with a convention, you can change it and recompute.</p>
</li>
</ul>
</section>
<section class="wrap section narrow">
<p class="aside-link"><a href="/about">See what we compute →</a></p>
</section>
<script>
(function () {
var cb = document.getElementById('hour_unknown');
var hh = document.getElementById('birth_hour');
if (cb && hh) {
cb.addEventListener('change', function () {
hh.disabled = cb.checked;
if (cb.checked) hh.value = '';
});
}
})();
</script>