Delete static/styles.css

static/styles.css

@@ -1,320 +0,0 @@
-/* General Reset */
-* {
-    margin: 0;
-    padding: 10px 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f8f8f8;
-    color: #333;
-    margin: 0;
-    display: flex;
-    justify-content: center; /* Center horizontally */
-    align-items: flex-start; /* Align to the top */
-    min-height: 100vh;
-    overflow-y: auto; /* Allow scrolling when content overflows */
-}
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center; /* Center horizontally */
-    justify-content: flex-start; /* Align to the top */
-    width: 100%;
-    max-width: 1000px;
-    padding: 20px;
-    /* margin: 20px 20px; */ /* Add vertical margin */
-    box-sizing: border-box;
-}
-
-/* Title */
-.title {
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #333;
-    text-align: center;
-    width: 100%;
-}
-
-/* Key Input and Get Key Button */
-.key-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    /* margin-bottom: 20px; */
-}
-
-.key-input {
-    width: 300px;
-    padding: 10px;
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    font-size: 1rem;
-    text-align: center;
-}
-
-.get-key-btn {
-    padding: 10px 20px;
-    background-color: #28a745;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.get-key-btn:hover {
-    background-color: #218838;
-}
-
-/* Form Layout */
-form {
-    width: 100%;
-}
-
-.input-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 20px;
-    width: 100%;
-}
-
-/* Drag and Drop Box */
-.drag-drop-box {
-    border: 2px dashed #aaa;
-    border-radius: 10px;
-    width: 300px;
-    height: 400px;
-    position: relative;
-    background-color: #f9f9f9;
-    overflow: hidden;
-    cursor: pointer;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.drag-drop-box p {
-    position: absolute;
-    margin: 0;
-    color: #666;
-    pointer-events: none;
-    text-align: center;
-    width: 80%;
-}
-
-.drag-drop-box input[type="file"] {
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-}
-
-.drag-drop-box.drag-over {
-    background-color: #e8f4ff;
-    border-color: #007bff;
-}
-
-/* Image Preview */
-.preview {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    position: absolute;
-    border-radius: 5px;
-}
-
-/* Output Container */
-.output-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    width: 300px;
-}
-
-.output-box {
-    border: 2px solid #ccc;
-    border-radius: 10px;
-    width: 300px;
-    height: 400px;
-    background-color: #fff;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.output-box img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    border-radius: 5px;
-}
-
-/* Generate Button */
-.generate-btn {
-    width: 100%;
-    padding: 10px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.generate-btn:hover {
-    background-color: #0056b3;
-}
-
-/* Popup Styles */
-.popup {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0,0,0,0.5);
-}
-
-.popup-content {
-    background-color: #fff;
-    margin: 10% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 90%;
-    max-width: 400px;
-    text-align: center;
-    position: relative;
-    border-radius: 10px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center; /* Center content horizontally */
-    justify-content: center; /* Center content vertically (optional) */
-}
-
-.close-btn {
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    color: #aaa;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.close-btn:hover,
-.close-btn:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.popup-input {
-    width: 80%;
-    padding: 10px;
-    margin-top: 15px;
-    margin-bottom: 15px;
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    font-size: 1rem;
-}
-
-.submit-btn {
-    padding: 10px 20px;
-    background-color: #28a745;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.submit-btn:hover {
-    background-color: #218838;
-}
-.remove-btn {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    background-color: gray;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    font-size: 16px;
-    cursor: pointer;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.box-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;      /* Ensure full width on smaller screens */
-    max-width: 300px; /* Limit the maximum width for better proportions */
-    min-width: 250px; /* Prevent boxes from becoming too narrow */
-    margin: 10px auto; /* Center the box and add spacing */
-}
-
-
-
-.image-container {
-    display: flex;
-    flex-direction: row;  /* Force row layout on desktop */
-    justify-content: center;
-    border: 2px solid #aaa;
-  /* padding: 10px; */
-    border-radius: 10px;
-    gap: 10px;
-    max-width: 100%;
-    margin: 10px;
-}
-
-.image-container img {
-    width: 30%;  /* Each image takes 30% of the container width */
-    height: auto;
-    box-sizing: border-box;
-}
-
-@media (max-width: 768px) {
-    .image-container {
-        flex-direction: column;  /* Stack images vertically on mobile */
-        align-items: center;
-    }
-
-    .image-container img {
-        width: 100%;  /* Full width for each image on mobile */
-    }
-}
-
-
-
-
-
-/* Responsive Layout */
-@media (max-width: 768px) {
-    .input-container {
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-    }
-
-    .drag-drop-box,
-    .output-box {
-        width: 100%;
-    }
-}