Skip to content

Commit

Permalink
Merge pull request #6 from huamanraj/main
Browse files Browse the repository at this point in the history 
non responsive ui
  • Loading branch information
@huamanraj
huamanraj authored Nov 17, 2023
2 parents fa99f36 + e531bcf commit f87f2fe
Show file tree
Hide file tree
Showing 43 changed files with 1,195 additions and 0 deletions.
163 changes: 163 additions & 0 deletions web/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PathPal</title>
<link rel="stylesheet" href="output.css">
<link rel="icon" href="./static/pa/ideogram__13_-removebg-preview (1) 2.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

</head>
<style>
/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
width: 1px; /* width of the scrollbar */
}
.custom-scrollbar::-webkit-scrollbar:hover {
width: 11px; /* width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #ffff; /* Color of the scrollbar handle */
border-radius: 6px; /* Roundness of the scrollbar handle */

}

.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #2a77ab; /*color of the scrollbar thumb */
border-radius: 4px; /*border radius for the thumb */


}

.custom-scrollbar::-webkit-scrollbar-track {
background-color: transparent; /*color of the scrollbar track */
}

.prev-chats {
transition: all 0.1s ease-in-out;
}



</style>
<body class="bg-[#05042B] font-[Poppins]">
<div class="main h-screen w-screen">

<div class="header flex justify-between h-[13vh] ">
<div class="left-side flex gap-2 mt-8 ml-8 mr-8 mb-6">
<img class="" src="./static/pa/Menu.png" alt="menu">
<img src="./static/pa/ideogram__13_-removebg-preview (1) 2.png" alt="logo">
<img src="./static/pa/ideogram__13_-removebg-preview (1) 1.png" alt="">
</div>
<div class="rigt-side flex gap-2 mt-8 ml-8 mr-8 mb-6">
<img src="./static/pa/Settings.png" alt="">
<img src="./static/pa/Language.png" alt="">
<img src="./static/pa/Profile.png" alt="">

</div>
</div>

<div class="mid flex h-[84vh] text-white overflow-hidden ">

<div class="left01 w-[20vw]">
<div class="button-box ml-10 mt-3 ">

<div class="New-Chat">
<button class="flex items-center overflow-hidden px-5 py-1.5 rounded-[30px] bg-[#1d242f] hover:bg-slate-400"><img class="mr-1" src="./static/pa/Plus Math.png" alt="Plus">New Chat</button>

</div>

<p class="mt-8 ml-4 text-sm ">Recent</p>

<div class="buttons overflow-y-auto custom-scrollbar h-80 ">

<button class="prev-chats flex items-center rounded-[30px] bg-[#0f5223] hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="prev-chats flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>
<button class="flex items-center rounded-[30px] bg-transparent hover:bg-[#0f5223] w-[210px] h-[30px] px-3 py-2 text-sm mt-1 "><img class="m-2 " src="./static/pa/SMS.png" alt=""> <span class="truncate">Lorem ipsum dolor sit amet.</span></button>

</div>

</div>

<div class="location flex items-start flex-col ml-10 mt-28 text-xs ">
<div class="flex ">
<p class="text-red-600">● </p>
<p>Jaipur, Rajasthan, India</p></div>
<a class="ml-2 text-blue-800" href="">From your IP address • Update location</a>
</div>


</div>

<div class="left02 bg-[#142a4c] w-[75vw] rounded-[30px] overflow-hidden max-h-[83vh]">
<div class="asked-question w-[75vw] rounded-[30px] h-auto">
<div class="question-box flex items-center h-auto mt-4 ml-4 w-[73vw]">
<img class="mr-5" src="./static/pa/Profile-1.png" alt="user">
<div class="question">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui dolorem laboriosam earum magni facilis eius cumque enim sunt laudantium veritati.</p>
</div>
<img class="h-5 w-5 mr-2 hover:scale-150" src="./static/pa/Pencil.png" alt="edit">
</div>

<div class="answer bg-[#0f213a] rounded-[30px] mr-4 ml-10 h-auto w-auto overflow-hidden">



<div class="generated-answer h-auto">

<img class="pt-5 m-5 h-4 w-5" src="./static/pa/ideogram__13_-removebg-preview (1) 2.png" alt="user">

<p class="ml-20 ">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor quibusdam, laudantium blanditiis deserunt obcae
<br>cati perspiciatis iusto architecto nam assumenda ratione quam magnam voluptate. Tenetur voluptatem sapiente, quis beatae excepturibr
<br>
ipsum cupiditate dicta nemo recusandae earum voluptate dolores necessitatibus molestiae hic eius ratione dignissimos illo atque tempore optio et consequatur ut eligendi fuga. Id magni, aliquam fugiat sint, corrupti quidem hic totam aliquid dignissimos ipsum nisi explicabo sunt blanditiis voluptate quis quas sequi unde iure facere dolor. Esse beatae magnam, libero quae nemo distinctio autem rem amet assumenda. Adipisci enim velit rem aliquam qui exercitationem error moles
<br>tiae fugiat aut. Excepturi, vitae quos explicabo inventore culpa cupiditate sunt eius atque officia tenetur doloremque suscipit, et libero eligendi a dolorem debitis labore, molestiae repudiandae aspernatur soluta quibr <br>
! Minima sed soluta, nostrum quas nulla, maiores similique temporibus ex nesciunt asperiores explicabo eveniet fuga nisi sit illo voluptatum dignissimos iure quibusdam veniam sapiente fugiat, at pariatur! Omnis atque vel doloremque rerum placeat, reprehenderit veritatis totam quam iu
<br>sto molestias nostrum dolor repellendus expedita nobis rem eos, culpa, amet soluta? Temporibus praesentium in expedita reiciendis quo unde mollitia vel, consequuntur quaerat, possimus natus eveniet illo voluptatibus id. Laboriosam inventore ipsa quas nam fuga voluptate atque facere dolor in nobis error deleniti assumenda, ad repellendus placeat fugit. Veritatis fugiat maxime quasi dolor ab illum non laboriosam laborum <br>

exercitationem dolore, nam, ex atque fugit eveniet quos repellendus. Consequuntur laboriosam rerum tenetur, quos reiciendis eius modi quibusdam soluta eaque animi sit repudiandae esse accusamus ea magni? Doloribus fugit, id, in temporibus obcaecati veniam numquam, voluptatum quia voluptates ipsum sapiente accusamus nihil accusantium. Corrupti aliquam vitae fugiat facilis quam deleniti vero, est ipsam, repellendus enim reiciendis iste suscipit laborum exercitationem dolor eveniet a assumenda laboriosam corporis? Quidem, est modi nam non ipsa dolores officiis facilis vel, quam eos, voluptate doloremque eveniet.

</p>
</div>

</div>
</div>

</div>

</div>

</div>







<script src="./script.js"></script>
</body>
</html>
Loading

0 comments on commit f87f2fe

Please sign in to comment.