luca0N
/
Stairway-js
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated style

This commit is contained in:
luca0N! 2021-06-02 18:08:25 -03:00
parent fd377ba8c0
commit e253939fb0
Signed by: luca0N
GPG Key ID: 2E7B4655CF16D7D6
4 changed files with 105 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -55,14 +55,16 @@
</script>
</head>
<body>
<h1>Privacy Rating</h1><hr/>
<p class="warning" id="javascript-warning">It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.</p>
<p>Privacy Rating displays a form containing a few questions which are used to show a privacy grade based on your technology tasks, ranging from excellent (<span class="badge-small grade-s">Grade S</span>) to very bad (<span class="badge-small grade-f">Grade F</span>).</p>
<p>Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.</p>
<p>This service does not track you, and your answers are not sent to our servers. If you don't want to trust this instance, you can self-host it yourself.</p>
<p>Once you are ready to start, click on the button below.</p>
<button onclick="document.location = 'session.html'">Start!</button>
<hr/>
<p><a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">Released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
<div class="content">
<h1>Privacy Rating</h1><hr/>
<p class="warning" id="javascript-warning">It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.</p>
<p>Privacy Rating displays a form containing a few questions which are used to show a privacy grade based on your technology tasks, ranging from excellent (<span class="badge-small grade-s">Grade S</span>) to very bad (<span class="badge-small grade-f">Grade F</span>).</p>
<p>Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.</p>
<p>This service does not track you, and your answers are not sent to our servers. If you don't want to trust this instance, you can self-host it yourself.</p>
<p>Once you are ready to start, click on the button below.</p>
<button onclick="document.location = 'session.html'">Start!</button>
<hr/>
<p><a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">Released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
</div>
</body>
</html>

39
res/Stairway-js.css
View File

