add quests page

This commit is contained in:
smthbh 2025-04-28 13:08:44 -04:00
parent 9a556bacdd
commit 91257a09f4
7 changed files with 2711 additions and 1 deletions

View file

@ -0,0 +1,91 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };
</script>
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
{{> character-header }}
{{#each data.categories as |quests category|}}
<div class="quests-table" style="margin-bottom: 20px;">
<h2 class="is-size-4 category-header collapsible">
{{category}}
<span class="collapse-icon">▼</span>
</h2>
<div class="category-content expanded">
<!-- In Progress Quests -->
<h3 class="is-size-5 collapsible">
In Progress
<span class="collapse-icon">▼</span>
</h3>
<div class="collapsible-content expanded">
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th>Quest</th>
<th>Level</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{{#each quests}}
{{#if (eq this.status "In Progress")}}
<tr>
<td class="quest-name">{{this.title}}</td>
<td class="quest-level">{{this.questLevel}}</td>
<td class="quest-status {{this.status}}">{{this.status}}</td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
</div>
<!-- Completed Quests -->
<h3 class="is-size-5 collapsible">
Completed
<span class="collapse-icon">▼</span>
</h3>
<div class="collapsible-content">
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th>Quest</th>
<th>Level</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{{#each quests}}
{{#if (eq this.status "Completed")}}
<tr>
<td class="quest-name">{{this.title}}</td>
<td class="quest-level">{{this.questLevel}}</td>
<td class="quest-status {{this.status}}">{{this.status}}</td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
{{/each}}
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.collapsible').forEach(header => {
header.addEventListener('click', function(e) {
// Stop event from bubbling to parent collapsible elements
e.stopPropagation();
const content = this.nextElementSibling;
content.classList.toggle('expanded');
this.classList.toggle('expanded');
});
});
});
</script>

View file

@ -0,0 +1,104 @@
.quests-table {
max-width: 500px;
width: 100%;
}
.quests-table h2 {
color: #FFD700;
}
.quest-name {
color: white;
}
.quest-level {
text-align: center;
width: 80px;
}
.quest-status {
text-align: center;
width: 120px;
}
.quest-status.completed {
color: #4CAF50;
}
.quest-status.in-progress {
color: #FFD100;
}
.collapsible {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
}
.collapse-icon {
display: inline-block;
transition: transform 0.3s ease;
font-size: 12px;
}
.collapsible.expanded .collapse-icon {
transform: rotate(180deg);
}
.collapsible-content {
display: none;
overflow: hidden;
transition: height 0.3s ease-out;
}
.collapsible-content.expanded {
display: block;
}
.completed-quests.expanded .collapsible-content {
display: block;
}
.completed-quests.expanded .collapse-icon {
transform: rotate(180deg);
}
.quest-category {
margin-bottom: 20px;
}
.quest-category h3 {
color: #ccc;
margin-bottom: 10px;
}
.is-size-5 {
margin-bottom: 10px;
}
.category-header {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
}
.category-content {
display: none;
margin-top: 10px;
}
.category-content.expanded {
display: block;
}
.category-header .collapse-icon {
margin-left: auto;
}
.category-header.expanded .collapse-icon {
transform: rotate(180deg);
}

View file

@ -5,6 +5,7 @@
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/skills">Skills</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/reputation">Reputation</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/quests">Quests</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a>&emsp;
<br>