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? +
+
+ Our links are permanent by default. However, you can set custom expiration dates via the advanced settings + dashboard if you need temporary redirection for seasonal campaigns. +
+
+
+
+ +
+
+ Are the generated QR codes high-resolution? +
+
+ Yes. All QR codes are generated as vector-compatible PNGs or SVGs, ensuring they remain crisp when printed on + everything from business cards to large-scale billboards. +
+
+
+
+ +
+
+ Can I track the performance of my links? +
+
+ Absolutely. Every shortened link includes real-time analytics tracking, providing data on click counts, + geographic location, and referring devices. +
+
+
+
+ +
+
+ Is there a limit to how many links I can shorten? +
+
+ Free users can shorten up to 100 links per month. For higher volume requirements and API access, please refer + to our developer documentation or enterprise plans. +
+
+
+
+
+{% endblock %} \ No newline at end of file diff --git a/app/templates/footer.html b/app/templates/footer.html index 30c8b6a..e39e92f 100644 --- a/app/templates/footer.html +++ b/app/templates/footer.html @@ -14,7 +14,7 @@

Product