@extends("layout")

@section("content")

<style>
body{
  margin: 0;
}
.header {
  background-color: rgba(255, 0, 0);
  height: 70px;
  width: 100%;
}
.container {
  width: 100%;
  margin: 0 auto;
  color: #180000;
  position: relative;
  z-index: 1;
  height: 500px;
}
.header-list {
  position: absolute;
  right: 0;
  text-align: center;
}
ul {
  margin: 0;
}
li {
  list-style: none;
  float: left;
  padding: 23px 10px;
  color: white;
  transition: 0.5s;
  margin: 0;
}
.logo {
  height: 60px;
  float: left;
  padding-top: 5px;
  cursor: pointer;
}
.header-list li:hover {
  text-shadow: -2px -2px 3px rgba(255, 204, 51), 2px 2px 3px rgba(255, 255, 255);
  color: rgba(255, 255, 255);
}
.top-wrapper {
  padding: 100px 0 100px 0;
  background-color: skyblue;
  text-align: center;
  width: auto;
  height: 1000px;
  position: relative;
}
.top-wrapper img{
  width: 100%;
  height: 430px;
}
h1 {
  font-size: 50px;
  color: black;
  float: left;
}
h2 {
  font-size: 30px;
  color: White;
  float: left;
}
#text {
  text-shadow: 1px 1px 1px red, -1px -1px 1px red, 10px 15px 4px black;
}
.wrapper {
  width: 100%;
  height: 100%;
  /*background:url('https://school.oohara.jp/kasai/staytogether.png');*/
  background: black;
}
.wrapper:hover {
  /* background:url('https://school.oohara.jp/kasai/keepdistance.png');*/
}
.circle {
  width: 100px;
  height: 100px;
  border: solid 10px white;
  position: absolute;
  top: 250px;
  border-radius: 50%;
  transition: 1s;
}
.c1 {
  left: 0;
}
.c2 {
  left: 80px;
}
.c3 {
  left: 160px;
}
.c4 {
  left: 240px;
}
.ac1 {
  left: 0;
}
.ac2 {
  left: 150px;
}
.ac3 {
  left: 300px;
}
.ac4 {
  left: 450px;
}
.t1 {
  position: absolute;
  top: 400px;
  color: white;
  font-size: 30px;
  left: 100px;
  text-align: center;
  transition: 1s;
}
.t2 {
  position: absolute;
  top: 400px;
  color: white;
  font-size: 30px;
  left: 100px;
  text-align: center;
  opacity: 0;
  transition: 1s;
}
.header-list li {
  transition: 1s;
  cursor: pointer;
}
.header-list li:hover {
  opacity: 0.7;
  background: green;
}
.kawasaki {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 33%;
  left: 47%;
  cursor: pointer;
  background: rgba(0,0,0,0);
  z-index: 3;
}
.chiba {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 35%;
  left: 68%;
  cursor: pointer;
  background: rgba(0,0,0,0);
  z-index: 3;
}
.yokohama {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 39%;
  left: 35%;
  cursor: pointer;
  background: rgba(0,0,0,0);
  z-index: 3;
}
.shibuya {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 29%;
  left: 27%;
  cursor: pointer;
  background: rgba(0,0,0,0);
  z-index: 3;
}
.shinjuku {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 19.5%;
  left: 24%;
  cursor: pointer;
  background: rgba(0,0,0,0);
  z-index: 3;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header">
  <div class="container">
    <img class="logo" src="https://school.oohara.jp/kasai/logo.png" onclick="location.href='/'">
    <div class="header-list">
      <ul>
      @if(empty(\Cookie::get("name")))
        <li onclick="location.href='/login'">ログイン</li>
        <li onclick="location.href='/register'">会員登録</li>
        @else
        <li>ようこそ{{\Cookie::get("name")}}さん</li>
        <li onclick="location.href='/logout'">ログアウト</li>
        @endif
      </ul>
    </div>
  </div>
</div>
<div class="top-wrapper">
  <img src="https://school.oohara.jp/kasai/map.png">
    <div class="kawasaki"></div>
    <div class="chiba"></div>
    <div class="yokohama"></div>
    <div class="shibuya"></div>
    <div class="shinjuku"></div>
  </div>

<script>
$(".kawasaki").click(function(){
	  location.href="/list?p=1";
	});
	$(".chiba").click(function(){
	  location.href="/list?p=2";
	});
	$(".yokohama").click(function(){
	  location.href="/list?p=3";
	});
	$(".shibuya").click(function(){
	  location.href="/list?p=4";
	});
	$(".shinjuku").click(function(){
	  location.href="/list?p=5";
	});

</script>

@endsection