index.scss

$phwidth :400px;
$phheight:$phwidth*2;
$phthick :$phwidth/10;
i{
    display: flex;
    justify-content: center;
    align-items: center;
}

a{
    color: inherit;
    text-decoration: none;
}


input{
    display: none;
}


.df{
    display: flex;
    align-items: center;
}

*,*::after,*::before{
    padding: 0; margin: 0;box-sizing: border-box;
    background: none;
    font-family: 'Roboto', sans-serif;
}
main *{
    transform-style: preserve-3d;
}
main{
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.startscreen{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    transform: translateZ(1px);
    transition: 0.6s;
    label{
        display: flex;
        width: 200px;
        align-items: center;
        justify-content: space-evenly;
        // background: #000;
        font-size: 50px;
        transition: 0.4s;
        border-radius: 50px;
        padding: 20px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        background: white;
        transform: translateZ(+3px) translate(-50%,-50%);
        border: 1px solid rgba(0, 0, 0, 0);
        animation: pulse linear infinite 1.5s 4s;
        &:hover{
            background: #000;
            color: white;
        }
    }
}
@keyframes pulse {
    50%{border: solid 1px black;}
    100%{border: solid 1px rgba(0, 0, 0, 0);}
}
#Intro_Animation:checked~main .startscreen{
    opacity: 0;
    visibility: hidden;
    transition:  1s;
}


#firstView:checked~main .startscreen{
    opacity: 1;
    visibility: visible;
}

#Intro_Animation:checked~main .Phone{
    animation: intro ease 10s ;
}


