-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (125 loc) · 7.87 KB
/
index.html
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adventure Alchemist - Unleash your creativity with our dungeon generator.</title>
<link rel="icon" type="image/png" href="./assets/images/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap" rel="stylesheet">
</head>
<body class="flex-column min-100-vh">
<!-- Project Title -->
<section id="projectTitle" class="text-center mb-3 mt-2">
<a href="https://github.com/jwilferd10/Adventure-Alchemist" target="_blank" id="gitHubLink" class="text-light borderStyle">
<img src="assets/images/adventurealchemist.png" alt="Adventure Alchemist" class="projectTitleImage">
</a>
</section>
<main class="flex-row justify-space-between">
<!-- Search Form -->
<div class="col-sm-12">
<section class="stickyEffect">
<!-- Wrapper Div -->
<div class=" formCard card border-dark">
<!-- Card Header -->
<div class="card-header-wrapper">
<h3 class="card-header text-uppercase text-center mb-3 cinzelFont"><span class="cardEmoji">🌟</span> Arcane Insights <span class="cardEmoji">🌟</span></h3>
</div>
<!-- Form Select & Generate Options -->
<select id="searchSelection" class="modal-body form-input">
<option value="" disabled selected class="btn">🧙♂️ Select A Topic</option>
<option value="entireScenario" class="btn">🗺️ Entire Scenario</option>
<option value="dungeonTheme" class="btn">🏰 Location Theme</option>
<option value="roomNum" class="btn">🚪 Amount of Room(s)</option>
<option value="difficulty" class="btn">⚔️ Location Difficulty</option>
<option value="monsterType" class="btn">🐉 Monster Type(s)</option>
<option value="checkTrap" class="btn">⛏️ Traps</option>
<option value="loot" class="btn">💰 Loot</option>
</select>
<!-- Modal Footer / Control Buttons -->
<div class="modal-footer d-flex justify-content-center">
<button class="btn controlBtns generateBtn">Generate</button>
<button id="clearListBtn" class="btn deleteBtnStyle controlBtns">Clear List</button>
</div>
</div>
</section>
<!-- Saved Scenarios -->
<section>
<div id="savedCard" class="card border border-dark backgroundEffect hidden col-lg-12 flex-sm-column">
<!-- Card Header -->
<div class="card-header-wrapper">
<h3 class="card-header text-uppercase text-center mb-2 cinzelFont"> <span class="cardEmoji">📚</span> Chronicles <span class="cardEmoji">📚</span></h3>
</div>
<!-- Saved Items List -->
<ul class="m-3 d-flex flex-wrap" id="savedContent">
<!-- Generated HTML Here -->
</ul>
<p class="cardNotification text-center">Clearing saves will collapse this card.</p>
<!-- Clear Saves -->
<div class="d-flex justify-content-center pb-3">
<button class="btn deleteBtnStyle controlBtns hidden" id="clearSaves" data-toggle="modal" data-target="#modalNotify">Clear Saves</button>
</div>
</div>
</section>
<!-- Generated Content -->
<section>
<div class="card border border-dark backgroundEffect">
<!-- Card Header -->
<div id="generatedContentHeader" class="card-header-wrapper card-header">
<h3 class="text-uppercase text-center mb-2 cinzelFont"><span class="cardEmoji">🎲</span> Fabled Adventures <span class="cardEmoji">🎲</span></h3>
<p class="subText text-center">Choose Your Fate, Write Your Characters Destiny</p>
</div>
<!-- Generated Content List -->
<ul id="textArea">
<!-- Generated HTML Here -->
</ul>
<!-- Placeholder for when card is empty -->
<p id="placeholderText" class="cardNotification text-center mt-1 pb-3"> The list is empty, click the generate button to create scenarios!</p>
<!-- Notify User -->
<p id="limitNotify" class="cardNotification text-center m-3 mt-1 hidden">Note: Only the 10 most recent generated items are shown. Oldest items will be automatically deleted.</p>
</div>
</section>
<button type="button" id="mobileGenBtn" class="btn btn-add generateBtn">
<span id="mobileAddEmoji">➕</span>
</button>
</div>
</main>
<!-- Footer -->
<footer>
<p class="footerText pt-2 text-center">©2023 by Jonathan Wilferd</p>
</footer>
<!-- Reusable Modal -->
<div class="modal fade" id="modalNotify" tabindex="-1" role="dialog" aria-labelledby="modalNotifyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h5 class="modal-title" id="modalHeader">Header Placeholder</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Body -->
<div class="modal-body text-center">
<p id="modalText">Modal Placeholder Text</p>
</div>
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="modalActionBtn" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
<!-- script -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="module" src="./assets/js/dom-elements.js"></script>
<script type="module" src="./assets/js/main.js"></script>
</body>
</html>