templates.rs
1 use axum::response::Html; 2 3 pub async fn accept_item_page() -> Html<&'static str> { 4 Html( 5 r#" 6 <!doctype html> 7 <html> 8 <head> 9 <title>Upload something!</title> 10 <style> 11 body { 12 background-color: #121212; 13 color: #e0e0e0; 14 font-family: 'Roboto', sans-serif; 15 margin: 0; 16 padding: 0; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 height: 100vh; 21 } 22 form { 23 background-color: #1e1e1e; 24 padding: 2rem; 25 border-radius: 4px; 26 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 27 border: 1px solid #333; 28 max-width: 400px; 29 width: 100%; 30 text-align: center; 31 } 32 div { 33 margin-bottom: 1.5rem; 34 } 35 label { 36 display: block; 37 margin-bottom: 0.5rem; 38 font-size: 0.9rem; 39 letter-spacing: 0.5px; 40 } 41 input[type="file"] { 42 background-color: #2a2a2a; 43 border: 1px solid #444; 44 padding: 0.5rem; 45 width: 100%; 46 border-radius: 2px; 47 color: #e0e0e0; 48 } 49 input[type=file]::file-selector-button { 50 background-color: #2a2a2a; 51 color: #e0e0e0; 52 border: 1px solid #444; 53 padding: 0.6rem 1rem; 54 border-radius: 2px; 55 cursor: pointer; 56 margin-right: 1rem; 57 font-size: 0.85rem; 58 text-transform: uppercase; 59 letter-spacing: 0.5px; 60 transition: background-color 0.2s, border-color 0.2s; 61 } 62 input[type=file]::file-selector-button:hover { 63 background-color: #444; 64 border-color: #555; 65 } 66 input[type="submit"] { 67 background-color: #2a2a2a; 68 color: #e0e0e0; 69 border: none; 70 padding: 0.7rem 1.5rem; 71 border-radius: 2px; 72 cursor: pointer; 73 text-transform: uppercase; 74 font-size: 0.85rem; 75 letter-spacing: 1px; 76 transition: background-color 0.2s; 77 text-decoration: none; 78 display: inline-block; 79 } 80 input[type="submit"]:hover { 81 background-color: #444; 82 } 83 a { 84 color: #e0e0e0; 85 text-decoration: none; 86 font-size: 0.85rem; 87 position: relative; 88 transition: color 0.2s; 89 display: inline-block; 90 padding: 0.2rem 0; 91 } 92 a:after { 93 content: ''; 94 position: absolute; 95 width: 100%; 96 height: 1px; 97 bottom: 0; 98 left: 0; 99 background-color: #aaa; 100 transform: scaleX(0); 101 transition: transform 0.2s; 102 } 103 a:hover { 104 color: #ffffff; 105 } 106 a:hover:after { 107 transform: scaleX(1); 108 } 109 </style> 110 </head> 111 <body> 112 <form action="/" method="post" enctype="multipart/form-data"> 113 <div> 114 <label> 115 <input type="file" name="file" multiple> 116 </label> 117 </div> 118 <div> 119 <input type="submit" value="Upload files"> 120 </div> 121 <div> 122 <a href="/files">Open Uploaded Files</a> 123 </div> 124 </form> 125 </body> 126 </html> 127 "#, 128 ) 129 } 130 131 pub async fn feedback_page() -> Html<&'static str> { 132 Html( 133 r#" 134 <!doctype html> 135 <html> 136 <head> 137 <title>Upload Successful</title> 138 <style> 139 body { 140 background-color: #121212; 141 color: #e0e0e0; 142 font-family: 'Roboto', sans-serif; 143 margin: 0; 144 padding: 0; 145 display: flex; 146 justify-content: center; 147 align-items: center; 148 height: 100vh; 149 } 150 .container { 151 background-color: #1e1e1e; 152 padding: 2rem; 153 border-radius: 4px; 154 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 155 border: 1px solid #333; 156 max-width: 400px; 157 width: 100%; 158 text-align: center; 159 } 160 p { 161 margin-bottom: 2rem; 162 opacity: 0.8; 163 } 164 .primary { 165 background-color: #2a2a2a; 166 color: #e0e0e0; 167 border: none; 168 padding: 0.7rem 1.5rem; 169 border-radius: 2px; 170 cursor: pointer; 171 text-transform: uppercase; 172 font-size: 0.85rem; 173 letter-spacing: 1px; 174 transition: background-color 0.2s; 175 text-decoration: none; 176 display: inline-block; 177 margin-right: 1rem; 178 } 179 .primary:hover { 180 background-color: #444; 181 } 182 .secondary { 183 color: #e0e0e0; 184 text-decoration: none; 185 font-size: 0.85rem; 186 position: relative; 187 transition: color 0.2s; 188 display: inline-block; 189 padding: 0.2rem 0; 190 margin-left: 1rem; 191 } 192 .secondary:after { 193 content: ''; 194 position: absolute; 195 width: 100%; 196 height: 1px; 197 bottom: 0; 198 left: 0; 199 background-color: #aaa; 200 transform: scaleX(0); 201 transition: transform 0.2s; 202 } 203 .secondary:hover { 204 color: #ffffff; 205 } 206 .secondary:hover:after { 207 transform: scaleX(1); 208 } 209 210 .action-container { 211 display: flex; 212 justify-content: center; 213 align-items: center; 214 } 215 </style> 216 </head> 217 <body> 218 <div class="container"> 219 <p>Your file has been uploaded and processed.</p> 220 <div class="action-container"> 221 <a href="/" class="primary">Back to Upload</a> 222 <a href="/files" class="secondary">Go to Uploaded Files</a> 223 </div> 224 </div> 225 </body> 226 </html> 227 "#, 228 ) 229 } 230 231 pub async fn items_list_page( 232 files_html: String, 233 stats_html: Option<String>, 234 ) -> Html<String> { 235 Html(format!( 236 r#" 237 <!doctype html> 238 <html> 239 <head> 240 <title>Uploaded Files</title> 241 <style> 242 body {{ 243 background-color: #121212; 244 color: #e0e0e0; 245 font-family: 'Roboto', sans-serif; 246 margin: 0; 247 padding: 0; 248 display: flex; 249 justify-content: center; 250 align-items: center; 251 height: 100vh; 252 }} 253 .container {{ 254 background-color: #1e1e1e; 255 padding: 2rem; 256 border-radius: 4px; 257 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 258 border: 1px solid #333; 259 max-width: 600px; 260 width: 100%; 261 }} 262 h1 {{ 263 margin-top: 0; 264 text-align: center; 265 }} 266 .file-list {{ 267 list-style: none; 268 padding: 0; 269 }} 270 .file-list li {{ 271 margin-bottom: 0.5rem; 272 }} 273 .file-list a {{ 274 display: block; 275 padding: 0.7rem; 276 background-color: #2a2a2a; 277 color: #e0e0e0; 278 text-decoration: none; 279 border-radius: 2px; 280 transition: background-color 0.2s; 281 }} 282 .file-list a:hover {{ 283 background-color: #444; 284 }} 285 .primary {{ 286 background-color: #2a2a2a; 287 color: #e0e0e0; 288 border: none; 289 padding: 0.7rem 1.5rem; 290 border-radius: 2px; 291 cursor: pointer; 292 text-transform: uppercase; 293 font-size: 0.85rem; 294 letter-spacing: 1px; 295 transition: background-color 0.2s; 296 text-decoration: none; 297 display: inline-block; 298 margin-top: 1rem; 299 }} 300 .primary:hover {{ 301 background-color: #444; 302 }} 303 .button-container {{ 304 text-align: center; 305 }} 306 .stats {{ 307 text-align: center; 308 margin-top: 1rem; 309 color: #999; 310 }} 311 </style> 312 </head> 313 <body> 314 <div class="container"> 315 <p>Uploaded Files</p> 316 {files_html} 317 {stats} 318 <div class="button-container"> 319 <a href="/" class="primary">Upload more files</a> 320 </div> 321 </div> 322 </body> 323 </html> 324 "#, 325 files_html = files_html, 326 stats = stats_html.unwrap_or_default() 327 )) 328 }