文件传输8-创建会话界面优化2

web/i18n/en/clipboard.json

@@ -1,6 +1,7 @@
 {
     "title": "Clipboard Share",
-    "description": "Share text and files securely between devices using end-to-end encryption",
+    "description": "Share text and files securely between devices",
+    "description_subtitle": "Files and text are transmitted using end-to-end encryption without going through servers.",
     "create_session": "Create Session",
     "create_description": "Create a new sharing session and get a code",
     "create": "Create",

web/i18n/zh/clipboard.json

@@ -1,6 +1,7 @@
 {
-    "title": "剪贴板分享",
+    "title": "文件传输",
-    "description": "使用端到端加密在设备间安全分享文本和文件",
+    "description": "在你的电脑,手机间传输文件和文本",
+    "description_subtitle": "文件和文本不经过服务器，采用端到端加密技术传输。",
     "create_session": "创建会话",
     "create_description": "创建新的分享会话并获取分享码",
     "create": "创建",

web/src/components/clipboard/SessionManager.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if !isConnected}
-    <SettingsCategory title={$t("clipboard.title")} sectionId="connection-setup">
+    <SettingsCategory title="" sectionId="connection-setup">
         <div class="connection-setup">
             <div class="setup-option">
                 <h3>{$t("clipboard.create_session")}</h3>
@@ -49,16 +49,17 @@
             <div class="divider">
                 <span>{$t("general.or")}</span>
             </div>
-            
               <div class="setup-option">
                 <h3>{$t("clipboard.join_session")}</h3>
                 <p>{$t("clipboard.join_description")}</p>
-                <div class="join-form">                    <input
+                <div class="join-form">
+                    <input
                         type="text"
                         bind:value={joinCode}
                         placeholder={$t("clipboard.enter_code")}
                         disabled={isJoining}
-                    />                    <ActionButton
+                    />
+                    <ActionButton
                         id="join-session"
                         disabled={isJoining || !joinCode.trim()}
                         click={handleJoinSession}
@@ -103,15 +104,13 @@
 <style>    .connection-setup {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
+        gap: 0.75rem;
-        padding: 1.5rem;
+        padding: 0.25rem;
         max-width: 800px;
         margin: 0 auto;
-    }
+    }    .setup-option {
-
-    .setup-option {
         text-align: center;
-        padding: 2.5rem;
+        padding: 0.75rem;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -141,25 +140,23 @@
 
     .setup-option:hover::before {
         left: 100%;
-    }
+    }    .setup-option h3 {
-
+        margin-bottom: 0.15rem;
-    .setup-option h3 {
+        font-size: 1.3rem;
-        margin-bottom: 0.75rem;
-        font-size: 1.5rem;
         font-weight: 600;
         color: var(--text);
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
 
     .setup-option p {
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.5rem;
         color: var(--secondary);
         line-height: 1.6;
-        font-size: 0.95rem;
+        font-size: 0.85rem;
     }    .divider {
         text-align: center;
         position: relative;
-        margin: 1.5rem 0;
+        margin: 0.25rem 0;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -191,14 +188,13 @@
         position: relative;
     }    .join-form {
         display: flex;
+        flex-direction: column;
         gap: 1rem;
-        max-width: 500px;
+        max-width: 400px;
         margin: 0 auto;
-        align-items: stretch;
+        align-items: center;
-    }
+        width: 100%;
-
+    }    .join-form input {
-    .join-form input {
-        flex: 1;
         padding: 1rem 1.25rem;
         border: 2px solid rgba(255, 255, 255, 0.1);
         border-radius: 12px;
@@ -207,6 +203,9 @@
         font-size: 1rem;
         transition: all 0.3s ease;
         backdrop-filter: blur(8px);
+        width: 100%;
+        min-height: 48px;
+        box-sizing: border-box;
     }
 
     .join-form input:focus {
@@ -219,26 +218,31 @@
     .join-form input::placeholder {
         color: var(--secondary);
         opacity: 0.7;
-    }    .session-info {
+    }
+
+    /* Ensure ActionButton is properly sized on mobile */
+    .join-form :global(.action-button) {
+        width: 100%;
+        min-height: 48px;
+        font-size: 1rem;
+        font-weight: 600;    }    .session-info {
         text-align: center;
-        padding: 2rem;
+        padding: 0.75rem;
         max-width: 900px;
         margin: 0 auto;
-    }
+    }    .session-details {
-
-    .session-details {
         display: grid;
-        gap: 2rem;
+        gap: 0.75rem;
-        align-items: start;
+        align-items: center;
         justify-items: center;
         grid-template-columns: 1fr;
-    }
+        max-width: 800px;
-
+        margin: 0 auto;
-    .session-id {
+    }.session-id {
         display: flex;
         align-items: center;
         gap: 1rem;
-        padding: 1.5rem;
+        padding: 1rem;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -302,33 +306,35 @@
         transform: translateY(0) scale(0.95);
     }    .qr-code {
         text-align: center;
-        padding: 2rem;
+        padding: 1rem;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         transition: all 0.3s ease;
-        max-width: 300px;
+        max-width: 280px;
         width: 100%;
-    }
+        margin: 0 auto;
-
+        justify-self: center;
-    .qr-code:hover {
+        align-self: center;
-        transform: translateY(-2px);
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }.qr-code:hover {
+        transform: translateX(-50%) translateY(-2px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
         border-color: rgba(102, 126, 234, 0.3);
-    }
+    }    .qr-code h4 {
-
+        margin: 0 0 0.5rem 0;
-    .qr-code h4 {
-        margin: 0 0 1.5rem 0;
         font-weight: 600;
         color: var(--text);
-        font-size: 1.1rem;
+        font-size: 0.9rem;
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
 
     .qr-code img {
-        max-width: 200px;
+        max-width: 180px;
         width: 100%;
         border: 2px solid rgba(255, 255, 255, 0.1);
         border-radius: 16px;
@@ -341,9 +347,8 @@
         box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
     }    .connection-status {
         display: flex;
-        align-items: center;
+        align-items: center;        gap: 1rem;
-        gap: 1rem;
+        padding: 1rem 1.5rem;
-        padding: 1.5rem 2rem;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -409,11 +414,14 @@
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }    .disconnect-section {
-        text-align: center;
+        display: flex;
-        margin-top: 3rem;
+        justify-content: center;
-        padding-top: 2.5rem;
+        align-items: center;
+        margin-top: 0.5rem;
+        padding-top: 0.5rem;
         border-top: 2px solid rgba(255, 255, 255, 0.05);
         position: relative;
+        width: 100%;
     }
 
     .disconnect-section::before {
@@ -428,14 +436,14 @@
         border-radius: 1px;
     }    @media (min-width: 768px) {
         .connection-setup {
-            flex-direction: row;
+            flex-direction: column;
-            align-items: stretch;
+            align-items: center;
-            gap: 3rem;
+            gap: 2rem;
-        }
+            max-width: 600px;
-
+        }        .setup-option {
-        .setup-option {
+            width: 100%;
-            flex: 1;
+            max-width: 500px;
-            min-height: 280px;
+            min-height: 200px;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -443,59 +451,108 @@
 
         .divider {
             align-self: center;
-            margin: 0;
+            margin: 1.5rem 0;
-            width: 80px;
+            width: 100%;
             flex-shrink: 0;
         }
 
         .divider::before {
-            top: 0;
+            top: 50%;
-            bottom: 0;
+            left: 0;
-            left: 50%;
+            right: 0;
-            right: auto;
+            width: auto;
-            width: 2px;
+            height: 2px;
-            height: auto;
+            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
-            background: linear-gradient(180deg, transparent, rgba(102, 126, 234, 0.3), transparent);
         }
 
         .divider span {
-            transform: rotate(90deg);
+            transform: none;
             white-space: nowrap;
-        }
+        }        .session-details {
-
+            grid-template-columns: 1fr;
-        .session-details {
+            gap: 1.5rem;
-            grid-template-columns: 1fr auto 1fr;
-            gap: 3rem;
             align-items: center;
+            justify-items: center;
         }
 
         .session-id {
-            grid-column: 1;
+            justify-self: center;
-            justify-self: end;
         }
 
         .qr-code {
-            grid-column: 2;
             justify-self: center;
         }
 
         .connection-status {
-            grid-column: 3;
+            justify-self: center;
-            justify-self: start;
         }
-    }
+    }    @media (min-width: 1024px) {
-
-    @media (min-width: 1024px) {
         .connection-setup {
-            gap: 4rem;
+            gap: 2rem;
         }
 
         .setup-option {
-            padding: 3rem;
+            padding: 2rem;
         }
 
         .session-details {
-            gap: 4rem;
+            gap: 2.5rem;
+        }
+    }    /* Enhanced mobile styles */
+    @media (max-width: 639px) {
+        .connection-setup {
+            padding: 0.75rem;
+            gap: 1rem;
+        }
+
+        .setup-option {
+            padding: 1rem;
+        }
+
+        .setup-option h3 {
+            font-size: 1.15rem;
+        }
+
+        .session-info {
+            padding: 0.75rem;
+        }        .session-details {
+            gap: 0.75rem;
+        }
+
+        .session-id {
+            flex-direction: column;
+            gap: 0.5rem;
+            text-align: center;
+            max-width: 100%;
+        }
+
+        .session-id code {
+            font-size: 0.95rem;
+            padding: 0.6rem;
+            word-break: break-all;
+        }
+
+        .copy-btn {
+            align-self: center;
+            min-width: 44px;
+        }
+
+        .qr-code {
+            max-width: 220px;
+            padding: 0.75rem;
+        }
+
+        .qr-code img {
+            max-width: 160px;
+        }
+
+        .connection-status {            max-width: 260px;
+            padding: 0.75rem;
+        }
+
+        .disconnect-section {
+            margin-top: 0.4rem;
+            padding-top: 0.4rem;
         }
     }
 </style>

web/src/components/clipboard/TabNavigation.svelte

@@ -25,37 +25,33 @@
     </button>
 </div>
 
-<style>
+<style>    .tab-navigation {
-    .tab-navigation {
+        display: flex;        gap: 0.5rem;
-        display: flex;
+        margin-bottom: 0.5rem;
-        gap: 0.5rem;
+        padding: 0.3rem;
-        margin-bottom: 2rem;
-        padding: 0.5rem;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 16px;
         max-width: fit-content;
-        margin: 0 auto 2rem auto;
+        margin: 0 auto 0.5rem auto;
         border: 1px solid rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(10px);
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-    }
+    }    .tab-button {
-
+        padding: 0.75rem 1.5rem;
-    .tab-button {
-        padding: 1rem 2rem;
         border: none;
         background: transparent;
         color: var(--subtext);
         border-radius: 12px;
         cursor: pointer;
-        font-size: 1rem;
+        font-size: 0.95rem;
         font-weight: 600;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
-        gap: 0.75rem;
+        gap: 0.5rem;
         position: relative;
         overflow: hidden;
-        min-width: 140px;
+        min-width: 120px;
         justify-content: center;
     }
 
@@ -97,20 +93,19 @@
 
     .tab-button.active::before {
         display: none;
-    }
+    }    @media (max-width: 768px) {
-
-    @media (max-width: 768px) {
         .tab-navigation {
             width: 100%;
             max-width: none;
-            margin: 0 0 2rem 0;
+            margin: 0 0 1rem 0;
+            padding: 0.25rem;
         }
         
         .tab-button {
             flex: 1;
             justify-content: center;
-            padding: 1rem;
+            padding: 0.75rem;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             min-width: auto;
         }
     }

web/src/components/misc/SectionHeading.svelte

@@ -18,7 +18,7 @@
     }
 </script>
 
-<div class="heading-container">
+<!-- <div class="heading-container">
     <h3 class="content-title">{title}</h3>
     {#if beta}
         <div class="beta-label">{$t("general.beta")}</div>
@@ -33,7 +33,7 @@
     >
         <CopyIcon check={copied} />
     </button>
-</div>
+</div> -->
 
 <style>
     .heading-container {

web/src/routes/clipboard/+page.svelte

@@ -171,10 +171,12 @@
     <meta property="description" content={$t("clipboard.description")} />
 </svelte:head>
 
-<div class="clipboard-container">
+<div class="clipboard-container">    <div class="clipboard-header">
-    <div class="clipboard-header">
         <h1>{$t("clipboard.title")}</h1>
-        <p>{$t("clipboard.description")}</p>
+        <div class="description-container">
+            <p class="description-main">{$t("clipboard.description")}</p>
+            <p class="description-subtitle">{$t("clipboard.description_subtitle")}</p>
+        </div>
     </div><!-- Session Management Component -->
     <SessionManager
         {sessionId}
@@ -236,24 +238,23 @@
     {/if}
 </div>
 
-<style>
+<style>    /* Main container styles */
-    /* Main container styles */
     .clipboard-container {
         max-width: 900px;
         margin: 0 auto;
-        padding: 2rem;
+        padding: 1rem;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
         border-radius: 20px;
         backdrop-filter: blur(10px);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.1);
-        min-height: 70vh;
+        min-height: 55vh;
-    }
+        max-height: 80vh;
-
+        overflow-y: auto;
-    .clipboard-header {
+    }    .clipboard-header {
         text-align: center;
-        margin-bottom: 3rem;
+        margin-bottom: 0.5rem;
-        padding: 2rem 0;
+        padding: 0.25rem 0;
         position: relative;
     }
 
@@ -268,33 +269,50 @@
         background: linear-gradient(90deg, var(--accent), var(--accent-hover));
         border-radius: 2px;
         margin-bottom: 1rem;
-    }
+    }    .clipboard-header h1 {
-
+        margin-bottom: 0.2rem;
-    .clipboard-header h1 {
+        font-size: 2.2rem;
-        margin-bottom: 0.8rem;
-        font-size: 2.5rem;
         font-weight: 700;
         background: linear-gradient(135deg, var(--accent), var(--accent-hover));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
-        margin-top: 1rem;
+        margin-top: 0.3rem;
-    }
+    }.clipboard-header p {
-
-    .clipboard-header p {
         color: var(--subtext);
         font-size: 1.1rem;
         font-weight: 400;
         opacity: 0.8;
+    }    .description-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.02rem;
+        align-items: center;
     }
 
-    /* Enhanced session status */
+    .description-main {
+        color: var(--text);
+        font-size: 1.3rem !important;
+        font-weight: 500 !important;
+        opacity: 0.9 !important;
+        margin: 0;
+    }
+
+    .description-subtitle {
+        color: var(--subtext);
+        font-size: 0.95rem !important;
+        font-weight: 400 !important;
+        opacity: 0.7 !important;
+        margin: 0;
+        max-width: 600px;
+        line-height: 1.4;
+    }    /* Enhanced session status */
     .session-status {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 1.5rem 0;
+        margin: 0.25rem 0;
-        padding: 1rem;
+        padding: 0.4rem;
         background: rgba(34, 197, 94, 0.1);
         border: 1px solid rgba(34, 197, 94, 0.2);
         border-radius: 12px;
@@ -331,14 +349,12 @@
             opacity: 0.7;
             transform: scale(1.1);
         }
-    }
+    }    /* Tab content styling */
-
-    /* Tab content styling */
     .tab-content {
         background: rgba(255, 255, 255, 0.03);
         border-radius: 15px;
-        padding: 2rem;
+        padding: 0.75rem;
-        margin-top: 1.5rem;
+        margin-top: 0.25rem;
         border: 1px solid rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(8px);
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
@@ -480,46 +496,54 @@
         }
         100% {
             background-position: 200% 0;
-        }
+        }    }    /* Override SettingsCategory default padding for clipboard page */
+    :global(.settings-content) {
+        padding: 0.25rem !important;
+        gap: 0.5rem !important;
     }
     
-    /* Responsive Design */
+    @media screen and (max-width: 750px) {
+        :global(.settings-content) {
+            padding: 0.1rem !important;
+            gap: 0.25rem !important;
+        }
+    }    /* Responsive Design */
     @media (max-width: 768px) {
         .clipboard-container {
-            padding: 1rem;
+            padding: 0.75rem;
-            margin: 1rem;
+            margin: 0.75rem;
             border-radius: 16px;
+            max-height: 85vh;
         }
 
         .clipboard-header h1 {
-            font-size: 2rem;
+            font-size: 1.9rem;
-        }
+        }        .clipboard-header {
-
+            padding: 0.5rem 0;
-        .clipboard-header {
+            margin-bottom: 0.75rem;
-            padding: 1.5rem 0;
-            margin-bottom: 2rem;
         }
 
         :global(.card) {
-            padding: 1rem;
+            padding: 0.75rem;
         }
 
         :global(.tab-content) {
-            padding: 1.5rem;
+            padding: 0.75rem;
+            margin-top: 0.5rem;
         }
-    }
+    }    @media (max-width: 480px) {
-
-    @media (max-width: 480px) {
         .clipboard-container {
             margin: 0.5rem;
+            padding: 0.5rem;
+            max-height: 90vh;
         }
 
         .clipboard-header h1 {
-            font-size: 1.8rem;
+            font-size: 1.6rem;
         }
 
         :global(.drop-zone) {
-            padding: 2rem 1rem;
+            padding: 1.5rem 1rem;
         }
     }
 </style>