GHUI/Web UI/InputVue.html

﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>HTML Grasshopper Interface</title>
    <meta name="author" content="Petr Mitev">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        html, body {
            margin: 5px;
            padding: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: inline-block;
            margin: 0 10px;
        }

        a { color: #42b983; }

        #app {
            font-family: "Avenir", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
        }
    </style>

</head>
<body>
<br>
<div id="app">
    <input type="text" v-model="textInput" id="fname" name="textName">
    <input type="button" value="Click me" name="myButton" id="myButtonid"> 

    <br>
    <input type="range" id="slide" name="slideName" v-model="sliderInput">
    <br>
    <img width="200" src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>{{ greeting }}</h1>

    <h3>{{ textInput }}</h3>
    <h3>{{ sliderInput }}</h3>

    <ul>
        <li>
            To learn more about Vue, visit
            <a :href="docsURL" target="_blank">
                {{ humanizeURL(docsURL) }}
            </a>
        </li>
        <li>
            For live help with simple questions, check out
            <a :href="discordURL" target="_blank">
                the Discord chat
            </a>
        </li>
        <li>
            For more complex questions, post to
            <a :href="forumURL" target="_blank">
                the forum
            </a>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            greeting: 'Welcome to your Vue.js app!',
            docsURL: 'http://vuejs.org/guide/',
            discordURL: 'https://chat.vuejs.org',
            forumURL: 'http://forum.vuejs.org/',
            textInput: "",
            textInput2: "",
            sliderInput: ""
        },
        methods: {
            humanizeURL: function(url) {
                return url
                    .replace(/^https?:\/\//, '')
                    .replace(/\/$/, '');
            }
        }
    })
</script>
</body>
</html>