<script lang="ts">
    import { onMount } from "svelte";
    import guihuasay from '$lib/assets/guihuasay.jpg'

    let content = '嗨小朋友们大家好！\n你们认识我是谁吗？';

    onMount(async () => {
        (window as any)['setContent'] = (_content: string) => {
            content = _content;
        };
    });
</script>

<div id="main" style={`background-image: url(${guihuasay}); background-size: contain; width: 1080px; height: 1080px; margin: 20px;`}>
    <div class="inner">{ content }</div>
</div>

<style>
@font-face {
    font-family: "QuanPixel 8px";
    src: url("$lib/assets/quan.ttf");
}

#main {
    font-family: "Noto Sans CJK SC";
    font-size: 64px;
    font-weight: bold;
    color: black;
    position: relative;
}

#main>.inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1080px;
    height: 450px;
    /* background-color: #ff000022; */
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: pre-wrap;
}
</style>
