lockdef · December 24, 2019 16:27
diff --git a/glasses_girl.html b/glasses_girl.html
 <html>

 <head>
    <style>
        * {
            margin: 0;
        }

        body {
            background-image: url(https://images.unsplash.com/photo-1488203602058-8db2ce840718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
            background-size: cover;
            background-repeat: no-repeat;
            background-color: gray;
        }

        .bar {
            width: 100%;
            height: 70px;
            background-color: hotpink;
            display: flex;
            justify-content: space-between;
            position: fixed;
        }

        .title {
            padding: 20px 10px;
            font-size: 20px;
            color: white;
            font-weight: bold;
        }

        .nav ul {
            display: flex;
            justify-content: space-between;
            list-style: none;
        }

        .nav li {
            padding: 20px;
            font-size: 20px;
            color: white;
            font-weight: bold;
        }

        .nav a {
            color: white;
            text-decoration: none;
        }

        .intro {
            padding-top: 110px;
            text-align: center;
            color: black;

        }

        .intro button {
            width: 60px;
            height: 30px;
            border: 0;
            background: hotpink;
            color: white;
            font-weight: bold;
        }

        .intro button:active {
            background-color: white;
            color: black;
        }

        .main {
            text-align: center;
        }

        .main img {
            border-radius: 10px;
        }

        #app {
            background-color: rgba(255, 255, 255, 0.3);
            height: 100vh;
        }
    </style>
 </head>

 <body>
    <div id="app">
        <div class="bar">
            <div class="title">
                Glasses Girls
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-text="メガネっ娘万歳！"
                            data-show-count="false">Tweet</a></li>
                </ul>
            </div>
        </div>

        <section class="intro">
            <h1>
                メガネっ娘と写真旅行に出かけませんか？
            </h1>
            <br>
            <p>
                ボタンを押すとメガネっ娘が行き先を提案してくれます。
            </p>
            <br>
            <button v-on:click="OnClick">
                オセ！
            </button>
            <br><br>
        </section>

        <section class="main" v-if="info_event">
            <h1>
                このイベントに行きませんか？
            </h1>
            <p>
                イベント名は{{info_event.event_name}}です。
            </p>
            <p>
                開催期間は{{info_event.event_period}}です。
            </p>
            <p>
                場所は{{info_event.location}}です。
            </p>
            <p>
                <img height="200px" :src="info_event.image_url">
            </p>
            <p>
                メガネっ娘があなたにイベントの説明をしてくれます！<br>
                {{info_event.description}}
            </p>
        </section>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

 </body>

 <script>
    app = new Vue({
        el: '#app',
        data: {
            info_event: null
        },
        methods: {
            OnClick: function (event) {
                axios
                    .get('https://onenight-hack.herokuapp.com/events/choice')
                    .then(response => (this.info_event = response.data))
            }
        }
    })
 </script>

 </html>
	<html>

	<head>
	<style>
	* {
	margin: 0;
	}

	body {
	background-image: url(https://images.unsplash.com/photo-1488203602058-8db2ce840718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: gray;
	}

	.bar {
	width: 100%;
	height: 70px;
	background-color: hotpink;
	display: flex;
	justify-content: space-between;
	position: fixed;
	}

	.title {
	padding: 20px 10px;
	font-size: 20px;
	color: white;
	font-weight: bold;
	}

	.nav ul {
	display: flex;
	justify-content: space-between;
	list-style: none;
	}

	.nav li {
	padding: 20px;
	font-size: 20px;
	color: white;
	font-weight: bold;
	}

	.nav a {
	color: white;
	text-decoration: none;
	}

	.intro {
	padding-top: 110px;
	text-align: center;
	color: black;

	}

	.intro button {
	width: 60px;
	height: 30px;
	border: 0;
	background: hotpink;
	color: white;
	font-weight: bold;
	}

	.intro button:active {
	background-color: white;
	color: black;
	}

	.main {
	text-align: center;
	}

	.main img {
	border-radius: 10px;
	}

	#app {
	background-color: rgba(255, 255, 255, 0.3);
	height: 100vh;
	}
	</style>
	</head>

	<body>
	<div id="app">
	<div class="bar">
	<div class="title">
	Glasses Girls
	</div>
	<div class="nav">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-text="メガネっ娘万歳！"
	data-show-count="false">Tweet</a></li>
	</ul>
	</div>
	</div>

	<section class="intro">
	<h1>
	メガネっ娘と写真旅行に出かけませんか？
	</h1>
	<br>
	<p>
	ボタンを押すとメガネっ娘が行き先を提案してくれます。
	</p>
	<br>
	<button v-on:click="OnClick">
	オセ！
	</button>
	<br><br>
	</section>

	<section class="main" v-if="info_event">
	<h1>
	このイベントに行きませんか？
	</h1>
	<p>
	イベント名は{{info_event.event_name}}です。
	</p>
	<p>
	開催期間は{{info_event.event_period}}です。
	</p>
	<p>
	場所は{{info_event.location}}です。
	</p>
	<p>
	<img height="200px" :src="info_event.image_url">
	</p>
	<p>
	メガネっ娘があなたにイベントの説明をしてくれます！<br>
	{{info_event.description}}
	</p>
	</section>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

	</body>

	<script>
	app = new Vue({
	el: '#app',
	data: {
	info_event: null
	},
	methods: {
	OnClick: function (event) {
	axios
	.get('https://onenight-hack.herokuapp.com/events/choice')
	.then(response => (this.info_event = response.data))
	}
	}
	})
	</script>

	</html>