diff --git a/app/routes.py b/app/routes.py
index 6b3a41f..ab4db8e 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -158,6 +158,21 @@ async def contact(request: Request):
return templates.TemplateResponse("contact.html", {"request": request})
+@ui_router.get("/privacy", response_class=HTMLResponse)
+async def privacy(request: Request):
+ return templates.TemplateResponse("privacy.html", {"request": request})
+
+
+@ui_router.get("/terms", response_class=HTMLResponse)
+async def terms(request: Request):
+ return templates.TemplateResponse("terms.html", {"request": request})
+
+
+@ui_router.get("/faq", response_class=HTMLResponse)
+async def faq(request: Request):
+ return templates.TemplateResponse("faq.html", {"request": request})
+
+
@ui_router.get("/history", response_class=HTMLResponse)
async def recent_urls(request: Request):
recent_urls_list = db.get_recent_urls(MAX_RECENT_URLS) or get_recent_from_cache(
diff --git a/app/static/css/tiny.css b/app/static/css/tiny.css
index d940fba..5b8eae8 100644
--- a/app/static/css/tiny.css
+++ b/app/static/css/tiny.css
@@ -39,27 +39,21 @@ body.light-theme {
}
.container {
- display: grid;
- grid-template-rows: auto 1fr auto;
- min-height: 100vh;
-}
-
-.main-layout {
- max-width: 870px;
- margin: 0 auto;
- padding: 6rem 1rem 4rem;
display: flex;
flex-direction: column;
- gap: 2rem;
- flex: 1;
+ min-height: 100vh;
}
.main-layout {
- width: 90%;
- margin: 2rem auto;
+ max-width: 1100px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 2rem 1rem 3rem;
display: flex;
flex-direction: column;
gap: 1rem;
+ flex: 1;
+ /*justify-content: center;*/
}
.app-header {
@@ -104,6 +98,7 @@ body.light-theme .app-header {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
+ text-decoration: none !important;
}
.header-nav {
@@ -201,31 +196,9 @@ body.dark-theme .app-header {
.app-name {
font-size: 1.1rem;
- }
-}
-
-@media (max-width: 700px) {
- .hamburger {
- display: block;
- }
-
- .header-nav {
- display: none;
- position: fixed;
- top: 55px;
- left: 0;
- right: 0;
- width: 100%;
- flex-direction: column;
- background: var(--bg);
- padding: 20px;
- display: none;
- gap: 16px;
- border-bottom: 1px solid var(--glass-border);
- }
-
- .header-nav.open {
- display: flex;
+ & a {
+ text-decoration: none !important;
+ }
}
}
@@ -259,7 +232,7 @@ body.dark-theme .app-header {
.input-wrapper {
display: flex;
gap: 1rem;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
}
.input-wrapper input {
@@ -268,8 +241,8 @@ body.dark-theme .app-header {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
border-radius: 1.5rem;
- padding: 1rem;
- font-size: 2rem;
+ padding: 0.75rem 1rem;
+ font-size: 1rem;
color: var(--text-primary);
}
@@ -392,7 +365,7 @@ body.dark-theme .app-header {
.recent-header {
display: flex;
justify-content: space-between;
- margin-bottom: 1rem;
+ margin-bottom: 0.4rem;
padding: 0 0.5rem;
align-items: center;
}
@@ -401,7 +374,7 @@ body.dark-theme .app-header {
display: flex;
gap: 1rem;
overflow-x: auto;
- padding: 1rem 16px;
+ padding: 0.4rem 16px 1rem;
scroll-padding-right: 16px;
box-sizing: border-box;
}
@@ -442,21 +415,6 @@ body.dark-theme .app-header {
font-weight: 700;
}
-@media (max-width: 768px) {
- .input-wrapper {
- flex-direction: column;
- }
-
- .btn-primary {
- width: 100%;
- }
-
- .scroll-container {
- padding-left: 12px;
- padding-right: 12px;
- }
-}
-
/* ===============================
MODERN GLASS RECENT TABLE
================================= */
@@ -637,24 +595,6 @@ body.dark-theme .app-header {
border-bottom: 1px solid var(--glass-border);
}
-@media (max-width: 1024px) {
- .recent-page-container {
- padding: 0 18px;
- }
-}
-
-@media (max-width: 768px) {
- .recent-page-container {
- padding: 0 12px;
- }
-}
-
-@media (max-width: 480px) {
- .recent-page-container {
- padding: 0 8px;
- }
-}
-
/* Footer */
footer.big-footer {
background: var(--bg);
@@ -759,48 +699,6 @@ body.dark-theme .footer-bottom a {
color: #a5f3fc;
}
-/* Responsive adjustments */
-@media (max-width: 900px) {
- .footer-grid {
- grid-template-columns: 1fr 1fr;
- }
-}
-
-@media (max-width: 700px) {
- .result-card {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .result-actions {
- align-items: flex-start;
- }
-
- .recent-item {
- min-width: 180px;
- }
-}
-
-@media (max-width: 600px) {
- .hero-input-card h1 {
- font-size: 2rem;
- }
-
- .short-url a {
- font-size: 1.2rem;
- }
-
- .footer-grid {
- grid-template-columns: 1fr;
- }
-
- .footer-bottom {
- flex-direction: column;
- gap: 1rem;
- text-align: center;
- }
-}
-
.recent-tray .recent-item .original-url {
max-width: 350px;
min-width: 0;
@@ -853,9 +751,196 @@ body.light-theme .history-link {
border-radius: 1rem;
padding: 2rem;
list-style-type: none;
+
& li {
margin-bottom: 1rem;
font-size: 1.1rem;
color: var(--text-primary);
}
}
+
+/*mobile responsive section */
+
+/*tablet version */
+@media (max-width: 1024px) {
+ .recent-page-container {
+ padding: 0 18px;
+ }
+}
+
+/* Mobile (MAIN BREAKPOINT — 700px) */
+@media (max-width: 700px) {
+ /* header */
+ .hamburger {
+ display: block;
+ }
+
+ .header-nav {
+ display: none;
+ position: fixed;
+ top: 55px;
+ left: 0;
+ right: 0;
+ flex-direction: column;
+ background: var(--bg);
+ padding: 20px;
+ gap: 16px;
+ border-bottom: 1px solid var(--glass-border);
+ }
+
+ .header-nav.open {
+ display: flex;
+ }
+
+ /* layout */
+ .main-layout {
+ padding: 0.6rem;
+ }
+
+ .page {
+ padding: 0 0.5rem;
+ }
+
+ /* FIX HERO */
+ .hero {
+ margin: 0 0 10px;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 1.2rem !important;
+ line-height: 1.3;
+ margin: 0;
+ }
+
+ .hero-input-card {
+ padding: 1rem;
+ }
+
+ .hero-input-card h1 {
+ font-size: 1.2rem;
+ }
+
+ /* input */
+ .input-wrapper {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .input-wrapper input {
+ font-size: 0.9rem;
+ padding: 0.6rem;
+ }
+
+ .btn-primary {
+ width: 100%;
+ font-size: 0.9rem;
+ padding: 0.6rem;
+ }
+
+ /* result */
+ .result-card {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
+ padding: 1rem;
+ }
+
+ .result-content {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ width: 100%;
+ }
+
+ .qr-image {
+ width: 60px;
+ height: 60px;
+ }
+
+ .short-url a {
+ font-size: 1rem;
+ word-break: break-all;
+ }
+
+ .result-actions {
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .btn-copy {
+ flex: 1;
+ text-align: center;
+ padding: 0.6rem;
+ font-size: 0.85rem;
+ }
+
+ .download-link {
+ font-size: 0.75rem;
+ }
+
+ /* recent */
+ .recent-header {
+ font-size: 0.85rem;
+ margin-bottom: 0.2rem;
+ }
+
+ .recent-header h3 {
+ font-size: 0.9rem;
+ }
+
+ .history-link {
+ font-size: 0.8rem;
+ }
+
+ .recent-item {
+ min-width: 180px;
+ }
+
+ .scroll-container {
+ padding-top: 0.2rem;
+ }
+
+ /* footer */
+ footer.big-footer {
+ padding: 1.5rem 0.8rem 1rem;
+ }
+
+ .footer-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .footer-bottom {
+ flex-direction: column;
+ text-align: center;
+ }
+}
+
+/*Small mobile (optional)*/
+@media (max-width: 480px) {
+ .recent-page-container {
+ padding: 0 8px;
+ }
+}
+
+details summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 1rem;
+ font-weight: 600;
+ border-bottom: 1px solid #e2e8f0;
+}
+
+details[open] summary {
+ color: #2563eb;
+ /* Primary brand color */
+}
+
+.faq-answer {
+ padding: 1rem;
+ line-height: 1.6;
+ color: #4b5563;
+}
diff --git a/app/templates/faq.html b/app/templates/faq.html
new file mode 100644
index 0000000..b1d21f0
--- /dev/null
+++ b/app/templates/faq.html
@@ -0,0 +1,55 @@
+{% extends "layout.html" %}
+{% block title %}Frequently Asked Questions{% endblock %}
+{% block content %}
+Frequently Asked Questions
+
+ How long do the shortened links last?
+ Are the generated QR codes high-resolution?
+ Can I track the performance of my links?
+ Is there a limit to how many links I can shorten?
+