forked from Erkan-Yilmaz/ToS-DR
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpoint-form.html
143 lines (114 loc) · 7.21 KB
/
point-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Point form - Terms of Service; Didn't Read</title>
<meta name="description" content="Terms of Service; Didn't Read (ToS;DR) is an active project to fix the biggest lie on the web. We help you understand the Terms and Conditions and Privacy Policies of websites.">
<meta name="author" content="Terms of Service; Didn't Read">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="shortcut icon" href="img/tosdr-icon-16.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/tosdr-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/tosdr-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/tosdr-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="img/tosdr-icon-57.png">
<script src="js/jquery-1.7.1.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <!--http://j.mp/mobileviewport-->
</head>
<body id="point-form-html" class="tosdr-form" data-spy="scroll">
<div class="navbar navbar-fixed-top" id="menu-options">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html"><img src="img/tosdr-icon-16.png" alt="" style="vertical-align:baseline;margin-right:.5em;" class="logo" />Terms of Service; Didn't Read</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class=""><a href="index.html#services">Ratings</a></li>
<li class=""><a href="about.html">About</a></li>
</ul>
<p class="pull-right follow-us">
Follow us <a href="http://twitter.com/tosdr">@tosdr</a>
Donate: <a href="http://flattr.com/thing/821090/ToSDR" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>
</p>
</div>
</div>
</div>
</div>
<div class="container" id="tosdr-content" role="main">
<form>
<fieldset>
<legend>Point form</legend>
<label id="name">Name<span class="required">*</span></label>
<input type="text" placeholder="Summarize of the point">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<p>This is the name of the data point as the user sees it. For instance:
"Service-X spies on their users"
or
"Very broad copyright license on your content"</p>
<p>The name is very important, as it is the first thing in the summary the user will see. Please use a capital letter to begin with. Don't make half-formed sentences like "will send you a notice 14 days in advance" but prefer "Service-X will send you a notice 14 days in advance" or even better, for usual topics: "Changes will be notified 14 days in advance". One thing that makes good names also is to start with "Services-X do something" or "You/Your… etc." That way it's easy for the user to identify who's got to do what.</p>
<p>Also, don't use abbreviations or acronyms unless everybody understands them. For instance, don't say "personal info" but "personal information" and don't use "ToS", you can just write "terms".</p>
</div>
<label id="services">Service(s) to which the point applies</label>
<input type="text" placeholder="facebook">
<input type="text" placeholder="twitter">
<button class="btn btn-inline" type="button">Add one</button>
<!-- You need to suggest services which have a file in services/ if a user types a service which does not exist in the database, redirect him or her to the service form-->
<label id="keywords">Keywords</label>
<input type="text" placeholder="social network"><span class="help-inline">please use commas to separate keywords</span>
<legend>ToS;DR <small>Where the magic happens ;^)</small></legend>
<select id="topics">
<option>Select a topic</option>
<option>Scope of the copyright license</option>
<option>Changes</option>
</select>
<button class="btn btn-inline" type="button">Add one</button>
<div class="btn-toolbar" id="point">
<div class="btn-group radio-group">
<a class="btn badge-success" href="#"><i class=" icon-thumbs-up"></i></a>
<a class="btn" href="#"><i class="icon-arrow-right"></i></a>
<a class="btn badge-warning" href="#"><i class="icon-thumbs-down"></i></a>
<a class="btn badge-important" href="#"><i class="icon-remove"></i></a>
</div>
</div>
<div class="slider" id="score">
<!-- A slider would be nice <div id="slider"></div>-->
<input type="text" placeholder="0 to 100">
</div>
<label id="tldr">Summary</label>
<textarea rows="4" style="width:100%;" placeholder="This is the summary, the recap of what the clause in the terms do. It is usually a very difficult exercise. Try not to make more than 5 sentences, but sometimes more is needed. Be creative. Feel free to include some quotes from the terms directly. It is very important that it is easy to understand and written in plain English. Do not hesitate to include links in HTML."></textarea>
<legend>Discussion and sources</legend>
<label id="discussion">If the point is already discussed on the forum, please provide the topic's URL:</label>
<input type="text" class="input-xxlarge" placeholder="https://groups.google.com/d/topic/tosdr/TOPIC-IDENTIFIER/discussion">
<label id="sources">Sources</label>
<p>Suggest the archived version of the legal docs from tosback and give possibility to add a custom link</p>
<legend>Contributor information</legend>
<label id="contributors">Name and email</label>
<input type="text" placeholder="Name <[email protected]>">
</fieldset>
<div class="form-actions">
<label class="checkbox">
<input type="checkbox" value="">
<p>I have read and agree to the <a href="legal.html#terms-contribution">Terms of contribution</a> to license my contributions under free and open licenses: Creative Commons BY-SA and GNU AGPL.</p>
</label>
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>
</form>
</div> <!-- /container -->
<!-- <script src="bootstrap/js/bootstrap-twipsy.js"></script>-->
<script src="bootstrap/js/bootstrap-collapse.js"></script>
<!-- <script src="bootstrap/js/bootstrap-modal.js"></script>-->
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>
<!-- <script src="bootstrap/js/bootstrap-tooltip.js"></script>-->
<!-- <script src="bootstrap/js/bootstrap-popover.js"></script>-->
<script src="bootstrap/js/bootstrap-alert.js"></script>
</body>
</html>