AI Chat Project

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
    <div id="main" class="main">
        <div id="right">
            <div class="first">
                <p><i class="ri-arrow-drop-right-fill"></i></p>
            </div>
            <div class="first">
                <i class="ri-chat-1-fill"></i>
                <i class="ri-search-line"></i>
                <i class="ri-visa-fill"></i>
                <i class="ri-qr-scan-line"></i>
                <i class="ri-settings-4-line"></i>
            </div>
            <div class="first">
                <div class="color1"></div>
                <div class="color1"></div>
                <div class="color1"></div>
                <div class="color1"></div>
                <div class="color1"><i class="ri-add-line"></i></div>
            </div>
            <div class="first">
                <i class="ri-user-3-fill"></i>

                <!-- // dark and light theme  -->
                <i id="night" class="ri-moon-line"></i>
            </div>
        </div>
        <div id="card">
            <div class="top">
                <i class="ri-close-circle-line"></i>
                <div class="content">
                    <h1>AI Chat mode affordable</h1>
                    <p>Pricing plans for every budget</p>
                </div>
            </div>
            <div class="top">
                <div class="cLeft">
                    <div class="content">
                        <h2>Choose plans</h2>
                        <p><input type="radio" name="billing" id="" placeholder="yearly"> yearly billing</p>
                        <p><input type="radio" name="billing" id="" placeholder="monthly"> monthly billing</p>
                    </div>
                </div>
                <div class="cRight">
                    <div class="card1">
                        <h2>Free</h2>
                        <p>Basic chat functionality</p>
                        <h1>$0 <span>/mo</span></h1>
                        <p>Free forever</p>
                        <p>30 days history</p>
                        <p>Up to 100 message/mo</p>
                        <p>Limited AI capabilities</p>
                        <button onclick="clicked()" >Current plan</button>
                    </div>
                    <div class="card1">
                        <h2>Pro</h2>
                        <p>More advanced AI capabilities</p>
                        <h1>$99 <span>/mo</span></h1>
                        <p>Per month, per team members</p>
                        <p>Email support</p>
                        <p>Unlimited message</p>
                        <p>Access AI capabilities</p>
                        <button>Upgrade</button>

                    </div>
                    <div class="card1">
                        <h2>Enterprise</h2>
                        <p>More advanced AI capabilities</p>
                        <h1>$99 <span>/mo</span></h1>
                        <p>Per month, per team members</p>
                        <p>Email support</p>
                        <p>Unlimited message</p>
                        <p>Access AI capabilities</p>
                        <button>Upgrade</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>

</body>
</html>

style.css

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: gilroy;
}
html,body{
    width: 100%;
    height: 100vh;
   
}
#main{
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 1, 18);
}#main-b{
    width: 100%;
    height: 100vh;
    background-color: rgb(218, 0, 87);
    animation: ki 5s linear infinite;
}
@keyframes ki{
    0%{
        background-color: rgb(218, 0, 87);
    }20%{
        background-color: rgb(0, 171, 218);
    }40%{
        background-color: rgb(149, 0, 218);
    }60%{
        background-color: rgb(218, 182, 0);
    }80%{
        background-color: rgb(218, 0, 18);
    }100%{
        background-color: rgb(218, 0, 87);
    }
}

