[feat] add import on sidebar
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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
|
||||||
}}>
|
}}>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user