Update style.css

style.css

@@ -4,6 +4,7 @@
     padding: 0;
     box-sizing: border-box;
 }
+
 body {
     font-family: Arial, sans-serif;
     display: flex;
@@ -24,7 +25,8 @@ body {
     padding: 10px 0;
     gap: 20px;
 }
-.prompt-icon, .video-icon {
+
+.prompt-icon, .video-icon, .website-icon, .textbox-icon {
     cursor: pointer;
     text-align: center;
     display: flex;
@@ -32,16 +34,19 @@ body {
     align-items: center;
     gap: 5px;
 }
-.prompt-icon img, .video-icon img {
+
+.prompt-icon img, .video-icon img, .website-icon img, .textbox-icon img {
     width: 36px;
     height: 36px;
     transition: transform 0.2s ease, filter 0.2s ease;
 }
-.prompt-icon img:hover, .video-icon img:hover {
+
+.prompt-icon img:hover, .video-icon img:hover, .website-icon img:hover, .textbox-icon img:hover {
     transform: scale(1.2);
     filter: brightness(1.2);
 }
-.prompt-icon span, .video-icon span {
+
+.prompt-icon span, .video-icon span, .website-icon span, .textbox-icon span {
     font-size: 12px;
 }
 
@@ -54,6 +59,7 @@ body {
     align-items: center;
     justify-content: center;
 }
+
 .top-bar {
     position: absolute;
     top: 0;
@@ -67,6 +73,12 @@ body {
     align-items: center;
     justify-content: space-between;
 }
+
+.nav-buttons {
+    display: flex;
+    gap: 10px;
+}
+
 .nav-buttons button {
     background-color: #666;
     color: white;
@@ -75,9 +87,25 @@ body {
     font-size: 18px;
     cursor: pointer;
 }
+
 .nav-buttons button:hover {
     background-color: #888;
 }
+
+.main {
+    display: flex;
+    height: 100%;
+}
+
+.content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background-color: #000;
+}
+
 .content img {
     max-width: 100%;
     max-height: 100%;
@@ -85,6 +113,56 @@ body {
     display: block;
 }
 
+/* Prompt box styling */
+.prompt-box {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #333;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    display: none;
+    z-index: 20;
+}
+
+.prompt-box textarea {
+    width: 100%;
+    height: 60px;
+    margin-bottom: 10px;
+    padding: 10px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.prompt-box button {
+    padding: 5px 10px;
+    font-size: 14px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+/* Response box styling */
+.response-box {
+    position: absolute;
+    top: 30%;
+    left: 10%;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #333;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    display: none;
+    z-index: 20;
+}
+
 /* Video overlay */
 .video-overlay {
     position: fixed;
@@ -98,11 +176,13 @@ body {
     align-items: center;
     z-index: 30;
 }
+
 .video-overlay iframe {
     width: 80%;
     height: 80%;
     border: none;
 }
+
 .video-overlay .close-button {
     position: absolute;
     top: 20px;
@@ -110,49 +190,16 @@ body {
     font-size: 24px;
     color: white;
     cursor: pointer;
+    background: none;
+    border: none;
+    z-index: 31;
 }
+
 .video-overlay .close-button:hover {
     color: red;
 }
 
-
-
-/* Sidebar styling for website tab */
-.website-icon {
-    cursor: pointer;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-}
-.website-icon img {
-    width: 36px;
-    height: 36px;
-    transition: transform 0.2s ease, filter 0.2s ease;
-}
-.website-icon img:hover {
-    transform: scale(1.2);
-    filter: brightness(1.2);
-}
-
-/* Website Layer */
-.website-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.9);
-    display: none;
-    z-index: 40;
-}
-.website-layer iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-}
-
+/* Textbox Layer */
 .textbox-layer {
     position: absolute;
     bottom: 0;
@@ -163,32 +210,12 @@ body {
     padding: 15px;
     border-top: 2px solid #ccc;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
-    transform: translateY(100%);
+    transform: translateX(100%);
     transition: transform 0.3s ease-in-out;
-    display: block;
+    display: none;
     z-index: 30;
 }
-.textbox-layer.active {
-    transform: translateY(0);
-}
 
-.textbox-icon {
-    cursor: pointer;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-}
-
-.textbox-icon img {
-    width: 36px;
-    height: 36px;
-    transition: transform 0.2s ease, filter 0.2s ease;
-}
-
-.textbox-icon img:hover {
-    transform: scale(1.2);
-    filter: brightness(1.2);
+.textbox-layer.active {
+    transform: translateX(0);
 }
-