355 lines
No EOL
15 KiB
HTML
355 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Croodle</title>
|
|
|
|
<link href="css/normalize.css" rel="stylesheet">
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/datepicker3.css" rel="stylesheet">
|
|
<link href="css/croodle.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!--
|
|
TEMPLATES
|
|
-->
|
|
|
|
<!-- application template -->
|
|
<script type="text/x-handlebars">
|
|
<div class="container-fluid">
|
|
<h1 class="logo">{{#link-to 'index'}}Croodle{{/link-to}}</h1>
|
|
{{outlet}}
|
|
</div>
|
|
</script>
|
|
|
|
<!-- index template -->
|
|
<script type="text/x-handlebars" id="index">
|
|
<div class="index">
|
|
|
|
<div class="box teaser">
|
|
<h2>
|
|
Croodle simplifies scheduling and decision-making ...<br/>
|
|
... while keeping your data private
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<div class="box features">
|
|
<h3>Features</h3>
|
|
<ul>
|
|
<li>
|
|
Easily schedule a date or make a poll with as much
|
|
people as you like.
|
|
</li>
|
|
<li>
|
|
All your private data is encrypted inside your
|
|
browser.
|
|
So even the server doesn't know what your schedule
|
|
or poll is about.
|
|
</li>
|
|
<li>
|
|
Define as much options as you like. Select dates
|
|
via calendar or define your options as free text.
|
|
</li>
|
|
<li>
|
|
Use pre defined answer options like <i>yes</i>,
|
|
<i>no</i>, <i>maybe</i> or allow your user to enter
|
|
free text.
|
|
</li>
|
|
<li>
|
|
An automatically updated evaluation allways gives you
|
|
an overview which options are preferred.
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="have-a-try">
|
|
<span class="glyphicon glyphicon-share-alt"></span>
|
|
{{#link-to 'create'}}have a try right now{{/link-to}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="box features">
|
|
<h3>Become your own hoster</h3>
|
|
<p>
|
|
You don't have to trust our server. You could easily
|
|
host croodle yourself. All you need is a web space
|
|
with PHP and SSL encryption enabled. You find the
|
|
source code and installation instructions on
|
|
<a href="https://github.com/jelhan/croodle">GitHub</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- loading template -->
|
|
<script type="text/x-handlebars" id="loading">
|
|
<div id="loading" class="box">
|
|
<div class="loading-animation-container">
|
|
<div id="loading-animation-circle-1" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-2" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-3" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-4" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-5" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-6" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-7" class="loading-animation-circle"></div>
|
|
<div id="loading-animation-circle-8" class="loading-animation-circle"></div>
|
|
</div>
|
|
loading your poll . . .
|
|
</div>
|
|
</script>
|
|
|
|
<!-- error template -->
|
|
<script type="text/x-handlebars" id="error">
|
|
<div class="box">
|
|
<h2>error</h2>
|
|
<p>{{model}}</p>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- poll template -->
|
|
<script type="text/x-handlebars" id="poll">
|
|
<div id="poll">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-5">
|
|
<div class="box meta-data">
|
|
<h2 class="title">{{title}}</h2>
|
|
<p class="description">{{description}}</p>
|
|
<p class="creationDate">created on {{creationDate}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-5 col-lg-offset-2">
|
|
<div class="box share-link">
|
|
<p>Share the link and invite other people to participate in your poll.</p>
|
|
<p class="link"><a {{bind-attr href=pollUrl}}>{{pollUrl}}</a></p>
|
|
<p class="notice">Everyone who knows the link could read the data.
|
|
If your poll consists of private data you may only share the
|
|
link via encrypted channels like PGP encrypted email or instant
|
|
messaging with OTR.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="table-scroll">
|
|
<table class="user-selections-table table table-striped table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
{{#each option in options}}
|
|
<th>
|
|
{{#if isFindADate}}
|
|
{{formattedDate option.title 'll'}}
|
|
{{/if}}
|
|
|
|
{{#if isMakeAPoll}}
|
|
{{option.title}}
|
|
{{/if}}
|
|
</th>
|
|
{{/each}}
|
|
<th> </th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr class='newUser'>
|
|
{{! ToDo:
|
|
should be all together in just one form;
|
|
not in several forms for each input.
|
|
This work-around is due to a problem of
|
|
ember-forms in dealing with propertys of
|
|
handlebar each helper
|
|
}}
|
|
<td>
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-form-label text="name" extraClass="sr-only"}}
|
|
{{em-input property="newUserName" placeholder="Enter your name..."}}
|
|
{{/em-form}}
|
|
</td>
|
|
{{#each newUserSelection in controller.newUserSelections}}
|
|
<td>
|
|
{{#em-form model=newUserSelection submit_button=false}}
|
|
{{#if isFreeText}}
|
|
{{em-input property="value"}}
|
|
{{else}}
|
|
{{em-select
|
|
property="value"
|
|
contentBinding="answers"
|
|
optionValuePath="content.label"
|
|
optionLabelPath="content.label"
|
|
prompt="choose an answer"}}
|
|
{{/if}}
|
|
{{/em-form}}
|
|
</td>
|
|
{{/each}}
|
|
<td>
|
|
<div class="form-group">
|
|
<button {{action "addNewUser"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> save </button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
{{#each user in users}}
|
|
<tr>
|
|
<td>{{user.name}}</td>
|
|
{{#each selection in user.selections}}
|
|
<td>
|
|
{{#if isFreeText}}
|
|
{{selection.value}}
|
|
{{else}}
|
|
<span {{bind-attr class="selection.value"}}>{{selection.value}}</span>
|
|
{{/if}}
|
|
</td>
|
|
{{/each}}
|
|
<td> </td>
|
|
</tr>
|
|
{{/each}}
|
|
|
|
{{#unless isFreeText}}
|
|
<tr class='evaluation evaluation-header'>
|
|
<td {{bind-attr colspan=fullRowColspan}}>Evaluation</td>
|
|
</tr>
|
|
|
|
{{#each answer in evaluation}}
|
|
<tr class='evaluation'>
|
|
<td>
|
|
{{answer.label}}
|
|
</td>
|
|
|
|
{{#each option in answer.options}}
|
|
<td>
|
|
{{option}}
|
|
</td>
|
|
{{/each}}
|
|
|
|
<td> </td>
|
|
</tr>
|
|
{{/each}}
|
|
{{/unless}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- create templates -->
|
|
<script type="text/x-handlebars" id="create">
|
|
{{outlet}}
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/index">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-select
|
|
property="pollType"
|
|
label="poll type"
|
|
prompt="-select-"
|
|
contentBinding="App.PollTypes"
|
|
optionValuePath="content.id"
|
|
optionLabelPath="content.label"
|
|
prompt="Please select a poll type"}}
|
|
{{em-form-submit text="next"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/meta">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-input
|
|
property="title"
|
|
label="title"
|
|
placeholder="Enter a title..."}}
|
|
{{em-text
|
|
property="description"
|
|
label="description"
|
|
placeholder="Enter a description if you like..."
|
|
rows=4}}
|
|
{{em-form-submit text="next"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/options">
|
|
<div class="box">
|
|
{{#if isMakeAPoll}}
|
|
<form role="form">
|
|
<div class="form-group">
|
|
<label class="control-label">options</label>
|
|
<fieldset>
|
|
{{#each option in options}}
|
|
{{view Ember.TextField valueBinding="option.title" class="form-control"}}<br/>
|
|
{{/each}}
|
|
{{em-form-control-help text="You have to enter at least two options."}}
|
|
</fieldset>
|
|
</div>
|
|
<div class="form-group">
|
|
<button {{action "moreOptions" target="view"}} class="btn btn-default"> add another option </button>
|
|
<button {{action "submitMakeAPoll"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
|
|
</div>
|
|
</form>
|
|
{{/if}}
|
|
|
|
{{#if isFindADate}}
|
|
<div id="datepicker">
|
|
{{view App.Datepicker}}
|
|
{{em-form-control-help text="You have to select at least two dates."}}
|
|
<div class="form-group">
|
|
<button {{action "submitFindADate"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}> next </button>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/settings">
|
|
<div class="box">
|
|
{{#em-form model=controller submit_button=false}}
|
|
{{em-select
|
|
property="answerType"
|
|
label="available answers"
|
|
prompt="-select-"
|
|
contentBinding="App.AnswerTypes"
|
|
optionValuePath="content.id"
|
|
optionLabelPath="content.label"
|
|
prompt="Please define available answers"}}
|
|
{{em-checkbox label="Allow anonym participation?" property="anonymousUser"}}
|
|
{{em-checkbox label="Force an answer?" property="forceAnswer"}}
|
|
{{em-form-submit text="save"}}
|
|
{{/em-form}}
|
|
</div>
|
|
</script>
|
|
|
|
<!-- configuration -->
|
|
<script type="text/javascript">
|
|
// enable ember query-params-new feature
|
|
window.ENV = {
|
|
FEATURES: {
|
|
'query-params-new': true
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- loading libaries -->
|
|
<script src="js/lib/sjcl.js"></script>
|
|
<script src="js/lib/jquery.js"></script>
|
|
<script src="js/lib/handlebars.js"></script>
|
|
<script src="js/lib/ember.js"></script>
|
|
<script src="js/lib/ember-data.js"></script>
|
|
<script src="js/lib/embedded-adapter.js"></script>
|
|
<script src="js/lib/ember_forms.js"></script>
|
|
<script src="js/lib/ember-validations.js"></script>
|
|
<script src="js/lib/bootstrap.js"></script>
|
|
<script src="js/lib/bootstrap-datepicker.js"></script>
|
|
<script src="js/lib/moment.min.js"></script>
|
|
<script src="js/croodle.js"></script>
|
|
</body>
|
|
</html> |