WebApp production ver

Web/betatest/content/ftp/css/view.css

@@ -0,0 +1,86 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+.custom-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    max-width: 100%;
+}
+
+.media-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+    max-height: 80vh;
+    margin: 0 auto;
+    overflow: visible;
+    flex-direction: column;
+}
+
+.media-container img {
+    max-width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+}
+
+.media-container video {
+    max-width: 100%;
+    max-height: 70vh;
+}
+
+.media-container audio {
+    width: 100%;
+    max-width: 600px;
+    margin: 20px 0;
+}
+
+.controls {
+    margin: 20px 0;
+    text-align: center;
+}
+
+footer {
+    margin-top: auto;
+    padding: 20px;
+    border-top: 1px solid #ddd;
+    width: 100%;
+}
+
+.hover-effect {
+    transition: opacity 0.3s ease;
+}
+
+.hover-effect:hover {
+    opacity: 0.8;
+}
+
+.theme-light .dark-logo {
+    display: none;
+}
+
+.theme-dark .light-logo {
+    display: none;
+}
+.file-info table {
+    table-layout: fixed;
+    word-wrap: break-word;
+}
+
+@media (max-width: 576px) {
+    .file-info table {
+        width: 95% !important;
+    }
+    .file-info th {
+        width: 40%;
+    }
+    .file-info td {
+        width: 60%;
+    }
+}