Upload staticstyle.css.txt

staticstyle.css.txt

@@ -0,0 +1,257 @@
+%%writefile ./static/style.css
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #eef2f7; /* Softer background */
+    color: #333;
+    margin: 0;
+    padding: 0; /* Remove body padding */
+    line-height: 1.6;
+}
+
+.gradio-container {
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
+    border-radius: 10px; /* Slightly larger border radius */
+    overflow: hidden;
+    max-width: 700px; /* Max width for better compactness */
+    margin: 40px auto; /* Center the container and add space */
+    background-color: #fff; /* White background for the container */
+    padding: 20px; /* Add padding inside the container */
+}
+
+.app-title h1 {
+    color: #1e3a8a; /* Darker blue */
+    text-align: center;
+    margin-bottom: 15px; /* Reduced margin */
+    font-size: 2em; /* Slightly larger title */
+    font-weight: 700;
+}
+
+.app-title em {
+    display: block; /* Make the subtitle appear on a new line */
+    font-size: 1em;
+    color: #555;
+    margin-top: 5px;
+}
+
+
+.main-row {
+    display: flex;
+    gap: 20px; /* Space between columns */
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+}
+
+.task-column {
+    flex: 1; /* Allow column to grow */
+    min-width: 280px; /* Minimum width for the column */
+}
+
+
+.task-display textarea { /* Target the textarea within the task display */
+    border: 2px solid #1e3a8a; /* Blue border */
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 1.1em;
+    color: #1e3a8a;
+    background-color: #f0f4f8; /* Light blue background */
+    min-height: 80px; /* Set a minimum height */
+    resize: vertical; /* Allow vertical resizing if needed */
+    width: 100%; /* Make it full width */
+    box-sizing: border-box; /* Include padding and border in the element's total width and height */
+}
+
+
+.action-button {
+    background-color: #10b981; /* Green */
+    color: white;
+    border: none;
+    padding: 12px 25px; /* More padding */
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em; /* Standard font size */
+    margin: 5px; /* Reduced margin */
+    cursor: pointer;
+    border-radius: 6px; /* Slightly larger border radius */
+    transition: background-color 0.3s ease;
+    flex-grow: 1; /* Allow buttons in the row to grow */
+}
+
+.action-button:hover {
+    background-color: #059669; /* Darker green */
+}
+
+.reset-button {
+    background-color: #ef4444; /* Red */
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: block; /* Make it a block element to take full width */
+    width: 100%; /* Full width */
+    font-size: 1em;
+    margin: 10px 0; /* Add margin top and bottom */
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background-color 0.3s ease;
+}
+
+.reset-button:hover {
+    background-color: #dc2626; /* Darker red */
+}
+
+
+.completed-tasks-display textarea { /* Style for completed tasks textbox */
+     border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 0.9em;
+    color: #555;
+    background-color: #f9f9f9;
+    min-height: 100px;
+    resize: vertical;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+
+.add-impulse-accordion {
+    margin-top: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.add-impulse-accordion .label { /* Targeting the accordion label */
+    background-color: #f3f4f6; /* Light grey background */
+    padding: 12px;
+    cursor: pointer;
+    font-weight: bold;
+    color: #333;
+    border-bottom: 1px solid #ddd;
+}
+
+
+.new-impulse-input textarea { /* Styling for the input fields */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 10px;
+    width: 100%; /* Full width */
+    box-sizing: border-box;
+}
+
+.add-button {
+    background-color: #3b82f6; /* Blue */
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1em;
+    margin-top: 5px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background-color 0.3s ease;
+}
+
+.add-button:hover {
+    background-color: #2563eb; /* Darker blue */
+}
+
+.add-output textarea { /* Styling for the add output textbox */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px;
+    margin-top: 10px;
+    background-color: #e0f2f7; /* Light blue background */
+    width: 100%;
+    box-sizing: border-box;
+}
+
+
+.evolution-map-row {
+     margin-top: 25px; /* Space above the map section */
+     text-align: center; /* Center the map and title */
+}
+
+.map-title h3 {
+    color: #065f46; /* Green */
+    margin-bottom: 15px;
+}
+
+.progress-map {
+    display: flex;
+    justify-content: center;
+    gap: 12px; /* Increased gap */
+    margin-top: 10px;
+}
+
+.progress-item {
+    width: 35px; /* Slightly larger */
+    height: 35px; /* Slightly larger */
+    border-radius: 50%;
+    background-color: #d1d5db; /* Light grey */
+    transition: background-color 0.3s ease;
+    border: 2px solid #9ca3af; /* Border for visibility */
+}
+
+.progress-item.completed {
+    background-color: #065f46; /* Darker green when completed */
+    border-color: #047857;
+}
+
+
+.quote-row {
+    margin-top: 30px; /* Space above the quote section */
+    text-align: center;
+}
+
+.quote-title h3 {
+    color: #4f46e5; /* Purple */
+    margin-bottom: 10px;
+}
+
+.quote-text textarea { /* Styling for the quote textbox */
+    font-style: italic;
+    color: #6d28d9; /* Darker purple */
+    border: none; /* Remove border */
+    background-color: transparent; /* Transparent background */
+    font-size: 1.1em;
+    width: 100%;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+    .gradio-container {
+        margin: 20px auto;
+        padding: 15px;
+    }
+
+    .main-row {
+        flex-direction: column; /* Stack columns on small screens */
+        gap: 15px;
+    }
+
+    .task-column {
+        min-width: 100%; /* Full width on small screens */
+    }
+
+    .action-button {
+        padding: 10px 20px;
+        font-size: 0.9em;
+    }
+
+    .reset-button {
+         padding: 10px;
+         font-size: 0.9em;
+         margin: 8px 0;
+    }
+
+    .progress-item {
+        width: 30px;
+        height: 30px;
+    }
+}