.container{
    width: 100%;
    height: 100vh;
    perspective: 2000px;
    .viewcontrols{
        border-radius: 25px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.178);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.178);
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.178);
        display: flex;
        align-items: center;
        position: absolute;
        transition: 0.4s;
        >label{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            color: rgb(31, 31, 31);
            transition: 0.4s;
            border: rgba(0, 0, 0, 0) 1px solid;
            &:hover{
                border: #000 1px solid;
            }
        }
        @media screen and (max-width:540px){
            width: 300px;
            height: 50px;
            top: 1%;
            left: 50%;
            transform: translate(-50%);
            background: rgb(247, 247, 247);
            z-index: 3;
            justify-content: space-evenly;
        }
        @media screen and (min-width:540px){
            width: 50px;
            height: 300px;
            left: 5%;
            top: 50%;
            transform: translate(0,-50%);
            flex-direction: column;
            justify-content: space-evenly;
        }
    }
    .Phone{
        position: absolute;
        top: 50%;
        left: 50%;
        transition: 0.4s;
        @media screen and (max-width:768px){
            width: 400px;
            height: 800px;
        }
        @media screen and (min-width:768px){
            width: 90vw;
            height: 55vw;
        }
        transform: translate(-50%,-50%) translateZ(-800px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
        .phoneSide{
            position: absolute;
            // background: rgb(143, 143, 143);
        }
        .PhoneFront,.PhoneBack{
            width: 100%;
            height: 100%;
            border-radius: 40px;
        }
        .PhoneFront{
            transform: translatez($phthick/2);
            background: rgb(20, 20, 20);
            .screen{
                width: 93%;
                height: 96%;
                border-radius: 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background: rgb(143, 143, 143);
            }
            .topBar{
                @media screen and (min-width:768px){
                    display: none;
                }    
                width: 45%;
                height: 6%;
                background: rgb(20, 20, 20);
                border-radius: 20px;
                position: absolute;
                left: 50%;
                top: -15px;
                transform: translate(-50%);
                @extend.df;
                justify-content: space-evenly;
                .camera{
                    width: 12px;
                    height: 12px;
                    background: rgb(43, 43, 43);
                    border-radius: 50%;
                    @extend.df;
                    justify-content: center;
                    .lenz{
                        width: 70%;
                        height: 70%;
                        border-radius: 50%;
                        background: rgb(0, 0, 63);

                    }
                }
                .speaker{
                    width: 50%;
                    height: 6px;
                    border-radius: 10px;
                    background: rgb(36, 36, 36);
                }

            }
        }
        .PhoneBack{
            transform: translateZ(-40px) rotateY(180deg);
            @media screen and (max-width:768px){
                background: rgb(51,51,51);
                background: linear-gradient(338deg, rgba(51,51,51,1) 0%, rgba(97,97,97,1) 100%);
            }
            @media screen and (min-width:768px){
                background: rgb(60,60,60);
                background: linear-gradient(338deg, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);
            }

            .Applelogo{
                width: 100px;
                height: 100px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 70px;
            }
            .cameraSection{
                @media screen and (min-width:768px){
                    display: none;
                } 
                width: 180px;
                height: 180px;
                position: absolute;
                top: 50px;
                left: 50px;
                display: flex;
                // border: solid red 1px;
                transform-style: preserve-3d;
                transform: translateZ(5px);
                .cameraSides{
                    position: absolute;
                    background: rgb(53, 53, 53);
                    border: solid 2px rgb(49, 49, 49);
                    // transform: translateZ(5px);
                }
                .frontside{
                    width: 100%;
                    height: 100%;
                    transform: translateZ(5px);
                    border-radius: 40px;
                    .lens1,.lens2,.lens3{
                        width: 78px;
                        height: 78px;
                        border-radius: 50%;
                        background: rgb(37, 37, 37);
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .outer{
                            width: 80%;
                            height: 80%;
                            border-radius: 50%;
                            background: rgb(0, 0, 0);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .inner{
                                width: 80%;
                                height: 80%;
                                border-radius: 50%;
                                background: rgb(19, 19, 19);
                            }
                        }
                    }
                    .lens1{
                        top: 10px;
                        left: 10px;
                    }
                    .lens2{
                        bottom: 10px;
                        left: 10px;
                    }
                    .lens3{
                        top: 50%;
                        right: 10px;
                        transform: translateY(-50%);
                    }
                }
                .leftside,.rightside{
                    width: 10px;
                    height: 100%;
                    display: none;
                }
                .topside,.bottomside{
                    width: 100%;
                    height: 10px;
                    display: none;
                }
                .bottomside{
                    transform: rotateX(-90deg) translateZ(172.5px);
                }
                .leftside{
                    transform: rotateY(-90deg) translateZ(5px);
                }
                .rightside{
                    transform: rotateY(90deg) translateZ(172.5px);
                }
                .topside{
                    transform: rotateX(90deg) translateZ(5px);
                }
            }
        }
        .PhoneTop,.PhoneBottom{
            width: calc(100% - 80px);
            height: $phthick;
            background: rgb(170, 170, 170);
            .leftCorner{
                transform: translateX(50%) rotateY(-90deg) translateX(-40px) translateZ(-80px);
            }
            .rightCorner{
                transform: translateX(50%) rotateY(0deg) translateX(0px) translateZ(-40px);
            }
        }
        .PhoneTop{
            transform: translateY(-$phthick/2) rotateX(90deg) translate(40px) rotateZ(180deg);
        }
        .leftCorner{
            left: -80px;
        }
        .rightCorner{
            right: 0px;
        }
        
        .corner{
            position: absolute;
            width: 2.5px;
            height:  $phthick;
                div{
                    background: rgb(109, 109, 109);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    @for $i from 0 through 30 {
                        &:nth-child(#{$i}){
                            transform: rotateY($i*3deg) translatez(40px);
                        }
                    }
                }
        }
        .PhoneBottom{
            bottom: 0;
            transform: translateY(20px) rotateX(-90deg) translate(40px);
        }
        .PhoneRight,.PhoneLeft{
            width: 40px;
            height: calc(100% - 80px);
            background: rgb(170, 170, 170);
        }
        .PhoneRight{
            transform: translateX(-20px) rotateY(-90deg) translateY(40px);
            left: 0;
            .powerbtn,.volumbtn{
                position: absolute;
                left: 50%;
                width: 20px;
                transform: translateX(-50%) translateZ(5px) rotateX(0deg);
                transition: 0.3s;
                >div{
                    position: absolute;
                    background: rgb(70, 70, 70);
                    transform-style: flat;
                    label{
                        display: block;
                        width: 100%;
                        height: 100%;
                        transform: translateZ(1px);
                        background: rgb(0, 10, 41);
                        cursor: pointer;
                    }
                }
                .volumesideRight,.volumesideLeft,.volumesideFront{
                    display: flex;
                    flex-direction: column;
                    label{
                        height: 50%;
                    }
                }

            }
            .powerbtn{
                top: 40px;
                height: 50px;
                // border: solid red 1px;
                .powersideFront{
                    width: 100%;
                    height: 100%;
                }
                .powersideRight,.powersideLeft{
                    width: 5px;
                    height: 100%;
                }
                .powersideRight{
                    transform: rotateY(90deg) translate(50%) translateZ(17.5px);
                }
                .powersideLeft{
                    transform: rotateY(90deg) translateX(50%) translateZ(-2.5px);
                }
                .powersideBottom,.powersideTop{
                    width: 20px;
                    height: 5px;
                }
                .powersideTop{
                    transform:  rotateX(90deg) translateZ(2.5px) translateY(-2.5px);
                }
                .powersideBottom{
                    transform:  rotateX(90deg) translateZ(-47.5px) translateY(-2.5px);
                }
            }
            .volumbtn{
                top: 100px;
                height: 100px;
                // border: solid red 1px;
                .volumesideFront{
                    width: 100%;
                    height: 100%;
                }
                .volumesideRight,.volumesideLeft{
                    width: 5px;
                    height: 100%;
                }
                .volumesideRight{
                    transform: rotateY(90deg) translate(50%) translateZ(17.5px);
                }
                .volumesideLeft{
                    transform: rotateY(90deg) translateX(50%) translateZ(-2.5px);
                }
                .volumesideBottom,.volumesideTop{
                    width: 20px;
                    height: 5px;
                }
                .volumesideTop{
                    transform:  rotateX(90deg) translateZ(2.5px) translateY(-2.5px);
                }
                .volumesideBottom{
                    transform:  rotateX(90deg) translateZ(-97.5px) translateY(-2.5px);
                }
            }
        }
        .PhoneLeft{
            transform: translateX(20px) rotateY(90deg) translateY(40px);
            right: 0;
        }
    }
}
//-------------------------------------------------------
#topView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(-35deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#topView:checked~main .viewcontrols>label:nth-child(1),
#rightView:checked~main .viewcontrols>label:nth-child(2),
#leftView:checked~main .viewcontrols>label:nth-child(3),
#behindView:checked~main .viewcontrols>label:nth-child(6),
#frontView:checked~main .viewcontrols>label:nth-child(5),
#bottomView:checked~main .viewcontrols>label:nth-child(4){
    background: rgb(31, 31, 31);
    color: whitesmoke;
}

