Merge branch 'main' into bugfix/RTY-260013

Author: recursivezero

README.md

@@ -1,33 +1,22 @@
 # Tiny URL Generator
 
-> A modern, Bitly-style tiny URL web application built with FastAPI, optional MongoDB, and a sleek web UI.
+> A modern, Bitly-style tiny URL web application built with FastAPI & MongoDB
 
-![Python](https://img.shields.io/badge/Python-3.11-blue.svg)
-![FastAPI](https://img.shields.io/badge/FastAPI-Backend-teal.svg)
-![MongoDB](<https://img.shields.io/badge/Database-MongoDB%20(Optional)-green.svg>)
+![Python](https://img.shields.io/badge/Python-3.10-blue.svg)
+![MongoDB](https://img.shields.io/badge/Database-MongoDB-green.svg)
 ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 ![Status](https://img.shields.io/badge/Status-Active-success.svg)
 
 ---
 
 ## Overview
 
-Tiny URL is a sleek, fast, and modern URL shortening platform built using FastAPI with optional MongoDB persistence.
+**tiny URL** is a sleek, fast, and modern URL shortening platform built using **FastAPI**, and **MongoDB**.  
 It converts long URLs into short, shareable links — just like Bitly.
 
 The project supports:
 
-- Web UI (FastAPI + Jinja templates)
-- REST API (FastAPI)
-- Offline Mode (No MongoDB required)
-
-This project is designed with:
-
-- Clean startup lifecycle (no racing configs)
-- Optional database dependency
-- Graceful degradation when MongoDB is unavailable
-
-- QR code generation with auto folder creation
+- 🚀 **FastAPI REST API** (developers / integrations)
 
 ---
 
@@ -40,12 +29,13 @@ This project is designed with:
 - Clean Bitly-style result card
 - Copy & share buttons
 - Download URL button
-- URL validation and sanitization
-- Fully responsive UI
-- Recent URLs page (when DB is available)
-- Visit count tracking (when DB is available)
-- QR image auto-generation with logo
-- Cache-accelerated redirects
+- Share URL
+- Copy button with animation
+- Smooth URL validation and sanitization
+- Auto Dark/Light Mode (saves preference)
+- Mobile-friendly QR Codes
+- Fully responsive design
+- Recent URLs page
 
 ### API & Developer Features
 
@@ -84,7 +74,15 @@ def generate_code(length=6):
 
 ---
 
-## Tech Stack
+| Layer       | Technology            |
+| ----------- | --------------------- |
+| API Backend | FastAPI               |
+| Database    | MongoDB               |
+| Frontend    | HTML, CSS, Vanilla JS |
+| API Server  | Uvicorn               |
+| Validation  | Pydantic v2           |
+| CLI         | Click                 |
+| Data        | JSON                  |
 
 | Layer       | Technology            |
 | ----------- | --------------------- |
@@ -336,16 +334,15 @@ poetry run uvicorn app.main:app --reload
 
 Screenshots:
 Home Page:
-![home page](app/assets/images/home.png)
-![home dark mode](app/assets/images/home_dark.png)
-![home page](app/assets/images/valid.png)
-![home layout](app/assets/images/short_url.png)
-![recent](app/assets/images/recent.png)
+![home page](./assets/images/home.png)
+![home dark mode](./assets/images/home_dark.png)
+![home page](./assets/images/valid.png)
+![home layout](./assets/images/short_url.png)
+![recent](./assets/images/recent.png)
 tiny API Page:
-![API](app/assets/images/API_page.png)
-![API1](app/assets/images/api_page2.png)
-No DB Mode:
-![NO DB](app/assets/images/no-db.png)
+![API](./assets/images/API_page.png)
+![API1](./assets/images/api_page2.png)
+
 📜License
 
 [MIT](LICENSE)

app/static/qr/zSDrr0.png

@@ -39,7 +39,6 @@ button {
   font-weight: 600;
 }
 
-
 .dark-theme h1 {
   background: linear-gradient(90deg, #ffffff, #dddddd, #ffffff);
   -webkit-background-clip: text;
@@ -100,10 +99,8 @@ button {
 
 .input-field input {
   color: #000 !important;
-
 }
 
-
 .dark-theme .input-field input {
   color: #fff !important;
 }
@@ -119,7 +116,6 @@ button {
   transition: background-color 9999s ease-in-out 0s;
 }
 
-
 .input-field input:-webkit-autofill {
   -webkit-text-fill-color: #000 !important;
 }
@@ -156,7 +152,6 @@ button {
   background: linear-gradient(180deg, #0b1220, #050b14);
 }
 
-
 footer {
   margin-top: 0;
 }
@@ -267,7 +262,6 @@ body.dark-theme {
   --muted: #9aa7a6;
 }
 
-
 .page {
   flex: 1;
   display: flex;
@@ -276,10 +270,8 @@ body.dark-theme {
   gap: 1rem;
   padding: 2rem;
   min-height: 80vh;
-
 }
 
-
 .theme-toggle {
   background: transparent;
   border: none;
@@ -374,7 +366,7 @@ body.dark-theme {
 }
 
 .short-actions {
-  display:flex;
+  display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
@@ -383,7 +375,6 @@ body.dark-theme {
   background: linear-gradient(180deg, rgba(75, 194, 176, 0.06), rgba(94, 207, 255, 0.04));
 }
 
-
 .short-box input {
   align-items: center;
   padding: 10px;
@@ -436,12 +427,12 @@ body.dark-theme {
 }
 
 .qr-block img {
-  width: 160px;
-  height: 160px;
+  height: 15rem;
   align-items: center;
-  border-radius: 12px;
+  aspect-ratio: 1;
   box-shadow: 0 10px 20px rgba(10, 20, 30, 0.06);
-  background: #fff;
+  outline: 2px solid green;
+  outline-offset: 4px;
 }
 
 .download-qr {
@@ -502,16 +493,15 @@ body.dark-theme {
 }
 
 footer {
-  min-height: auto; 
+  min-height: auto;
 }
 
 .app-footer {
   background: white;
   color: #e5e7eb;
   padding: 8px 10px;
-  margin-top: auto; 
+  margin-top: auto;
   position: relative;
-  
 }
 .dark-theme .app-footer {
   background: linear-gradient(180deg, #0b1220, #050b14);
@@ -525,8 +515,6 @@ footer {
   flex-wrap: wrap;
 }
 
-
-
 .footer-brand {
   max-width: 420px;
 }
@@ -590,7 +578,6 @@ footer {
   transform: translateY(-2px);
 }
 
-
 .footer-links {
   display: flex;
   gap: 80px;
@@ -614,7 +601,7 @@ footer {
 }
 
 .footer-col a:hover {
-text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* Bottom */
@@ -658,7 +645,6 @@ footer {
   overflow-x: auto;
 }
 
-
 .recent-table {
   width: 100%;
   border-collapse: collapse;
@@ -669,7 +655,7 @@ footer {
 .recent-table thead {
   background: rgb(0, 0, 0);
 }
-.recent-table th{
+.recent-table th {
   color: rgb(0, 0, 0);
   padding: 8px 14px;
   text-align: left;
@@ -726,7 +712,6 @@ td {
   font-weight: 700;
 }
 
-
 .original-url {
   color: #22c55e;
   word-break: break-all;
@@ -823,9 +808,8 @@ td {
 }
 .info-box {
   margin-bottom: 15px;
-    padding: 10px;
-    color: #0e34f6;
-    border-radius: 8px;
-    font-weight: 700;
-    
-  }
+  padding: 10px;
+  color: #0e34f6;
+  border-radius: 8px;
+  font-weight: 700;
+}