add quests page
This commit is contained in:
parent
9a556bacdd
commit
91257a09f4
7 changed files with 2711 additions and 1 deletions
91
static/character-quests.hbs
Normal file
91
static/character-quests.hbs
Normal 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>
|
||||
104
static/css/character-quests.css
Normal file
104
static/css/character-quests.css
Normal 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);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/skills">Skills</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/reputation">Reputation</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/quests">Quests</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a> 
|
||||
<br>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue