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> </script>
</head> </head>
<body> <body>
<h1>Privacy Rating</h1><hr/> <div class="content">
<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> <h1>Privacy Rating</h1><hr/>
<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 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 attemps to warn you about bad software, services and practices in order to protect your privacy online.</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>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>Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.</p>
<p>Once you are ready to start, click on the button below.</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>
<button onclick="document.location = 'session.html'">Start!</button> <p>Once you are ready to start, click on the button below.</p>
<hr/> <button onclick="document.location = 'session.html'">Start!</button>
<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> <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> </body>
</html> </html>

39
res/Stairway-js.css
View File

@ -27,6 +27,16 @@ html {
body { body {
margin-left: 15%; margin-left: 15%;
margin-right: 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 { #results {
@ -104,7 +114,12 @@ body {
margin-top: 32px; margin-top: 32px;
margin-bottom: 32px; margin-bottom: 32px;
padding: 15px; padding: 15px;
border-style: dashed; background-color: #feffea;
box-shadow: 0 0 12px #0004;
}
.section-question:hover {
box-shadow: 0 0 24px #0008;
} }
#warning { #warning {
@ -127,7 +142,24 @@ body {
.section-report { .section-report {
margin-top: 12px; margin-top: 12px;
padding: 15px; 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 { .report-title {
@ -144,8 +176,9 @@ body {
} }
.report-warning { .report-warning {
background-color: yellow; background-color: yellow;
}
.report-bad { .report-bad {
color: white;
background-color: orange; background-color: orange;
} }
.report-critical { .report-critical {

3
res/js/main.js
View File

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

110
session.html
View File

@ -28,7 +28,7 @@
<link rel="stylesheet" type="text/css" href="res/Stairway-js.css"/> <link rel="stylesheet" type="text/css" href="res/Stairway-js.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script lang="javascript" type="text/javascript" src="res/js/defs.js"></script> <script lang="javascript" type="text/javascript" src="res/js/defs.js"></script>
<script lang="javascript" type="text/javascript" src="res/js/io.js"></script> <script lang="javascript" type="text/javascript" src="res/js/io.js"></script>
<script lang="javascript" type="text/javascript" src="res/js/main.js"></script> <script lang="javascript" type="text/javascript" src="res/js/main.js"></script>
@ -36,63 +36,65 @@
<script lang="javascript" type="text/javascript" src="res/js/js.js"></script> <script lang="javascript" type="text/javascript" src="res/js/js.js"></script>
</head> </head>
<body> <body>
<h1>Privacy Rating</h1><hr/> <div class="content">
<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> <h1>Privacy Rating</h1><hr/>
<p class="warning" id="warning">Loading quiz...</p> <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> <h2 id="quiz-title">Unknown quiz</h2>
<p id="quiz-author">Unknown author</p> <p id="quiz-author">Unknown author</p>
<div id="results"> <div id="results">
<center><p>Your privacy grade is:</p> <center><p>Your privacy grade is:</p>
<span id="badge-s" class="badge grade-s">Grade S</span> <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-a" class="badge grade-a">Grade A</span>
<span id="badge-b" class="badge grade-b">Grade B</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-c" class="badge grade-c">Grade C</span>
<span id="badge-d" class="badge grade-d">Grade D</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-e" class="badge grade-e">Grade E</span>
<span id="badge-f" class="badge grade-f">Grade F</span> <span id="badge-f" class="badge grade-f">Grade F</span>
</center><br/> </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>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> <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> <h2>Your Privacy Report</h2>
<i>The good, bad and ugly</i> <i>The good, bad and ugly</i>
<div id="reports"> <div id="reports">
</div> </div>
<!--<div class="section-report"> <!--<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 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> <p>This is the report description.</p>
</div> </div>
<div class="section-report"> <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 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>This is the report description.</p>
<p>Advisory: this is the report advisory.</p> <p>Advisory: this is the report advisory.</p>
</div> </div>
<div class="section-report"> <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 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>This is the report description.</p>
<p>Advisory: this is the report advisory.</p> <p>Advisory: this is the report advisory.</p>
</div> </div>
<div class="section-report"> <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 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>This is the report description.</p>
<p>Advisory: this is the report advisory.</p> <p>Advisory: this is the report advisory.</p>
</div>--> </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>
<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> </body>
</html> </html>