<template>
    <div class="container">   
        <div class="admin">
            <img src="../assets/img/icon_admin.png" alt="" id="icon_admin">
            <h1>관리자페이지</h1>
            <p>Admin page</p>
            <button type="button" @click="$router.push('login')">시작</button>
        </div>
        <div class="user">
            <img src="../assets/img/icon_user.png" alt="" id="icon_user">
            <h1>사용자페이지</h1>
            <p>User page</p>
            <button type="button" @click="$router.push('user')">시작</button>
        </div> 
    </div>   
</template>

<script>
export default {

}
</script>

<style>
.container {
    display: flex;
    justify-content: center;
    margin-top: 150px;
}

.admin {
    display: inline-block;
    text-align: center;
    background-color: #448ccb;
    width: 600px;
    height: 600px;
    margin-right: 10px;
    border-radius: 30px;
    box-shadow: 2px 2px 30px #bababa;

}

.admin img {
    margin-top: 150px;
}

.admin h1 {
    font-size: 50px;
    color: #fff;
    
}

.admin p {
    font-size: 30px;
    color: #fff;

}

.container button{
    font-size:16px;
    width: 200px;
    height: 50px;
    border: solid 2px #fff;
    border-radius: 8px;
    background-color: rgba(0, 0,0, 0);
    color: #fff;
    padding: 5px;

}

.container button:hover{
    background-color: #fff;
    color:#448ccb

}

.user {
    display: inline-block;
    text-align: center;
    background-color: #3cb878;
    width: 600px;
    height: 600px;
    margin-left: 10px;
    border-radius: 30px;
    box-shadow: 2px 2px 30px #bababa;

}

.user img {
    margin-top: 150px;
}

.user h1 {
    font-size: 50px;
    color: #fff;
    
}

.user p {
    font-size: 30px;
    color: #fff;

}
</style>