From 65f4398d1f0c79fcdaaf55649f1ac5a35b447eec Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 6 Sep 2022 23:48:13 +0000 Subject: feat: initial commit --- src/assets/javascript.svg | 1 + src/assets/tauri.svg | 6 +++ src/index.html | 48 ++++++++++++++++++++++ src/main.js | 15 +++++++ src/style.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 172 insertions(+) create mode 100644 src/assets/javascript.svg create mode 100644 src/assets/tauri.svg create mode 100644 src/index.html create mode 100644 src/main.js create mode 100644 src/style.css (limited to 'src') diff --git a/src/assets/javascript.svg b/src/assets/javascript.svg new file mode 100644 index 0000000..f9abb2b --- /dev/null +++ b/src/assets/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/tauri.svg b/src/assets/tauri.svg new file mode 100644 index 0000000..31b62c9 --- /dev/null +++ b/src/assets/tauri.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..08d55d1 --- /dev/null +++ b/src/index.html @@ -0,0 +1,48 @@ + + + + + + + Tauri App + + + + + +
+

Welcome to Tauri!

+ + + +

Click on the Tauri logo to learn more about the framework

+ +
+
+ + +
+
+ +

+
+ + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..fac9136 --- /dev/null +++ b/src/main.js @@ -0,0 +1,15 @@ +const { invoke } = window.__TAURI__.tauri; + +let greetInputEl; +let greetMsgEl; + +window.addEventListener("DOMContentLoaded", () => { + greetInputEl = document.querySelector("#greet-input"); + greetMsgEl = document.querySelector("#greet-msg"); +}); + +async function greet() { + greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); +} + +window.greet = greet; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..c0f9e3b --- /dev/null +++ b/src/style.css @@ -0,0 +1,102 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color: #0f0f0f; + background-color: #f6f6f6; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +.container { + margin: 0; + padding-top: 10vh; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: 0.75s; +} + +.logo.tauri:hover { + filter: drop-shadow(0 0 2em #24c8db); +} + +.row { + display: flex; + justify-content: center; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} + +h1 { + text-align: center; +} + +input, +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + color: #0f0f0f; + background-color: #ffffff; + transition: border-color 0.25s; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} + +button { + cursor: pointer; +} + +button:hover { + border-color: #396cd8; +} + +input, +button { + outline: none; +} + +#greet-input { + margin-right: 5px; +} + +@media (prefers-color-scheme: dark) { + :root { + color: #f6f6f6; + background-color: #2f2f2f; + } + + a:hover { + color: #24c8db; + } + + input, + button { + color: #ffffff; + background-color: #0f0f0f98; + } +} -- cgit v1.2.3