diff --git a/package.json b/package.json index b23fa59..ec9a250 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "debug": "^4.3.4", "i18next": "^23.10.0", "lodash": "^4.17.21", + "match-sorter": "^6.3.4", "normalize.css": "^8.0.1", "svelte": "^4.2.7", "svelte-i18next": "^2.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f95e036..622d42c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: lodash: specifier: ^4.17.21 version: 4.17.21 + match-sorter: + specifier: ^6.3.4 + version: 6.3.4 normalize.css: specifier: ^8.0.1 version: 8.0.1 @@ -2021,6 +2024,13 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + /match-sorter@6.3.4: + resolution: {integrity: sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==} + dependencies: + '@babel/runtime': 7.23.9 + remove-accents: 0.5.0 + dev: false + /mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} @@ -2408,6 +2418,10 @@ packages: /regenerator-runtime@0.14.1: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + /remove-accents@0.5.0: + resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} + dev: false + /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} diff --git a/src/index.css b/src/index.css index 7c19cf8..efeefeb 100644 --- a/src/index.css +++ b/src/index.css @@ -44,13 +44,18 @@ button, .button { } } -input[type="number"] { +input[type="number"], input[type="search"], input[type="text"] { background: transparent; color: white; border: 1px solid white; border-radius: 4px; padding: 0.2em; + + &:focus { + outline: solid rgba(255, 255, 255, 0.66); + } + &:disabled { opacity: 0.7; pointer-events: none; diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts index ad5830c..4e1229b 100644 --- a/src/lib/i18n.ts +++ b/src/lib/i18n.ts @@ -1,8 +1,14 @@ import i18next from 'i18next'; import { createI18nStore } from 'svelte-i18next'; +import enTranslation from './locales/en.json'; i18next.init({ - lng: 'en' + lng: 'en', + resources: { + en: { + translation: enTranslation + } + } }); export const i18n = createI18nStore(i18next); diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json new file mode 100644 index 0000000..65b488f --- /dev/null +++ b/src/lib/locales/en.json @@ -0,0 +1,49 @@ +{ + "tests": { + "audio": { + "label": "Audio", + "description": "Check your stereo channels or surround audio output, verify if your speakers are in phase." + }, + "av-sync": { + "label": "Audio/Video Sync", + "description": "Check if your audio and video are in sync, and measure the delay." + }, + "card": { + "label": "Card", + "description": "Test card for your display or projector, check colors, resolution and geometry." + }, + "camera": { + "label": "Camera", + "description": "Check whether your webcam or capture device is working, its image quality, resolution and frame rate. Take a snapshot." + }, + "gamepad": { + "label": "Gamepad", + "description": "Test your gamepad, check if it's working, all the buttons and joysticks, stick drift, dead zones and calibration." + }, + "keyboard": { + "label": "Keyboard", + "description": "Check if all keys are working and what key codes they send." + }, + "microphone": { + "label": "Microphone", + "description": "Check if your microphone is working, its quality, volume and noise." + }, + "mouse": { + "label": "Mouse", + "description": "Check if your mouse or touch device works properly, if there are dead zones or jitter." + }, + "sensors": { + "label": "Sensors", + "description": "See the output of your device's sensors, e.g. GPS, accelerometer, gyroscope, compass, etc." + + }, + "internet": { + "label": "Internet speed", + "description": "Measure your internet speed, ping and jitter." + }, + "timer": { + "label": "High resolution timer", + "description": "Display a microsecond resolution timer on screen, useful for measuring video pipeline latency." + } + } +} diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte index 136a390..de7905b 100644 --- a/src/routes/(pages)/+layout.svelte +++ b/src/routes/(pages)/+layout.svelte @@ -17,7 +17,10 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.8); + height: 90vh; + width: 90vw; + + background: rgba(0, 0, 0, 0.85); border-radius: 0.5rem; border: 1px solid white; @@ -27,11 +30,6 @@ flex-direction: column; } - main.sub { - height: 90vh; - width: 90vw; - } - .button-back { position: absolute; top: 1rem; diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte index 710d5b6..98ae007 100644 --- a/src/routes/(pages)/+page.svelte +++ b/src/routes/(pages)/+page.svelte @@ -1,53 +1,243 @@ - +

Total Tech Test

+ diff --git a/src/routes/(pages)/timer/+page.svelte b/src/routes/(pages)/timer/+page.svelte new file mode 100644 index 0000000..1328869 --- /dev/null +++ b/src/routes/(pages)/timer/+page.svelte @@ -0,0 +1,74 @@ + + +

{$i18n.t('High resolution timer')}

+
+
{time}
+
{displayFps} {$i18n.t('FPS')}
+
+ + +