Spaces:
Sleeping
Sleeping
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
min-height: 100vh; | |
padding: 20px; | |
} | |
.container { | |
max-width: 800px; | |
margin: 0 auto; | |
background: white; | |
border-radius: 20px; | |
padding: 40px; | |
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
} | |
h1 { | |
text-align: center; | |
color: #333; | |
margin-bottom: 30px; | |
font-size: 2.5rem; | |
font-weight: 700; | |
} | |
.upload-section { | |
margin-bottom: 30px; | |
} | |
.upload-area { | |
border: 3px dashed #ddd; | |
border-radius: 15px; | |
padding: 60px 20px; | |
text-align: center; | |
transition: all 0.3s ease; | |
background: #fafafa; | |
cursor: pointer; | |
} | |
.upload-area:hover { | |
border-color: #667eea; | |
background: #f0f4ff; | |
} | |
.upload-area.dragover { | |
border-color: #667eea; | |
background: #e8f0ff; | |
transform: scale(1.02); | |
} | |
.upload-content { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
gap: 15px; | |
} | |
.upload-icon { | |
font-size: 3rem; | |
margin-bottom: 10px; | |
} | |
.upload-content p { | |
color: #666; | |
font-size: 1.1rem; | |
margin: 5px 0; | |
} | |
.browse-btn { | |
background: #667eea; | |
color: white; | |
border: none; | |
padding: 12px 24px; | |
border-radius: 8px; | |
font-size: 1rem; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
font-weight: 600; | |
} | |
.browse-btn:hover { | |
background: #5a6fd8; | |
transform: translateY(-2px); | |
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); | |
} | |
.image-section { | |
margin-bottom: 30px; | |
} | |
.image-section h3 { | |
color: #333; | |
margin-bottom: 15px; | |
font-size: 1.3rem; | |
} | |
.image-container { | |
display: flex; | |
justify-content: center; | |
margin-bottom: 20px; | |
} | |
.image-container img { | |
max-width: 100%; | |
max-height: 400px; | |
border-radius: 10px; | |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
} | |
.button-section { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.predict-btn { | |
background: linear-gradient(135deg, #ff6b6b, #ee5a24); | |
color: white; | |
border: none; | |
padding: 15px 40px; | |
border-radius: 10px; | |
font-size: 1.2rem; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
font-weight: 600; | |
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); | |
} | |
.predict-btn:hover { | |
transform: translateY(-3px); | |
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); | |
} | |
.predict-btn:disabled { | |
background: #ccc; | |
cursor: not-allowed; | |
transform: none; | |
box-shadow: none; | |
} | |
.results-section { | |
background: #f8f9fa; | |
border-radius: 15px; | |
padding: 25px; | |
margin-bottom: 20px; | |
} | |
.results-section h3 { | |
color: #333; | |
margin-bottom: 20px; | |
font-size: 1.3rem; | |
text-align: center; | |
} | |
.results-container { | |
display: flex; | |
flex-direction: column; | |
gap: 15px; | |
} | |
.result-item { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 15px 20px; | |
background: white; | |
border-radius: 10px; | |
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
} | |
.label { | |
font-weight: 600; | |
color: #333; | |
font-size: 1.1rem; | |
} | |
.probability { | |
font-weight: 700; | |
font-size: 1.2rem; | |
color: #667eea; | |
} | |
.loading { | |
text-align: center; | |
padding: 30px; | |
} | |
.spinner { | |
width: 50px; | |
height: 50px; | |
border: 4px solid #f3f3f3; | |
border-top: 4px solid #667eea; | |
border-radius: 50%; | |
animation: spin 1s linear infinite; | |
margin: 0 auto 20px; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
.loading p { | |
color: #666; | |
font-size: 1.1rem; | |
} | |
/* Responsive design */ | |
@media (max-width: 768px) { | |
.container { | |
padding: 20px; | |
margin: 10px; | |
} | |
h1 { | |
font-size: 2rem; | |
} | |
.upload-area { | |
padding: 40px 15px; | |
} | |
.predict-btn { | |
padding: 12px 30px; | |
font-size: 1.1rem; | |
} | |
} |