Added wallpaper

src/Template/App.tsx

@@ -1,6 +1,7 @@
 import {TemplateData} from "../Data/PrepareData.js";
 import Time from "./Time.js";
 import HackerNews from "./HackerNews.js";
+import Wallpaper from "./Wallpaper.js";
 
 export let templateData: TemplateData;
 
@@ -9,10 +10,13 @@ export default function App(data: TemplateData) {
     return <div style={{
         fontSize: 22,
         display: 'flex',
-        width: '100%',
-        height: '100%',
+        width: '800px',
+        height: '480px',
     }}>
-        <HackerNews style={{left: '30px'}}/>
-        <Time style={{position: 'absolute', top: 8, right: 10}}/>
+        <div style={{display: 'flex', flexDirection: 'column', width: '50%', height: '100%'}}>
+            <Time style={{alignSelf: 'flex-start'}}/>
+            <HackerNews style={{width: '100%', height: '100%'}}/>
+        </div>
+        <Wallpaper style={{width: '50%', height: '100%'}}/>
     </div>
 }

src/Template/HackerNews.tsx

@@ -1,9 +1,9 @@
 import {templateData} from "./App.js";
 
 export default function HackerNews({style}: { style?: React.CSSProperties }) {
-    return <div style={{display: 'flex', flexDirection: 'column', ...style}}>
-        <h3>Hacker News</h3>
-        <div style={{display: 'flex', fontSize: 14, lineHeight: 1.4, flexDirection: 'column', width: '300px'}}>
+    return <div style={{display: 'flex', padding: '0 30px', flexDirection: 'column', ...style}}>
+        <div style={{display: 'flex', justifyContent: 'center', fontSize: 30, padding: '10px 0 20px'}}><div>Hacker News</div></div>
+        <div style={{display: 'flex', fontSize: 14, lineHeight: 1.4, flexDirection: 'column'}}>
             {templateData.hackerNews.map((hn) =>
                 <div style={{display: 'flex'}} key={hn.id}>- {hn.title}</div>)}
         </div>

src/Template/LocalImage.tsx

@@ -1,7 +1,7 @@
 import {readFileSync} from "node:fs"
 
-export function LocalImage({file, ...props}: { file: string }) {
+export function LocalImage({file, style}: { file: string, style?: React.CSSProperties }) {
     const content = readFileSync(file);
-    const src = 'data:image/png;base64,' + content.toString('base64');
-    return <img src={src} {...props} />;
+    const src = 'data:image/jpeg;base64,' + content.toString('base64');
+    return <img src={src} style={style}/>;
 }

src/Template/Time.tsx

@@ -1,6 +1,13 @@
 import {templateData} from "./App.js";
 
 export default function Time({style}: { style: React.CSSProperties }) {
-    return <div style={style}>
-        {templateData.time}</div>;
+    return <div style={{
+        backgroundColor: '#000',
+        color: '#fff',
+        padding: '3px',
+        display: 'flex',
+        ...style
+    }}>
+        <div>{templateData.time}</div>
+    </div>;
 }

src/Template/Wallpaper.tsx

@@ -0,0 +1,8 @@
+import {LocalImage} from "./LocalImage.js";
+import {ASSETS_FOLDER} from "../Config.js";
+
+export default function Wallpaper({style}: { style?: React.CSSProperties }) {
+    return <div style={{display: 'flex', overflow: 'hidden', ...style}}>
+        <LocalImage style={{height: '100%', marginLeft: '-160px'}} file={ASSETS_FOLDER + '/images/wallpaper.jpeg'}/>
+    </div>
+}