diff --git a/public/css/app.css b/public/css/app.css new file mode 100644 index 0000000..2054426 --- /dev/null +++ b/public/css/app.css @@ -0,0 +1,137 @@ +* { + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + line-height: 1.6; + color: #222; + background: #fafafa; + margin: 0; + padding: 0; +} + +.page { + max-width: 600px; + margin: 0 auto; + padding: 2rem; +} + +.page-center { + text-align: center; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #444; +} + +.page-center h1 { + margin-bottom: 0.5rem; +} + +p { + font-size: 1.1rem; + color: #666; +} + +.form-group { + margin-bottom: 1.5rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + color: #444; + font-weight: 500; +} + +input[type="url"] { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + border: 1px solid #ddd; + border-radius: 4px; +} + +input[type="url"]:focus { + outline: none; + border-color: #444; +} + +button { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + background-color: #444; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: 500; +} + +button:hover { + background-color: #333; +} + +button:disabled { + background-color: #999; + cursor: not-allowed; +} + +.result { + margin-top: 2rem; + padding: 1rem; + border-radius: 4px; + display: none; +} + +.result.success { + background-color: #e8f5e9; + border: 1px solid #4caf50; + color: #2e7d32; +} + +.result.error { + background-color: #ffebee; + border: 1px solid #f44336; + color: #c62828; +} + +.result.show { + display: block; +} + +.short-url { + word-break: break-all; + font-weight: 500; + margin-top: 0.5rem; +} + +.short-url a { + color: #2e7d32; + text-decoration: none; +} + +.short-url a:hover { + text-decoration: underline; +} + +.error-message { + margin-top: 0.5rem; +} + +.link-home { + display: inline-block; + margin-top: 1.5rem; + color: #444; + text-decoration: none; + border-bottom: 1px solid #444; +} + +.link-home:hover { + color: #333; + border-color: #333; +}