@ -27,6 +27,16 @@ html {
body {
margin-left: 15%;
margin-right: 15%;
margin-top: 0;
margin-bottom: 0;
background-color: #bfc0cd;
}
.content {
background-color: #fff;
padding: 24px;
box-shadow: 0 0 32px #0004;
}
#results {
@ -104,7 +114,12 @@ body {
margin-top: 32px;
margin-bottom: 32px;
padding: 15px;
border-style: dashed;
background-color: #feffea;
box-shadow: 0 0 12px #0004;
}
.section-question:hover {
box-shadow: 0 0 24px #0008;
}
#warning {
@ -127,7 +142,24 @@ body {
.section-report {
margin-top: 12px;
padding: 15px;
border: solid;
box-shadow: 0 0 12px #0004;
}
.section-report-good {
background-color: #aaffaa;
}
.section-report-warning {
background-color: #ffa;
}
.section-report-bad {
background-color: #ffd79f;
}
.section-report-critical {
background-color: #fcc;
}
.advisory {
font-weight: bold;
}
.report-title {
@ -144,8 +176,9 @@ body {
}
.report-warning {
background-color: yellow;
}
.report-bad {
color: white;
background-color: orange;
}
.report-critical {

3
res/js/main.js
View File

@ -160,7 +160,7 @@ function setUpStrings(){
let report = quiz.reports[choices[x][y]];
let reportEl = document.createElement('div');
reportEl.className = 'section-report';
reportEl.className = 'section-report section-report-' + report.type;
let title = document.createElement('p');
title.className = 'report-title';
@ -194,6 +194,7 @@ function setUpStrings(){
if (report.advisory != null && report.advisory != undefined){
let p = document.createElement('p');
p.innerText = report.advisory;
p.className = 'advisory';
reportEl.appendChild(p);
}

108
session.html
View File

@ -36,63 +36,65 @@
<script lang="javascript" type="text/javascript" src="res/js/js.js"></script>
</head>
<body>
<h1>Privacy Rating</h1><hr/>
<p class="warning" id="javascript-warning">It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.</p>
<p class="warning" id="warning">Loading quiz...</p>
<div class="content">
<h1>Privacy Rating</h1><hr/>
<p class="warning" id="javascript-warning">It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.</p>
<p class="warning" id="warning">Loading quiz...</p>
<h2 id="quiz-title">Unknown quiz</h2>
<p id="quiz-author">Unknown author</p>
<div id="results">
<center><p>Your privacy grade is:</p>
<span id="badge-s" class="badge grade-s">Grade S</span>
<span id="badge-a" class="badge grade-a">Grade A</span>
<span id="badge-b" class="badge grade-b">Grade B</span>
<span id="badge-c" class="badge grade-c">Grade C</span>
<span id="badge-d" class="badge grade-d">Grade D</span>
<span id="badge-e" class="badge grade-e">Grade E</span>
<span id="badge-f" class="badge grade-f">Grade F</span>
<h2 id="quiz-title">Unknown quiz</h2>
<p id="quiz-author">Unknown author</p>
<div id="results">
<center><p>Your privacy grade is:</p>
<span id="badge-s" class="badge grade-s">Grade S</span>
<span id="badge-a" class="badge grade-a">Grade A</span>
<span id="badge-b" class="badge grade-b">Grade B</span>
<span id="badge-c" class="badge grade-c">Grade C</span>
<span id="badge-d" class="badge grade-d">Grade D</span>
<span id="badge-e" class="badge grade-e">Grade E</span>
<span id="badge-f" class="badge grade-f">Grade F</span>
</center><br/>
<p>Oh no, looks like you got a bad grade! Unfortunately, many popular services do not respect your privacy, and you're likely using some of them.</p>
<p>But you can increase your privacy grade. Do not be discouraged from performing good privacy practices because you can increase it drastically with little to no effort.</p>
<h2>Your Privacy Report</h2>
<i>The good, bad and ugly</i>
<div id="reports">
</div>
<!--<div class="section-report">
<p class="report"><span title="This is a good report" class="report-class report-good">Good</span> This is a good report</p>
<p>This is the report description.</p>
</div>
</center><br/>
<p>Oh no, looks like you got a bad grade! Unfortunately, many popular services do not respect your privacy, and you're likely using some of them.</p>
<p>But you can increase your privacy grade. Do not be discouraged from performing good privacy practices because you can increase it drastically with little to no effort.</p>
<h2>Your Privacy Report</h2>
<i>The good, bad and ugly</i>
<div id="reports">
</div>
<!--<div class="section-report">
<p class="report"><span title="This is a good report" class="report-class report-good">Good</span> This is a good report</p>
<p>This is the report description.</p>
</div>
<div class="section-report">
<p class="report"><span title="This report requires attention" class="report-class report-warning">Warning</span> This is a warning report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>
<div class="section-report">
<p class="report"><span title="This is a bad report" class="report-class report-bad">Bad</span> This is a bad report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>
<div class="section-report">
<p class="report"><span title="This is a very bad report" class="report-class report-critical">Critical</span> This is a critical report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>-->
<div class="section-report">
<p class="report"><span title="This report requires attention" class="report-class report-warning">Warning</span> This is a warning report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>
<div class="section-report">
<p class="report"><span title="This is a bad report" class="report-class report-bad">Bad</span> This is a bad report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>
<div class="section-report">
<p class="report"><span title="This is a very bad report" class="report-class report-critical">Critical</span> This is a critical report</p>
<p>This is the report description.</p>
<p>Advisory: this is the report advisory.</p>
</div>-->
</div>
<div id="quiz"></div>
<!--<p>The challenge has begun! In order to find out your privacy grade, you must answer the questions in this form based on your technology use. You may skip questions if you deem necessary.</p>
<p>Please wait - loading questions...</p>
<div class="section-question">
<p class="question">Q: What operating system is installed on your main computer?</p>
<input type="radio">Windows</input>
<input type="radio">macOS</input>
<input type="radio">Linux</input>
<input type="radio">BSD</input>
<input type="radio">Windows</input>
</div>-->
<hr/>
<p><a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">Released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
</div>
<div id="quiz"></div>
<!--<p>The challenge has begun! In order to find out your privacy grade, you must answer the questions in this form based on your technology use. You may skip questions if you deem necessary.</p>
<p>Please wait - loading questions...</p>
<div class="section-question">
<p class="question">Q: What operating system is installed on your main computer?</p>
<input type="radio">Windows</input>
<input type="radio">macOS</input>
<input type="radio">Linux</input>
<input type="radio">BSD</input>
<input type="radio">Windows</input>
</div>-->
<hr/>
<p><a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">Released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
</body>
</html>