<template>
    <div class="select-page">
        <div class="select-page-admin">
            <div class="content">
                <h1>뉴로모픽<br>관리자</h1>
                <p>프로젝트를 생성하고 관리한다.<br><br></p>
                <a href="https://www.nemopai.com/neuro/single/neuro/">시작</a>
            </div>
        </div>
        <div class="select-page-user">
            <div class="content">
                <h1>뉴로모픽<br>사용자</h1>
                <p>관리자가 만든 프로젝트를 선택하여<br>검수를 시작한다.<br> </p>
                <router-link class="user" to="/list">시작</router-link>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Home',

}
</script>

<style lang="scss">

/* common */
.content {
    font-family: 'Source Sans Pro';
    color: var(--white);
    line-height: 1.5; /* 줄의 높이*/
    text-align: center;

    img{
        max-width: 100px;
        min-height: 100px;
    }

    h1{
        font-size: 60px; 
    }

    a{
        background-color: var(--white);
        border-radius: 50px; 
        line-height: 50px; /* a태그 높이는 지정 */
        width: 200px;
        display: inline-block;
        margin: 20px 0;
        font-size: var(--font-large);
        font-weight: bold;
        font-size: var(--font-l);
        text-decoration: none;

    }
}        

.select-page{
    display: flex;
    height: 100vh;
        .select-page-admin{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: var(--admin-color);
            width: 100%;
            height: 100%;
            // &:hover{
            //     background-color: #9cff57;
            // }
            .content{ 
                a{
                    color:var(--admin-color);
                }
            }
        }

        .select-page-user{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: var(--user-color);
            // &:hover{
            //     background-color: #9cff57;
            // }
            .content{ 
                a{
                    color:var(--user-color);

                }
            }
        }
}

</style>