206 lines
6.9 KiB
HTML
206 lines
6.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Franken UI</title>
|
||
|
|
<title>Echoes Behind Closed Doors</title>
|
||
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
||
|
|
|
||
|
|
<!-- favicons -->
|
||
|
|
<link
|
||
|
|
rel="apple-touch-icon"
|
||
|
|
sizes="180x180"
|
||
|
|
href="/png/apple-touch-icon.png"
|
||
|
|
/>
|
||
|
|
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
|
||
|
|
<link
|
||
|
|
rel="icon"
|
||
|
|
type="image/png"
|
||
|
|
sizes="32x32"
|
||
|
|
href="/png/favicon-32x32.png"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
rel="icon"
|
||
|
|
type="image/png"
|
||
|
|
sizes="16x16"
|
||
|
|
href="/png/favicon-16x16.png"
|
||
|
|
/>
|
||
|
|
<link rel="manifest" href="/site.webmanifest" />
|
||
|
|
|
||
|
|
<!-- TODO: social share -->
|
||
|
|
|
||
|
|
<!-- frankenui -->
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://unpkg.com/franken-ui@2.0.0-internal.39/dist/css/core.min.css"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://unpkg.com/franken-ui@2.0.0-internal.39/dist/css/utilities.min.css"
|
||
|
|
/>
|
||
|
|
<script>
|
||
|
|
const htmlElement = document.documentElement;
|
||
|
|
|
||
|
|
const __FRANKEN__ = JSON.parse(
|
||
|
|
localStorage.getItem("__FRANKEN__") || "{}"
|
||
|
|
);
|
||
|
|
|
||
|
|
if (
|
||
|
|
__FRANKEN__.mode === "dark" ||
|
||
|
|
(!__FRANKEN__.mode &&
|
||
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||
|
|
) {
|
||
|
|
htmlElement.classList.add("dark");
|
||
|
|
} else {
|
||
|
|
htmlElement.classList.remove("dark");
|
||
|
|
}
|
||
|
|
|
||
|
|
htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-wirm");
|
||
|
|
htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");
|
||
|
|
htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
|
||
|
|
htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script
|
||
|
|
type="module"
|
||
|
|
src="https://unpkg.com/franken-ui@internal/dist/js/core.iife.js"
|
||
|
|
></script>
|
||
|
|
<script
|
||
|
|
type="module"
|
||
|
|
src="https://unpkg.com/franken-ui@internal/dist/js/icon.iife.js"
|
||
|
|
></script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background text-foreground">
|
||
|
|
<!-- START CODING HERE -->
|
||
|
|
<div class="uk-container uk-container-xl mt-40 grid gap-y-8 md:grid-cols-2">
|
||
|
|
<div class="space-y-4">
|
||
|
|
<h1 class="uk-hero-sm font-bold">Franken UI: Dos</h1>
|
||
|
|
<p class="text-lg font-light">New coat, old boat.</p>
|
||
|
|
<div class="flex gap-x-1">
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-primary"
|
||
|
|
href="https://next.franken-ui.dev/docs/2.0/introduction"
|
||
|
|
>
|
||
|
|
Learn
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-default"
|
||
|
|
href="https://github.com/sponsors/sveltecult"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
<uk-icon icon="heart" cls-custom="mr-2 text-pink-500"></uk-icon>
|
||
|
|
Support
|
||
|
|
</a>
|
||
|
|
<div class="uk-inline">
|
||
|
|
<button
|
||
|
|
class="uk-btn uk-btn-default uk-btn-icon"
|
||
|
|
aria-label="Customize"
|
||
|
|
>
|
||
|
|
<uk-icon icon="palette"></uk-icon>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
class="uk-card uk-card-body uk-drop w-96"
|
||
|
|
data-uk-drop="mode: click; offset: 8"
|
||
|
|
>
|
||
|
|
<div class="uk-h3">Customize</div>
|
||
|
|
<p class="mb-4 mt-1 text-muted-foreground">
|
||
|
|
Customize your Franken UI experience.
|
||
|
|
</p>
|
||
|
|
<uk-theme-switcher id="theme-switcher">
|
||
|
|
<select hidden>
|
||
|
|
<optgroup data-key="theme" label="Theme">
|
||
|
|
<option data-hex="#52525b" value="uk-theme-zinc" selected>
|
||
|
|
Zinc
|
||
|
|
</option>
|
||
|
|
<option data-hex="#64748b" value="uk-theme-slate">
|
||
|
|
Slate
|
||
|
|
</option>
|
||
|
|
<option data-hex="#78716c" value="uk-theme-stone">
|
||
|
|
Stone
|
||
|
|
</option>
|
||
|
|
<option data-hex="#6b7280" value="uk-theme-gray">
|
||
|
|
Gray
|
||
|
|
</option>
|
||
|
|
<option data-hex="#737373" value="uk-theme-neutral">
|
||
|
|
Neutral
|
||
|
|
</option>
|
||
|
|
<option data-hex="#dc2626" value="uk-theme-red">Red</option>
|
||
|
|
<option data-hex="#e11d48" value="uk-theme-rose">
|
||
|
|
Rose
|
||
|
|
</option>
|
||
|
|
<option data-hex="#f97316" value="uk-theme-orange">
|
||
|
|
Orange
|
||
|
|
</option>
|
||
|
|
<option data-hex="#16a34a" value="uk-theme-green">
|
||
|
|
Green
|
||
|
|
</option>
|
||
|
|
<option data-hex="#2563eb" value="uk-theme-blue">
|
||
|
|
Blue
|
||
|
|
</option>
|
||
|
|
<option data-hex="#facc15" value="uk-theme-yellow">
|
||
|
|
Yellow
|
||
|
|
</option>
|
||
|
|
<option data-hex="#7c3aed" value="uk-theme-violet">
|
||
|
|
Violet
|
||
|
|
</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup data-key="radii" label="Radii">
|
||
|
|
<option value="uk-radii-none">None</option>
|
||
|
|
<option value="uk-radii-sm">Small</option>
|
||
|
|
<option value="uk-radii-md" selected>Medium</option>
|
||
|
|
<option value="uk-radii-lg">Large</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup data-key="shadows" label="Shadows">
|
||
|
|
<option value="uk-shadows-none">None</option>
|
||
|
|
<option value="uk-shadows-sm" selected>Small</option>
|
||
|
|
<option value="uk-shadows-md">Medium</option>
|
||
|
|
<option value="uk-shadows-lg">Large</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup data-key="mode" label="Mode">
|
||
|
|
<option data-icon="sun" value="light">Light</option>
|
||
|
|
<option data-icon="moon" value="dark">Dark</option>
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
</uk-theme-switcher>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="">
|
||
|
|
<h2 class="uk-h3">Follow</h2>
|
||
|
|
<ul class="uk-list uk-list-hyphen mt-4">
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-link"
|
||
|
|
href="https://bsky.app/profile/sveltecult.bsky.social"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
https://bsky.app/profile/sveltecult.bsky.social
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-link"
|
||
|
|
href="https://github.com/sveltecult"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
https://github.com/sveltecult
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-link"
|
||
|
|
href="https://github.com/franken-ui"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
https://github.com/franken-ui
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- END -->
|
||
|
|
</body>
|
||
|
|
</html>
|