Initial commit
This commit is contained in:
commit
e670b3f71f
36 changed files with 3243 additions and 0 deletions
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
47
src/app.html
Normal file
47
src/app.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="/assets/favicon/favicon.ico"
|
||||
type="image/x-icon"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<link
|
||||
href="/assets/favicon-dark/favicon.ico"
|
||||
type="image/x-icon"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<link
|
||||
href="/assets/favicon/favicon.png"
|
||||
type="image/png"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<link
|
||||
href="/assets/favicon-dark/favicon.png"
|
||||
type="image/png"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<link
|
||||
href="/assets/favicon/favicon.svg"
|
||||
type="image/svg+xml"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<link
|
||||
href="/assets/favicon-dark/favicon.svg"
|
||||
type="image/svg+xml"
|
||||
rel="icon"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
7
src/index.test.ts
Normal file
7
src/index.test.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
describe('sum test', () => {
|
||||
it('adds 1 + 2 to equal 3', () => {
|
||||
expect(1 + 2).toBe(3);
|
||||
});
|
||||
});
|
||||
17
src/lib/i18n/index.ts
Normal file
17
src/lib/i18n/index.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { browser } from '$app/environment';
|
||||
import { init, register } from 'svelte-i18n';
|
||||
|
||||
const defaultLocale = 'en';
|
||||
|
||||
// register('en', () => import('../locales/en.json'));
|
||||
// register('nl', () => import('../locales/nl.json'));
|
||||
// register('es', () => import('../locales/es.json'));
|
||||
|
||||
init({
|
||||
fallbackLocale: defaultLocale,
|
||||
initialLocale: browser
|
||||
? browser && localStorage.getItem('locale')
|
||||
? localStorage.getItem('locale')
|
||||
: window.navigator.language.slice(0, 2)
|
||||
: defaultLocale
|
||||
});
|
||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
66
src/lib/style/app.scss
Normal file
66
src/lib/style/app.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
@import '../node_modules/bootstrap/scss/functions';
|
||||
@import '../node_modules/bootstrap/scss/variables';
|
||||
@import '../node_modules/bootstrap/scss/variables-dark';
|
||||
|
||||
@import '@fontsource/libre-franklin';
|
||||
|
||||
@import '../node_modules/bootstrap/scss/mixins';
|
||||
@import '../node_modules/bootstrap/scss/maps';
|
||||
@import '../node_modules/bootstrap/scss/utilities';
|
||||
|
||||
@import '../node_modules/bootstrap/scss/root';
|
||||
@import '../node_modules/bootstrap/scss/reboot';
|
||||
@import '../node_modules/bootstrap/scss/type';
|
||||
@import '../node_modules/bootstrap/scss/containers';
|
||||
@import '../node_modules/bootstrap/scss/grid';
|
||||
@import '../node_modules/bootstrap/scss/forms';
|
||||
@import '../node_modules/bootstrap/scss/buttons';
|
||||
@import '../node_modules/bootstrap/scss/button-group';
|
||||
@import '../node_modules/bootstrap/scss/pagination';
|
||||
|
||||
@import '../node_modules/bootstrap/scss/dropdown';
|
||||
|
||||
@import '../node_modules/bootstrap/scss/navbar';
|
||||
@import '../node_modules/bootstrap/scss/nav';
|
||||
@import '../node_modules/bootstrap/scss/card';
|
||||
@import '../node_modules/bootstrap/scss/progress';
|
||||
@import '../node_modules/bootstrap/scss/tooltip';
|
||||
@import '../node_modules/bootstrap/scss/toasts';
|
||||
|
||||
@import '../node_modules/bootstrap/scss/helpers';
|
||||
@import '../node_modules/bootstrap/scss/utilities/api';
|
||||
|
||||
@include color-mode(light) {
|
||||
.darkModeLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
.lightModeLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
|
||||
img {
|
||||
max-height: $navbar-brand-height;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// max-height: calc(100% - 1rem); /* Adjust the padding as per your navbar */
|
||||
// max-width: calc(100% - 3rem); /* Adjust the padding as per your navbar */
|
||||
// max-height: 100%;
|
||||
// max-width: 100%;
|
||||
// height: auto;
|
||||
// width: auto;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: auto;
|
||||
/* Push the navbar items to the right */
|
||||
}
|
||||
}
|
||||
68
src/routes/+layout.svelte
Normal file
68
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Collapse,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Navbar,
|
||||
NavbarBrand
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
|
||||
import { page } from '$app/stores';
|
||||
import { locale, locales, isLoading } from 'svelte-i18n';
|
||||
|
||||
export const setLocale = (lang: string) => () => {
|
||||
locale.set(lang);
|
||||
localStorage.setItem('locale', lang);
|
||||
};
|
||||
|
||||
export const getFlagEmoji = (languageCode: string): string | null => {
|
||||
const flagMap: { [key: string]: string } = {
|
||||
en: '🇬🇧', // English flag emoji
|
||||
nl: '🇳🇱', // Dutch flag emoji
|
||||
es: '🇪🇸' // Spanish flag emoji
|
||||
};
|
||||
|
||||
// Convert the language code to lowercase for case-insensitive matching
|
||||
const lowercaseCode = languageCode.toLowerCase();
|
||||
|
||||
// Check if the language code is in the flagMap
|
||||
if (Object.prototype.hasOwnProperty.call(flagMap, lowercaseCode)) {
|
||||
return flagMap[lowercaseCode];
|
||||
} else {
|
||||
// Return null for unsupported language codes
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
let languageNames = {};
|
||||
|
||||
locale.subscribe(() => {
|
||||
let newLanguageNames = new Intl.DisplayNames([$locale], { type: 'language' });
|
||||
|
||||
for (let l: string of $locales) {
|
||||
languageNames[l] = newLanguageNames.of(l);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Navbar expand="md">
|
||||
<NavbarBrand>
|
||||
<img src="/assets/logo-dark.svg" alt="OrangeClock" class="darkModeLogo" />
|
||||
<img src="/assets/logo.svg" alt="OrangeClock" class="lightModeLogo" />
|
||||
</NavbarBrand>
|
||||
<Collapse navbar expand="md">
|
||||
<Nav class="me-auto" navbar>
|
||||
<NavItem>
|
||||
WebFlasher
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
|
||||
<!-- +layout.svelte -->
|
||||
<slot />
|
||||
19
src/routes/+layout.ts
Normal file
19
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import '$lib/style/app.scss';
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
import '$lib/i18n'; // Import to initialize. Important :)
|
||||
import { locale, waitLocale } from 'svelte-i18n';
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
if (browser && localStorage.getItem('locale')) {
|
||||
locale.set(localStorage.getItem('locale'));
|
||||
} else if (browser) {
|
||||
locale.set(window.navigator.language);
|
||||
}
|
||||
await waitLocale();
|
||||
};
|
||||
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
69
src/routes/+page.svelte
Normal file
69
src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script lang="ts">
|
||||
// import { PUBLIC_BASE_URL } from '$lib/config';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Col,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardSubtitle,
|
||||
CardFooter,
|
||||
CardBody,
|
||||
Button,
|
||||
CardText,
|
||||
Row
|
||||
} from '@sveltestrap/sveltestrap';
|
||||
// import Settings from './Settings.svelte';
|
||||
// import Status from './Status.svelte';
|
||||
// import Control from './Control.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>OrangeBTClock</title>
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"
|
||||
></script>
|
||||
</svelte:head>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Wemos S2/S3 mini</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<esp-web-install-button manifest="/manifests/epd2_13.json">
|
||||
<span slot="activate"><Button color="primary">2.13 inch</Button></span>
|
||||
</esp-web-install-button>
|
||||
<esp-web-install-button manifest="/manifests/epd2_9.json">
|
||||
<span slot="activate"><Button color="secondary">2.9 inch</Button></span>
|
||||
</esp-web-install-button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>OrangeClock PCB</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<esp-web-install-button manifest="/manifests/oc_pcb.json">
|
||||
<span slot="activate"><Button color="secondary">2.9 inch</Button></span>
|
||||
</esp-web-install-button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<h1>How it works</h1>
|
||||
<p>ESP Web Tools works by using Web Serial and a manifest which describes the firmware. ESP Web Tools detects the chipset of the connected ESP device and automatically selects the right firmware variant from the manifest.</p>
|
||||
<p>Web Serial is available in Google Chrome and Microsoft Edge browsers. Android support should be possible but has not been implemented yet.</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
Loading…
Add table
Add a link
Reference in a new issue