Add Skills, Reputation, and Quests pages
This commit is contained in:
smthbh
commit
f43bd87d51
23 changed files with 4413 additions and 6 deletions
167
static/character-quests-compare.hbs
Normal file
167
static/character-quests-compare.hbs
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
|
||||
{{> icons }}
|
||||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
</script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
<div class="quest-compare-section" style="margin-bottom: 20px;">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Compare with:</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="compareCharacter">
|
||||
<option value="">Select a character...</option>
|
||||
{{#each data.otherCharacters}}
|
||||
<option value="{{this.realmName}}/{{this.name}}"
|
||||
{{#if (eq this.realmName ../data.char2.realm)}}
|
||||
{{#if (eq this.name ../data.char2.name)}}
|
||||
selected
|
||||
{{/if}}
|
||||
{{/if}}>
|
||||
{{this.name}}
|
||||
</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info" id="compareButton" disabled>
|
||||
Compare Quests
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quest-comparison-header">
|
||||
<h2>Quest Comparison</h2>
|
||||
<div class="characters">
|
||||
<span class="char1">
|
||||
{{#if (eq data.char2.realm data.char1.realm)}}
|
||||
{{data.char1.name}}
|
||||
{{else}}
|
||||
{{data.char1.realm}}/{{data.char1.name}}
|
||||
{{/if}}
|
||||
</span>
|
||||
vs
|
||||
<span class="char2">
|
||||
<a href="{{websiteRoot}}/character/{{data.char2.realm}}/{{data.char2.name}}/quests/compare/{{data.char1.realm}}/{{data.char1.name}}">
|
||||
{{#if (eq data.char2.realm data.char1.realm)}}
|
||||
{{data.char2.name}}
|
||||
{{else}}
|
||||
{{data.char2.realm}}/{{data.char2.name}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{! Add this section before the categories loop }}
|
||||
<div class="quests-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4 category-header collapsible expanded">
|
||||
Active Quests
|
||||
<span class="collapse-icon">▼</span>
|
||||
</h2>
|
||||
|
||||
<div class="category-content expanded">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Quest</th>
|
||||
<th>Area (Level)</th>
|
||||
<th>{{data.char1.name}}</th>
|
||||
<th>{{data.char2.name}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each (getActiveQuests data.categories)}}
|
||||
<tr class="{{getDiffClass this}}">
|
||||
<td class="quest-name">
|
||||
<a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a>
|
||||
</td>
|
||||
<td class="quest-level">{{this.category}} ({{this.questLevel}})</td>
|
||||
<td class="quest-status {{this.char1Status}}">{{this.char1Status}}</td>
|
||||
<td class="quest-status {{this.char2Status}}">{{this.char2Status}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#each data.categories as |quests category|}}
|
||||
<div class="quests-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4 category-header collapsible">
|
||||
{{@key}}
|
||||
{{#with (getDiffCount this)}}
|
||||
{{#if this}}
|
||||
<span class="diff-count">({{this}} different)</span>
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
<span class="collapse-icon">▼</span>
|
||||
</h2>
|
||||
|
||||
<div class="category-content">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Quest</th>
|
||||
<th>Level</th>
|
||||
<th>{{../data.char1.name}}</th>
|
||||
<th>{{../data.char2.name}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each this}}
|
||||
<tr class="{{getDiffClass this}}">
|
||||
<td class="quest-name">
|
||||
<a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a>
|
||||
</td>
|
||||
<td class="quest-level">{{this.questLevel}}</td>
|
||||
<td class="quest-status {{this.char1Status}}">{{this.char1Status}}</td>
|
||||
<td class="quest-status {{this.char2Status}}">{{this.char2Status}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.collapsible').forEach(header => {
|
||||
header.addEventListener('click', function() {
|
||||
const content = this.nextElementSibling;
|
||||
content.classList.toggle('expanded');
|
||||
this.classList.toggle('expanded');
|
||||
});
|
||||
});
|
||||
|
||||
const compareSelect = document.getElementById('compareCharacter');
|
||||
const compareButton = document.getElementById('compareButton');
|
||||
|
||||
compareSelect.addEventListener('change', function() {
|
||||
compareButton.disabled = !compareSelect.value;
|
||||
});
|
||||
|
||||
compareButton.addEventListener('click', function() {
|
||||
const selected = compareSelect.value;
|
||||
if (selected) {
|
||||
const [realm, name] = selected.split('/');
|
||||
// Get the base path by removing everything after /quests/compare/
|
||||
const basePath = window.location.pathname.split('/quests/compare/')[0];
|
||||
const safeRealm = encodeURIComponent(realm);
|
||||
const safeName = encodeURIComponent(name);
|
||||
window.location.href = `${basePath}/quests/compare/${safeRealm}/${safeName}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
141
static/character-quests.hbs
Normal file
141
static/character-quests.hbs
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
|
||||
{{> icons }}
|
||||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
</script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
<div class="quest-compare-section" style="margin-bottom: 20px;">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Compare with:</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="compareCharacter">
|
||||
<option value="">Select a character...</option>
|
||||
{{#each data.otherCharacters}}
|
||||
<option value="{{this.realmName}}/{{this.name}}">{{this.name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-info" id="compareButton" disabled>
|
||||
Compare Quests
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#each data.categories as |quests category|}}
|
||||
<div class="quests-table" style="margin-bottom: 20px;">
|
||||
{{#if (hasInProgressQuests quests)}}
|
||||
<h2 class="is-size-4 category-header collapsible expanded">
|
||||
{{else}}
|
||||
<h2 class="is-size-4 category-header collapsible">
|
||||
{{/if}}
|
||||
{{category}}
|
||||
<span class="collapse-icon">▼</span>
|
||||
</h2>
|
||||
|
||||
{{#if (hasInProgressQuests quests)}}
|
||||
<div class="category-content expanded">
|
||||
{{else}}
|
||||
<div class="category-content">
|
||||
{{/if}}
|
||||
<!-- 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"><a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a></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"><a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a></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');
|
||||
});
|
||||
});
|
||||
|
||||
const compareSelect = document.getElementById('compareCharacter');
|
||||
const compareButton = document.getElementById('compareButton');
|
||||
|
||||
compareSelect.addEventListener('change', function() {
|
||||
compareButton.disabled = !this.value;
|
||||
});
|
||||
|
||||
compareButton.addEventListener('click', function() {
|
||||
const selected = compareSelect.value;
|
||||
if (selected) {
|
||||
const [realm, name] = selected.split('/');
|
||||
const sanitizedRealm = encodeURIComponent(realm);
|
||||
const sanitizedName = encodeURIComponent(name);
|
||||
window.location.href = `${window.location.pathname}/compare/${sanitizedRealm}/${sanitizedName}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
82
static/character-reputation.hbs
Normal file
82
static/character-reputation.hbs
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-reputation.css">
|
||||
{{> icons }}
|
||||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
</script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
<div class="reputation-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Classic Reputations</h2>
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<tbody>
|
||||
{{#each data.classic}}
|
||||
<tr>
|
||||
<!-- Faction ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="reputation-row">
|
||||
<span class="faction-name">{{this.name}}</span>
|
||||
<div class="progress-section">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
|
||||
<span class="standing-text">{{this.standing}}</span>
|
||||
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="reputation-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">The Burning Crusade</h2>
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<tbody>
|
||||
{{#each data.tbc}}
|
||||
<tr>
|
||||
<!-- Faction ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="reputation-row">
|
||||
<span class="faction-name">{{this.name}}</span>
|
||||
<div class="progress-section">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
|
||||
<span class="standing-text">{{this.standing}}</span>
|
||||
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="reputation-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Wrath of the Lich King</h2>
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<tbody>
|
||||
{{#each data.wotlk}}
|
||||
<tr>
|
||||
<!-- Faction ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="reputation-row">
|
||||
<span class="faction-name">{{this.name}}</span>
|
||||
<div class="progress-section">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
|
||||
<span class="standing-text">{{this.standing}}</span>
|
||||
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
125
static/character-skills.hbs
Normal file
125
static/character-skills.hbs
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-skills.css">
|
||||
{{> icons }}
|
||||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
</script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Professions</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.professions}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Secondary Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.secondarySkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Weapon Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.weaponSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Class Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.classSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Armor Proficiencies</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.armorSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Languages</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.languages}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
// Add any additional JavaScript logic if needed
|
||||
</script>
|
||||
160
static/css/character-quests.css
Normal file
160
static/css/character-quests.css
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
.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);
|
||||
}
|
||||
|
||||
.category-header:not(.expanded) .collapse-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.quest-comparison-header {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.quest-comparison-header .characters {
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.quest-comparison-header .char1,
|
||||
.quest-comparison-header .char2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* tr.quest-diff {
|
||||
background-color: rgba(255, 255, 0, 0.2) !important;
|
||||
} */
|
||||
|
||||
tr.quest-missing-1 td:nth-child(3) {
|
||||
background-color: rgba(255, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
tr.quest-missing-2 td:nth-child(4) {
|
||||
background-color: rgba(255, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.quest-compare-section {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.quest-compare-section .select select {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.diff-count {
|
||||
font-size: 0.8em;
|
||||
color: #ffdd57;
|
||||
margin-left: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.quest-status.In.Progress {
|
||||
color: #4CAF50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quest-category {
|
||||
font-style: italic;
|
||||
}
|
||||
108
static/css/character-reputation.css
Normal file
108
static/css/character-reputation.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.reputation-table {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reputation-table h2 {
|
||||
color: #FFD700; /* Gold color for section titles */
|
||||
}
|
||||
|
||||
.reputation-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.faction-name {
|
||||
min-width: 150px;
|
||||
font-weight: bold;
|
||||
color: white; /* White color for faction names */
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
flex: 1;
|
||||
background-color: #020018;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar-container:hover .standing-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar-container:hover .value-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Reputation colors */
|
||||
.progress-bar.Neutral {
|
||||
background-color: #B8A44A; /* More muted yellow */
|
||||
}
|
||||
|
||||
.progress-bar.Friendly,
|
||||
.progress-bar.Honored,
|
||||
.progress-bar.Revered,
|
||||
.progress-bar.Exalted {
|
||||
background-color: #4CAF50; /* More muted green */
|
||||
}
|
||||
|
||||
.progress-bar.Hostile,
|
||||
.progress-bar.Hated {
|
||||
background-color: #D32F2F; /* More muted red */
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.standing-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
color: white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
color: white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
color: #FFD700;
|
||||
}
|
||||
121
static/css/character-skills.css
Normal file
121
static/css/character-skills.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
#talent-template,
|
||||
#talent-tree-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon-border {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.iconmedium.notfull .icon-border {
|
||||
background-position: -84px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.full .icon-border {
|
||||
background-position: -42px 0px;
|
||||
}
|
||||
|
||||
.iconmedium .icon-border {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconmedium a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium::after {
|
||||
content: attr(rank);
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
font-size: 14px;
|
||||
padding: 0px 2px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.iconmedium.empty::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.full::after,
|
||||
.iconmedium.notfull::after {
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconmedium.notfull::after {
|
||||
color: #30ec30;
|
||||
border: 1px solid #30ec30;
|
||||
}
|
||||
|
||||
.iconmedium.full::after {
|
||||
color: #ffcf00;
|
||||
border: 1px solid #ffcf00;
|
||||
}
|
||||
|
||||
.skills-table {
|
||||
max-width: 500px; /* Maximum width for the table */
|
||||
width: 100%; /* Allows the table to shrink responsively */
|
||||
}
|
||||
|
||||
.skills-table table {
|
||||
width: 100%; /* Ensures all tables inside .skills-table are the same width */
|
||||
table-layout: fixed; /* Ensures consistent column widths */
|
||||
}
|
||||
|
||||
.skills-table th,
|
||||
.skills-table td {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
background-color: #020018;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
position: relative; /* Enables positioning of child elements */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: #000852;
|
||||
position: absolute; /* Allows the bar to stay behind the text */
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
z-index: 1; /* Ensures the bar is behind the text */
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute; /* Positions the text over the bar */
|
||||
top: 50%; /* Centers the text vertically */
|
||||
left: 10px; /* Aligns the text to the left with some padding */
|
||||
transform: translateY(-50%); /* Vertically centers the text */
|
||||
z-index: 2; /* Ensures the text is above the bar */
|
||||
color: white; /* Makes the text visible on the bar */
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
white-space: nowrap; /* Prevents text from wrapping */
|
||||
}
|
||||
|
||||
#spec-links {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
color: #FFD700; /* Gold color */
|
||||
font-weight: bold; /* Optional: Make the text bold */
|
||||
}
|
||||
BIN
static/img/w_armory_favicon_16x16.png
Normal file
BIN
static/img/w_armory_favicon_16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
BIN
static/img/w_armory_favicon_180x180.png
Normal file
BIN
static/img/w_armory_favicon_180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
static/img/w_armory_favicon_32x32.ico
Normal file
BIN
static/img/w_armory_favicon_32x32.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/img/w_armory_favicon_32x32.png
Normal file
BIN
static/img/w_armory_favicon_32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,7 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="icon" type="image/x-icon" href="{{websiteRoot}}/img/w_armory_favicon_32x32.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{websiteRoot}}/img/w_armory_favicon_180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{websiteRoot}}/img/w_armory_favicon_32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{websiteRoot}}/img/w_armory_favicon_16x16.png">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{{title}}</title>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,15 @@
|
|||
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a> 
|
||||
{{#if enableSkillsPage}}
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/skills">Skills</a> 
|
||||
{{/if}}
|
||||
{{#if enableReputationPage}}
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/reputation">Reputation</a> 
|
||||
{{/if}}
|
||||
{{#if enableQuestsPage}}
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/quests">Quests</a> 
|
||||
{{/if}}
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a> 
|
||||
<br>
|
||||
|
|
@ -20,10 +29,15 @@
|
|||
<div class="char-realm">{{realm}}</div>
|
||||
<div>
|
||||
{{#if online}}
|
||||
Online 🟢
|
||||
Online 🟢
|
||||
{{else}}
|
||||
Offline 🔴
|
||||
Offline 🔴
|
||||
{{/if}}
|
||||
<a href="{{wowhead}}/zone={{zone}}">
|
||||
{{#if zoneName}}
|
||||
{{zoneName}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue