Spaces:
Running on Zero
Running on Zero
File size: 3,194 Bytes
4c6125c 1adc8cb 4c6125c 1adc8cb 4c6125c 1adc8cb 4c6125c 1adc8cb 75c5414 1adc8cb a915481 0163508 1adc8cb 3266bd1 0163508 1adc8cb fced97d 1adc8cb a915481 fced97d 1adc8cb 75c5414 1adc8cb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | import gradio as gr
# A soft, modern theme overriding Gradio's default harsh borders
theme = gr.themes.Soft(
primary_hue="emerald",
neutral_hue="slate",
font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
radius_size=gr.themes.sizes.radius_xxl,
).set(
body_background_fill="#f7f9fc",
block_background_fill="#ffffff",
block_border_width="0px",
block_shadow="0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05)",
button_primary_background_fill="*primary_500",
button_primary_background_fill_hover="*primary_600"
)
# Custom CSS for your injected HTML components to match the mockups
CSS = """
/* Global Container Resets */
.gradio-container {
max-width: 1200px !important;
margin: auto;
}
/* Safe way to add button shadows without breaking Python */
button.primary {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}
/* Card Styling (Inspired by the pastel app mockup) */
.glass-card {
background: #ffffff;
border-radius: 24px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.03);
margin-bottom: 16px;
transition: transform 0.2s ease;
}
/* Nutrition Pills (Inspired by the green salad mockup) */
.nutrition-row {
display: flex;
gap: 12px;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 10px;
}
.pill-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #e6f4ea; /* Light sage green */
color: #1e4620; /* Dark green text */
border-radius: 40px;
padding: 16px 20px;
min-width: 80px;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.pill-value {
font-size: 24px;
font-weight: 800;
line-height: 1;
margin-bottom: 4px;
}
.pill-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Dish Proposal Cards */
.dish-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 10px;
}
.dish-card {
background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
border-radius: 20px;
padding: 16px;
text-align: center;
border: 1px solid #c6f6d5;
}
.dish-card h4 {
margin: 0 0 8px 0;
font-size: 18px;
color: #2d3748;
}
/* Hero Image Header (Inspired by the spaghetti mockup) */
.hero-container {
position: relative;
border-radius: 24px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.hero-image {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
padding: 30px 20px 20px;
color: white;
}
.hero-overlay h2 {
margin: 0;
font-size: 32px;
font-weight: 800;
color: white;
}
/* Ingredient Chips */
.chip-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
background: #edf2f7;
color: #4a5568;
padding: 6px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
""" |