#rightView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(0deg) rotateY(-35deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#bottomView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(35deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#leftView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(0deg) rotateY(35deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#behindView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#frontView:checked~main .Phone{
    transform: translate(-50%,-50%) translateZ(-800px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px);
    transition:0.6s
}
#power:active~main .Phone .powerbtn{
    transform: translateX(-50%) translateZ(1px) rotateX(0deg);
}
#power:checked~main .Phone .off{
    opacity: 1;
    z-index: 4;
}
#power:checked~main .Phone 
#volumeup:active~main .Phone .volumbtn{
    transform: translateX(-50%) translateZ(5px) rotateX(2deg);
}
#volumedown:active~main .Phone .volumbtn{
    transform: translateX(-50%) translateZ(5px) rotateX(-2deg);
}

#volumeup:checked~main .volind{
    animation: popout  4s forwards;
}
#volumeup:checked~main .outervol{
    transform: translate(-330px,-50%);
}
#volumeup:checked~main .volind>.bar{
    top: 25%;
}


#volumedown:checked~main .volind{
    animation: popout2 4s forwards;
}
#volumedown:checked~main .outervol{
    transform: translate(-330px,-50%);
}
#volumedown:checked~main .volind>.bar{
    top: 75%;
}

@keyframes popout {
    0%{transform: translate(0px);}
    90%{transform: translate(0px);}
    100%{transform: translate(300px);}
}
@keyframes popout2 {
    0%{transform: translate(0px);}
    90%{transform: translate(0px);}
    100%{transform: translate(300px);}
}




//-------------------------------------------------------


