Nice! got DaisyUI themes to work!
This commit is contained in:
parent
b381426a05
commit
0b6c3ba827
|
@ -1,4 +1,7 @@
|
||||||
@import '@fontsource/fira-mono';
|
@import '@fontsource/fira-mono';
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en" data-theme="coffee">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
@ -9,8 +9,8 @@
|
||||||
<!-- IMPORTANT: Remove before production!!! -->
|
<!-- IMPORTANT: Remove before production!!! -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script src="src/lib/OpenBirchWasm/OpenBirchWrapper.js"></script>
|
<script src="./OpenBirchWasm/OpenBirchWrapper.js"></script>
|
||||||
<script src="src/lib/OpenBirchWasm/OpenBirch.js"></script>
|
<script src="./OpenBirchWasm/OpenBirch.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ParallaxLayer>
|
</ParallaxLayer>
|
||||||
<ParallaxLayer rate={0.2} offset={0.6} span={1} class="bg-base-100">
|
<ParallaxLayer rate={0.1} offset={0.575} span={1} class="bg-base-100">
|
||||||
<div class="double_centered_boxes py-16">
|
<div class="double_centered_boxes py-16">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-neutral-content">
|
<h1 class="text-neutral-content">
|
||||||
|
|
|
@ -5,13 +5,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="navbar bg-base-100">
|
<header class="navbar bg-base-100">
|
||||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
<a tabindex="0" role="button" href="/" class="btn btn-ghost btn-circle avatar">
|
||||||
<div class="w-10 rounded-full">
|
<div class="w-10 rounded-full">
|
||||||
<img
|
<img
|
||||||
alt="Tailwind CSS Navbar component"
|
alt="Tailwind CSS Navbar component"
|
||||||
src={goku} />
|
src={goku} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
<div class="flex-1"/>
|
<div class="flex-1"/>
|
||||||
<div class="flex-none">
|
<div class="flex-none">
|
||||||
<ul class="menu menu-horizontal px-1">
|
<ul class="menu menu-horizontal px-1">
|
||||||
|
|
|
@ -7,39 +7,46 @@
|
||||||
test = test.concat(test);
|
test = test.concat(test);
|
||||||
test = test.concat(test);
|
test = test.concat(test);
|
||||||
|
|
||||||
let inputValue: string;
|
let inputField: HTMLInputElement;
|
||||||
async function handleKeydown(event: KeyboardEvent) {
|
async function handleKeydown(event: KeyboardEvent) {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
OpenBirch.sendCommand(inputValue)
|
pushCommand();
|
||||||
inputValue = '';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Locally start sending command
|
||||||
|
function pushCommand(){
|
||||||
|
OpenBirch.sendCommand(inputField.value)
|
||||||
|
inputField.value = '';
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="consoleContainer p-4" style="height: 92vh;">
|
<div class="consoleContainer p-4">
|
||||||
<div class="overflow-auto p-4" style="background-color: #191724;">
|
<div class="p-4 flex grow flex-col bg-primary-content rounded-xl overflow-auto">
|
||||||
<ul>
|
<div class="">
|
||||||
|
<ul class="prose">
|
||||||
{#each $OpenBirch as consoleEntry}
|
{#each $OpenBirch as consoleEntry}
|
||||||
{#if consoleEntry.sender == 0}
|
{#if consoleEntry.sender == 0}
|
||||||
<li>{consoleEntry.message}</li>
|
<li class=""><b>></b> {" " + consoleEntry.message}</li>
|
||||||
{:else}
|
{:else}
|
||||||
<li>>{" " + consoleEntry.message}</li>
|
<li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="pt-4 join">
|
||||||
<label class="input input-bordered flex items-center gap-2">
|
<div class="input join-item input-bordered flex grow items-center gap-2">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="currentColor"
|
class="h-8 w-8 opacity-70 block m-auto fill-primary">
|
||||||
class="h-8 w-8 opacity-70 block m-auto">
|
|
||||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<input type="text" class="grow" placeholder="Search" bind:value={inputValue} on:keydown={handleKeydown} />
|
<input autofocus type="text" class="grow text-primary" placeholder="" bind:this={inputField} on:keydown={handleKeydown} />
|
||||||
</label>
|
</div>
|
||||||
|
<button class="btn join-item btn-secondary" on:click={pushCommand}>Execute</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -49,6 +56,12 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 75px;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
flex: 0 0 90%;
|
flex: 0 0 90%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,8 +6,7 @@ export default {
|
||||||
},
|
},
|
||||||
plugins: [require("@tailwindcss/typography"), require('daisyui')],
|
plugins: [require("@tailwindcss/typography"), require('daisyui')],
|
||||||
daisyui: {
|
daisyui: {
|
||||||
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
themes: ["coffee"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||||
darkTheme: "dark", // name of one of the included themes for dark mode
|
|
||||||
base: true, // applies background color and foreground color for root element by default
|
base: true, // applies background color and foreground color for root element by default
|
||||||
styled: true, // include daisyUI colors and design decisions for all components
|
styled: true, // include daisyUI colors and design decisions for all components
|
||||||
utils: true, // adds responsive and modifier utility classes
|
utils: true, // adds responsive and modifier utility classes
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"extends": "./.svelte-kit/tsconfig.json",
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"checkJs": true,
|
"checkJs": false,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
|
|
Loading…
Reference in New Issue