[feat] add import on sidebar
This commit is contained in:
@@ -2,45 +2,22 @@
|
||||
import { language } from "src/lang";
|
||||
|
||||
|
||||
interface SupporterImaged{
|
||||
name: string,
|
||||
image: string,
|
||||
}
|
||||
|
||||
interface supporters{
|
||||
I: string[],
|
||||
II: string[],
|
||||
III: string[],
|
||||
IV: SupporterImaged[],
|
||||
V: SupporterImaged[],
|
||||
IV: string[],
|
||||
V: string[],
|
||||
}
|
||||
|
||||
async function loadSupporters() {
|
||||
const dummy:supporters = {
|
||||
//random names
|
||||
I: ["John", "Doe"],
|
||||
II: ["Lorem", "Ipsum"],
|
||||
III: ["Dolor", "Sit"],
|
||||
IV: [
|
||||
{
|
||||
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",
|
||||
},
|
||||
],
|
||||
I: ["Preview", "Preview"],
|
||||
II: ["Preview", "Preview"],
|
||||
III: ["Preview", "Preview"],
|
||||
IV: ["Preview"],
|
||||
V: ["Preview"],
|
||||
}
|
||||
return dummy
|
||||
}
|
||||
@@ -52,12 +29,9 @@
|
||||
<h3 class="text-xl font-bold mt-4">Supporter V</h3>
|
||||
<div class="flex w-full flex-wrap gap-2">
|
||||
{#each supporter.V as support}
|
||||
<!-- make a card -->
|
||||
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
|
||||
<img class="w-44 h-44 rounded-t" src={support.image} alt={support.name} />
|
||||
<!-- 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 class="flex flex-col items-center justify-center border-selected border rounded">
|
||||
<div class="flex justify-center items-center py-4 px-8">
|
||||
<span class="font-black prism-font prism-font-gold text-3xl">{support}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -65,12 +39,9 @@
|
||||
<h3 class="text-xl font-bold mt-4">Supporter IV</h3>
|
||||
<div class="flex w-full flex-wrap gap-2">
|
||||
{#each supporter.IV as support}
|
||||
<!-- make a card -->
|
||||
<div class="flex flex-col items-center justify-center p-4 border-selected border rounded">
|
||||
<img class="w-32 h-32 rounded-t" src={support.image} alt={support.name} />
|
||||
<!-- 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 class="flex flex-col items-center justify-center border-selected border rounded">
|
||||
<div class="flex justify-center items-center py-4 px-8">
|
||||
<span class="font-black prism-font prism-font-silver text-2xl">{support}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -80,8 +51,8 @@
|
||||
{#each supporter.III as support}
|
||||
<!-- make a card -->
|
||||
<div class="flex flex-col items-center justify-center border-selected border rounded">
|
||||
<div class="w-32 flex justify-center items-center p-1">
|
||||
<span class="font-black prism-font prism-font-silver text-lg">{support}</span>
|
||||
<div class="w-32 flex justify-center items-center py-3 px-6">
|
||||
<span class="font-black prism-font prism-font-silver text-xl">{support}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -119,9 +90,6 @@
|
||||
.prism-font-gold{
|
||||
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{
|
||||
background: linear-gradient(to right, #B87333, #fff ,#B87333, #fff, #B87333);
|
||||
}
|
||||
@@ -129,7 +97,7 @@
|
||||
.prism-font{
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
background-size: 125px 100%;
|
||||
background-size: 150px 100%;
|
||||
background-clip: text;
|
||||
animation-name: shimmer;
|
||||
animation-duration: 2s;
|
||||
|
||||
@@ -134,8 +134,8 @@
|
||||
<span>{language.advancedSettings}</span>
|
||||
</button>
|
||||
<button class="flex gap-2 items-center hover:text-textcolor"
|
||||
class:text-textcolor={selected === 7}
|
||||
class:text-textcolor2={selected !== 7}
|
||||
class:text-textcolor={selected === 77}
|
||||
class:text-textcolor2={selected !== 77}
|
||||
on:click={() => {
|
||||
selected = 77
|
||||
}}>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
import type { character, groupChat } from "src/ts/storage/database";
|
||||
import { DataBase } from "src/ts/storage/database";
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
import { DownloadIcon, EditIcon, TrashIcon } from "lucide-svelte";
|
||||
import { exportChat } from "src/ts/characters";
|
||||
import { DownloadIcon, EditIcon, FolderUpIcon, TrashIcon } from "lucide-svelte";
|
||||
import { exportChat, importChat } from "src/ts/characters";
|
||||
import { alertConfirm, alertError } from "src/ts/alert";
|
||||
import { language } from "src/lang";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
@@ -78,7 +78,20 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user