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>