58 lines
1.8 KiB
Svelte
58 lines
1.8 KiB
Svelte
<script lang="ts">
|
||
import type { ChangeEventHandler } from "svelte/elements"
|
||
|
||
let imagePreviewUrl: string | undefined = undefined
|
||
let quote: string = '挂科比不挂科南'
|
||
let author: string = '宿舍'
|
||
|
||
const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
|
||
const files = (event.target!! as HTMLInputElement).files
|
||
if (files && files.length == 1) {
|
||
const file = files[0]
|
||
imagePreviewUrl = URL.createObjectURL(file)
|
||
} else {
|
||
imagePreviewUrl = undefined
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<header>
|
||
<h1 class="text-2xl font-bold">Makequote</h1>
|
||
<p>一个生成奇奇怪怪的名人名言句子的服务</p>
|
||
<p>
|
||
<label for="image">选择文件：</label>
|
||
<input
|
||
type="file"
|
||
id="image"
|
||
name="image"
|
||
accept="image/*"
|
||
class="border cursor-pointer shadow"
|
||
required
|
||
on:change={handleFileChange}
|
||
/>
|
||
</p>
|
||
<p>
|
||
<label for="quote">名言：</label>
|
||
<input type="text" id="quote" name="quote" bind:value={quote} />
|
||
</p>
|
||
<p>
|
||
<label for="author">名人：</label>
|
||
<input type="text" id="author" name="author" bind:value={author} />
|
||
</p>
|
||
</header>
|
||
|
||
<div id="main" class="w-240 h-135 relative bg-green-400 m-20 shadow text-white" style="font-family: 'Noto Sans CJK SC';">
|
||
{#if imagePreviewUrl}
|
||
<div class="absolute left-0 top-0 h-full w-130 bg-center bg-cover grayscale" style:background-image={`url(${imagePreviewUrl})`}></div>
|
||
{/if}
|
||
<div class="absolute right-0 top-0 h-full w-180" style="background: linear-gradient(0.25turn, #00000000, #000000 38.89%)">
|
||
<div class="box-border ml-70 w-110 h-full flex justify-center items-center px-10">
|
||
<div class="w-full">
|
||
<h1 class="text-center text-4xl font-bold my-5 wrap-break-word">{quote}</h1>
|
||
<p class="text-right">– {author}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|