examples/temperature-converter.html

<!DOCTYPE html>
<html lang="en">
<head>
    {{bootstrap_meta}}

    {{bootstrap_css}}

    <title>{{title}}</title>
</head>
<body>

{{frameless_close_button}}

<div class="jumbotron">
    <h1>{{title}}</h1>
    <p class="lead">Use <em>Viaduc</em> to create a simple GUI in python.</p>
</div>

<div class="container-fluid">
    <form action="convert()">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <label class="sr-only" for="_fahrenheit">Temperature</label>
                <div class="input-group mb-2">
                    <input aria-describedby="temperatureHelp" class="form-control" id="_fahrenheit" placeholder="212.00"
                           type="text">
                    <div class="input-group-append">
                        <div class="input-group-text">&deg;F</div>
                    </div>
                </div>
                <small class="form-text text-muted" id="temperatureHelp">Enter the temperature in ℉ to
                    convert</small>
            </div>
        </div>

        <div class="form-row align-items-center">
            <div class="col-auto">
                <label class="sr-only" for="_celsius">Celsius</label>
                <div class="input-group mb-2">
                    <input class="form-control" id="_celsius"
                       type="text" readonly value="" placeholder="100.00">
                    <div class="input-group-append">
                        <div class="input-group-text">&deg;C</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-row align-items-center mb-3 mt-3">
            <div class="col-auto">
                <button class="btn btn-primary mb-2" type="submit" onclick="convert()">Convert</button>
            </div>
        </div>

    </form>
</div>

{{bootstrap_js}}

<script>
    function convert() {
        processResponse(pywebview.api.convert(getVals()));
    }

    function showCelsius(params) {
        $('#_celsius').val(params.celsius)
    }
</script>

</body>
</html>