adding missing files

app/templates/char/create_char.html

@@ -0,0 +1,136 @@
+{% extends "bases/main_base.html" %}
+
+{% block title %}Admin Panel — Dashboard{% endblock %}
+
+{% block body %}
+<div class="container-fluid vh-100">
+  <div class="row vh-100 align-items-center justify-content-center">
+    
+    <div class="col-12 col-md-6">
+      <div class="card w-400 mw-full mx-auto" style="padding: 20px;">
+
+        <h5 class="card-title text-center">Create Character</h5>
+
+        <form action="" method="POST">
+          <div class="form-group">
+            <label for="text-input" class="required">Name</label>
+            <input type="text" class="form-control mb-4" id="character_name" name="character_name" placeholder="Name your Character" required >
+          </div>
+
+          <div class="form-group">
+            <label for="race_dropdown">Choose Race</label>
+            <select class="form-control mb-4" id="race_dropdown" name="race_dropdown" required >
+              <option value="" disabled selected>Select a Race...</option>
+              <option value="avaline">Avaline - Divine, Strong, Intelligent</option>
+              <option value="beastfolk">Beastfolk - Half Beast, Half Terran</option>
+              <option value="draconian">Draconian - Half Dragon, Half Terran</option>
+              <option value="dwarf">Dwarf - Stout, Strong, Short</option>
+              <option value="elf">Elf - Tall, Slender, Agile</option>
+              <option value="hellion">Hellion - Dark, Shadowy Humanoid</option>
+              <option value="terran">Terran - Some call them Human.</option>
+              <option value="vorgath">Vorgath - Monstrous Evil Humanoid</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="profession_dropdown">Choose Profession</label>
+            <select class="form-control mb-4" id="profession_dropdown" name="profession_dropdown" required >
+              <option value="" disabled selected>Select a Profession...</option>
+              <option value="archanist">Archanist - Magic</option>
+              <option value="assassin">Assassin - Physical</option>
+              <option value="bloodborn">Bloodborn - Physical</option>
+              <option value="cleric">Cleric - Magic</option>
+              <option value="guardian">Guardian - Physical</option>
+              <option value="hexist">Hexist - Magic</option>
+              <option value="ranger">Ranger - Physical</option>
+              <option value="warlock">Warlock - Magic</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="origin_story">Origin Story</label>
+            <textarea class="form-control mb-4" id="origin_story" name="origin_story" rows="10" cols="40" required >{{data.starter_text}}</textarea>
+          </div>
+
+          <button type="submit" class="btn btn-primary btn-block">
+            Submit
+          </button>
+        </form>
+      </div>
+      
+    </div>
+
+    <div id="text_holder" class="col-12 col-md-6">
+      <p>
+        To start playing, we need to help you create your unique character. 
+      </p>
+
+      <p>The following fields are required:</p>
+      <ul>
+        <li>Name: This is your character's identity in the game.</li>
+        <li>Race: Choose from our selection of options.</li>
+        <li>Profession: Select from our list of profession (commonly called classes).</li>
+        <li>Origin Story: This section is optional, but can provide additional context for your character.</li>
+      </ul>
+    </div>
+
+    
+
+  </div>
+</div>
+
+{% endblock %}
+
+
+{% block scripts %}
+<script>
+  // Reference to the dropdown and image
+  const racedropdown = document.getElementById('race_dropdown');
+  const profdropdown = document.getElementById('profession_dropdown');
+  const contentArea = document.getElementById('text_holder');
+
+  racedropdown.addEventListener('change', async function () {
+    const value = this.value;
+
+    const url = `/ajax/races?race=${value}`; 
+
+    try {
+      // Fetch HTML fragment from the server
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const html = await response.text();
+
+      // Replace existing content
+      contentArea.innerHTML = html;
+    } catch (err) {
+      console.error("Error loading content:", err);
+      contentArea.innerHTML = `
+        <div class="alert alert-danger">
+          Failed to load content. Please try again.
+        </div>`;
+    }
+  });
+
+  profdropdown.addEventListener('change', async function () {
+    const value = this.value;
+
+    const url = `/ajax/prof?prof=${value}`;  
+
+    try {
+      // Fetch HTML fragment from the server
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const html = await response.text();
+
+      // Replace existing content
+      contentArea.innerHTML = html;
+    } catch (err) {
+      console.error("Error loading content:", err);
+      contentArea.innerHTML = `
+        <div class="alert alert-danger">
+          Failed to load content. Please try again.
+        </div>`;
+    }
+  });
+</script>
+{% endblock %}