| 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 |
<div id="swt-maker" class="container"> |
| 18 |
<!-- first row: helpview and sign in button --> |
| 19 |
<div class="row"> |
| 20 |
<!-- helpview column of width md-8 --> |
| 21 |
<div class="col-md-8"> |
| 22 |
<div id="helpview" class="alert alert-info"></div> |
| 23 |
</div> |
| 24 |
<!-- signin view column of width md-4 --> |
| 25 |
<div class="col-md-4"> |
| 26 |
<div id="signinview"> |
| 27 |
<span id="signin-msg">You are not signed in.</span> |
| 28 |
<button class="btn btn-sm btn-primary" id="sign-in"> |
| 29 |
Sign In |
| 30 |
</button> |
| 31 |
</div> |
| 32 |
</div> |
| 33 |
</div> <!-- end first row --> |
| 34 |
<!-- second row: image URL input box and Load button --> |
| 35 |
<div class="row"> |
| 36 |
<div class="col-md-8"> |
| 37 |
<form class="form-inline" role="form"> |
| 38 |
<div class="form-group col-md-11"> |
| 39 |
<label class="sr-only" for="user-input">Enter URL of an image or web page</label> |
| 40 |
<input class="form-control" type="text" |
| 41 |
placeholder="Enter URL of an image or web page" id="user-input"> |
| 42 |
</div> |
| 43 |
<button type="submit" class="btn btn-primary" id="user-input-submit">Load</button> |
| 44 |
</form> |
| 45 |
</div> |
| 46 |
<div class="col-md-4"> |
| 47 |
</div> |
| 48 |
</div> <!-- end second row --> |
| 49 |
<!-- third row - control panel? --> |
| 50 |
<div class="row" id="control-panel"> |
| 51 |
<div class="col-md-8"> |
| 52 |
<form class="form-inline" role="form"> |
| 53 |
<div class="form-group"> |
| 54 |
<label class="checkbox-inline"> |
| 55 |
<input type="checkbox" id="setbox"> Show annotated areas |
| 56 |
</label> |
| 57 |
</div> |
| 58 |
<div class="form-group"> |
| 59 |
<label class="checkbox-inline"> |
| 60 |
<input type="checkbox" id="ocd-source"> Search in Open Cuultur Data |
| 61 |
</label> |
| 62 |
</div> |
| 63 |
<div class="form-group"> |
| 64 |
<button class="btn btn-default" id="sweet">Sweet</button> |
| 65 |
</div> |
| 66 |
</form> |
| 67 |
</div> |
| 68 |
<div class="col-md-4"></div> |
| 69 |
</div> <!-- end third row -- > |
| 70 |
<!-- fourth row: the image annotation window --> |
| 71 |
<div class="row"> |
| 72 |
<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well"> |
| 73 |
{% if url %} |
| 74 |
<img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 75 |
{% else %} |
| 76 |
<img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench"> |
| 77 |
{% endif %} |
| 78 |
</div> |
| 79 |
<div id="ocd-view"></div> |
| 80 |
</div> <!-- end fourth row --> |
| 81 |
<!-- fifth row: options for filter --> |
| 82 |
<div id="filter-div" class="row"> |
| 83 |
<div id="filter-user-div"> |
| 84 |
<p><span>SWeeTs by</span></p> |
| 85 |
</div> |
| 86 |
<div id="filter-tags-div"> |
| 87 |
<p><span>Tags</span></p> |
| 88 |
</div> |
| 89 |
</div> <!-- end fifth row --> |
| 90 |
|
| 91 |
|
| 92 |
<div id="sweet-list-wrapper"> |
| 93 |
<ul id="sweet-list"></ul> |
| 94 |
<div class="btn-grp"> |
| 95 |
<button class="btn btn-default" id="sweet-cancel">Cancel</button> |
| 96 |
<button class="btn btn-primary" id="post-sweet">Sweet</button> |
| 97 |
</div> |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
<div id="app-overlay"></div> |
| 101 |
|
| 102 |
<script> |
| 103 |
window.swtr = window.swtr || {}; |
| 104 |
swtr.swtstoreURL = function() { return '{{ config.swtstoreURL }}'; } |
| 105 |
swtr.endpoints = { |
| 106 |
'get': '/api/sweets/q', |
| 107 |
'post': '/api/sweets', |
| 108 |
'auth': '/oauth/authorize', |
| 109 |
'login': '/auth/login', |
| 110 |
'logout': '/auth/logout' |
| 111 |
}; |
| 112 |
swtr.access_token = '{{ access_token }}'; |
| 113 |
swtr.refresh_token = '{{ refresh_token }}'; |
| 114 |
swtr.app_id = '{{ config.app_id }}'; |
| 115 |
swtr.oauth_redirect_uri = '{{ config.redirect_uri }}'; |
| 116 |
window.onload = function() { |
| 117 |
swtr.init(); |
| 118 |
}; |
| 119 |
</script> |
| 120 |
<script src="{{ url_for('static', filename='js/lib/jquery-1.10.2.min.js') }}"></script> |
| 121 |
<script src="{{ url_for('static', filename='js/lib/bootstrap.min.js') }}"></script> |
| 122 |
<script src="{{ url_for('static', filename='js/lib/underscore-1.5.2.min.js') }}"></script> |
| 123 |
<script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script> |
| 124 |
<script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script> |
| 125 |
<script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script> |
| 126 |
<script src="{{ url_for('static', filename='js/oauth.js') }}"></script> |
| 127 |
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script> |
| 128 |
<script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script> |
| 129 |
|
| 130 |
<script type="text/template" id="sweet-template"> |
| 131 |
<li class="sweet"> |
| 132 |
<a href="#">@<%= who %></a> <strong>#<%= what %></strong> |
| 133 |
/<a href="<%= where %>"><%= where.substr(0, 30) + '...' %></a> |
| 134 |
<p><%= how %></p> |
| 135 |
</li> |
| 136 |
</script> |
| 137 |
<script type="text/template" id="dropdown-template"> |
| 138 |
<div id="tags-input"></div> |
| 139 |
<select class="form-control" id="custom-dropdown"> |
| 140 |
<option value="comment" selected>Comment</option> |
| 141 |
<option value="title" >Title</option> |
| 142 |
<option value="tags">Tags</option> |
| 143 |
<option value="link">Link</option> |
| 144 |
</select> |
| 145 |
</script> |
| 146 |
<script type="text/template" id="popup-template"> |
| 147 |
<span class="annotorious-popup-text"> |
| 148 |
<ul class="custom-style-popup"> |
| 149 |
<li class="custom-popup-line" ><span>Title: </span><%= Label %></li> |
| 150 |
<li class="custom-popup-line"><span>Comment: </span><%= Comment %></li> |
| 151 |
<li class="custom-popup-line"><span>Tags: </span><%= Tags %></li> |
| 152 |
<li class="custom-popup-line"><span>Related Links: </span><%= Links %></li> |
| 153 |
</ul> |
| 154 |
</span> |
| 155 |
</script> |
| 156 |
<script type="text/template" id="ocd-view-base-template"> |
| 157 |
<div id="ocd-hud"> |
| 158 |
<span id="ocd-total-results"></span> |
| 159 |
</div> |
| 160 |
<div id="ocd-results"></div> |
| 161 |
<ul class="pager"> |
| 162 |
<li class="previous"> <a href="#">« Previous </a></li> |
| 163 |
<li class="next"> <a href="#"> Next » </a></li> |
| 164 |
</ul> |
| 165 |
</script> |
| 166 |
<script type="text/template" id="ocd-item-template"> |
| 167 |
<div class="col-sm-6 col-md-4 ocd-item"> |
| 168 |
<h4> <%= title %> </h4> |
| 169 |
<div class="media"> |
| 170 |
<a href="<%= media_url %>"> |
| 171 |
<img src="" class="responsive thumb-image"> |
| 172 |
</a> |
| 173 |
</div> |
| 174 |
<div>Authors: <%= authors %> </div> |
| 175 |
</div> |
| 176 |
</script> |
| 177 |
<script type="text/template" id="filter-users"> |
| 178 |
<ul> |
| 179 |
<input type="checkbox" name=<%= who %> checked="checked"> |
| 180 |
<label><%= who %></label> |
| 181 |
</ul> |
| 182 |
</script> |
| 183 |
<script type="text/template" id="filter-tags"> |
| 184 |
<ul> |
| 185 |
<input type="checkbox" checked="checked" name=<%= tag %>> |
| 186 |
<label><%= tag %></label> |
| 187 |
</ul> |
| 188 |
</script> |
| 189 |
|
| 190 |
</body> |
| 191 |
</html> |
