93 lines
3.8 KiB
HTML
93 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dragon Code V2.6 Decoder</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Dragon Code V2.6 Decoder</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="input-section">
|
|
<label for="dragon-code-input">Enter your Dragon Code:</label>
|
|
<textarea
|
|
id="dragon-code-input"
|
|
placeholder="DC2.Dw Gm L W T+ Phvwalt Sk? Cbk--^\bl+lum B- A+ N? M+++!1 O/ H+++ $ F+o R++ Ac+++! J++ S U- I-- V- Q--- Tc+++[SE] E++"
|
|
rows="4"
|
|
></textarea>
|
|
<p class="auto-update-note">Results update automatically as you type</p>
|
|
<div class="example-section">
|
|
<button id="load-example" class="secondary-btn">Load Example</button>
|
|
<button id="clear-input" class="secondary-btn">Clear</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="output-section" id="output-section">
|
|
<div class="welcome-message" id="welcome-message">
|
|
<p>Enter a Dragon Code above to see the decoded characteristics.</p>
|
|
<p class="hint">Or click "Load Example" to see how it works!</p>
|
|
</div>
|
|
|
|
<div id="decoded-output" class="hidden">
|
|
<div class="category-section" id="species-section">
|
|
<h2>Species & Form</h2>
|
|
<div class="category-content" id="species-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="physical-section">
|
|
<h2>Physical Characteristics</h2>
|
|
<div class="category-content" id="physical-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="appearance-section">
|
|
<h2>Appearance</h2>
|
|
<div class="category-content" id="appearance-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="abilities-section">
|
|
<h2>Abilities & Powers</h2>
|
|
<div class="category-content" id="abilities-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="life-section">
|
|
<h2>Life & Relationships</h2>
|
|
<div class="category-content" id="life-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="personality-section">
|
|
<h2>Personality & Behavior</h2>
|
|
<div class="category-content" id="personality-content"></div>
|
|
</div>
|
|
|
|
<div class="category-section" id="other-section">
|
|
<h2>Other Traits</h2>
|
|
<div class="category-content" id="other-content"></div>
|
|
</div>
|
|
|
|
<div class="errors-section hidden" id="errors-section">
|
|
<h2>Parsing Warnings</h2>
|
|
<div class="category-content" id="errors-content"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p><a href="dc.txt" class="spec-link">Dragon Code V2.6 Specification</a></p>
|
|
<p><a href="tests/run-tests.html" class="test-link">Run Test Suite</a> to validate implementation</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="js/species-data.js"></script>
|
|
<script src="js/tags-data.js"></script>
|
|
<script src="js/parser.js"></script>
|
|
<script src="js/decoder.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|