Update static/style.css

static/style.css

@@ -1,277 +1,296 @@
-  body{
-        background-color:  #faf9f6;
-        margin: 0;
-    }
-
-   .logo {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-   }
-
-    .logo h1{
-        margin: 30px;
-        font-size: 30px;
-        font-weight: bold;
-        color: black;
-        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        margin-bottom: -5px;
-        
-    }
-
-    .logo p{
-        margin: 30px;
-        margin-top: 5px;
-        font-size: 15px;
-        font-weight: bold;
-        color: black;
-        font-family: 'Lucidia Sans', sans-serif;
-    }
-    
-.upload-container h3{
-    color: black;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
-.upload-container {
-    text-align: center;
-    padding: 10px;
-    background-color: white;
-    border-radius: 100px;
-    margin: 10px;
-}
-
-.upload-container input[type="file"] {
-    color: black;
-    text-align: center;
-}
-
-.upload-container button {
-    padding: 10px 20px;
-    border: none;
-    border-radius: 25px;
-    background: skyblue;
-    cursor: pointer;
-    font-weight: bold;
-    transition: 0.3s;
-    text-align: center;
-}
-
-.upload-container button:hover {
-    background: white;
-    text-align: center;
-    color: black;
-}
-
-.upload-container h2{
-    text-align: center;
-    color: skyblue;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    font-weight: bold;
-}
-
-.navbar{
-    margin: 0;
-    padding: 15px 40px;
-    background-color: #DCDCDC;
-}
-
-.navbar ul{
-    margin: 0;
-    display: flex;
-    padding: 0;
-}
-
-.navbar ul {
-    list-style-type: none;
-}
-
-.navbar a{
-    text-decoration: none;
-    display: flex;
-    padding: 15px;
-    color: black;
-    font-weight: bold;
-
-}
-
-.container {
-    background-color: white;
-    padding: 30px;
-    margin: 50px auto;
-    width: 60%;
-    align-items: center;
-    display: flex;
-    flex-direction: center;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-    justify-content: center;
-    border-radius: 50px;
-}
-
-.container h1{
-    padding: 5px;
-    margin: 5px;
-    align-items: center;
-    display: flex;
-    justify-content: cneter;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    font-weight: bold;
-    text-align: center;
-}
-
-.container ul{
-    list-style-type: none;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.vision {
-    background-color: white;
-    border-radius: 25px;
-    padding: 30px; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 60%; 
-    margin: 50px auto;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
-}
-
-.vision p {
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
-
-.splash-screen {
-    background-color: white;
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999; 
-    position: fixed;
-    top: 0;
-    left: 0;
-}
-
-.splash-screen h1{
-    color: black;
-    font-size: 2.5rem;
-    margin: 0;
-    justify-content: center;
-    display: flex;
-    font-family: sans-serif;
-}
-
-.splash-screen p{
-    color: black;
-    font-size: 1rem;
-    margin-top: 10px; 
-    justify-content: center;
-    display: flex;
-    gap: 4px;
-    font-family: 'Times New Roman', Times, serif;
-}
-
-.splash-screen p1{
-    color: blue;
-    gap: 2px;
-    justify-content: center;
-    text-align: center;
-    font-family: 'Times New Roman', Times, serif;
-}
-
-footer{
-    color: grey;
-    text-align: center;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-}
-
-.consent-box {
-    margin: 15px 0;
-    padding: 12px;
-    background: white; 
-    border: 1px solid #333;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    color: black;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-}
-
-.consetn-box input{
-    margin-top: 3px;
-    cursor: pointer;
-}
-
-#scan-btn:disabled{
-    background-color: #444;
-    color: #888;
-    opacity: 0.5;
-    cursor: not allowed;
-}
-
-
-.consent-box a{
-    text-decoration: none;
-    color: darkblue;
-    cursor: pointer;
-}
-
-.report-section {
-    background-color: white;
-    width: 350px;
-    padding: 25px;
-    border-radius: 20px;
-    box-shadow: 0 10px 50px rgba(0,0,0,0.3);
-
-    margin: 50px auto;   
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-
-.report h3{
-    color: black;
-    font-family: Georgia, 'Times New Roman', Times, serif;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-}
-
-.report textarea{
-    border: 2px solid grey;
-    text-decoration: none;
-}
-
-.report button{
-     padding: 10px 20px;
-    border: none;
-    border-radius: 25px;
-    background: skyblue;
-    cursor: pointer;
-    font-weight: bold;
-    transition: 0.3s;
-    text-align: center;
-}
-
-.bar{
-    width: 100%;
-    height: 10px;
-    max-width: 300px;
-    background-color: #ddd;
-    border-radius: 10px;
-
-}
-
-.fill{
-    height: 100%;
-    width: 0;
-    background: red;
-    border-radius: 10px;
-}
-
-.dot{
-    color: red;
-}
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    --bg: #111018;
+    --panel: rgba(255, 255, 255, 0.08);
+    --panel-border: rgba(255, 255, 255, 0.14);
+    --text: #f5f2ff;
+    --muted: #cfc8dd;
+    --accent: #77d4ff;
+    --accent-dark: #58bde9;
+    --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text);
+    background:
+        linear-gradient(rgba(10, 8, 20, 0.72), rgba(10, 8, 20, 0.82)),
+        url("pawel-czerwinski-1A_dO4TFKgM-unsplash.jpg") center/cover no-repeat fixed;
+}
+
+.navbar {
+    width: min(1180px, calc(100% - 32px));
+    margin: 20px auto 0;
+    padding: 16px 22px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--panel-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+    box-shadow: var(--shadow);
+}
+
+.nav-brand {
+    font-size: 1.4rem;
+    font-weight: 800;
+}
+
+.nav-brand span {
+    color: #ff77c8;
+}
+
+.navbar ul {
+    display: flex;
+    gap: 18px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.navbar a {
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.page {
+    width: min(1180px, calc(100% - 32px));
+    margin: 28px auto 36px;
+}
+
+.hero {
+    margin-bottom: 24px;
+}
+
+.hero-text {
+    max-width: 720px;
+}
+
+.brand-tag {
+    margin: 0 0 10px;
+    color: var(--accent);
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+}
+
+.hero h1 {
+    margin: 0;
+    font-size: clamp(2.5rem, 5vw, 4.5rem);
+    line-height: 1.02;
+}
+
+.subtitle {
+    margin: 10px 0;
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--muted);
+}
+
+.description {
+    margin: 0;
+    max-width: 60ch;
+    line-height: 1.7;
+    color: #ece7f8;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    margin-bottom: 22px;
+}
+
+.card,
+.upload-card,
+.report-card {
+    background: var(--panel);
+    border: 1px solid var(--panel-border);
+    border-radius: 24px;
+    padding: 24px;
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(12px);
+}
+
+.card h2,
+.upload-card h2,
+.report-card h2 {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.card p,
+.report-card p {
+    color: var(--muted);
+    line-height: 1.7;
+}
+
+.steps {
+    margin: 0;
+    padding-left: 20px;
+    color: var(--muted);
+    line-height: 1.9;
+    font-weight: 600;
+}
+
+.upload-card {
+    margin-bottom: 22px;
+}
+
+.file-row {
+    margin-bottom: 16px;
+}
+
+input[type="file"] {
+    width: 100%;
+    padding: 14px;
+    border-radius: 14px;
+    border: 1px dashed rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text);
+}
+
+#preview {
+    display: none;
+    width: 100%;
+    max-height: 320px;
+    object-fit: contain;
+    margin: 8px 0 18px;
+    border-radius: 18px;
+}
+
+.consent-box {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 16px;
+    margin-bottom: 18px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--muted);
+    line-height: 1.6;
+}
+
+.consent-box a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+#scan-btn,
+#reportButton {
+    border: none;
+    border-radius: 999px;
+    background: var(--accent);
+    color: #071119;
+    font-weight: 800;
+    padding: 14px 24px;
+    cursor: pointer;
+    transition: 0.2s ease;
+}
+
+#scan-btn:hover,
+#reportButton:hover {
+    background: var(--accent-dark);
+}
+
+#scan-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+#result {
+    margin-top: 20px;
+    min-height: 72px;
+    padding: 16px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text);
+}
+
+.report-card textarea {
+    width: 100%;
+    min-height: 140px;
+    padding: 14px;
+    border-radius: 16px;
+    margin-bottom: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text);
+    resize: vertical;
+}
+
+.footer {
+    width: min(1180px, calc(100% - 32px));
+    margin: 0 auto 28px;
+    text-align: center;
+    color: var(--muted);
+    line-height: 1.7;
+}
+
+.footer p {
+    margin: 5px 0;
+}
+
+.splash-screen {
+    position: fixed;
+    inset: 0;
+    background: #0a0814;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.splash-screen h1 {
+    margin: 0;
+    font-size: 3rem;
+}
+
+.splash-screen p {
+    margin-top: 10px;
+    color: var(--muted);
+}
+
+.splash-screen span {
+    color: var(--accent);
+    font-weight: 700;
+}
+
+@media (max-width: 860px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+@media (max-width: 640px) {
+    .navbar,
+    .page,
+    .footer {
+        width: min(100% - 20px, 100%);
+    }
+
+    .hero h1 {
+        font-size: 2.4rem;
+    }
+
+    .card,
+    .upload-card,
+    .report-card {
+        padding: 18px;
+    }
+}