87 lines
3.9 KiB
HTML
87 lines
3.9 KiB
HTML
{% extends "layout.html" %} {{super()}} {% block body %}
|
|
<div id="app" class="container">
|
|
<div class="grid">
|
|
<div class="cell -6of12">
|
|
<div class="cell -3of12">
|
|
<form class="form" action="/submit" method="GET">
|
|
<fieldset class="form-group">
|
|
<label for="username">NAME:</label>
|
|
<input type="text" id="name" class="form-control">
|
|
<div class="help-block">The Courier</div>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="background">BACKGROUND:</label>
|
|
<select v-model="background" name="background" id="background" class="form-control" @change="reset_trait">
|
|
<option v-bind:value="bg" v-for="bg in backgrounds">[[bg.name]]</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="trait">TRAIT:</label>
|
|
<select v-model="trait" name="trait" id="trait" class="form-control">
|
|
<option v-bind:value="tr" v-for="tr in background.traits">[[tr.name]]</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<label for="perk">PERK:</label>
|
|
<select v-model="perk" name="perk" id="perk" class="form-control">
|
|
<option v-bind:value="pk" v-for="pk in perks">[[pk.name]]</option>
|
|
</select>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="cell -1of12">
|
|
<div class="card">
|
|
<header class="card-header">You're SPECIAL</header>
|
|
<div class="card-content">
|
|
<div class="inner">
|
|
<button class="btn btn-info" @click="reset_stats">REROLL</button>
|
|
<ul>
|
|
<li v-for="stat in stats">
|
|
[[stat.stat]]: [[stat.value]]
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell -1of12">
|
|
<div class="card">
|
|
<header class="card-header">[[background.inherent.name]]</header>
|
|
<div class="card-content">
|
|
<div class="inner"><span>[[background.inherent.text]]</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell -1of12">
|
|
<div class="card">
|
|
<header class="card-header">[[background.limitation.name]]</header>
|
|
<div class="card-content">
|
|
<div class="inner"><span>[[background.limitation.text]]</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell -6of12">
|
|
<div class="card">
|
|
<header class="card-header">[[background.name]]</header>
|
|
<div class="card-content">
|
|
<div class="inner">[[background.description]]</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<header class="card-header">[[trait.name]]</header>
|
|
<div class="card-content">
|
|
<div class="inner">[[trait.text]]</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<header class="card-header">[[perk.name]]</header>
|
|
<div class="card-content">
|
|
<div class="inner">[[perk.text]]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|