Update app.py

app.py

@@ -127,17 +127,20 @@ def process_recipe_request(api_key, files, num_recipes, dietary_restrictions, cu
 
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
 :root {
-    --primary-color: #E67E22;
-    --primary-dark: #D35400;
-    --secondary-color: #2ECC71;
-    --accent-color: #F1C40F;
-    --background-color: #FFFFFF;
-    --text-color: #4A4A4A;
-    --card-background: #F8F9FA;
-    --border-radius: 10px;
+    --primary-color: #FF6F61;  /* Warm coral */
+    --secondary-color: #4BB543;  /* Fresh green */
+    --accent-color: #F0A500;  /* Golden yellow */
+    --background-color: #F4F4F9;  /* Light grayish background */
+    --text-color: #333333;  /* Dark gray text */
+    --card-background: #FFFFFF;  /* White for cards */
+    --border-radius: 12px;
     --font-family: 'Poppins', sans-serif;
+    --box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px;
+    --hover-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px;
 }
+
 body {
     font-family: var(--font-family);
     background-color: var(--background-color);
@@ -145,84 +148,95 @@ body {
     margin: 0;
     padding: 0;
 }
+
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }
+
 .app-header {
     background-color: var(--primary-color);
     color: white;
-    padding: 40px 20px;
+    padding: 60px 20px;
     text-align: center;
-    border-radius: 0 0 20px 20px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    border-radius: 0 0 30px 30px;
+    box-shadow: var(--box-shadow);
 }
+
 .app-title {
-    font-size: 2.5em;
-    margin-bottom: 10px;
+    font-size: 2.8em;
     font-weight: 700;
+    margin-bottom: 10px;
 }
+
 .app-subtitle {
-    font-size: 1.2em;
+    font-size: 1.3em;
     font-weight: 300;
-    max-width: 600px;
+    max-width: 800px;
     margin: 0 auto;
 }
+
 .input-section, .output-section {
     background-color: var(--card-background);
     border-radius: var(--border-radius);
     padding: 30px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    box-shadow: var(--box-shadow);
     margin-bottom: 30px;
 }
+
 .section-header {
-    font-size: 1.5em;
+    font-size: 1.6em;
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 20px;
     border-bottom: 2px solid var(--primary-color);
     padding-bottom: 10px;
 }
+
 .image-upload-container {
     border: 2px dashed var(--secondary-color);
     border-radius: var(--border-radius);
     padding: 40px;
     text-align: center;
-    background-color: rgba(46, 204, 113, 0.05);
+    background-color: rgba(75, 181, 67, 0.1);
     transition: all 0.3s ease;
 }
+
 .image-upload-container:hover {
     border-color: var(--primary-color);
-    background-color: rgba(230, 126, 34, 0.05);
+    background-color: rgba(255, 111, 97, 0.1);
 }
+
 button.primary-button {
     background-color: var(--primary-color);
     color: white;
     border: none;
-    padding: 15px 30px;
-    border-radius: 5px;
+    padding: 16px 32px;
+    border-radius: 6px;
     font-size: 1.1em;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     width: 100%;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
+
 button.primary-button:hover {
-    background-color: var(--primary-dark);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+    background-color: #E15F52;
+    box-shadow: var(--hover-shadow);
 }
+
 .gallery-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 20px;
-    margin-top: 25px;
+    margin-top: 30px;
 }
 
 .gallery-item {
     border-radius: var(--border-radius);
     overflow: hidden;
-    box-shadow: var(--card-shadow);
+    box-shadow: var(--box-shadow);
     transition: transform 0.3s ease;
     aspect-ratio: 1 / 1;
     object-fit: cover;
@@ -232,24 +246,28 @@ button.primary-button:hover {
     transform: scale(1.05);
     box-shadow: var(--hover-shadow);
 }
+
 .recipe-output {
-    font-size: 1.1em;
-    line-height: 1.6;
+    font-size: 1.2em;
+    line-height: 1.7;
     color: var(--text-color);
     max-height: 600px;
     overflow-y: auto;
-    padding-right: 10px;
+    padding-right: 15px;
 }
+
 .recipe-output h2 {
     color: var(--primary-color);
     margin-top: 30px;
-    font-size: 1.8em;
+    font-size: 2em;
 }
+
 .recipe-output h3 {
     color: var(--secondary-color);
-    font-size: 1.4em;
+    font-size: 1.5em;
     margin-top: 20px;
 }
+
 .loading-container {
     display: flex;
     flex-direction: column;
@@ -266,10 +284,12 @@ button.primary-button:hover {
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }
+
 .loading-container.visible {
     opacity: 1;
     visibility: visible;
 }
+
 .loading-spinner {
     border: 8px solid #f3f3f3;
     border-top: 8px solid var(--primary-color);
@@ -278,37 +298,44 @@ button.primary-button:hover {
     height: 60px;
     animation: spin 1s linear infinite;
 }
+
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
 .loading-text {
     color: white;
-    font-size: 1.2em;
+    font-size: 1.3em;
     margin-top: 20px;
 }
+
 .footer {
     background-color: var(--card-background);
     padding: 40px 20px;
     text-align: center;
     color: var(--text-color);
-    font-size: 1em;
-    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+    font-size: 1.1em;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
+
 .footer-content {
     max-width: 800px;
     margin: 0 auto;
 }
+
 .footer-brand {
     font-weight: 700;
     color: var(--primary-color);
 }
+
 .footer-links a {
     color: var(--secondary-color);
     text-decoration: none;
     margin: 0 15px;
     transition: color 0.3s ease;
 }
+
 .footer-links a:hover {
     color: var(--primary-color);
 }