2 | 3 | 17 | -------------------------------------------------------------------------------- /src/components/HomeScreen/HomeScreen.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/HomeScreen/LockScreen.svelte: -------------------------------------------------------------------------------- 1 | 43 | 44 |

55 |

56 | 57 |

58 | 59 |

60 |

61 | {formattedTime} 62 |

63 |

{secondaryTime}

64 |

65 | 66 | 67 | 68 | 69 | 72 | 73 | 76 | 77 |

78 | 79 | 174 | -------------------------------------------------------------------------------- /src/components/HomeScreen/Wallpaper.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

11 | 12 | 33 | -------------------------------------------------------------------------------- /src/css/global.scss: -------------------------------------------------------------------------------- 1 | @import './reset'; 2 | @import './themes'; 3 | 4 | html, 5 | body { 6 | height: 100%; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | flex-direction: column; 13 | 14 | font-family: var(--system-font-family); 15 | 16 | overflow: hidden; 17 | 18 | background-color: black; 19 | 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | * { 25 | box-sizing: border-box; 26 | 27 | transition: background-color 150ms ease-in, background 150ms ease-in; 28 | 29 | user-select: none; 30 | } 31 | 32 | *:focus { 33 | outline: none; 34 | } 35 | 36 | *:focus-visible { 37 | outline: none; 38 | 39 | box-shadow: var(--system-focus-outline); 40 | } 41 | 42 | #app { 43 | position: relative; 44 | 45 | height: 100%; 46 | aspect-ratio: 220 / 422; 47 | 48 | background-color: white; 49 | 50 | isolation: isolate; 51 | 52 | &, 53 | * { 54 | cursor: var(--system-cursor-default), auto; 55 | } 56 | } 57 | 58 | button { 59 | color: inherit; 60 | text-decoration: none; 61 | vertical-align: middle; 62 | font-family: inherit; 63 | 64 | border: 0; 65 | border-radius: 0; 66 | 67 | outline: 0; 68 | 69 | margin: 0; 70 | padding: 0; 71 | 72 | display: inline-flex; 73 | align-items: center; 74 | justify-content: center; 75 | 76 | position: relative; 77 | 78 | user-select: none; 79 | appearance: none; 80 | cursor: var(--system-cursor-default), auto; 81 | 82 | background-color: transparent; 83 | 84 | -webkit-tap-highlight-color: transparent; 85 | } 86 | -------------------------------------------------------------------------------- /src/css/reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 1. Use a more-intuitive box-sizing model. 3 | */ 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | /* 10 | 2. Remove default margin 11 | */ 12 | * { 13 | margin: 0; 14 | } 15 | /* 16 | 3. Allow percentage-based heights in the application 17 | */ 18 | html, 19 | body { 20 | height: 100%; 21 | } 22 | /* 23 | Typographic tweaks! 24 | 4. Add accessible line-height 25 | 5. Improve text rendering 26 | */ 27 | body { 28 | line-height: 1.5; 29 | -webkit-font-smoothing: antialiased; 30 | } 31 | /* 32 | 6. Improve media defaults 33 | */ 34 | img, 35 | picture, 36 | video, 37 | canvas, 38 | svg { 39 | display: block; 40 | max-width: 100%; 41 | } 42 | /* 43 | 7. Remove built-in form typography styles 44 | */ 45 | input, 46 | button, 47 | textarea, 48 | select { 49 | font: inherit; 50 | } 51 | /* 52 | 8. Avoid text overflows 53 | */ 54 | p, 55 | h1, 56 | h2, 57 | h3, 58 | h4, 59 | h5, 60 | h6 { 61 | overflow-wrap: break-word; 62 | } 63 | /* 64 | 9. Create a root stacking context 65 | */ 66 | #root, 67 | #__next { 68 | isolation: isolate; 69 | } 70 | -------------------------------------------------------------------------------- /src/css/themes.scss: -------------------------------------------------------------------------------- 1 | body, 2 | body[data-theme='light'] { 3 | --system-color-primary: hsl(211, 100%, 50%); 4 | --system-color-primary-hsl: 211, 100%, 50%; 5 | --system-color-primary-contrast: hsl(240, 24%, 100%); 6 | --system-color-primary-contrast-hsl: 240, 24%, 100%; 7 | 8 | --system-color-dark: hsl(240, 3%, 11%); 9 | --system-color-dark-hsl: 240, 3%, 11%; 10 | --system-color-dark-contrast: hsl(240, 24%, 100%); 11 | --system-color-dark-contrast-hsl: 240, 24%, 100%; 12 | 13 | --system-color-light: hsl(240, 24%, 100%); 14 | --system-color-light-hsl: 240, 24%, 100%; 15 | --system-color-light-contrast: hsl(0, 0%, 11%); 16 | --system-color-light-contrast-hsl: 0, 0%, 11%; 17 | 18 | --system-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'Helvetica', 19 | 'Arial', sans-serif; 20 | 21 | --system-focus-outline: 0 0 0 3px hsla(var(--system-color-primary-hsl), 0.5); 22 | 23 | --system-color-grey-50: #fafafa; 24 | --system-color-grey-50-hsl: 0, 0%, 98%; 25 | 26 | --system-color-grey-100: #f5f5f5; 27 | --system-color-grey-100-hsl: 0, 0%, 96%; 28 | 29 | --system-color-grey-200: #eeeeee; 30 | --system-color-grey-200-hsl: 0, 0%, 93%; 31 | 32 | --system-color-grey-300: #e0e0e0; 33 | --system-color-grey-300-hsl: 0, 0%, 88%; 34 | 35 | --system-color-grey-400: #bdbdbd; 36 | --system-color-grey-400-hsl: 0, 0%, 74%; 37 | 38 | --system-color-grey-500: #9e9e9e; 39 | --system-color-grey-500-hsl: 0, 0%, 62%; 40 | 41 | --system-color-grey-600: #757575; 42 | --system-color-grey-600-hsl: 0, 0%, 46%; 43 | 44 | --system-color-grey-700: #616161; 45 | --system-color-grey-700-hsl: 0, 0%, 38%; 46 | 47 | --system-color-grey-800: #424242; 48 | --system-color-grey-800-hsl: 0, 0%, 26%; 49 | 50 | --system-color-grey-900: #212121; 51 | --system-color-grey-900-hsl: 0, 0%, 13%; 52 | 53 | --system-color-grey-A100: #d5d5d5; 54 | --system-color-grey-A100-hsl: 0, 0%, 84%; 55 | 56 | --system-color-grey-A200: #aaa; 57 | --system-color-grey-A200-hsl: 0, 0%, 67%; 58 | 59 | --system-color-grey-A400: #303030; 60 | --system-color-grey-A400-hsl: 0, 0%, 19%; 61 | 62 | --system-color-grey-A700: #616161; 63 | --system-color-grey-A700-hsl: 0, 0%, 38%; 64 | 65 | // Cursors 66 | --system-cursor-default: url('/cursors/normal-select.png'); 67 | --system-cursor-pointer: url('/assets/cursors/link-select.svg'); 68 | --system-cursor-text-select: url('/assets/cursors/text-select.svg'); 69 | --system-cursor-help-select: url('/assets/cursors/help-select.svg'); 70 | 71 | // the following two cursors are animated, but will be rendered as a static 72 | // image by the browser 73 | --system-cursor-busy: url('/assets/cursors/busy.webp'); 74 | --system-cursor-working-in-bg: url('/assets/cursors/working-in-background.webp'); 75 | } 76 | 77 | body.dark { 78 | /* // Primary */ 79 | --system-color-primary: #0a85ff; 80 | --system-color-primary-hsl: 210, 100%, 52%; 81 | --system-color-primary-contrast: hsl(210, 92%, 5%); 82 | --system-color-primary-contrast-hsl: 210, 92%, 5%; 83 | 84 | /* // Dark */ 85 | --system-color-dark: hsl(240, 24%, 100%); 86 | --system-color-dark-hsl: 240, 24%, 100%; 87 | --system-color-dark-contrast: hsl(0, 0%, 11%); 88 | --system-color-dark-contrast-hsl: 0, 0%, 11%; 89 | 90 | /* // Light */ 91 | --system-color-light: hsl(240, 3%, 11%); 92 | --system-color-light-hsl: 240, 3%, 11%; 93 | --system-color-light-contrast: hsl(240, 24%, 100%); 94 | --system-color-light-contrast-hsl: 240, 24%, 100%; 95 | } 96 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import HomeScreen from './components/HomeScreen/HomeScreen.svelte'; 2 | 3 | const app = new HomeScreen({ 4 | target: document.getElementById('app'), 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /src/stores/theme.store.ts: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte-local-storage-store'; 2 | 3 | export type Theme = { 4 | scheme: 'light' | 'dark'; 5 | }; 6 | 7 | export const theme = writable('ios:theme-settings', { 8 | scheme: matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light', 9 | }); 10 | 11 | theme.subscribe(({ scheme }) => { 12 | // Color scheme 13 | const { classList } = document.body; 14 | classList.remove('light', 'dark'); 15 | classList.add(scheme); 16 | }); 17 | -------------------------------------------------------------------------------- /src/stores/time.store.ts: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | export const createTimerStore = (duration: number) => 4 | readable(new Date(), (set) => { 5 | const timer = setInterval(() => set(new Date()), duration); 6 | 7 | return () => clearInterval(timer); 8 | }); 9 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export const enum UIElevation { 2 | WALLPAPER = '-1', 3 | } 4 | -------------------------------------------------------------------------------- /src/utils/throttle.ts: -------------------------------------------------------------------------------- 1 | type ThrottledFunction any> = (...args: Parameters) => ReturnType; 2 | 3 | export function throttle any>( 4 | func: T, 5 | limit: number 6 | ): ThrottledFunction { 7 | let inThrottle: boolean; 8 | let lastResult: ReturnType; 9 | 10 | return function (this: any): ReturnType { 11 | const args = arguments; 12 | const context = this; 13 | 14 | if (!inThrottle) { 15 | inThrottle = true; 16 | 17 | setTimeout(() => (inThrottle = false), limit); 18 | 19 | lastResult = func.apply(context, args); 20 | } 21 | 22 | return lastResult; 23 | }; 24 | } 25 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import sveltePreprocess from 'svelte-preprocess' 2 | 3 | export default { 4 | // Consult https://github.com/sveltejs/svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: sveltePreprocess() 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | 5 | /** 6 | To have warnings/errors of the Svelte compiler at the correct position, 7 | enable source maps by default. 8 | */ 9 | "sourceMap": true, 10 | "lib": ["ESNext", "DOM"], 11 | "strict": false, 12 | "esModuleInterop": true, 13 | "noEmit": true, 14 | "skipLibCheck": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "target": "esnext", 17 | "module": "esnext", 18 | "resolveJsonModule": true, 19 | // "baseUrl": "./src", 20 | "paths": { 21 | "🪆/*": ["./src/*"] 22 | }, 23 | /** 24 | * Typecheck JS in `.svelte` and `.js` files by default. 25 | * Disable checkJs if you'd like to use dynamic types in JS. 26 | * Note that setting allowJs false does not prevent the use 27 | * of JS in `.svelte` files. 28 | */ 29 | "allowJs": true, 30 | "checkJs": true 31 | }, 32 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "./*.ts"], 33 | "exclude": ["node_modules/**/*"] 34 | } 35 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 2 | import unpluginIcons from 'unplugin-icons/vite'; 3 | import { defineConfig } from 'vite'; 4 | import { prefetch } from './plugins/prefetch'; 5 | 6 | export default defineConfig({ 7 | plugins: [svelte(), prefetch(), unpluginIcons({ autoInstall: true, compiler: 'svelte' })], 8 | resolve: { 9 | alias: { 10 | '🪆': new URL('./src/', import.meta.url).pathname, 11 | }, 12 | }, 13 | build: { 14 | minify: 'terser', 15 | }, 16 | }); 17 | --------------------------------------------------------------------------------