Awesome-Mirrors
/
personal-security-checklist
mirror of https://github.com/Lissy93/personal-security-checklist.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add settings menu

This commit is contained in:
Alicia Sykes 2024-02-12 19:08:49 +00:00
parent 99dda1101d
commit 872ac86443
3 changed files with 76 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/core/icon.tsx
View File

@ -124,6 +124,11 @@ const getSvgPath = (icon: string) => {
vb: "0 0 512 512",
path: "M0 128C0 92.7 28.7 64 64 64H370.7c17 0 33.3 6.7 45.3 18.7L566.6 233.4c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6L416 429.3c-12 12-28.3 18.7-45.3 18.7H64c-35.3 0-64-28.7-64-64V128zm143 47c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z",
};
case 'settings':
return {
vb: "0 0 640 512",
path: "M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8h-.7c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 304a48 48 0 1 1 0 96 48 48 0 1 1 0-96z",
};
case 'mastodon':
return {
vb: "0 0 512 512",

62
web/src/components/furniture/nav.tsx
View File

@ -1,5 +1,5 @@
import { component$ } from "@builder.io/qwik";
import { $, component$ } from "@builder.io/qwik";
import Icon from "~/components/core/icon";
import { data } from '~/mock-data';
import type { Section } from '~/types/PSC';
@ -11,6 +11,21 @@ export default component$(() => {
const { theme, setTheme } = useTheme();
const themes = [
'dark', 'light', 'night', 'cupcake',
'bumblebee', 'corporate', 'synthwave', 'retro',
'valentine', 'halloween', 'aqua', 'lofi',
'fantasy', 'dracula'
];
const deleteAllData = $(() => {
const isConfirmed = confirm('Are you sure you want to delete all local data? This will erase your progress.');
if (isConfirmed) {
localStorage.clear();
location.reload();
}
});
return (
<>
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
@ -66,6 +81,13 @@ export default component$(() => {
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</label>
</div>
<li class="list-none px-2">
<p
onClick$={() => ((document.getElementById('settings_modal') || {}) as HTMLDialogElement).showModal()}
class="cursor-pointer tooltip flex tooltip-bottom" data-tip="Settings">
<Icon icon="settings" width={20} height={20} />
</p>
</li>
</div>
</div>
@ -138,6 +160,44 @@ export default component$(() => {
</li>
</ul>
</div>
<dialog id="settings_modal" class="modal">
<div class="modal-box">
<div class="tabs tabs-lifted">
<p class="tab tab-active">Settings</p>
<a class="tab" href="/about">About</a>
</div>
<div class="modal-action justify-start w-full flex flex-col gap-4">
<div class="flex items-between w-full justify-between">
<label for="theme" class="label">Theme</label>
<select
id="theme"
class="select select-bordered w-full max-w-xs"
onChange$={(event) => setTheme((event.target as HTMLSelectElement).value) }
>
<option disabled selected>Theme</option>
{themes.map((someTheme) => (
<option
key={someTheme}
value={someTheme}
selected={someTheme === theme.theme}
>
{someTheme.charAt(0).toUpperCase() + someTheme.slice(1)}
</option>
))}
</select>
</div>
<div class="flex items-between w-full justify-between">
<label class="label">Data</label>
<button class="btn btn-primary" onClick$={deleteAllData}>Delete All</button>
</div>
<button
class="btn my-1 mx-auto"
onClick$={() => ((document.getElementById('settings_modal') || {}) as HTMLDialogElement).close()}
>Close</button>
</div>
</div>
</dialog>
</>
);
});

14
web/src/components/psc/progress.tsx
View File

@ -20,13 +20,14 @@ export default component$(() => {
const [checkedItems] = useLocalStorage('PSC_PROGRESS', {});
// Ignored items, from local storage
const [ignoredItems] = useLocalStorage('PSC_IGNORED', {});
// Local storage for closing and ignoring the welcome dialog
const [ignoreDialog, setIgnoreDialog] = useLocalStorage('PSC_CLOSE_WELCOME', false);
// Store to hold calculated progress results
const totalProgress = useSignal({ completed: 0, outOf: 0 });
// Ref to the radar chart canvas
const radarChart = useSignal<HTMLCanvasElement>();
// Completion data for each section
const sectionCompletion = useSignal<number[]>([]);
const [ignoreDialog, setIgnoreDialog] = useLocalStorage('PSC_CLOSE_WELCOME', false);
/**
* Calculates the users progress over specified sections.
@ -340,8 +341,11 @@ export default component$(() => {
{ checklists.value.map((section: Section, index: number) => (
<li key={index}>
<a
href={`/${section.slug}`}
class="my-2 w-80 flex justify-between items-center tooltip"
href={`/checklist/${section.slug}`}
class={[
'my-2 w-80 flex justify-between items-center tooltip transition',
`hover:text-${section.color}-400`
]}
data-tip={`Completed ${sectionCompletion.value[index]}% of ${section.checklist.length} items.`}
>
<p class="text-sm m-0 flex items-center text-left gap-1 text-nowrap overflow-hidden max-w-40">
@ -349,7 +353,9 @@ export default component$(() => {
{section.title}
</p>
<div class="progress w-36">
<span class={`block h-full transition bg-${section.color}-400`} style={`width: ${sectionCompletion.value[index] || 0}%;`}></span>
<span
class={`block h-full transition bg-${section.color}-400`}
style={`width: ${sectionCompletion.value[index] || 0}%;`}></span>
</div>
</a>
</li>