1 files changed, 119 insertions, 42 deletions
diff --git a/src/components/left_panel.svelte b/src/components/left_panel.svelte
index d69199e..b17f85c 100644
--- a/src/components/left_panel.svelte
+++ b/src/components/left_panel.svelte
@@ -3,6 +3,8 @@
     import {
         leftPanelCardId,
         leftPanelCardDesc,
+        isMobileInfoVisible,
+        closeMobileInfo,
     } from '../left_panel';
 
     import { cardImageUrl } from '../utils';
@@ -29,52 +31,127 @@
     </div>
 </div>
 
-<style>
-
-.left-panel {
-    width: 25%;
-    padding: 2vh 20px;
-    background-color: #f5f5f5;
-}
-
-.card-image-large {
-    height: 40vh;
-    text-align: center;
-    background-color: #ddd;
-    margin-bottom: 20px;
-    border-radius: 8px;
-}
-
-.card-description {
-    line-height: 1.4;
-    font-size: 14px;
-    height: 50vh;
-}
+{#if $isMobileInfoVisible}
+<div class="overlay">
+    <div class="mobile-info">
+        <button class="close-btn" onclick={closeMobileInfo}>×</button>
+        <div class="content">
+            <div class="card-image-large">
+                {#if $leftPanelCardId}
+                    <img height="100%" src={cardImageUrl($leftPanelCardId)} alt="card img">
+                {/if}
+            </div>
+            <div class="card-description">
+                <pre class="card-desc-text">{$leftPanelCardDesc}</pre>
+            </div>
+        </div>
+    </div>
+</div>
+{/if}
 
-.card-desc-text {
-      height: calc(50vh - 3em); 
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      overflow: auto;
-}
+<style>
 
-a.link {
-    color: #000000; /* 文本颜色设置为黑色 */
-    text-decoration: underline; /* 添加下划线 */
-    cursor: pointer; /* 鼠标悬停时显示手形指针 */
-}
+    .left-panel {
+        width: 25%;
+        padding: 2vh 20px;
+        background-color: #f5f5f5;
+    }
 
-a.link:visited {
-    color: #000000; /* 已访问链接颜色保持黑色 */
-}
+    .overlay{
+        display: none;
+    }
+    
+    .card-image-large {
+        height: 40vh;
+        text-align: center;
+        background-color: #ddd;
+        margin-bottom: 20px;
+        border-radius: 8px;
+    }
+    
+    .card-description {
+        line-height: 1.4;
+        font-size: 14px;
+        height: 50vh;
+    }
+    
+    .card-desc-text {
+          height: calc(50vh - 3em); 
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          overflow: auto;
+    }
+    
+    a.link {
+        color: #000000; /* 文本颜色设置为黑色 */
+        text-decoration: underline; /* 添加下划线 */
+        cursor: pointer; /* 鼠标悬停时显示手形指针 */
+    }
+    
+    a.link:visited {
+        color: #000000; /* 已访问链接颜色保持黑色 */
+    }
+    
+    a.link:hover {
+        color: #000000; /* 悬停时颜色不变 */
+        text-decoration: underline; /* 悬停时保持下划线 */
+    }
+    
+    a.link:active {
+        color: #000000; /* 点击时颜色不变 */
+    }
 
-a.link:hover {
-    color: #000000; /* 悬停时颜色不变 */
-    text-decoration: underline; /* 悬停时保持下划线 */
-}
+    @media screen and (max-width: 768px) {
+        .left-panel {
+            display: none;
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0);
+            display: block;
+            z-index: 1000;
+        }
+        .mobile-info {
+            background-color: rgba(0, 0, 0, 0);
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1001;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .close-btn {
+            position: absolute;
+            right: 30px;
+            top: 30px;
+            width: 40px;
+            height: 40px;
+            border: none;
+            border-radius: 50%;
+            background-color: #444;
+            color: white;
+            cursor: pointer;
+            font-size: 24px;
+        }
 
-a.link:active {
-    color: #000000; /* 点击时颜色不变 */
-}
+        .close-btn:hover {
+            background-color: #666;
+            transform: scale(1.1);
+        }
+        .content {
+            width: 100%;
+            padding: 20px;
+            background-color: white;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+    }
 
 </style>