[feat] add import on sidebar

This commit is contained in:
kwaroran
2023-08-21 19:17:44 +09:00
parent 3d2d07fece
commit 6c2b6a3293
3 changed files with 33 additions and 52 deletions

View File

@@ -2,45 +2,22 @@
import { language } from "src/lang"; import { language } from "src/lang";
interface SupporterImaged{
name: string,
image: string,
}
interface supporters{ interface supporters{
I: string[], I: string[],
II: string[], II: string[],
III: string[], III: string[],
IV: SupporterImaged[], IV: string[],
V: SupporterImaged[], V: string[],
} }
async function loadSupporters() { async function loadSupporters() {
const dummy:supporters = { const dummy:supporters = {
//random names //random names
I: ["John", "Doe"], I: ["Preview", "Preview"],
II: ["Lorem", "Ipsum"], II: ["Preview", "Preview"],
III: ["Dolor", "Sit"], III: ["Preview", "Preview"],
IV: [ IV: ["Preview"],
{ V: ["Preview"],
name: "John",
image: "https://placehold.co/600x400",
},
{
name: "Doe",
image: "https://placehold.co/600x400",
},
],
V: [
{
name: "John",
image: "https://placehold.co/600x400",
},
{
name: "Doe",
image: "https://placehold.co/600x400",
},
],
} }
return dummy return dummy
} }
@@ -52,12 +29,9 @@
<h3 class="text-xl font-bold mt-4">Supporter V</h3> <h3 class="text-xl font-bold mt-4">Supporter V</h3>
<div class="flex w-full flex-wrap gap-2"> <div class="flex w-full flex-wrap gap-2">
{#each supporter.V as support} {#each supporter.V as support}
<!-- make a card --> <div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded"> <div class="flex justify-center items-center py-4 px-8">
<img class="w-44 h-44 rounded-t" src={support.image} alt={support.name} /> <span class="font-black prism-font prism-font-gold text-3xl">{support}</span>
<!-- prietty nameplate diamond style -->
<div class="w-44 bg-selected rounded-b-lg flex justify-center items-center p-2">
<span class="font-black prism-font prism-font-gold text-xl">{support.name}</span>
</div> </div>
</div> </div>
{/each} {/each}
@@ -65,12 +39,9 @@
<h3 class="text-xl font-bold mt-4">Supporter IV</h3> <h3 class="text-xl font-bold mt-4">Supporter IV</h3>
<div class="flex w-full flex-wrap gap-2"> <div class="flex w-full flex-wrap gap-2">
{#each supporter.IV as support} {#each supporter.IV as support}
<!-- make a card --> <div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded"> <div class="flex justify-center items-center py-4 px-8">
<img class="w-32 h-32 rounded-t" src={support.image} alt={support.name} /> <span class="font-black prism-font prism-font-silver text-2xl">{support}</span>
<!-- prietty nameplate diamond style -->
<div class="w-32 bg-selected rounded-b-lg flex justify-center items-center p-1">
<span class="font-black prism-font prism-font-silver text-lg">{support.name}</span>
</div> </div>
</div> </div>
{/each} {/each}
@@ -80,8 +51,8 @@
{#each supporter.III as support} {#each supporter.III as support}
<!-- make a card --> <!-- make a card -->
<div class="flex flex-col items-center justify-center border-selected border rounded"> <div class="flex flex-col items-center justify-center border-selected border rounded">
<div class="w-32 flex justify-center items-center p-1"> <div class="w-32 flex justify-center items-center py-3 px-6">
<span class="font-black prism-font prism-font-silver text-lg">{support}</span> <span class="font-black prism-font prism-font-silver text-xl">{support}</span>
</div> </div>
</div> </div>
{/each} {/each}
@@ -119,9 +90,6 @@
.prism-font-gold{ .prism-font-gold{
background: linear-gradient(to right, #D4AF32, #fff ,#D4AF32, #fff, #D4AF32); background: linear-gradient(to right, #D4AF32, #fff ,#D4AF32, #fff, #D4AF32);
} }
.prism-font-ruby{
background: linear-gradient(to right, #E0115F, #fff ,#E0115F, #fff, #E0115F);
}
.prism-font-copper{ .prism-font-copper{
background: linear-gradient(to right, #B87333, #fff ,#B87333, #fff, #B87333); background: linear-gradient(to right, #B87333, #fff ,#B87333, #fff, #B87333);
} }
@@ -129,7 +97,7 @@
.prism-font{ .prism-font{
text-align: center; text-align: center;
color: transparent; color: transparent;
background-size: 125px 100%; background-size: 150px 100%;
background-clip: text; background-clip: text;
animation-name: shimmer; animation-name: shimmer;
animation-duration: 2s; animation-duration: 2s;

View File

@@ -134,8 +134,8 @@
<span>{language.advancedSettings}</span> <span>{language.advancedSettings}</span>
</button> </button>
<button class="flex gap-2 items-center hover:text-textcolor" <button class="flex gap-2 items-center hover:text-textcolor"
class:text-textcolor={selected === 7} class:text-textcolor={selected === 77}
class:text-textcolor2={selected !== 7} class:text-textcolor2={selected !== 77}
on:click={() => { on:click={() => {
selected = 77 selected = 77
}}> }}>

View File

@@ -2,8 +2,8 @@
import type { character, groupChat } from "src/ts/storage/database"; import type { character, groupChat } from "src/ts/storage/database";
import { DataBase } from "src/ts/storage/database"; import { DataBase } from "src/ts/storage/database";
import TextInput from "../UI/GUI/TextInput.svelte"; import TextInput from "../UI/GUI/TextInput.svelte";
import { DownloadIcon, EditIcon, TrashIcon } from "lucide-svelte"; import { DownloadIcon, EditIcon, FolderUpIcon, TrashIcon } from "lucide-svelte";
import { exportChat } from "src/ts/characters"; import { exportChat, importChat } from "src/ts/characters";
import { alertConfirm, alertError } from "src/ts/alert"; import { alertConfirm, alertError } from "src/ts/alert";
import { language } from "src/lang"; import { language } from "src/lang";
import Button from "../UI/GUI/Button.svelte"; import Button from "../UI/GUI/Button.svelte";
@@ -78,7 +78,20 @@
</button> </button>
{/each} {/each}
</div> </div>
<div class="border-t border-selected mt-2"> <div class="border-t border-selected mt-2">
<div class="flex mt-2 ml-2 items-center">
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
importChat()
}}>
<FolderUpIcon size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>
</button>
</div>
<div class="flex mt-2 items-center"> <div class="flex mt-2 items-center">
<CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/> <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
</div> </div>