325 lines
No EOL
13 KiB
HTML
325 lines
No EOL
13 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/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>Croodle</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-sm-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-sm-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 class="box">loading...</div>
|
|
</script>
|
|
|
|
<!-- error template -->
|
|
<script type="text/x-handlebars" id="error">
|
|
<div class="box">
|
|
<h2>error</h2>
|
|
<p>{{status}}<br/>{{statusText}}</p>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- poll template -->
|
|
<script type="text/x-handlebars" 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">{{pollUrl}}</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>
|
|
{{#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}}
|
|
|
|
<tr class='newUser'>
|
|
<td>
|
|
{{input value=view.newUserName placeholder="Enter your name..."}}
|
|
</td>
|
|
{{#each newUserSelection in view.newUserSelections}}
|
|
<td>
|
|
{{#if isFreeText}}
|
|
{{input value=newUserSelection.value}}
|
|
{{else}}
|
|
{{view Ember.Select
|
|
contentBinding="answers"
|
|
optionValuePath="content.label"
|
|
optionLabelPath="content.label"
|
|
prompt="choose an answer"
|
|
valueBinding="newUserSelection.value"}}
|
|
{{/if}}
|
|
</td>
|
|
{{/each}}
|
|
<td>
|
|
<button {{action "addNewUser" target="view" class="btn btn-default"}}> ok </button>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class='evaluation evaluation-header'>
|
|
<td {{bind-attr colspan=colspan}}>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}}
|
|
</tbody>
|
|
</table>
|
|
</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">
|
|
<h2>poll type</h2>
|
|
|
|
{{#em-form model=model 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">
|
|
<h2>meta data</h2>
|
|
{{#em-form model=model 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">
|
|
<h2>options</h2>
|
|
|
|
{{#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}}
|
|
</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"> next </button>
|
|
</div>
|
|
</form>
|
|
{{/if}}
|
|
|
|
{{#if isFindADate}}
|
|
<div id="datepicker">
|
|
{{view App.Datepicker}}
|
|
<div class="form-group">
|
|
<button {{action "submitFindADate"}} class="btn btn-default"> next </button>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-handlebars" id="create/settings">
|
|
<div class="box">
|
|
<h2>settings</h2>
|
|
{{#em-form model=model submit_button=false}}
|
|
{{em-select
|
|
property="answerType"
|
|
label="answer type"
|
|
prompt="-select-"
|
|
contentBinding="App.AnswerTypes"
|
|
optionValuePath="content.id"
|
|
optionLabelPath="content.label"
|
|
prompt="Please define available answers"}}
|
|
{{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/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> |