Update static/appS.css

static/appS.css

@@ -1,365 +1,365 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html, body {
-    height: 100vh;
-    width: 100vw;
-    font-family: sans-serif;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
-}
-.drag-active {
-  background-color: rgba(0, 150, 255, 0.1) !important;
-  border: 2px dashed #1ec9f3 !important;
-}
-header {
-    flex: 0 0 17vh;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    padding: 0 20px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-header img {
-    height: 18vh;
-    width: 5vw;
-    object-fit: cover;
-}
-
-header span {
-    font-size: 30px;
-}
-
-em {
-    color: rgb(42, 42, 248);
-}
-
-.convo {
-    height: 65vh;
-    overflow-y: auto;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    scroll-behavior: smooth;
-   flex: 1;
-    
-}
-
-.select-options{
-  display: flex;
-  flex-direction: column;
-  height: 5vh;
-  width: 10vw;
-}
- 
-  .select-options li {
-    margin-bottom: 8px;
-  }
-  
-  .select-options input[type="checkbox"] {
-    display: none;
-  }
-  
-  .select-options label {
-    position: relative;
-    padding-left: 30px;
-    cursor: pointer;
-    display: block;
-  }
-  
-  .select-options .check {
-    position: absolute;
-    left: 10px;
-    top: 0px;
-    height: 17px;
-    width: 17px;
-    background-color: #e0e0e0;
-    border-radius: 50%;
-  }
-  
-  .select-options input:checked + .check {
-    background-color: #6a6b6a;
-    box-shadow: inset 0 0 0 4px white;
-  }
-
-.bubble {
-    max-width: 90%;
-    padding: 16px;
-    font-size: 1.05rem;
-    border-radius: 14px;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-}
-
-.bubble .label  {
-    font-size: 0.9rem;
-    font-weight: bold;
-    margin-bottom: 6px;
-}
-
-.bubble.left {
-    align-self: flex-start;
-    background-color: #a7e9af;
-    color: black;
-    border: 2px solid #3b7a57;
-}
-
-.bubble.right {
-    align-self: flex-end;
-    background-color: #1ec9f3;
-    color: white;
-    border: 2px solid #0080c0;
-}
-
-.qtdoc  {
-    flex: 0 0 auto;
-    padding: 40px 80px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
-}
-
-.qt  {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #b5b4b4;
-    border-radius: 10px;
-    margin-right: 10px;
-    padding: 0 10px;
-    height: 50px;
-}
-.SummarizeInput,
-.CaptionInput {
-  position: absolute;
-  width: 80%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #b5b4b4;
-  border-radius: 10px;
-  padding: 0 15px;
-  height: 50px;
-}
-.qt input {
-    width: 70%;
-    height: 70%;
-    border: none;
-    background-color: #b5b4b4;
-    color: white;
-    font-size: 16px;
-}
-
-.LengthS ,
-.selectImg{
-    display: flex;
-    align-items: center;
-    gap: 30px;
-    color: black;
-    font-size: 16px;
-    width: auto;
-  }
-  
-  .LengthS p ,
-  .selectImg p{
-    margin: 0;
-    white-space: nowrap;
-  }
-.select-optionsS {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    flex-direction: row;
-    gap: 20%;
-}
-.SummuririzeButtons,
-.captionButtons{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    gap: 50px;
-    cursor: pointer;
-}
-.select-optionsS li label {
-    display: inline-flex;
-    align-items: center;
-    gap: 20px; 
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-  }
-.select-optionsS li{
-    display: flex;
-    font-display: row;
-    align-items: center;
-}
-.select-options input[type="radio"] {
-    accent-color: #555; 
-    vertical-align: middle; 
-
-}
-.qt input::placeholder {
-    color: white;
-}
-
-.qt input:focus {
-    outline: none;
-}
-
-.icons {
-    display: flex;
-    gap: 40px;
-    font-size: 20px;
-    color: white;
-    align-items: center;
-    cursor: pointer;
-}
-
-.sendingQA {
-    background-color: #3b82f6;
-    color: white;
-    padding: 10px 15px;
-    border-radius: 8px;
-    cursor: pointer;
-    border: none;
-    font-size: 16px;
-}
-
-.sendingQA:hover {
-    background-color: #2563eb;
-}
-
-.audio-toggle {
-    margin-left: 10px;
-    cursor: pointer;
-    color: #007BFF;
-}
-
-.audio-toggle:hover {
-    color: #0056b3;
-}
-
-.answer-block {
-    background-color: #e1f7e1;
-    border-radius: 10px;
-    padding: 1rem;
-    margin: 1rem;
-}
-
-.file-preview-bubble {
-    align-self: flex-start;
-    background-color: #f2f2f2;
-    color: #444;
-    font-size: 0.8rem;
-    padding: 6px 10px;
-    border-radius: 10px;
-    max-width: 50%;
-    font-family: monospace;
-    box-shadow: inset 0 0 2px #aaa;
-    margin: -5px 0 6px 0;  
-    opacity: 0.9;
-}
-.audio-toggle {
-    margin-left: 10px;
-    cursor: pointer;
-    color: #007BFF;
-}
-
-.audio-toggle:hover {
-    color: #0056b3;
-}
-.reset-chat {
-  background-color: #ef4444;
-  color: white;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 8px;
-  margin-bottom: 10px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.reset-chat:hover {
-  background-color: #dc2626;
-}
-
-.convo.drag-over {
-  outline: 2px dashed #3b82f6;
-  background-color: #e0f2fe;
-}
-
-
-.explainChoix{
-    position: absolute;
-    height: 10vh;
-    width: 20vw;
-    background-color: #6adcf9;
-    border-radius: 20px;
-    top: 17vh;
-    left: 10vw;
-    display: flex;
-    flex-direction: column;
-    gap: 5%;
-    align-items: flex-end;
-    opacity: 0.8;
-    transition: 3s ease-in-out;
-}
-.explainChoix span {
-    padding-top: 2%;
-    padding-left: 10px;
-    color: black;
-    font-size: 13px;
-}
-.explainChoix button{
-    background-color: white;
-    color: black;
-    font-size: 10px;
-    height: 30%;
-    width: 17%;
-    border-radius: 10px;
-    cursor: pointer;
-    margin-right: 15px;
-    margin-bottom: 15px;
-}
-
-.fade-in {
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
-}
-
-.fade-in.active {
-    opacity: 0.8;
-    transform: translateY(0);
-}
-
-.fade-in.delay-1 { transition-delay: 0.5s; }
-.fade-in.delay-2 { transition-delay: 0.7s; }
-.fade-in.delay-3 { transition-delay: 0.9s; }
-
-
-
-.active{
-    opacity: 1;
-    pointer-events: all;
-    z-index: 2;
-}
-.innactive{
-    opacity: 0;
-    pointer-events: none;
-    z-index: 1;
-
-}
-
-.return i{
-    font-size: 25px;
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100vh;
+    width: 100vw;
+    font-family: sans-serif;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+}
+.drag-active {
+  background-color: rgba(0, 150, 255, 0.1) !important;
+  border: 2px dashed #1ec9f3 !important;
+}
+header {
+    flex: 0 0 17vh;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 0 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+header img {
+    height: 18vh;
+    width: 5vw;
+    object-fit: cover;
+}
+
+header span {
+    font-size: 30px;
+}
+
+em {
+    color: rgb(42, 42, 248);
+}
+
+.convo {
+    height: 65vh;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    scroll-behavior: smooth;
+   flex: 1;
+    
+}
+
+.select-options{
+  display: flex;
+  flex-direction: column;
+  height: 5vh;
+  width: 10vw;
+}
+ 
+  .select-options li {
+    margin-bottom: 8px;
+  }
+  
+  .select-options input[type="checkbox"] {
+    display: none;
+  }
+  
+  .select-options label {
+    position: relative;
+    padding-left: 30px;
+    cursor: pointer;
+    display: block;
+  }
+  
+  .select-options .check {
+    position: absolute;
+    left: 10px;
+    top: 0px;
+    height: 17px;
+    width: 17px;
+    background-color: #e0e0e0;
+    border-radius: 50%;
+  }
+  
+  .select-options input:checked + .check {
+    background-color: #6a6b6a;
+    box-shadow: inset 0 0 0 4px white;
+  }
+
+.bubble {
+    max-width: 90%;
+    padding: 16px;
+    font-size: 1.05rem;
+    border-radius: 14px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.bubble .label  {
+    font-size: 0.9rem;
+    font-weight: bold;
+    margin-bottom: 6px;
+}
+
+.bubble.left {
+    align-self: flex-start;
+    background-color: #a7e9af;
+    color: black;
+    border: 2px solid #3b7a57;
+}
+
+.bubble.right {
+    align-self: flex-end;
+    background-color: #1ec9f3;
+    color: white;
+    border: 2px solid #0080c0;
+}
+
+.qtdoc  {
+    flex: 0 0 auto;
+    padding: 40px 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
+}
+
+.qt  {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #b5b4b4;
+    border-radius: 10px;
+    margin-right: 10px;
+    padding: 0 10px;
+    height: 50px;
+}
+.SummarizeInput,
+.CaptionInput {
+  position: absolute;
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #b5b4b4;
+  border-radius: 10px;
+  padding: 0 15px;
+  height: 50px;
+}
+.qt input {
+    width: 70%;
+    height: 70%;
+    border: none;
+    background-color: #b5b4b4;
+    color: white;
+    font-size: 16px;
+}
+
+.LengthS ,
+.selectImg{
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    color: black;
+    font-size: 16px;
+    width: auto;
+  }
+  
+  .LengthS p ,
+  .selectImg p{
+    margin: 0;
+    white-space: nowrap;
+  }
+.select-optionsS {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-direction: row;
+    gap: 20%;
+}
+.SummuririzeButtons,
+.captionButtons{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 50px;
+    cursor: pointer;
+}
+.select-optionsS li label {
+    display: inline-flex;
+    align-items: center;
+    gap: 20px; 
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+  }
+.select-optionsS li{
+    display: flex;
+    font-display: row;
+    align-items: center;
+}
+.select-options input[type="radio"] {
+    accent-color: #555; 
+    vertical-align: middle; 
+
+}
+.qt input::placeholder {
+    color: white;
+}
+
+.qt input:focus {
+    outline: none;
+}
+
+.icons {
+    display: flex;
+    gap: 40px;
+    font-size: 20px;
+    color: white;
+    align-items: center;
+    cursor: pointer;
+}
+
+.sendingQA {
+    background-color: #3b82f6;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    border: none;
+    font-size: 16px;
+}
+
+.sendingQA:hover {
+    background-color: #2563eb;
+}
+
+.audio-toggle {
+    margin-left: 10px;
+    cursor: pointer;
+    color: #007BFF;
+}
+
+.audio-toggle:hover {
+    color: #0056b3;
+}
+
+.answer-block {
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    padding: 1rem;
+    margin: 1rem;
+}
+
+.file-preview-bubble {
+    align-self: flex-start;
+    background-color: #f2f2f2;
+    color: #444;
+    font-size: 0.8rem;
+    padding: 6px 10px;
+    border-radius: 10px;
+    max-width: 50%;
+    font-family: monospace;
+    box-shadow: inset 0 0 2px #aaa;
+    margin: -5px 0 6px 0;  
+    opacity: 0.9;
+}
+.audio-toggle {
+    margin-left: 10px;
+    cursor: pointer;
+    color: #007BFF;
+}
+
+.audio-toggle:hover {
+    color: #0056b3;
+}
+.reset-chat {
+  background-color: #ef4444;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.reset-chat:hover {
+  background-color: #dc2626;
+}
+
+.convo.drag-over {
+  outline: 2px dashed #3b82f6;
+  background-color: #e0f2fe;
+}
+
+
+.explainChoix{
+    position: absolute;
+    height: 10vh;
+    width: 20vw;
+    background-color: #6adcf9;
+    border-radius: 20px;
+    top: 17vh;
+    left: 10vw;
+    display: flex;
+    flex-direction: column;
+    gap: 5%;
+    align-items: flex-end;
+    opacity: 0.8;
+    transition: 3s ease-in-out;
+}
+.explainChoix span {
+    padding-top: 2%;
+    padding-left: 10px;
+    color: black;
+    font-size: 13px;
+}
+.explainChoix button{
+    background-color: white;
+    color: black;
+    font-size: 10px;
+    height: 30%;
+    width: 17%;
+    border-radius: 10px;
+    cursor: pointer;
+    margin-right: 15px;
+    margin-bottom: 15px;
+}
+
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.fade-in.active {
+    opacity: 0.8;
+    transform: translateY(0);
+}
+
+.fade-in.delay-1 { transition-delay: 0.5s; }
+.fade-in.delay-2 { transition-delay: 0.7s; }
+.fade-in.delay-3 { transition-delay: 0.9s; }
+
+
+
+.active{
+    opacity: 1;
+    pointer-events: all;
+    z-index: 2;
+}
+.innactive{
+    opacity: 0;
+    pointer-events: none;
+    z-index: 1;
+
+}
+
+.return i{
+    font-size: 25px;
 }