diff --git a/index.html b/index.html index 427a73b..508d94a 100644 --- a/index.html +++ b/index.html @@ -55,14 +55,16 @@ -

Privacy Rating

-

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

-

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 (Grade S) to very bad (Grade F).

-

Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.

-

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.

-

Once you are ready to start, click on the button below.

- -
-

Released under the GNU General Public License version 3 or later, by luca0N!

+
+

Privacy Rating

+

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

+

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 (Grade S) to very bad (Grade F).

+

Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.

+

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.

+

Once you are ready to start, click on the button below.

+ +
+

Released under the GNU General Public License version 3 or later, by luca0N!

+
diff --git a/res/Stairway-js.css b/res/Stairway-js.css index dba8adf..239a3da 100644 --- a/res/Stairway-js.css +++ b/res/Stairway-js.css @@ -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 { diff --git a/res/js/main.js b/res/js/main.js index 52efd40..26b5bad 100644 --- a/res/js/main.js +++ b/res/js/main.js @@ -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); } diff --git a/session.html b/session.html index b0e5cb0..b62064e 100644 --- a/session.html +++ b/session.html @@ -28,7 +28,7 @@ - + @@ -36,63 +36,65 @@ -

Privacy Rating

-

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

-

Loading quiz...

+
+

Privacy Rating

+

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

+

Loading quiz...

-

Unknown quiz

-

Unknown author

-
-

Your privacy grade is:

- Grade S - Grade A - Grade B - Grade C - Grade D - Grade E - Grade F +

Unknown quiz

+

Unknown author

+
+

Your privacy grade is:

+ Grade S + Grade A + Grade B + Grade C + Grade D + Grade E + Grade F -

-

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.

-

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.

-

Your Privacy Report

- The good, bad and ugly -
-
- +
+

Warning This is a warning report

+

This is the report description.

+

Advisory: this is the report advisory.

+
+
+

Bad This is a bad report

+

This is the report description.

+

Advisory: this is the report advisory.

+
+
+

Critical This is a critical report

+

This is the report description.

+

Advisory: this is the report advisory.

+
--> +
+
+ +
+

Released under the GNU General Public License version 3 or later, by luca0N!

-
- -
-

Released under the GNU General Public License version 3 or later, by luca0N!