spe-uob · GerardChabaBristol · Mar 28, 2025 · Mar 13, 2025 · Mar 13, 2025 · Mar 13, 2025
diff --git a/docs/Presentations/AI Learning Tool Beta.pdf b/docs/Presentations/AI Learning Tool Beta.pdf
diff --git a/docs/Presentations/AI Learning Tool MVP.pdf b/docs/Presentations/AI Learning Tool MVP.pdf
diff --git a/docs/Research/vue-notes.md b/docs/Research/vue-notes.md
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,7 +3,7 @@
   <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">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="manifest" href="/manifest.json">
     <title><%= htmlWebpackPlugin.options.title %></title>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -62,6 +62,8 @@ export default {
 };
 </script>
 
+<style src="./assets/responsive.css"></style>
+
 <style>
 body {
   background-color: var(--background-color);

diff --git a/frontend/src/assets/responsive.css b/frontend/src/assets/responsive.css
@@ -0,0 +1,272 @@
+/* ---------- Mobile Devices Styles ---------- */
+@media (max-width: 600px) and (orientation: portrait) {
+    * {
+        margin: 0;
+        padding: 0;
+        transition: all 0.3s ease-in-out;
+    }
+
+    body {
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+        background-color: #f4f4f9;
+        touch-action: manipulation;
+    }
+
+    html, body {
+        overflow-x: hidden;
+        width: 100%;
+    }
+
+    #app {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        opacity: 0;
+        animation: fadeIn 0.8s ease-in-out forwards;
+    }
+
+    /* General content wrapper */
+    .responsive-container {
+        width: 100%;
+        padding: 1rem;
+        opacity: 0;
+        animation: fadeInUp 0.6s ease-in-out 0.2s forwards;
+    }
+
+    /* Main content */
+    main {
+        padding: 1rem;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Welcome container */
+    .welcome-container {
+        padding: 0.75rem;
+        text-align: center;
+    }
+
+    /* Logo styling */
+    .logo {
+        max-width: 60%;
+        height: auto;
+        margin: -15px;
+        transform: scale(0.8);
+        animation: popIn 0.6s ease-in-out forwards;
+    }
+
+    /* Text sizes */
+    .welcome-text {
+        font-size: 1.3rem;
+        margin: -20px;
+        opacity: 0;
+        animation: fadeInUp 0.5s ease-in-out 0.4s forwards;
+    }
+
+    .instruction-text {
+        font-size: 0.6rem;
+        margin: -25px;
+        opacity: 0;
+        animation: fadeInUp 0.5s ease-in-out 0.6s forwards;
+    }
+
+    /* Button container */
+    .button-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.1rem;
+        justify-content: center;
+        margin: -25px
+    }
+
+    /* Button styling */
+    .button-container button {
+        flex: 1 1 auto;
+        padding: 0.6rem;
+        font-size: 0.95rem;
+        min-width: 100px;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: transform 0.2s, background 0.3s;
+    }
+
+    .button-container button:hover {
+        background: #0056b3;
+        transform: scale(1.05);
+    }
+
+    /* Make messages take up the full available width */
+    .message {
+        width: calc(100% - 24px) !important;
+        max-width: calc(100% - 24px) !important;
+        margin: 14px !important;
+        padding: 12px 16px !important;
+    }
+
+    .user-message,
+    .assistant-message {
+        align-self: stretch !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100% !important;
+    }
+    .user-message::after,
+    .assistant-message::after {
+        display: none !important;
+    }
+
+    /* Sidebar Mobile Adaptation */
+    .history-sidebar {
+        position: fixed;
+        width: 100% !important;
+        height: 100vh;
+        transform: translateX(-100%);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border-right: none !important;
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .history-sidebar.collapsed {
+        width: 60px !important;
+        transform: translateX(0);
+    }
+
+    .history-sidebar:not(.collapsed) {
+        transform: translateX(0);
+        width: 100% !important;
+    }
+
+    /* Adjusting the toggle button */
+    .toggle-btn {
+        position: fixed;
+        left: 10px;          
+        top: 20px;           
+        backdrop-filter: blur(4px);
+        border-radius: 4px;
+        padding: 2px;  
+        margin: 0px;       
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 
+        transition: transform 0.3s ease;
+        font-size: 10px;  
+    }
+
+    .history-sidebar:not(.collapsed) .toggle-btn {
+        transform: translateX(5px);
+    }
+
+    .toggle-btn,
+    .toggle-btn:hover,
+    .toggle-btn:focus,
+    .toggle-btn:active {
+        background: rgba(244, 244, 244, 1) !important;
+        outline: none; 
+    }
+
+
+    /* Sidebar Content Adaptation */
+    .history-container {
+        padding-top: 60px;
+        max-height: calc(100vh - 80px);
+    }
+
+    .chat-item {
+        font-size: 1.1rem;
+        padding: 1.2rem;
+        margin: 12px 0;
+        border-radius: 12px;
+        min-width: 85vw;
+    }
+
+    /* Main content mask effect */
+    .history-sidebar:not(.collapsed) + main {
+        position: relative;
+    }
+
+    .history-sidebar:not(.collapsed) + main::after {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.4);
+        animation: overlayFade 0.3s ease;
+    }
+
+    @keyframes overlayFade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+
+    /* History list scrolling optimization */
+    .history-list-wrapper {
+        padding: 8px;
+        scrollbar-width: thin;
+        scrollbar-color: var(--primary-color) transparent;
+    }
+
+    /* New chat button optimization */
+    .chat-item:first-of-type {
+        margin-top: 20px;
+        padding: 1.4rem;
+        font-size: 1.2rem;
+    }
+}
+
+/* ---------- Landscape Orientation Notice ---------- */
+@media (max-width: 1000px) and (orientation: landscape) {
+    body::before {
+        content: "Please rotate your device!";
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 1.2rem;
+        font-size: 1.5rem;
+        text-align: center;
+        border-radius: 10px;
+        z-index: 9999;
+    }
+    #app {
+        display: none; /* Hide the entire application */
+    }
+}
+
+/* ---------- Animations ---------- */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes popIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
diff --git a/frontend/src/components/HistorySidebar.vue b/frontend/src/components/HistorySidebar.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script>
-import { getTheme } from "../assets/color.js";
+import { getTheme } from "@/assets/color.js";
 import { getTranslation } from "@/assets/language";
 
 export default {
   props: ["chats", "currentChatID", "currentLanguage", "chatInitButtonsDisabled"],
   data() {
     return {
-      isCollapsed: false, // Controls sidebar visibility
+      isCollapsed: true, // Controls sidebar visibility
       currentTheme: "default", // Tracks the current theme
       themeStyles: {}, // Stores dynamic styles
     };
@@ -41,6 +41,7 @@ export default {
     getTranslation,
     addChat() {
       this.$emit("resetMainContent");
+      this.isCollapsed = true;
     },
     toggleSidebar() {
       this.isCollapsed = !this.isCollapsed;
@@ -91,7 +92,7 @@ export default {
 </script>
 
 
-<style scoped>
+<style>
 /* Sidebar Layout */
 .history-sidebar {
   width: 240px;
@@ -124,7 +125,8 @@ export default {
   cursor: pointer;
   font-size: 22px;
   font-weight: bold;
-  padding: 8px;
+  padding: 4px;
+  margin: 8px;
   transition: opacity 0.3s ease-in-out;
   color: black;
 }

diff --git a/frontend/src/components/MainContent.vue b/frontend/src/components/MainContent.vue
@@ -294,7 +294,7 @@ export default {
 </script>
 
 
-<style scoped>
+<style>
 /* Adjust the main area height to make the chat window more compact */
 main {
   flex-grow: 1;

diff --git a/frontend/src/components/SettingSidebar.vue b/frontend/src/components/SettingSidebar.vue
@@ -87,7 +87,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 /* Settings button */
 .settings-btn {
   position: fixed;
@@ -183,4 +183,4 @@ button:hover {
 .close-btn:hover {
   background-color: #d32f2f;
 }
-</style>
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -33,8 +33,31 @@ router.afterEach((to) => {
     document.title = to.meta.title || 'Default title';
 });
 
+// Detect if it is a mobile device
+function isMobileDevice() {
+    return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+}
+
+// Attempts to lock screen orientation, performed on mobile only
+function lockOrientation() {
+    if (!isMobileDevice()) return; // Mobile only
+
+    if (screen.orientation && screen.orientation.lock) {
+        screen.orientation.lock("portrait").catch(err => {
+            console.warn("Screen orientation lock failed:", err);
+        });
+    }
+}
+
+// Vue mounts and then tries to lock the orientation
+document.addEventListener("DOMContentLoaded", lockOrientation);
+document.addEventListener("fullscreenchange", lockOrientation);
+
 const app = createApp(App);
 app.use(router);
 app.mount('#app');
 
+// Try locking again (make sure it takes effect after Vue is mounted)
+lockOrientation();
+
 export default router;
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,8 @@ export default { @@
     };
     </script>
+    <style src="./assets/responsive.css"></style>
     <style>
     body {
       background-color: var(--background-color);
@@ Expand Down @@