mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] thankspage

Browse Source
This commit is contained in:
kwaroran
2023-08-20 00:14:12 +09:00
parent 9f82a489e8
commit 3d2d07fece
4 changed files with 161 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -5,6 +5,7 @@
<link rel="icon" type="image/png" href="/logo2.png" />
<meta name="description" content="An AI frontend for both light and core users.">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Tilt+Prism&family=Yellowtail&display=swap" rel="stylesheet">
<title>RisuAI</title>
</head>

3
src/lang/en.ts
View File

@@ -426,4 +426,7 @@ export const languageEnglish = {
importPersona: "Import Persona",
export: "Export",
import: "Import",
supporterThanks: "Supporter Thanks",
supporterThanksDesc: "Thank you for your support!",
donatorPatreonDesc:"For default, it will not be shown in the list for privacy. if you want to show your nickname, go to RisuAI's patreon page and press the link button.",
}

152
src/lib/Setting/Pages/ThanksPage.svelte Normal file
View File

@@ -0,0 +1,152 @@
<script lang="ts">
import { language } from "src/lang";
interface SupporterImaged{
name: string,
image: string,
}
interface supporters{
I: string[],
II: string[],
III: string[],
IV: SupporterImaged[],
V: SupporterImaged[],
}
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",
},
],
}
return dummy
}
</script>
<h2 class="text-2xl font-bold mt-2">{language.supporterThanks}</h2>
<span class="mb-2 text-textcolor2">{language.supporterThanksDesc}</span>
{#await loadSupporters() then supporter}
<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>
</div>
{/each}
</div>
<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>
</div>
{/each}
</div>
<h3 class="text-xl font-bold mt-4">Supporter III</h3>
<div class="flex w-full flex-wrap gap-2">
{#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>
</div>
{/each}
</div>
<h3 class="text-xl font-bold mt-4">Supporter II</h3>
<div class="flex w-full flex-wrap gap-2">
{#each supporter.II 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-bold prism-font prism-font-copper text-lg">{support}</span>
</div>
</div>
{/each}
</div>
<h3 class="text-xl font-bold mt-4">Supporter I</h3>
<div class="flex w-full flex-wrap gap-2">
{#each supporter.I 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-bold prism-font prism-font-copper">{support}</span>
</div>
</div>
{/each}
</div>
{/await}
<style>
.prism-font-silver{
background: linear-gradient(to right, #777, #fff ,#777, #fff, #777);
}
.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);
}
.prism-font{
text-align: center;
color: transparent;
background-size: 125px 100%;
background-clip: text;
animation-name: shimmer;
animation-duration: 2s;
animation-iteration-count: infinite;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #222;
}
@keyframes shimmer {
0% {
background-position: top left;
}
50% {
background-position: top right;
}
0% {
background-position: top left;
}
}
</style>

7
src/lib/Setting/Settings.svelte
View File

@@ -19,6 +19,7 @@
import PersonaSettings from "./Pages/PersonaSettings.svelte";
import PromptSettings from "./Pages/PromptSettings.svelte";
import { DataBase } from "src/ts/storage/database";
import ThanksPage from "./Pages/ThanksPage.svelte";
let selected = -1
let openPresetList = false
let openLoreList = false
@@ -136,10 +137,10 @@
class:text-textcolor={selected === 7}
class:text-textcolor2={selected !== 7}
on:click={() => {
selected = 7
selected = 77
}}>
<BoxIcon />
<span>{language.community}</span>
<span>{language.supporterThanks}</span>
</button>
{#if window.innerWidth < 700}
<button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
@@ -183,6 +184,8 @@
<PromptSettings onGoBack={() => {
selected = 1
}}/>
{:else if selected === 77}
<ThanksPage/>
{/if}
</div>
{/key}