<!DOCTYPE html>
<html>
 
<head>
    <title>D&D Characters</title>
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
 
<body>

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
  
    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="/">Home</a>
            <a class="navbar-item" href="party?cache=true">Generate Adventurer Party</a>
            <a class="navbar-item" href="character">Generate Single Adventurer</a>
        </div>
    </div>
</nav>

<div class="card">
    <div class="container">
    <div class="content">
        <div class="card-content">
            <div class="content">
                <div class="block">
                    <h1>A Dungeons & Dragons Character Generator</h1>
                    <div class="tabs"><ul>
                    {% for t in ["what","how","why", "about"] %}
                        {%if t == tab %}
                            <li class="is-active"><a href="{{ '/?tab={}'.format(t) }}">{{t.title()}}</a></li>
                        {%else%}
                            <li><a href="{{ '/?tab={}'.format(t) }}">{{t.title()}}</a></li>
                        {%endif%}
                    {%endfor%}
                    </ul></div>

                    {%if tab == "what" %}
                        <h3>What is Dungeons & Dragons?</h3>
                        <p>Dungeons & Dragons, also known as D&D, is a pen and paper table top game. One player is the story teller, the "dungeon master" and the others interact with the story using their "adventurers." An adventurer is a playable character, who has a mixture of abilities and powers, the details of which are often kept on piece of paper called a "character sheet."</p>
                        <br>
                        <img src="https://static0.colliderimages.com/wordpress/wp-content/uploads/2024/06/dungeons-and-dragons-in-stranger-things.jpg">
                    {%endif%}
                    {%if tab == "how" %}
                        <h3>How does the game work?</h3>
                        <p>Most settings are fantasy based, like game of thrones or lord of the rings. Players often pick up a quest in one of these fantasy worlds, guided by the "Dungeon Master" who narrates the world. The players will make decisions, take actions, and ultimate help write the story as it unfolds.</p>
                        <br>
                        <img src="https://www.baltimoremagazine.com/wp-content/uploads/2023/03/dungeons-and-dragons-honor-among-thieves-movie-review-2023.jpeg">
                    {%endif%}
                    {%if tab == "why" %}
                        <h3>Why would I need a character generator?</h3>
                        <p>It takes time and effort to create a new character; there are many rules, phrases, and terminology you'll need to know to create a character. Most rule books provide an easy to follow guide on making player characters or "adventurers." However, if you are short on time, a generator such as this will get you in the game right away!</p>
                        <br>
                        <img src="https://assetsio.reedpopcdn.com/dnd-character-sheet-dice-pencil.jpeg">
                    {%endif%}
                    {%if tab == "about" %}
                        <h3>About This App</h3>
                        <p>This app accomplishes a few things, but mainly it creates a character for you.</p>
                        <ul>
                        <li>It follows the rules precisely from the books to generate a legal character</li>
                        <li>All stats are randomly rolled, but a class is chosen per your best stats</li>
                        <li>Character equipment and spells are also randomly selected, within that character-class rules</li>
                        <li>You can generate a whole party of characters</li>
                        <li>Within that party, you can adjust their level, and the number of characters</li>
                        <li>You can create a single character to edit</li>
                        <br>
                        <img src="static/magic-user.png">
                        </il>

                    {%endif%}

                </div>
            </div>
        </div>
    </div>
    </div>
</div>

</body>
 
</html>

