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
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).
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.
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).
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
1. Do all the setup/ installation for [Wails](https://wails.io/docs/gettingstarted/installation).
2. Open command prompt on your desire directory.
3. ``$> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template``
4. ``$> cd ./[your-app-name]``
5. ``$> wails dev``
3. ``> wails init -n [your-app-name] -t https://github.com/KiddoV/wails-pure-js-template``
4. ``> cd ./[your-app-name]``
5. ``> wails dev``
6. Keep developing...
## 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.
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.
E.g.
```html
<script src="../libs/jquery/jquery-3.7.1.js"></script>

42
frontend/src/index.html
View File

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

97
frontend/src/main.css
View File

@ -1,79 +1,76 @@
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
color: white;
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;
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");
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: local(""), url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}
#app main{
height: 100vh;
text-align: center;
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-image: url("./assets/images/logo-universal.png");
background-size: 100% 100%;
background-origin: content-box;
display: block;
width: 50%;
height: 50%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-image: url("./assets/images/logo-universal.png");
background-size: 100% 100%;
background-origin: content-box;
}
.result {
height: 20px;
line-height: 20px;
margin: 1.5rem auto;
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;
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;
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;
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);
border: none;
background-color: rgba(255, 255, 255, 1);
}
.input-box .input:focus {
border: none;
background-color: rgba(255, 255, 255, 1);
border: none;
background-color: rgba(255, 255, 255, 1);
}

22
frontend/src/main.js
View File

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