9c284edc9f
- /api/synastry: inter-chart aspects with weighted harmony/tension scores, house overlays, written compatibility report - Compatibility tab: biwheel (partner ring in gold), inter-aspect grid, score gauges - Export toolbar: chart .json (re-loadable via Load file), wheel SVG/PNG, print CSS covers synastry - Aspect types explained reference + pair notes for 30+ classic pairs woven into natal aspect texts - Wheel fixes: correct arc sweep direction, text-presentation zodiac glyphs (no more emoji rendering) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
135 lines
5.2 KiB
HTML
135 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>NATEGODD — Natal Chart Generator</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>NATE<span>GODD</span></h1>
|
|
<p class="tag">natal chart generator · swiss ephemeris precision</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="form-card">
|
|
<form id="chart-form" autocomplete="off">
|
|
<div class="row">
|
|
<label>Name
|
|
<input type="text" id="f-name" placeholder="optional">
|
|
</label>
|
|
</div>
|
|
<div class="row triple">
|
|
<label>Date of birth
|
|
<input type="date" id="f-date" required min="1800-01-01" max="2399-12-31">
|
|
</label>
|
|
<label>Time
|
|
<input type="time" id="f-time" value="12:00" step="60">
|
|
</label>
|
|
<label class="check"><input type="checkbox" id="f-unknown"> time unknown</label>
|
|
</div>
|
|
<div class="row">
|
|
<label>Birthplace
|
|
<input type="text" id="f-place" placeholder="start typing a city…" spellcheck="false">
|
|
</label>
|
|
<div id="city-results" hidden></div>
|
|
</div>
|
|
<details id="manual-loc">
|
|
<summary>manual coordinates / timezone</summary>
|
|
<div class="row triple">
|
|
<label>Latitude <input type="number" id="f-lat" step="any" min="-90" max="90" placeholder="-33.8688"></label>
|
|
<label>Longitude <input type="number" id="f-lon" step="any" min="-180" max="180" placeholder="151.2093"></label>
|
|
<label>UTC offset <input type="number" id="f-offset" step="any" min="-14" max="14" placeholder="auto"></label>
|
|
</div>
|
|
</details>
|
|
<div class="row triple">
|
|
<label>House system
|
|
<select id="f-houses">
|
|
<option value="P" selected>Placidus</option>
|
|
<option value="K">Koch</option>
|
|
<option value="W">Whole Sign</option>
|
|
<option value="E">Equal</option>
|
|
<option value="O">Porphyry</option>
|
|
<option value="C">Campanus</option>
|
|
<option value="R">Regiomontanus</option>
|
|
</select>
|
|
</label>
|
|
<button type="submit" id="go">Cast Chart ✶</button>
|
|
<select id="saved-charts" title="saved charts"><option value="">— saved charts —</option></select>
|
|
<button type="button" id="import-btn" title="load a .json chart file">📂 Load file</button>
|
|
<input type="file" id="import-file" accept=".json" hidden>
|
|
</div>
|
|
<p id="form-error" hidden></p>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="results" hidden>
|
|
<div id="chart-header"></div>
|
|
<div id="toolbar">
|
|
<button type="button" id="exp-json" title="save this chart as a .json file (re-loadable)">💾 JSON</button>
|
|
<button type="button" id="exp-svg" title="download wheel as SVG">⬇ SVG</button>
|
|
<button type="button" id="exp-png" title="download wheel as PNG">⬇ PNG</button>
|
|
<button type="button" id="exp-print" title="print / save as PDF">🖨 Print</button>
|
|
</div>
|
|
<nav id="tabs">
|
|
<button data-tab="wheel" class="active">Wheel</button>
|
|
<button data-tab="positions">Positions</button>
|
|
<button data-tab="aspects">Aspects</button>
|
|
<button data-tab="report">Report</button>
|
|
<button data-tab="synastry">Compatibility</button>
|
|
</nav>
|
|
<div id="tab-wheel" class="tab active">
|
|
<div id="wheel-box"></div>
|
|
<div id="wheel-side">
|
|
<div id="balances"></div>
|
|
<div id="moonphase"></div>
|
|
</div>
|
|
</div>
|
|
<div id="tab-positions" class="tab">
|
|
<h3>Planets & Points</h3>
|
|
<table id="pos-table"></table>
|
|
<h3>Angles</h3>
|
|
<table id="angle-table"></table>
|
|
<h3>House Cusps</h3>
|
|
<table id="house-table"></table>
|
|
</div>
|
|
<div id="tab-aspects" class="tab">
|
|
<h3>Aspect Grid</h3>
|
|
<div class="scrollx"><table id="aspect-grid"></table></div>
|
|
<h3>Aspect List</h3>
|
|
<table id="aspect-list"></table>
|
|
<h3>Declination Parallels</h3>
|
|
<table id="parallel-list"></table>
|
|
<h3>Aspect Types Explained</h3>
|
|
<div id="aspect-ref"></div>
|
|
</div>
|
|
<div id="tab-report" class="tab">
|
|
<div id="report"></div>
|
|
<button id="print-btn" type="button">🖨 Print report</button>
|
|
</div>
|
|
<div id="tab-synastry" class="tab">
|
|
<div id="syn-picker">
|
|
<p>Compare this chart with a saved chart (cast a chart to save it, or 📂 load a .json file):</p>
|
|
<select id="syn-partner"><option value="">— choose partner chart —</option></select>
|
|
<button type="button" id="syn-go">Compare ♡</button>
|
|
<p id="syn-error" hidden></p>
|
|
</div>
|
|
<div id="syn-results" hidden>
|
|
<div id="syn-scores"></div>
|
|
<div id="syn-wheel"></div>
|
|
<h3>Inter-Aspect Grid <span class="hint">(rows = first chart, columns = partner)</span></h3>
|
|
<div class="scrollx"><table id="syn-grid"></table></div>
|
|
<h3>Compatibility Report</h3>
|
|
<div id="syn-report"></div>
|
|
<button type="button" id="syn-print">🖨 Print report</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>NATEGODD · geocentric tropical zodiac · Swiss Ephemeris · IANA historical time atlas</footer>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|