| 1 |
<!doctype html> |
| 2 |
<html lang="en"> |
| 3 |
<head> |
| 4 |
<meta charset="utf-8"> |
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 |
<title> swtr - the canonical sweet web app </title> |
| 7 |
|
| 8 |
<meta name="description" content="Sweet Maker, Social, Semantic, Web, Decentralized, Makes Sweet, Sweet Swagger, Swtr, swtr"> |
| 9 |
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> |
| 10 |
<link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet"> |
| 11 |
<link href="{{ url_for('static', filename='css/annotorious.css') }}" rel="stylesheet"> |
| 12 |
<link href="{{ url_for('static', filename='css/swtmaker.css') }}" rel="stylesheet"> |
| 13 |
<link href="{{ url_for('static', filename='css/bootstrap-tags.css') }}" rel="stylesheet"> |
| 14 |
</head> |
| 15 |
|
| 16 |
<body> |
| 17 |
<!-- navigation and branding of the app --> |
| 18 |
<header id="header" class="navbar navbar-inverse" role="navigation"> |
| 19 |
<div class="container-fluid"> |
| 20 |
<!-- Brand and toggle get grouped for better mobile display --> |
| 21 |
<div class="navbar-header"> |
| 22 |
<button type="button" class="navbar-toggle" data-toggle="collapse" |
| 23 |
data-target="#swtr-navbar-collapse"> |
| 24 |
|
| 25 |
<span class="sr-only">Toggle navigation</span> |
| 26 |
<span class="icon-bar"></span> |
| 27 |
<span class="icon-bar"></span> |
| 28 |
<span class="icon-bar"></span> |
| 29 |
</button> |
| 30 |
<a class="navbar-brand" href="#/home">swtr - the canonical swt web app</a> |
| 31 |
</div> |
| 32 |
<!-- Collect the nav links, forms, and other content for toggling --> |
| 33 |
<div class="collapse navbar-collapse" id="swtr-navbar-collapse"> |
| 34 |
<ul class="nav navbar-nav navbar-right"> |
| 35 |
<li class="active"> <a href="#/home" title="Home"> |
| 36 |
<span class="glyphicon glyphicon-home"></span> |
| 37 |
</a></li> |
| 38 |
<li> <a href="#/play" title="My Playarea"> |
| 39 |
<span class="glyphicon glyphicon-wrench"></span> |
| 40 |
</a></li> |
| 41 |
<li> <a href="#/linked-data" title="Linked Data"> |
| 42 |
<span class="glyphicon glyphicon-globe"></span> |
| 43 |
</a></li> |
| 44 |
<li> <a href="#/search" title="Search External Sources"> |
| 45 |
<span class="glyphicon glyphicon-search"></span> |
| 46 |
</a></li> |
| 47 |
<li> <a id="sign-in" href="#" title=""> |
| 48 |
<span class="glyphicon glyphicon-user"></span> |
| 49 |
<span id="signinview"> Sign In </span> |
| 50 |
</a></li> |
| 51 |
</ul> |
| 52 |
</div> |
| 53 |
</div> |
| 54 |
</header> |
| 55 |
|
| 56 |
<div id="swtr-root" class="container"> |
| 57 |
<div id="home-page" class="page"> |
| 58 |
Lorem Ipsum |
| 59 |
</div> |
| 60 |
|
| 61 |
<div id="play-page" class="page"> |
| 62 |
<!-- first row: helpview and sign in button --> |
| 63 |
<div class="row"> |
| 64 |
<!-- helpview column of width md-8 --> |
| 65 |
<div class="col-md-8"> |
| 66 |
<div id="helpview" class="bg-info"> |
| 67 |
<span class="label label-default">Heads Up</span> |
| 68 |
<span id="helpview-text"></span> |
| 69 |
</div> |
| 70 |
</div> |
| 71 |
<!-- signin view column of width md-4 --> |
| 72 |
<div class="col-md-4"></div> |
| 73 |
</div> <!-- end first row --> |
| 74 |
<!-- second row: image URL input box and Load button --> |
| 75 |
<div class="row" id="user-input-row"> |
| 76 |
<div class="col-md-8"> |
| 77 |
<form class="form-inline" role="form"> |
| 78 |
<div class="form-group col-md-11"> |
| 79 |
<label class="sr-only" for="user-input">Enter URL of an image or web page</label> |
| 80 |
<input class="form-control" type="text" |
| 81 |
placeholder="Enter URL of an image or web page" id="user-input"> |
| 82 |
</div> |
| 83 |
<button type="submit" class="btn btn-primary" id="user-input-submit">Load</button> |
| 84 |
</form> |
| 85 |
</div> |
| 86 |
<div class="col-md-4"> |
| 87 |
</div> |
| 88 |
</div> <!-- end second row --> |
| 89 |
<!-- third row - control panel? --> |
| 90 |
<div class="row" id="control-panel"> |
| 91 |
<div class="col-md-8"> |
| 92 |
<form class="form-inline" role="form"> |
| 93 |
<div class="form-group"> |
| 94 |
<label class="checkbox-inline"> |
| 95 |
<input type="checkbox" id="setbox"> Show annotated areas |
| 96 |
</label> |
| 97 |
</div> |
| 98 |
<div class="form-group"> |
| 99 |
<label class="checkbox-inline"> |
| 100 |
<input type="checkbox" id="ocd-source"> Search in Open Cuultur Data |
| 101 |
</label> |
| 102 |
</div> |
| 103 |
<div class="form-group"> |
| 104 |
<button class="btn btn-default" id="sweet">Sweet</button> |
| 105 |
</div> |
| 106 |
</form> |
| 107 |
</div> |
| 108 |
<div class="col-md-4"></div> |
| 109 |
</div> <!-- end third row -- > |
| 110 |
<!-- fourth row: the image annotation window --> |
| 111 |
<div class="row"> |
| 112 |
<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well"> |
| 113 |
<div id="img-anno-controls"> |
| 114 |
<form class="form-inline" role="form"> |
| 115 |
<div class="form-group"> |
| 116 |
<label class="checkbox-inline"> |
| 117 |
<input type="checkbox" id="setbox"> Show annotated areas |
| 118 |
</label> |
| 119 |
</div> |
| 120 |
</form> |
| 121 |
</div> |
| 122 |
{% if url %} |
| 123 |
<img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 124 |
{% else %} |
| 125 |
<img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 126 |
{% endif %} |
| 127 |
</div> |
| 128 |
<div id="ocd-view"></div> |
| 129 |
</div> <!-- end fourth row --> |
| 130 |
<!-- <\!-- fifth row: options for filter -\-> --> |
| 131 |
<!-- <div id="filter-div" class="row"> --> |
| 132 |
<!-- <div id="filter-user-div"> --> |
| 133 |
<!-- <p><span>SWeeTs by</span></p> --> |
| 134 |
<!-- </div> --> |
| 135 |
<!-- <div id="filter-tags-div"> --> |
| 136 |
<!-- <p><span>Tags</span></p> --> |
| 137 |
<!-- </div> --> |
| 138 |
<!-- </div> <\!-- end fifth row -\-> --> |
| 139 |
|
| 140 |
<div id="sweet-list-wrapper"> |
| 141 |
<ul id="sweet-list"></ul> |
| 142 |
<div class="btn-grp"> |
| 143 |
<button class="btn btn-default" id="sweet-cancel">Cancel</button> |
| 144 |
<button class="btn btn-primary" id="post-sweet">Sweet</button> |
| 145 |
</div> |
| 146 |
</div> |
| 147 |
|
| 148 |
</div> |
| 149 |
|
| 150 |
<div id="linked-data-page" class="page"></div> |
| 151 |
<div id="search-page" class="page"></div> |
| 152 |
|
| 153 |
</div> |
| 154 |
<div id="app-overlay"></div> |
| 155 |
|
| 156 |
<script> |
| 157 |
window.swtr = window.swtr || {}; |
| 158 |
swtr.swtstoreURL = function() { return '{{ config.swtstoreURL }}'; } |
| 159 |
swtr.endpoints = { |
| 160 |
'get': '/api/sweets/q', |
| 161 |
'post': '/api/sweets', |
| 162 |
'auth': '/oauth/authorize', |
| 163 |
'login': '/auth/login', |
| 164 |
'logout': '/auth/logout' |
| 165 |
}; |
| 166 |
swtr.access_token = '{{ access_token }}'; |
| 167 |
swtr.refresh_token = '{{ refresh_token }}'; |
| 168 |
swtr.app_id = '{{ config.app_id }}'; |
| 169 |
swtr.oauth_redirect_uri = '{{ config.redirect_uri }}'; |
| 170 |
window.onload = function() { |
| 171 |
swtr.init(); |
| 172 |
}; |
| 173 |
</script> |
| 174 |
<script src="{{ url_for('static', filename='js/lib/jquery-1.10.2.min.js') }}"></script> |
| 175 |
<script src="{{ url_for('static', filename='js/lib/bootstrap.min.js') }}"></script> |
| 176 |
<script src="{{ url_for('static', filename='js/lib/underscore-1.5.2.min.js') }}"></script> |
| 177 |
<script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script> |
| 178 |
<script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script> |
| 179 |
<script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script> |
| 180 |
<script src="{{ url_for('static', filename='js/oauth.js') }}"></script> |
| 181 |
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script> |
| 182 |
<script src="{{ url_for('static', filename='js/imganno.js') }}"></script> |
| 183 |
<script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script> |
| 184 |
|
| 185 |
<script type="text/template" id="sweet-template"> |
| 186 |
<li class="sweet"> |
| 187 |
<a href="#">@<%= who %></a> <strong>#<%= what %></strong> |
| 188 |
/<a href="<%= where %>"><%= where.substr(0, 30) + '...' %></a> |
| 189 |
<p><%= how %></p> |
| 190 |
</li> |
| 191 |
</script> |
| 192 |
<script type="text/template" id="dropdown-template"> |
| 193 |
<div id="tags-input"></div> |
| 194 |
<select class="form-control" id="custom-dropdown"> |
| 195 |
<option value="comment" selected>Comment</option> |
| 196 |
<option value="title" >Title</option> |
| 197 |
<option value="tags">Tags</option> |
| 198 |
<option value="link">Link</option> |
| 199 |
</select> |
| 200 |
</script> |
| 201 |
<script type="text/template" id="popup-template"> |
| 202 |
<span class="annotorious-popup-text"> |
| 203 |
<ul class="custom-style-popup"> |
| 204 |
<li class="custom-popup-line" ><span>Title: </span><%= Label %></li> |
| 205 |
<li class="custom-popup-line"><span>Comment: </span><%= Comment %></li> |
| 206 |
<li class="custom-popup-line"><span>Tags: </span><%= Tags %></li> |
| 207 |
<li class="custom-popup-line"><span>Related Links: </span><%= Links %></li> |
| 208 |
</ul> |
| 209 |
</span> |
| 210 |
</script> |
| 211 |
<script type="text/template" id="ocd-view-base-template"> |
| 212 |
<div id="ocd-hud"> |
| 213 |
<span id="ocd-total-results"></span> |
| 214 |
</div> |
| 215 |
<div id="ocd-results"></div> |
| 216 |
<ul class="pager"> |
| 217 |
<li class="previous"> <a href="#">« Previous </a></li> |
| 218 |
<li class="next"> <a href="#"> Next » </a></li> |
| 219 |
</ul> |
| 220 |
</script> |
| 221 |
<script type="text/template" id="ocd-item-template"> |
| 222 |
<div class="col-sm-6 col-md-4 ocd-item"> |
| 223 |
<h4> <%= title %> </h4> |
| 224 |
<div class="media"> |
| 225 |
<a href="<%= media_url %>"> |
| 226 |
<img src="" class="responsive thumb-image"> |
| 227 |
</a> |
| 228 |
</div> |
| 229 |
<div>Authors: <%= authors %> </div> |
| 230 |
</div> |
| 231 |
</script> |
| 232 |
<script type="text/template" id="filter-users"> |
| 233 |
<ul> |
| 234 |
<input type="checkbox" name=<%= who %> checked="checked"> |
| 235 |
<label><%= who %></label> |
| 236 |
</ul> |
| 237 |
</script> |
| 238 |
<script type="text/template" id="filter-tags"> |
| 239 |
<ul> |
| 240 |
<input type="checkbox" checked="checked" name=<%= tag %>> |
| 241 |
<label><%= tag %></label> |
| 242 |
</ul> |
| 243 |
</script> |
| 244 |
|
| 245 |
</body> |
| 246 |
</html> |
