Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter.snapshot @ 109:1c446ab6f945

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] New Blog about writing Seobeo library.
author June Park <parkjune1995@gmail.com>
date Sat, 03 Jan 2026 19:37:51 -0800
parents 092afa595764
children e7899c93da77
comparison
equal deleted inserted replaced
108:f07abbcd2ec5 109:1c446ab6f945
1 HTTP/1.1 200 OK 1 HTTP/1.1 200 OK
2 Content-Type: text/html 2 Content-Type: text/html
3 Content-Length: 7742 3 Content-Length: 8526
4 Connection: close 4 Connection: close
5 5
6 <!DOCTYPE html> 6 <!DOCTYPE html>
7 <html lang="en"> 7 <html lang="en">
8 <head> 8 <head>
9 <meta charset="UTF-8"> 9 <meta charset="UTF-8">
10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0">
11 <title>File Format Converter</title> 11 <title>File Format Converter</title>
12 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> 12 <meta charset="UTF-8">
13 <meta name="viewport" content="width=device-width, initial-scale=1.0">
14 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
13 15
14 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> 16 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin>
15 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin> 17 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
16 18
17 <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> 19 <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin>
53 margin-bottom: 0.5rem; 55 margin-bottom: 0.5rem;
54 font-weight: 600; 56 font-weight: 600;
55 } 57 }
56 58
57 input[type="file"] { 59 input[type="file"] {
58 width: 50%; 60 padding: 0.75rem;
59 padding: 0.5rem;
60 border: 2px dashed #ccc; 61 border: 2px dashed #ccc;
61 border-radius: 4px; 62 border-radius: 4px;
62 background: white; 63 background: white;
64 font-size: 16px;
63 } 65 }
64 66
65 button { 67 button {
66 background: var(--purple); 68 background: var(--purple);
67 font-family: "More Thin", sans-serif; 69 font-family: "More Thin", sans-serif;
70 padding: 0.75rem 1.5rem; 72 padding: 0.75rem 1.5rem;
71 border-radius: 4px; 73 border-radius: 4px;
72 cursor: pointer; 74 cursor: pointer;
73 font-size: 1rem; 75 font-size: 1rem;
74 margin-top: 1rem; 76 margin-top: 1rem;
77 min-height: 44px;
75 } 78 }
76 79
77 button:hover { 80 button:hover {
78 background: var(--orange); 81 background: var(--orange);
79 } 82 }
119 margin-top: 1rem; 122 margin-top: 1rem;
120 } 123 }
121 124
122 .loading.show { 125 .loading.show {
123 display: block; 126 display: block;
127 }
128
129 /* Mobile responsive */
130 @media (max-width: 720px) {
131 .container {
132 padding: 1rem;
133 margin: 1rem auto;
134 }
135
136 .converter-section {
137 padding: 1.5rem 1rem;
138 }
139
140 .converter-section h2 {
141 font-size: 1.5rem;
142 }
143
144 .file-input-wrapper label {
145 font-size: 1rem;
146 }
147
148 button {
149 font-size: 1.1rem;
150 padding: 1rem 1.5rem;
151 }
152
153 .result {
154 padding: 1rem;
155 font-size: 1rem;
156 }
124 } 157 }
125 </style> 158 </style>
126 </head> 159 </head>
127 <body> 160 <body>
128 <style> 161 <style>