sotonin/something.html

## something.html
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Raleway', sans-serif;
            font-weight: 100;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }

        .color-red {
            color: red;
        }

        .color-blue {
            color: blue;
        }

        .is-loading {
            background: red;
        }
    </style>
</head>
<body>
<div id="app" class="flex-center position-ref full-height">
    <div id="content" class="content">
        {{--<input type="text" v-model="newName">
        <button @click="addName">Add Name</button>
        <button :class="{ 'is-loading' : isLoading }" @click="toggleClass">Click me</button>--}}

        {{--<h1>All Tasks</h1>
        <ul>
            <li v-for="task in tasks" v-text="task.description"></li>
        </ul>

        <h1>Incomplete Tasks</h1>
        <ul>
            <li v-for="task in incompleteTasks" v-text="task.description"></li>
        </ul>--}}
    </div>
</div>

<script src="{{ @asset('js/app.js') }}"></script>
<script>
    const vueApp = new Vue({
        el: '#content',
        data: {
            message: 'Hello World',
            isLoading: false,
            className: 'color-red',
            title: 'This is some title set via javascript',
            newName: '',
            names: ['joe', 'james', 'blah', 'ok'],
            tasks: [
                { description: 'Something to do', completed: true },
                { description: 'Something else', completed: false },
                { description: 'Go to store', completed: false },
                { description: 'Pick nose', completed: false },
                { description: 'Eat dinner', completed: true }
            ]
        },
        methods: {
            addName() {
                this.names.push(this.newName);
                this.newName = '';
            },
            toggleClass() {
                this.isLoading = true;
            }
        },
        computed: {
            incompleteTasks() {
                return this.tasks.filter(task => ! task.completed);
            }
        },
        mounted() {

        }
    });
</script>
</body>
</html>
	<!doctype html>
	<html lang="{{ app()->getLocale() }}">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Laravel</title>

	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

	<!-- Styles -->
	<style>
	html, body {
	background-color: #fff;
	color: #636b6f;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	height: 100vh;
	margin: 0;
	}

	.full-height {
	height: 100vh;
	}

	.flex-center {
	align-items: center;
	display: flex;
	justify-content: center;
	}

	.position-ref {
	position: relative;
	}

	.top-right {
	position: absolute;
	right: 10px;
	top: 18px;
	}

	.content {
	text-align: center;
	}

	.title {
	font-size: 84px;
	}

	.links > a {
	color: #636b6f;
	padding: 0 25px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1rem;
	text-decoration: none;
	text-transform: uppercase;
	}

	.m-b-md {
	margin-bottom: 30px;
	}

	.color-red {
	color: red;
	}

	.color-blue {
	color: blue;
	}

	.is-loading {
	background: red;
	}
	</style>
	</head>
	<body>
	<div id="app" class="flex-center position-ref full-height">
	<div id="content" class="content">
	{{--<input type="text" v-model="newName">
	<button @click="addName">Add Name</button>
	<button :class="{ 'is-loading' : isLoading }" @click="toggleClass">Click me</button>--}}

	{{--<h1>All Tasks</h1>
	<ul>
	<li v-for="task in tasks" v-text="task.description"></li>
	</ul>

	<h1>Incomplete Tasks</h1>
	<ul>
	<li v-for="task in incompleteTasks" v-text="task.description"></li>
	</ul>--}}
	</div>
	</div>

	<script src="{{ @asset('js/app.js') }}"></script>
	<script>
	const vueApp = new Vue({
	el: '#content',
	data: {
	message: 'Hello World',
	isLoading: false,
	className: 'color-red',
	title: 'This is some title set via javascript',
	newName: '',
	names: ['joe', 'james', 'blah', 'ok'],
	tasks: [
	{ description: 'Something to do', completed: true },
	{ description: 'Something else', completed: false },
	{ description: 'Go to store', completed: false },
	{ description: 'Pick nose', completed: false },
	{ description: 'Eat dinner', completed: true }
	]
	},
	methods: {
	addName() {
	this.names.push(this.newName);
	this.newName = '';
	},
	toggleClass() {
	this.isLoading = true;
	}
	},
	computed: {
	incompleteTasks() {
	return this.tasks.filter(task => ! task.completed);
	}
	},
	mounted() {

	}
	});
	</script>
	</body>
	</html>