root
/
wails-pure-js-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed some typo and changed tab size

main
KiddoV 2023-10-03 13:13:24 -05:00
parent d071d8ddff
commit 6691cce276
4 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1,17 +1,17 @@
## About ## About
This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management. As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB). This is an extremely straightforward Wails template, comprising essential web components (HTML, CSS, JS) and intentionally lacking any front-end frameworks, dependencies, or Node package management.
That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files. As a result, you'll end up with an exceptionally lightweight source folder (1 - 5MB).
You'll need to construct everything from the ground up. Good luck! That being said, this is a good template for something like a ``Hello World`` application, which doesn't require you to store ~200-300MB of source files.
## Instruction ## Instruction
1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation). 1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation).
2. Open command prompt on your desire directory. 2. Open command prompt on your desire directory.
3. ``$> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template`` 3. ``> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template``
4. ``$> cd ./[your-app-name]`` 4. ``> cd ./[your-app-name]``
5. ``$> wails dev`` 5. ``> wails dev``
6. Keep developing... 6. Keep developing...
## Live Development ## Live Development
@ -34,7 +34,9 @@ To use ``UPX``, you need to download and at least put the path in the ``System E
You don't have to rely on ``npm`` to add dependencies. You don't have to rely on ``npm`` to add dependencies.
If your application requires internet access, you can add dependencies via a ``CDN`` links. If your application requires internet access, you can add dependencies via a ``CDN`` links.
If your application is used offline, simply download dependencies and save them in the ``src/libs`` folder, then import them in the index.html file. If your application is used offline, simply download dependencies and save them in the ``src/libs`` folder, then import them in the index.html file.
E.g. E.g.
```html ```html
<script src="../libs/jquery/jquery-3.7.1.js"></script> <script src="../libs/jquery/jquery-3.7.1.js"></script>

42
frontend/src/index.html
View File

@ -2,30 +2,30 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<!-- Main Srcs --> <!-- Main Source Files -->
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<script src="main.js"></script> <script src="main.js"></script>
</head> </head>
<body id="app" class="app"> <body id="app" class="app">
<header> <header>
<!-- --> <!-- -->
</header> </header>
<main> <main>
<div class="logo"></div> <div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div> <div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input"> <div class="input-box" id="input">
<input class="input" id="name" type="text" autocomplete="off" onkeydown="if (event.keyCode === 13) {greet()}" /> <input class="input" id="name" type="text" autocomplete="off" onkeydown="if (event.keyCode === 13) {greet()}" />
<button class="btn" onclick="greet()">Greet</button> <button class="btn" onclick="greet()">Greet</button>
</div> </div>
</main> </main>
<footer> <footer>
<!-- --> <!-- -->
</footer> </footer>
</body> </body>
</html> </html>

97
frontend/src/main.css
View File

@ -1,79 +1,76 @@
html { html {
background-color: rgba(27, 38, 54, 1); background-color: rgba(27, 38, 54, 1);
text-align: center; text-align: center;
color: white; color: white;
} }
body { body {
margin: 0; margin: 0;
color: white; color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
} }
@font-face { @font-face {
font-family: "Nunito"; font-family: "Nunito";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local(""), src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
} }
#app main{ #app main{
height: 100vh; height: 100vh;
text-align: center; text-align: center;
} }
.logo { .logo {
display: block; display: block;
width: 50%; width: 50%;
height: 50%; height: 50%;
margin: auto; margin: auto;
padding: 10% 0 0; padding: 10% 0 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url("./assets/images/logo-universal.png"); background-image: url("./assets/images/logo-universal.png");
background-size: 100% 100%; background-size: 100% 100%;
background-origin: content-box; background-origin: content-box;
} }
.result { .result {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
margin: 1.5rem auto; margin: 1.5rem auto;
} }
.input-box .btn { .input-box .btn {
width: 60px; width: 60px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
margin: 0 0 0 20px; margin: 0 0 0 20px;
padding: 0 8px; padding: 0 8px;
cursor: pointer; cursor: pointer;
} }
.input-box .btn:hover { .input-box .btn:hover {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
color: #333333; color: #333333;
} }
.input-box .input { .input-box .input {
border: none; border: none;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
padding: 0 10px; padding: 0 10px;
background-color: rgba(240, 240, 240, 1); background-color: rgba(240, 240, 240, 1);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.input-box .input:hover { .input-box .input:hover {
border: none; border: none;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }
.input-box .input:focus { .input-box .input:focus {
border: none; border: none;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }

22
frontend/src/main.js
View File

@ -1,15 +1,15 @@
//Global JS function for greeting //Global JS function for greeting
function greet() { function greet() {
//Get user input //Get user input
let inputName = document.getElementById("name").value; let inputName = document.getElementById("name").value;
//Call Go Greet function //Call Go Greet function
window.go.main.App.Greet(inputName).then(result => { window.go.main.App.Greet(inputName).then(result => {
//Display result from Go //Display result from Go
document.getElementById("result").innerHTML = result; document.getElementById("result").innerHTML = result;
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}).finally(() => { }).finally(() => {
console.log("finished!") console.log("finished!")
}); });
} }