Spaces:
Sleeping
Sleeping
File size: 3,094 Bytes
d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 3e922ad d2150aa 3e922ad 4a322b7 3e922ad 4a322b7 3e922ad 4a322b7 d2150aa 3e922ad d2150aa 4a322b7 3e922ad d2150aa 4a322b7 3e922ad d2150aa 3e922ad 4a322b7 3e922ad 4a322b7 3e922ad d2150aa 8dbb70a 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef d2150aa 98bb2ef 4a322b7 | 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | /* Global Reset & Fonts */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #0b0f19;
color: #e0e0e0;
padding: 40px 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Main Container */
.container {
background: #1c1c2e;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 0px 8px rgba(94, 53, 177, 0.3);
border: 1px solid #4527a0;
max-width: 1000px;
width: 100%;
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #2e2e42;
}
header h1 { color: #ffffff; font-weight: 700; margin-bottom: 5px; }
header p { color: #9ca3af; }
/* Layout Grid */
.main-content {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
}
/* File Upload Styles */
.file-upload-container {
background: #0b0f19;
border: 1px solid #36364c;
border-radius: 12px;
padding: 30px 20px;
margin-bottom: 20px;
}
.upload-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px dashed #36364c;
border-radius: 8px;
padding: 40px 20px;
transition: all 0.3s ease;
background: rgba(28, 28, 46, 0.5);
}
.upload-box.dragover {
border-color: #7e57c2;
background: rgba(126, 87, 194, 0.1);
}
.browse-btn {
background: transparent;
border: 1px solid #7e57c2;
color: #b39ddb;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.browse-btn:hover {
background: rgba(126, 87, 194, 0.15);
color: #ffffff;
}
/* Submit Button */
.submit-btn {
width: 100%;
margin-top: 25px;
padding: 14px;
background: linear-gradient(135deg, #5e35b1 0%, #311b92 100%);
color: #ffffff;
font-weight: 700;
border: none;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.2s;
}
.submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(94, 53, 177, 0.4);
}
/* Result Section */
.result-section {
background: #131320;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
border: 1px solid #2e2e42;
min-height: 200px;
}
.placeholder-text h3 { color: #ffffff; margin-bottom: 8px; }
.placeholder-text p { color: #6b7280; font-size: 0.9rem; }
/* Dynamic Result Styles */
.result-box { animation: fadeIn 0.5s ease; width: 100%; }
.confidence-bar-bg {
width: 100%;
height: 8px;
background-color: #2e2e42;
border-radius: 4px;
margin-top: 15px;
overflow: hidden;
}
.confidence-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 1s ease;
background-color: #7e57c2;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.main-content { grid-template-columns: 1fr; }
} |