#card{
    width: 93%;
    height: 93%;
    background-color: antiquewhite;
    border-radius: 20px;
    margin-left: 6%;
    margin-top: 2.5%;
    position: absolute;
    justify-content: space-between;
    align-items: center;
    gap: 1px;
    display: flex;
    flex-direction: column;
}#card-b{
    width: 93%;
    height: 93%;
    background-color: rgb(193, 193, 193);
    border-radius: 20px;
    margin-left: 6%;
    margin-top: 2.5%;
    position: absolute;
    justify-content: space-between;
    align-items: center;
    gap: 1px;
    display: flex;
    flex-direction: column;
}
#card .top:nth-child(1),#card-b .top:nth-child(1){
    width: 100%;
    height: 30%;
    /* background-color: rgb(155, 155, 155); */
    position: relative;
}#card .top i,#card-b .top i{
    position: absolute;
    right: 40px;
    top: 20px;
    font-size: 40px;
}
#card .top:nth-child(1) .content,#card-b .top:nth-child(1) .content{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#card .top:nth-child(1) .content h1,#card-b .top:nth-child(1) .content h1{
    font-size: 40px;
    font-weight: 800;
    transition: 1s;
}
#card .top:nth-child(1) .content h1:hover,#card-b .top:nth-child(1) .content h1:hover{
    font-size: 40px;
    font-weight: 800;
    color: chocolate;
}
#card .top:nth-child(1) .content p,#card-b .top:nth-child(1) .content p{
    font-size: 25px;
    transition: 1s;
    font-weight: 400;
}#card .top:nth-child(1) .content p:hover,#card-b .top:nth-child(1) .content p:hover{
    font-size: 25px;
    font-weight: 400;
    color: chocolate;
}
#card .top:nth-child(2),#card-b .top:nth-child(2){
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    gap: 1px;
    align-items: center;
}
#card .top:nth-child(2) .cLeft,#card-b .top:nth-child(2) .cLeft{
    width: 20%;
    height: 80%;
}#card .top:nth-child(2) .cLeft .content,#card-b .top:nth-child(2) .cLeft .content{
    width: 60%;
    height: 80%;

    margin-left: 20%;
    margin-top: 10%;
}
#card .top:nth-child(2) .cLeft .content h2,#card-b .top:nth-child(2) .cLeft .content h2{
    font-weight: 700;
    font-size: 25px;
}
#card .top:nth-child(2) .cLeft .content p,#card-b .top:nth-child(2) .cLeft .content p{
    font-weight: 600;
    font-size: 16px;
    color: rgb(21, 21, 21);
    margin-top: 10px;
}
#card .top:nth-child(2) .cRight,#card-b .top:nth-child(2) .cRight{
    width: 60%;
    height: 80%;
    /* background-color: aqua; */
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    display: flex;
    gap: 10px;
    justify-content: left;
    overflow: hidden;
    align-items: center;
}
#card .top:nth-child(2) .cRight .card1,#card-b .top:nth-child(2) .cRight .card1{
    width: 25%;
    height: 85%;
    border-radius: 20px;
    margin-left: 10px;
    padding: 20px;
    position: relative;
    box-shadow: 0 0 10px rgb(165, 165, 165);
    /* background-color: aquamarine; */
    transition: 1s;
}#card .top:nth-child(2) .cRight .card1:hover,#card-b .top:nth-child(2) .cRight .card1:hover{
    width: 25%;
    height: 85%;
    border-radius: 20px;
    margin-left: 10px;
    transition: 1s;
    transform: translate(0%,-10px);
    padding: 20px;
    position: relative;
    box-shadow: 0 0 10px rgb(165, 165, 165);
    /* background-color: aquamarine; */
}
#card .top:nth-child(2) .cRight .card1 h2,#card-b .top:nth-child(2) .cRight .card1 h2{
    font-size: 24px;
    font-weight: 600;
}#card .top:nth-child(2) .cRight .card1 p,#card-b .top:nth-child(2) .cRight .card1 p{
    font-size: 14px;
    margin-top: 10px;
    font-weight: 600;
    color: rgb(70, 70, 70);
}#card .top:nth-child(2) .cRight .card1 h1,#card-b .top:nth-child(2) .cRight .card1 h1{
    font-size: 30px;
    font-weight: 700;
    margin-top: 5px;
}#card .top:nth-child(2) .cRight .card1 h1 span,#card-b .top:nth-child(2) .cRight .card1 h1 span{
    font-size: 24px;
    font-weight: 600;
    color:rgb(59, 59, 59);
}#card .top:nth-child(2) .cRight .card1 button,#card-b .top:nth-child(2) .cRight .card1 button{
    width: 80%;
    padding: 9px 20px;
    position: absolute;
    bottom: 10px;
    border-radius:10px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 0 5px rgb(120, 120, 120);
}
#card .top:nth-child(2) .cRight .card1:nth-child(3),#card-b .top:nth-child(2) .cRight .card1:nth-child(3){
    width: 25%;
    height: 90%;
    border-radius: 20px;
    background-color: rgb(30, 30, 30);
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h2,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h2{
    color: white;
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h1,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h1{
    color: white;
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h1 span,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h1 span{
    color: rgb(197, 197, 197);
}#card .top:nth-child(2) .cRight .card1:nth-child(3) p,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) p{
    color: rgb(197, 197, 197);
}
#right{
    width: 5%;
    height: 100%;
    position: absolute;
    /* background-color: aquamarine; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1px;
}
#right .first{
    width: 100%;
    height: 25%;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
}
#right .first:nth-child(1) P i{
    font-size: 40px;
    color: rgb(255, 255, 255);
    /* margin-left: 50px; */
    /* background-color: aqua; */
}
#right .first i:nth-child(1){
    font-size: 20px;
    color: rgb(134, 152, 225);
}#right .first i:nth-child(2){
    font-size: 20px;
    color: rgb(116, 239, 145);
}#right .first i:nth-child(3){
    font-size: 20px;
    color: rgb(205, 103, 225);
}#right .first i:nth-child(4){
    font-size: 20px;
    color: rgb(178, 110, 223);
}#right .first i:nth-child(5){
    font-size: 20px;
    color: rgb(231, 70, 42);
}
#right .first:nth-child(2){
    border-bottom: 1px solid rgb(81, 81, 81);
    width: 70%;
    margin-left: 19%;
    height: 30%;
    /* margin-bottom: 20px; */
}
#right .first .color1:nth-child(1){
    width: 15px;
    height: 10px;
    background-color: rgb(255, 255, 255);
    border-radius:10px
}#right .first .color1:nth-child(2){
    width: 15px;
    height: 10px;
    background-color: rgb(130, 126, 126);
    border-radius:10px
}#right .first .color1:nth-child(3){
    width: 15px;
    height: 10px;
    background-color: rgb(133, 206, 5);
    border-radius:10px
}#right .first .color1:nth-child(4){
    width: 15px;
    height: 10px;
    background-color: rgb(1, 222, 214);
    border-radius:10px
}#right .first .color1:nth-child(5){
    /* width: 25px;
    height: 25px; */
    /* background-color: rgb(124, 124, 124); */
    border-radius:10px
}
#right .first .color1:nth-child(5) i{
    color: antiquewhite;
    font-size: 25px;
    font-weight: 700;

}
#right .first:nth-child(4) .circle{
    width: 50px;
    height: 50px;
    background-color: aquamarine;
    border-radius: 50%;
}
#right .first:nth-child(4) i:nth-child(1){
    font-size: 20px;
    margin-top: 20px;
    background-color: rgb(0, 109, 198);
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    align-items: center;
    color:white;
    justify-content: space-between;
    border-radius:50px
}#right .first:nth-child(4) i:nth-child(1):hover{
    font-size: 20px;
    margin-top: 20px;
    background-color: rgb(39, 39, 39);
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    align-items: center;
    color:white;
    justify-content: space-between;
    border-radius:50px
}
#right .first:nth-child(4) i{
    font-size: 20px;
    margin-top: 20px;
    background-color: rgb(0, 109, 198);
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    align-items: center;
    color:white;
    justify-content: space-between;
    border-radius:10px
}#right .first:nth-child(4) i:hover{
    font-size: 20px;
    margin-top: 20px;
    background-color: rgb(39, 39, 39);
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    align-items: center;
    color:white;
    justify-content: space-between;
    border-radius:10px
}

script.js

var night = document.querySelector("#night");
var mained = document.getElementById("main");
var carded = document.getElementById("card");

night.addEventListener("click",function(){
    var mains = mained.getAttribute("id");
    var cards = carded.getAttribute("id");
    // alert("SR Application Limited")
    if(mains === "main"&&cards==="card"){
        // document.write(mained);
        mained.setAttribute("id","main-b");
        carded.setAttribute("id","card-b");
    }else{
        mained.setAttribute("id","main");
        carded.setAttribute("id","card");
    }
})

// function clicked(){
//     var mains = mained.getAttribute("id");
//     // alert("SR Application Limited")
//     if(mains === "main"){
//         // document.write(mained);
//         mained.setAttribute("id","main-b");
//     }else{
//         mained.setAttribute("id","main");
//     }
// }


output: - 




إرسال تعليق

Post a Comment (0)

أحدث أقدم