github.com/AlpineAIO/wails/v2@v2.0.0-beta.32.0.20240505041856-1047a8fa5fef/pkg/templates/generate/assets/svelte/frontend/src/App.svelte (about) 1 <script> 2 import logo from './assets/images/logo-universal.png' 3 import {Greet} from '../wailsjs/go/main/App.js' 4 5 let resultText = "Please enter your name below 👇" 6 let name 7 8 function greet() { 9 Greet(name).then(result => resultText = result) 10 } 11 </script> 12 13 <main> 14 <img alt="Wails logo" id="logo" src="{logo}"> 15 <div class="result" id="result">{resultText}</div> 16 <div class="input-box" id="input"> 17 <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/> 18 <button class="btn" on:click={greet}>Greet</button> 19 </div> 20 </main> 21 22 <style> 23 24 #logo { 25 display: block; 26 width: 50%; 27 height: 50%; 28 margin: auto; 29 padding: 10% 0 0; 30 background-position: center; 31 background-repeat: no-repeat; 32 background-size: 100% 100%; 33 background-origin: content-box; 34 } 35 36 .result { 37 height: 20px; 38 line-height: 20px; 39 margin: 1.5rem auto; 40 } 41 42 .input-box .btn { 43 width: 60px; 44 height: 30px; 45 line-height: 30px; 46 border-radius: 3px; 47 border: none; 48 margin: 0 0 0 20px; 49 padding: 0 8px; 50 cursor: pointer; 51 } 52 53 .input-box .btn:hover { 54 background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); 55 color: #333333; 56 } 57 58 .input-box .input { 59 border: none; 60 border-radius: 3px; 61 outline: none; 62 height: 30px; 63 line-height: 30px; 64 padding: 0 10px; 65 background-color: rgba(240, 240, 240, 1); 66 -webkit-font-smoothing: antialiased; 67 } 68 69 .input-box .input:hover { 70 border: none; 71 background-color: rgba(255, 255, 255, 1); 72 } 73 74 .input-box .input:focus { 75 border: none; 76 background-color: rgba(255, 255, 255, 1); 77 } 78 79 </style>