.screen{
    transform-style: flat;
    *{
        width: 100%;
        height: 100%;
        border-radius: inherit;
        
    }
    .notifbar{
        width: 100%;
        height: 48px;
        position: absolute;
        top: 0;left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: white;
        z-index: 3;
        font-size: 20px;
        >*{
            margin: 3px;
            width: fit-content;
            height: fit-content;
            transform: translate(-3px);
        }
        i{
            width: fit-content;
            height: fit-content;
        }

    }
    .monitor{
        overflow: hidden;
            .outervol{
                // background: #000;
                overflow: visible;
                position: absolute;
                width: 50px;
                height: 50%;
                right: -300px;
                top: 50%;
                transform: translate(0px,-50%);
                transition: 1s;
                .volind{
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    background: rgb(71, 71, 71);
                    transform: translate(0px);
                    color: white;
                    font-size: 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    transition: 0.6s;
                    i{
                        width: 100%;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .bar{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background: rgb(167, 167, 167);
                        border-radius: 0px;
                        top: 0;
                        transition: 0.4s;
                    }
                }  
            }
        .off{
            background: #000;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.6s;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;top: 0;
        }
        .homebtn{
            width: 200px;
            height: 5px;
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translate(-50%);
            background: rgb(179, 179, 179);
            cursor: not-allowed;
        }
        .lock{
            width: 50px;
            height: 50px;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            color: white;
            font-size: 30px;
            top: 40px;
            @media screen and (min-width:768px) {
                top: 10px;
            }
        }
        .bottomshrts{
            width: 90%;
            height: 50px;
            position: absolute;
            bottom: 5%;
            left: 50%;
            transform: translate(-50%);
            color: rgb(233, 233, 233);
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            >div{
                width: 50px;
                height: 50px;
            }
            i{
                width: 50px;
                height: 50px;
                background: rgba(43, 43, 43, 0.247);
            }
        }
        .lockscreen{
            @media screen and (max-width:768px) {
                background-image:url(asset/iphonbg.webp);
            }
            @media screen and (min-width:768px) {
                background-image:url(asset/ipadbg.webp);
            }
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;top: 0;
            
        }
        .lockscreen{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            .clock{
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                color: whitesmoke;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 100;
                @media screen and (max-width:768px) {
                    width:80%;
                    height: 20%;
                    top: 10%;
                    font-size: 60px;
                    // background: #000;
                }
                @media screen and (min-width:768px) {
                    width:80%;
                    height: 20%;
                    top: 13%;
                    font-size: 80px;
                    // background: #000;
                }
            }
            .notifications{
                width: 90%;
                height: fit-content;
                border-radius: 15px;
                position: absolute;
                left: 50%;
                transform: translate(-50%);
                background: rgba(0, 0, 0, 0.185);
                padding: 15px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                @media screen and (max-width:768px) {
                    top: 28%;
                }
                @media screen and (min-width:768px) {
                    top: 30%;
                }
                a{
                    width: 98%;
                    color: white;
                    height: fit-content;
                    background: rgba(0, 0, 0, 0.171);
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    padding: 10px;
                    cursor: pointer;
                    figure{
                        // background: green;
                        width: fit-content;
                        height: fit-content;
                    }
                    h3{
                        width: 80%;
                        @media screen and(min-width:768px) {
                            width: 90%;
                        }
                    }
                    img{
                        width: 35px;
                        height: 35px;
                    }
                    p{
                        display: flex;
                        flex-wrap: wrap;
                        margin-left: 10px;
                        i{
                            width: fit-content;
                            height: fit-content;
                            margin: 0px 3px;
                        }
                    }

                }
            }
        }
    }
}

#firstView:checked~main .viewcontrols{
    visibility: hidden;
}
#Intro_Animation:checked~main .viewcontrols{
    animation: fadein 12s ease forwards;
}

@keyframes fadein{
    0%{ opacity: 0;}
    90%{ opacity: 0;}
    100%{ opacity: 1;}
}

@keyframes intro {
    0%{
        transform: translate(-50%,-50%) translateZ(800px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateY(0px);
    }
    50%{
        transform: translate(-50%,-50%) translateZ(0px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateY(0px);
    }
    100%{
        transform: translate(-50%,-50%) translateZ(-800px) rotateX(360deg) rotateY(755deg) rotateZ(0deg) translateY(0px);
    }
}