first commit

frontend/src/App.css

@@ -0,0 +1,59 @@
+#app {
+    height: 100vh;
+    text-align: center;
+}
+
+#logo {
+    display: block;
+    width: 50%;
+    height: 50%;
+    margin: auto;
+    padding: 10% 0 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-origin: content-box;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+}
+
+.input-box .btn {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}

frontend/src/app.tsx

@@ -0,0 +1,31 @@
+import './App.css'
+import logo from "./assets/images/logo-universal.png"
+import {Greet} from "../wailsjs/go/main/App";
+import {useState} from "preact/hooks";
+import {h} from 'preact';
+
+export function App(props: any) {
+    const [resultText, setResultText] = useState("Please enter your name below 👇");
+    const [name, setName] = useState('');
+    const updateName = (e: any) => setName(e.target.value);
+    const updateResultText = (result: string) => setResultText(result);
+
+    const greet = async() => {
+        const result = await (window as any).go.main.App.Greet("World")
+        console.log('result', result)
+
+        Greet(name).then(updateResultText);
+    }
+
+    return (
+        <div id="App">
+            <img src={logo} id="logo" alt="logo"/>
+            <div id="result" className="result">{resultText}</div>
+            <div id="input" className="input-box">
+                <input id="name" className="input" onChange={updateName} autoComplete="off" name="input"
+                        type="text"/>
+                <button className="btn" onClick={greet}>Greet</button>
+            </div>
+        </div>
+    )
+}

frontend/src/main.tsx

@@ -0,0 +1,5 @@
+import {render} from 'preact';
+import {App} from './app';
+import './style.css';
+
+render(<App/>, document.getElementById('app')!);

frontend/src/style.css

@@ -0,0 +1,26 @@
+html {
+    background-color: rgba(27, 38, 54, 1);
+    text-align: center;
+    color: white;
+}
+
+body {
+    margin: 0;
+    color: white;
+    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+@font-face {
+    font-family: "Nunito";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+}
+
+#app {
+    height: 100vh;
+    text-align: center;
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />