dd-spell-scry/public/index.html

52 lines
2.2 KiB
HTML

<html>
<head>
<title>DD Spell Scryer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" crossorigin="anonymous">
<script type="module" src="./js/SpellCard.js"></script>
<script type="module" src="./js/SpellList.js"></script>
<script type="module" src="./js/Place.js"></script>
<script type="module" src="./js/Scryer.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-expand-lg bg-body-tertiary"><span class="navbar-brand">Dragon Dice Spell Scryer</span></div>
<spell-scryer></spell-scryer>
</div>
<!-- Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="helpModalLabel">Introduction</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
To add a spell, select the "Spells" link, choose a spell by selecting the colored title bar, and then selecting the location you want the spell to appear. To remove, press the title bar of the spell. To view the text of the spell, press the name of the spell.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
const isFirstVisit =localStorage.getItem('is-first-visit') || 'true';
if (isFirstVisit === 'true') {
const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));
helpModal.show();
localStorage.setItem('is-first-visit', 'false');
}
</script>
</body>
</html>