Initial Commit
This commit is contained in:
Ryan Carpenter
+262
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js'></script>
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.js'></script>
|
||||
<script src='js/angular-simple-logger.min.js'></script>
|
||||
<script src='js/angular-google-maps.min.js'></script>
|
||||
<script src="js/angular-csv-service.min.js"></script>
|
||||
<script src="js/angular-toggle-switch.min.js"></script>
|
||||
<script src='js/ui-bootstrap-2.0.0.min.js'></script>
|
||||
<script src='js/app.js'></script>
|
||||
<script src='js/services.js'></script>
|
||||
<script src='js/controller.js'></script>
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.css" rel="stylesheet">
|
||||
<link href="css/angular-toggle-switch.css" rel="stylesheet">
|
||||
<link href="css/quartermaester.css" rel="stylesheet">
|
||||
|
||||
<title>Interactive Game of Thrones Map</title>
|
||||
</head>
|
||||
<body ng-app="quartermaester" ng-controller="mapCtrl">
|
||||
|
||||
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' control='map.control'>
|
||||
|
||||
<!-- Base map tiles from Ser Mountain Goat -->
|
||||
<ui-gmap-map-type options='smgMapType'></ui-gmap-map-type>
|
||||
|
||||
<!-- Location Markers -->
|
||||
<ui-gmap-markers
|
||||
models='map.locations'
|
||||
coords="'coords'"
|
||||
click='map.locationClick'
|
||||
options="'options'"
|
||||
idkey="'key'">
|
||||
</ui-gmap-markers>
|
||||
|
||||
<!-- Heraldry Markers -->
|
||||
<!-- <ui-gmap-markers
|
||||
models='map.heraldry'
|
||||
coords="'coords'"
|
||||
click='map.houseClick'
|
||||
options="'options'"
|
||||
visible="options.houseHeraldry"
|
||||
idkey="'key'">
|
||||
</ui-gmap-markers> -->
|
||||
|
||||
<!-- Region Polygons -->
|
||||
<ui-gmap-polygons
|
||||
models="map.regions"
|
||||
path="'path'"
|
||||
fill="'fill'"
|
||||
stroke="'stroke'"
|
||||
visible="options.geographicRegions"
|
||||
idKey="'key'">
|
||||
</ui-gmap-polygons>
|
||||
|
||||
</ui-gmap-google-map>
|
||||
|
||||
<div id="side" class=".col-xs-12 .col-md-3">
|
||||
<!-- <p>{{state}}</p> -->
|
||||
<div id="slider" ng-show="state.substring(0,6)=='slider'">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-hamburger" ng-click="toState('menu')"></span>
|
||||
<span ng-show="slider.show=='episodes'" ng-bind="episodes[slider.currentEpisode].name" ng-click="toState('slider-full')"></span>
|
||||
<span ng-show="slider.show=='chapters'" ng-bind="chapters[slider.currentChapter].name" ng-click="toState('slider-full')"></span>
|
||||
</h1>
|
||||
<div id="slider-control" ng-show="state=='slider-full'">
|
||||
<div class="btn-group btn-group-2" role="group">
|
||||
<button type="button" class="btn" ng-click="slider.show='episodes';" ng-class="{'btn-primary':(slider.show=='episodes'), 'btn-default':(slider.show!='episodes')}">
|
||||
<i class="glyphicon glyphicon-facetime-video"></i>
|
||||
HBO Show
|
||||
</button>
|
||||
<button type="button" class="btn" ng-click="slider.show='chapters';" ng-class="{'btn-primary':(slider.show=='chapters'), 'btn-default':(slider.show!='chapters')}">
|
||||
<i class="glyphicon glyphicon-book"></i>
|
||||
Books
|
||||
</button>
|
||||
</div>
|
||||
<rzslider
|
||||
ng-show="slider.show=='episodes'"
|
||||
rz-slider-model="slider.currentEpisode"
|
||||
rz-slider-options="{floor:0, ceil:episodes.length-1}">
|
||||
</rzslider>
|
||||
<rzslider
|
||||
ng-show="slider.show=='chapters'"
|
||||
rz-slider-model="slider.currentChapter"
|
||||
rz-slider-options="{floor:0, ceil:chapters.length-1}">
|
||||
</rzslider>
|
||||
<div class="btn-group btn-group-5" role="group">
|
||||
<button type="button" class="btn btn-default" ng-click="slideTo(-10)">
|
||||
<i class="glyphicon glyphicon-step-backward"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" ng-click="slideTo(-1)">
|
||||
<i class="glyphicon glyphicon-chevron-left"></i>
|
||||
</button>
|
||||
<a role="button" class="btn btn-default" ng-show="slider.show=='episodes'" ng-href="{{episodes[slider.currentEpisode].url}}">
|
||||
<i class="glyphicon glyphicon-link"></i>
|
||||
</a>
|
||||
<a role="button" class="btn btn-default" ng-show="slider.show=='chapters'" ng-href="{{chapters[slider.currentChapter].url}}">
|
||||
<i class="glyphicon glyphicon-link"></i>
|
||||
</a>
|
||||
<button type="button" class="btn btn-default" ng-click="slideTo(1)">
|
||||
<i class="glyphicon glyphicon-chevron-right"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" ng-click="slideTo(10)">
|
||||
<i class="glyphicon glyphicon-step-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu" ng-show="state=='menu'" class="list-group">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
||||
Quartermaester.info
|
||||
</h1>
|
||||
<div class="list-group">
|
||||
<button class="list-group-item btn-clear" ng-click="toState('slider-full')">
|
||||
<i class="glyphicon glyphicon-eye-close"></i>
|
||||
Spoiler Control
|
||||
</button>
|
||||
<button class="list-group-item btn-clear" ng-click="toState('characters')">
|
||||
<i class="glyphicon glyphicon-user"></i>
|
||||
Characters
|
||||
</button>
|
||||
<button class="list-group-item btn-clear" ng-click="toState('search')">
|
||||
<i class="glyphicon glyphicon-search"></i>
|
||||
Search
|
||||
</button>
|
||||
<button class="list-group-item btn-clear" ng-click="toState('options')">
|
||||
<i class="glyphicon glyphicon-cog"></i>
|
||||
Options
|
||||
</button>
|
||||
<a href="about.html" role="button" class="list-group-item btn-clear">
|
||||
<i class="glyphicon glyphicon-question-sign"></i>
|
||||
About
|
||||
</a>
|
||||
<a href="resources.html" role="button" class="list-group-item btn-clear">
|
||||
<i class="glyphicon glyphicon-thumbs-up"></i>
|
||||
Other Resources
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="location" ng-show="state=='location'">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
||||
Location Details
|
||||
</h1>
|
||||
<div class="list-group">
|
||||
<a ng-href="{{locationDetail.url}}" role="button" class="list-group-item btn-clear">
|
||||
<i class="glyphicon glyphicon glyphicon-map-marker"></i>
|
||||
{{locationDetail.name}}
|
||||
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
||||
</a>
|
||||
<a ng-href="{{locationDetail.currentOccupant.url}}" role="button" class="list-group-item btn-clear" ng-if="locationDetail.currentOccupant">
|
||||
<img ng-src="{{locationDetail.currentOccupant.img}}">
|
||||
{{locationDetail.currentOccupant.name}}
|
||||
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
||||
</a>
|
||||
<a ng-href="{{locationDetail.direct}}" role="button" class="list-group-item btn-clear">
|
||||
<i class="glyphicon glyphicon-pushpin"></i>
|
||||
Direct Link
|
||||
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="characters" ng-show="state=='characters'">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
||||
Characters
|
||||
</h1>
|
||||
<ul class="list-group">
|
||||
<li ng-repeat="character in characters" class="list-group-item">
|
||||
<a ng-href="{{character.house.url}}" ng-if="character.house!=''" class="hasimg">
|
||||
<img ng-src="{{character.house.img}}">
|
||||
</a>
|
||||
<a ng-href="{{character.url}}" ng-class="{noimg:(character.house=='')}">{{character.name}}</a>
|
||||
<toggle-switch
|
||||
ng-model="options.characters[$index]"
|
||||
on-label="Show"
|
||||
off-label="Hide"
|
||||
class="pull-right">
|
||||
</toggle-switch>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="search" ng-show="state=='search'">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
||||
<div class="input-group pull-right" style="width:250px;">
|
||||
<input id="searchInput" ng-model="search" type="text" class="form-control" placeholder="Search towns, houses, characters, titles">
|
||||
<span class="input-group-addon">
|
||||
<i class="glyphicon glyphicon-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="list-group" ng-show="search!==''">
|
||||
<button
|
||||
ng-repeat="result in searchResults | filter:{ search: search }"
|
||||
class="list-group-item"
|
||||
ng-click="result.click()">
|
||||
<i class="glyphicon {{result.icon}}"></i>
|
||||
{{result.title}}
|
||||
<small>{{result.subtitle}}</small>
|
||||
<i class="glyphicon glyphicon-menu-right pull-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="options" ng-show="state=='options'">
|
||||
<h1>
|
||||
<span class="glyphicon glyphicon-menu-left" ng-click="toState('slider')"></span>
|
||||
Options
|
||||
</h1>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
Character Paths
|
||||
<toggle-switch
|
||||
ng-model="options.characterPaths"
|
||||
on-label="Show"
|
||||
off-label="Hide"
|
||||
class="pull-right">
|
||||
</toggle-switch>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
House Heraldry
|
||||
<toggle-switch
|
||||
ng-model="options.houseHeraldry"
|
||||
on-label="Show"
|
||||
off-label="Hide"
|
||||
class="pull-right">
|
||||
</toggle-switch>
|
||||
</li><li class="list-group-item">
|
||||
Geographic Regions
|
||||
<toggle-switch
|
||||
ng-model="options.geographicRegions"
|
||||
on-label="Show"
|
||||
off-label="Hide"
|
||||
class="pull-right">
|
||||
</toggle-switch>
|
||||
</li><li class="list-group-item">
|
||||
Political Allegiances
|
||||
<toggle-switch
|
||||
ng-model="options.politicalAllegiances"
|
||||
on-label="Show"
|
||||
off-label="Hide"
|
||||
class="pull-right">
|
||||
</toggle-switch>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user