mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
284 lines
19 KiB
HTML
284 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Stardew Valley Community Checklist</title>
|
|
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
|
|
<link type="text/css" rel="stylesheet" href="main.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Stardew Valley Community Center Checklist</h1>
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">By Bundle</a></li>
|
|
<li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical List</a></li>
|
|
<li role="presentation"><a href="#season-list" aria-controls="season-list" role="tab" data-toggle="tab">By Season</a></li>
|
|
<li role="presentation"><a href="#skill-list" aria-controls="skill-list" role="tab" data-toggle="tab">By Skill</a></li>
|
|
<li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
|
|
</ul>
|
|
<div id="app">
|
|
<div class="just-padding tab-content">
|
|
|
|
<div role="tabpanel" class="tab-pane active" id="bundles">
|
|
<div class="list-group list-group-root well">
|
|
|
|
<template v-for="room in static.rooms">
|
|
<a href="#room-{{ room.id }}" class="list-group-item" data-toggle="collapse">
|
|
<div class="checkbox"><i class="glyphicon glyphicon-chevron-right"></i><label><input
|
|
type="checkbox"/>{{ room.name }}</label></div>
|
|
</a>
|
|
<div class="list-group collapse" id="room-{{ room.id }}">
|
|
|
|
<template v-for="bundle in static.bundles | filterBy room.id in 'room'">
|
|
<a href="#bundle-{{ bundle.id }}" class="list-group-item" data-toggle="collapse">
|
|
<div class="checkbox">
|
|
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
<label>
|
|
<input type="checkbox"/>
|
|
{{ bundle.name }}
|
|
</label>
|
|
</div>
|
|
</a>
|
|
<div class="list-group collapse" id="bundle-{{ bundle.id }}">
|
|
<div class="container-fluid">
|
|
<div class="row row-eq-height">
|
|
<template v-for="item in static.items | filterBy bundle.id in 'bundles'">
|
|
<div class="col-md-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">{{ item.name }}</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>{{ item.source }}</p>
|
|
<div class="button-area">
|
|
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
<span class="footer-text-area">
|
|
<template v-for="season_id in item.seasons">
|
|
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
<span class="footer-text">{{ season.name }}</span>
|
|
</template>
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-grain"></span>
|
|
<div class="footer-text-area">
|
|
<template v-for="skill_id in item.skills">
|
|
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
<div class="footer-text">{{ skill.name }}</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="ab-list">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="search">Filter</label>
|
|
<input type="text" class="form-control" id="search" v-model="search_name" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row row-eq-height">
|
|
<template v-for="item in static.items | orderBy 'name' | filterBy search_name in 'name'">
|
|
<div class="col-md-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">{{ item.name }}</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>{{ item.source }}</p>
|
|
<div class="button-area">
|
|
<button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
<span class="footer-text-area">
|
|
<template v-for="season_id in item.seasons">
|
|
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
<span class="footer-text">{{ season.name }}</span>
|
|
</template>
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-grain"></span>
|
|
<div class="footer-text-area">
|
|
<template v-for="skill_id in item.skills">
|
|
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
<div class="footer-text">{{ skill.name }}</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="season-list">
|
|
<div class="list-group list-group-root well">
|
|
|
|
<template v-for="season in static.seasons">
|
|
<a href="#season-{{ season.id }}" class="list-group-item" data-toggle="collapse">
|
|
<div class="checkbox">
|
|
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
<label><input type="checkbox"/>{{ season.name }}</label>
|
|
</div>
|
|
</a>
|
|
<div class="list-group collapse" id="season-{{ season.id }}">
|
|
<div class="container-fluid">
|
|
<div class="row row-eq-height">
|
|
<template v-for="item in static.items | filterBy season.id in 'seasons'">
|
|
<div class="col-md-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">{{ item.name }}</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>{{ item.source }}</p>
|
|
<div class="button-area">
|
|
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
<span class="footer-text-area">
|
|
<template v-for="season_id in item.seasons">
|
|
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
<span class="footer-text">{{ season.name }}</span>
|
|
</template>
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-grain"></span>
|
|
<div class="footer-text-area">
|
|
<template v-for="skill_id in item.skills">
|
|
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
<div class="footer-text">{{ skill.name }}</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="skill-list">
|
|
<div class="list-group list-group-root well">
|
|
|
|
<template v-for="skill in static.skills">
|
|
<a href="#skill-{{ skill.id }}" class="list-group-item" data-toggle="collapse">
|
|
<div class="checkbox">
|
|
<i class="glyphicon glyphicon-chevron-right"></i>
|
|
<label><input type="checkbox"/>{{ skill.name }}</label>
|
|
</div>
|
|
</a>
|
|
<div class="list-group collapse" id="skill-{{ skill.id }}">
|
|
<div class="container-fluid">
|
|
<div class="row row-eq-height">
|
|
<template v-for="item in static.items | filterBy skill.id in 'skills'">
|
|
<div class="col-md-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">{{ item.name }}</h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>{{ item.source }}</p>
|
|
<div class="button-area">
|
|
<button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
<span class="footer-text-area">
|
|
<template v-for="season_id in item.seasons">
|
|
<template v-for="season in static.seasons | filterBy season_id in 'id'">
|
|
<span class="footer-text">{{ season.name }}</span>
|
|
</template>
|
|
</template>
|
|
</span>
|
|
</div>
|
|
<div class="panel-footer-area">
|
|
<span class="glyphicon glyphicon-grain"></span>
|
|
<div class="footer-text-area">
|
|
<template v-for="skill_id in item.skills">
|
|
<template v-for="skill in static.skills | filterBy skill_id in 'id'">
|
|
<div class="footer-text">{{ skill.name }}</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="about">
|
|
<div class="well">
|
|
<p>I wanted to have an easy way to keep track of my community center bundles since it is a pain to
|
|
do it in game. Here it is. This will be a better explanation when I actually write it.</p>
|
|
<p>{{ user_data | json }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
|
|
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
|
|
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="main.js"></script>
|
|
</html>
|
|
|