Zadanie 1 Hacking Semestr 3 Lekcja 13

<!DOCTYPE html>
<html>
    <header>
        <title>CSTI Demo - Client Site Template Injection</title>

        <!-- Dodanie potrzebnych plików -->
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

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

        <!-- Style aby ładniej wyglądała strona -->
        <style>
            body {
                background-image: linear-gradient(to right,#0072ff, #00c6ff);
                font-family: 'Lato',helvetica;
                margin: auto;
            }
            #app { margin-top: 50px; }
            .center {
                margin: auto;
                width: 600px;
            }
            .resumeSection{
                padding: 25px;
                margin-bottom: 25px;
                background: white;
                border-radius: 15px;
            }
            .caption{ color: gray; }
        </style>
    </header>
    <body>
        <div id="app" class="center" data-app >
            <v-app style="background-color: transparent;">
                <v-card class="resumeSection">
                    <h1 class="text-center">Witaj przyjacielu!</h1>
                    <br>

                    <v-text-field
                        label="Jak Ciebie zwą?"
                        placeholder="Tu wpisz swój pseudonim..."
                        v-model="name"
                    >
                    </v-text-field>

                    <h2 class="text-center">A więc przybyłeś posiąść wiedzę na temat SSTI oraz CSTI? Dobrze... Usiądź
                        <i>imie</i> z nami i posłuchaj...</h1>
                    <br>
                </v-card>
            </v-app>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
        <script >
            var app = new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                name: '', // Zmienna przechowująca imie naszego odwżnego który chce poznać SSTI
            },
            watch: {
                // Funkcja która wyświetla w konsoli zmiane danych w zmiennej name.
                name(newName){
                    console.log('Wpisane imie to:', newName);
                },
            },
            })
        </script>
    </body>
</html>