ChatGpt-Interface/index.html at main · crowwdev/ChatGpt-Interface · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        svg {
            width: 19px;
            color: gray;
            cursor: pointer;

        }
        svg:hover {
            color: white;
        }

    </style>
</head>
<body style="background: #212121; color: white;" class="flex flex-col h-[100vh] justify-between">

    <header class="py-2 px-4 flex items-center gap-x-3">
        <i class="fa-solid fa-pencil py-2.5 px-2.5 border border-gray-500 text-[10px] rounded-md hover:bg-gray-900 cursor-pointer"></i>
        <span class="flex items-center justify-center gap-x-1 px-4 py-2 hover:bg-gray-800 cursor-pointer rounded-xl"><span class="font-bold">BeratGPT</span> 3.5
            <i class="fa-solid fa-sort-down"></i>
    </span>
    </header>

    <i class="hidden fa-solid fa-download w-8 h-8 text-[16px] flex justify-center border-gray-500 items-center cursor-pointer border rounded-lg absolute top-2 right-2" id="download"></i>

    <section class="flex flex-col gap-y-1 my-auto" id="section-middle">
        <i class="mx-auto inline-flex w-12 h-12 -translate-y-12 items-center justify-center fa-brands fa-rocketchat text-2xl text-black bg-white rounded-full"></i>
        <span class="font-semibold mx-auto -translate-y-12">How can I help you today?</span>
    </section>

    <section class="flex justify-center flex-col px-20 mt-12 hidden" id="chat-section">
        <div class="flex flex-col gap-y-8">
         <div class="flex flex-col gap-y-2">
             <div class="flex gap-x-2">
                 <span class="text-[10px] w-6 h-6 flex items-center justify-center rounded-full bg-pink-500">MU</span>
          <span class="font-bold text-sm">You</span>
             </div>

             <div>
                 <p class="text-[12px] font-['Arial'] tracking-wider w-full leading-4.5" id="p"></p>
             </div>

         </div>

         <div class="flex flex-col gap-y-2">
             <div class="flex gap-x-2">
                 <span class="text-[10px] w-6 h-6 flex items-center justify-center rounded-full bg-green-600">C</span>
          <span class="font-bold text-sm">BeratGPT</span>
             </div>

             <div>
                 <p class="text-[12px] font-['Arial'] tracking-wider w-full leading-4.5" id="chatGPT"></p>
             </div>

             <div class="flex gap-x-1">

                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
                     <title id="read-aloud-title">Read Aloud</title>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4.9099C11 4.47485 10.4828 4.24734 10.1621 4.54132L6.67572 7.7372C6.49129 7.90626 6.25019 8.00005 6 8.00005H4C3.44772 8.00005 3 8.44776 3 9.00005V15C3 15.5523 3.44772 16 4 16H6C6.25019 16 6.49129 16.0938 6.67572 16.2629L10.1621 19.4588C10.4828 19.7527 11 19.5252 11 19.0902V4.9099ZM8.81069 3.06701C10.4142 1.59714 13 2.73463 13 4.9099V19.0902C13 21.2655 10.4142 22.403 8.81069 20.9331L5.61102 18H4C2.34315 18 1 16.6569 1 15V9.00005C1 7.34319 2.34315 6.00005 4 6.00005H5.61102L8.81069 3.06701ZM20.3166 6.35665C20.8019 6.09313 21.409 6.27296 21.6725 6.75833C22.5191 8.3176 22.9996 10.1042 22.9996 12.0001C22.9996 13.8507 22.5418 15.5974 21.7323 17.1302C21.4744 17.6185 20.8695 17.8054 20.3811 17.5475C19.8927 17.2896 19.7059 16.6846 19.9638 16.1962C20.6249 14.9444 20.9996 13.5175 20.9996 12.0001C20.9996 10.4458 20.6064 8.98627 19.9149 7.71262C19.6514 7.22726 19.8312 6.62017 20.3166 6.35665ZM15.7994 7.90049C16.241 7.5688 16.8679 7.65789 17.1995 8.09947C18.0156 9.18593 18.4996 10.5379 18.4996 12.0001C18.4996 13.3127 18.1094 14.5372 17.4385 15.5604C17.1357 16.0222 16.5158 16.1511 16.0539 15.8483C15.5921 15.5455 15.4632 14.9255 15.766 14.4637C16.2298 13.7564 16.4996 12.9113 16.4996 12.0001C16.4996 10.9859 16.1653 10.0526 15.6004 9.30063C15.2687 8.85905 15.3578 8.23218 15.7994 7.90049Z" fill="currentColor"></path>
                 </svg>

                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
                     <title class="title">Copy</title>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5C10.8954 3.5 10 4.39543 10 5.5H14C14 4.39543 13.1046 3.5 12 3.5ZM8.53513 3.5C9.22675 2.3044 10.5194 1.5 12 1.5C13.4806 1.5 14.7733 2.3044 15.4649 3.5H17.25C18.9069 3.5 20.25 4.84315 20.25 6.5V18.5C20.25 20.1569 19.1569 21.5 17.25 21.5H6.75C5.09315 21.5 3.75 20.1569 3.75 18.5V6.5C3.75 4.84315 5.09315 3.5 6.75 3.5H8.53513ZM8 5.5H6.75C6.19772 5.5 5.75 5.94772 5.75 6.5V18.5C5.75 19.0523 6.19772 19.5 6.75 19.5H17.25C18.0523 19.5 18.25 19.0523 18.25 18.5V6.5C18.25 5.94772 17.8023 5.5 17.25 5.5H16C16 6.60457 15.1046 7.5 14 7.5H10C8.89543 7.5 8 6.60457 8 5.5Z" fill="currentColor"></path></svg>

                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
                     <title class="title">Regenerate</title>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2.5C5.05228 2.5 5.5 2.94772 5.5 3.5V5.07196C7.19872 3.47759 9.48483 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C7.1307 21.5 3.11828 17.8375 2.565 13.1164C2.50071 12.5679 2.89327 12.0711 3.4418 12.0068C3.99033 11.9425 4.48712 12.3351 4.5514 12.8836C4.98798 16.6089 8.15708 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C9.7796 4.5 7.7836 5.46469 6.40954 7H9C9.55228 7 10 7.44772 10 8C10 8.55228 9.55228 9 9 9H4.5C3.96064 9 3.52101 8.57299 3.50073 8.03859C3.49983 8.01771 3.49958 7.99677 3.5 7.9758V3.5C3.5 2.94772 3.94771 2.5 4.5 2.5Z" fill="currentColor"></path></svg>

                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md">
                     <title class="title">Bad Response</title>
                     <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8727 21.4961C11.6725 21.8466 11.2811 22.0423 10.8805 21.9922L10.4267 21.9355C7.95958 21.6271 6.36855 19.1665 7.09975 16.7901L7.65054 15H6.93226C4.29476 15 2.37923 12.4921 3.0732 9.94753L4.43684 4.94753C4.91145 3.20728 6.49209 2 8.29589 2H18.0045C19.6614 2 21.0045 3.34315 21.0045 5V12C21.0045 13.6569 19.6614 15 18.0045 15H16.0045C15.745 15 15.5054 15.1391 15.3766 15.3644L11.8727 21.4961ZM14.0045 4H8.29589C7.39399 4 6.60367 4.60364 6.36637 5.47376L5.00273 10.4738C4.65574 11.746 5.61351 13 6.93226 13H9.00451C9.32185 13 9.62036 13.1506 9.8089 13.4059C9.99743 13.6612 10.0536 13.9908 9.96028 14.2941L9.01131 17.3782C8.6661 18.5002 9.35608 19.6596 10.4726 19.9153L13.6401 14.3721C13.9523 13.8258 14.4376 13.4141 15.0045 13.1902V5C15.0045 4.44772 14.5568 4 14.0045 4ZM17.0045 13V5C17.0045 4.64937 16.9444 4.31278 16.8338 4H18.0045C18.5568 4 19.0045 4.44772 19.0045 5V12C19.0045 12.5523 18.5568 13 18.0045 13H17.0045Z" fill="currentColor"></path></svg>
             </div>

         </div>
        </div>
     </section>


   <section class="fixed bottom-0 left-0 w-full">


    <section class="py-2">
        <div class="grid grid-cols-2 gap-x-2 px-4 gap-y-4" id="grid">

            <div class="px-4 py-2 border border-gray-500 rounded-xl items-center cursor-pointer flex justify-between div">
             <div>
                <h1 class="font-semibold text-[15px]">Create a charter</h1>
                <p class="font-normal text-[11px] text-gray-400">to start a film club</p>
             </div>
            </div>


            <div class="px-4 py-2 border border-gray-500 rounded-xl items-center cursor-pointer flex justify-between div" >
               <div>
                  <h1 class="font-semibold text-[15px]">Create a charter</h1>
                  <p class="font-normal text-[11px] text-gray-400">to start a film club</p>
               </div>
              </div>


              <div class="px-4 py-2 border border-gray-500 rounded-xl items-center cursor-pointer flex justify-between div">
             <div>
                <h1 class="font-semibold text-[15px]">Create a charter</h1>
                <p class="font-normal text-[11px] text-gray-400">to start a film club</p>
             </div>
            </div>

            <div class="px-4 py-2 border border-gray-500 rounded-xl items-center cursor-pointer flex justify-between div">
               <div>
                  <h1 class="font-semibold text-[15px]">Create a charter</h1>
                  <p class="font-normal text-[11px] text-gray-400">to start a film club</p>
               </div>
              </div>


              <form action="" id="form" class="col-span-2 rounded-lg w-full px-1 border py-1 border-gray-700 flex">
                <input id="input" type="text" placeholder="Message ChatGPT... " class="bg-transparent w-full text-sm outline-none px-1 py-1">
                <button type="submit">
                <i class="fa-solid fa-arrow-up px-2 py-2 rounded-lg bg-gray-950 text-gray-800 cursor-pointer" id="i"></i>
            </button>
            </form>


               <div class="text-center col-span-2 text-[10px]">
                BeratGPT can make mistakes. Consider checking important information.
               </div>
        </div>
    </section>

   </section>


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