Mercurial

comparison mrjunejune/test/snapshots/tools_file_converter_index.html.snapshot @ 94:092afa595764

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Added Integration tests.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 18:13:32 -0800
parents
children 1c446ab6f945
comparison
equal deleted inserted replaced
93:be91a73d801a 94:092afa595764
1 HTTP/1.1 301 Moved Permanently
2 Content-Type: text/plain
3 Content-Length: 0
4 Connection: close
5 Body:
6
7 reload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
8 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
9
10 <link rel="preload" href="/base.css" as="style" />
11 <link rel="stylesheet" href="/base.css" />
12
13
14 <link rel="stylesheet" href="/tools/index.css" />
15 </head>
16 <body>
17 <style>
18 :root {
19 --header-background: var(--white);
20 --header-color: rgb(var(--black));
21 --link-hover-accent: var(--awesome);
22 }
23
24 /* Fixed icon in top left corner */
25 #themeToggle {
26 position: fixed;
27 top: 20px;
28 left: 20px;
29 background: var(--header-background);
30 display: flex;
31 align-items: center;
32 border-radius: 50%;
33 cursor: pointer;
34 z-index: 1000;
35 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
36 transition: transform 0.2s ease;
37 }
38
39 #themeToggle:hover {
40 transform: scale(1.05);
41 }
42
43 /* Professional header */
44 header {
45 margin: auto;
46 padding: 1.5em 1em;
47 font-family: "More", sans-serif;
48 box-shadow: 0 2px 8px rgba(var(--black), 5%);
49 width: 720px;
50 max-width: calc(100% - 2em);
51 text-align: center;
52 }
53
54 header h1 {
55 margin: 0;
56 font-size: 1.8em;
57 font-weight: 700;
58 letter-spacing: -0.5px;
59 }
60
61 header h1 a {
62 text-decoration: none;
63 color: var(--header-color);
64 }
65
66 header h1 a::before {
67 display: none;
68 }
69
70 /* Mobile responsiveness */
71 @media (max-width: 720px) {
72 #themeToggle {
73 top: 15px;
74 left: 15px;
75 }
76
77 header {
78 padding: 1em;
79 }
80
81 header h1 {
82 font-size: 1.5em;
83 }
84 }
85
86 @media (max-width: 480px) {
87 #themeToggle {
88 top: 10px;
89 left: 10px;
90 }
91
92 #themeToggle img {
93 height: 40px;
94 width: 40px;
95 }
96
97 header h1 {
98 font-size: 1.3em;
99 }
100 }
101
102 #logo {
103 width: 300px;
104 }
105
106 /* 1. DEFINE THE DEFAULTS (Light Mode) */
107 :root {
108 --logo-invert: invert(0);
109 --epi-grayscale: grayscale(0) brightness(1);
110 }
111
112 /* 2. MANUAL DARK OVERRIDE */
113 html.dark {
114 --logo-invert: invert(1);
115 --epi-grayscale: grayscale(1);
116 }
117
118 /* 3. MANUAL LIGHT OVERRIDE */
119 html.light-mode {
120 --logo-invert: invert(0);
121 --epi-grayscale: brightness(2.9) grayscale(1);
122 }
123
124 /* 4. SYSTEM PREFERENCE */
125 @media (prefers-color-scheme: dark) {
126 :root:not(.light-mode) {
127 --logo-invert: invert(1);
128 }
129 }
130
131 /* 5. APPLY TO ELEMENTS */
132 #logo {
133 -webkit-filter: var(--logo-invert);
134 filter: var(--logo-invert);
135 transition: filter 0.3s ease;
136 }
137
138 .epi-logo {
139 -webkit-filter: var(--epi-grayscale);
140 filter: var(--epi-grayscale);
141 transition: filter 0.3s ease;
142 }
143 </style>
144
145 <div id="themeToggle">
146 <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
147 </div>
148
149 <header>
150 <h1><a href="/">MrJuneJune</a></h1>
151 </header>
152 <script src="/index.js"></script>
153
154
155 <main>
156 <h1 class="title"> Tools </h1>
157 <ul class="nav-list">
158 <li><a href="/tools/markdown_to_html">MarkDown to HTML</a></li>
159 <li><a href="/tools/file_converter">Images to Webp / Video to Mp4</a></li>
160 </ul>
161 <h3> TODOs </h3>
162 <p> Probably should add this... </p>
163 <ul class="nav-list">
164 <li>- Simple online LaTex editor.</li>
165 <li>- Online HLS player.</li>
166 </ul>
167 </main>
168 <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;">
169 <small>&copy; 2026 June Park</small>
170 </div>
171
172 </body>
173 </htmlLocation: /tools/file_converter
174