TypeScript-Beginner-Tutorial-Project/index.html at main · MRMajewski/TypeScript-Beginner-Tutorial-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <title>Kreator Postaci — BREACH 01</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 2rem;
      max-width: 800px;
    }
    .desc {
      margin-top: 0.5rem;
      margin-bottom: 1.5rem;
      font-style: italic;
      color: #444;
    }
    select {
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>Kreator Postaci — BREACH 01</h1>

<h3>Imię</h3>
  <label> Wprowadź imię Herosa
  </br>
    <input id="nameInput" type="text" />
  </label>
  <br /><br />

 <h3>Profesja</h3>
  <label>Wybierz profesję Herosa:
    <select id="professionSelect"></select>
  </label>
  <div id="professionDesc" class="desc"></div>


  <h3>Umiejętności</h3>
  <label>Wybierz  trzy  umiejętności Herosa:
    <select id="skillSelect" multiple size="7"></select>
  </label>
  <div id="skillDesc" class="desc"></div>

  <h3>Statystyki</h3>
  <label>Rozdaj punkty statystyk Herosa</label></br>
  <div id="stats">
    </br>
    <label>Siła: <input type="number" min="8" max="15" value="8" data-stat="str" /></label><br />
    <label>Zręczność: <input type="number" min="8" max="15" value="8" data-stat="dex" /></label><br />
    <label>Budowa: <input type="number" min="8" max="15" value="8" data-stat="con" /></label><br />
    <label>Inteligencja: <input type="number" min="8" max="15" value="8" data-stat="int" /></label><br />
    <label>Zmysły: <input type="number" min="8" max="15" value="8" data-stat="sen" /></label><br />
    <label>Charyzma: <input type="number" min="8" max="15" value="8" data-stat="cha" /></label><br />
  </div>

  <p>Pozostałe punkty: <span id="pointsLeft">27</span></p>
  <p id="errorMessage" style="color: red; font-weight: bold;"></p>
  <button id="resetBtn">Resetuj Statystyki</button>

  <br /><br />
  <button id="createBtn">Stwórz Postać</button>

  <br /><br />
  <button id="saveBtn">Zapisz Postać</button>
  <button id="loadBtn">Wczytaj Postać</button>

  <pre id="output"></pre>

  <script type="module" src="./dist/app.js"></script>
</body>
</html>