File size: 2,999 Bytes
37e2f9e 94a91a9 37e2f9e 94a91a9 b96cb61 8102d19 37e2f9e 8102d19 b96cb61 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 8102d19 37e2f9e 842a8c8 36245f3 842a8c8 |
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 |
body {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: system-ui, -apple-system, sans-serif;
background: #f5f5f5;
}
h1 {
text-align: center;
color: #2d3748;
margin-bottom: 2rem;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
border: 2px dashed #cbd5e0;
border-radius: 1rem;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: border-color 0.3s ease;
}
#thumb {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
#container:hover {
border-color: #4a5568;
}
#container svg {
margin-bottom: 1rem;
opacity: 0.7;
}
#container div {
margin-top: 1.5rem;
width: 100%;
max-width: 400px;
}
input[type="text"] {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 1rem;
transition: border-color 0.3s ease;
background: #f8fafc;
}
input[type="text"]:focus {
outline: none;
border-color: #4a5568;
box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}
#example {
display: inline-block;
margin-top: 0.5rem;
color: #4299e1;
cursor: pointer;
font-size: 0.875rem;
transition: color 0.3s ease;
}
#example:hover {
color: #2b6cb0;
text-decoration: underline;
}
#status {
display: block;
margin-top: 1.5rem;
text-align: center;
color: #4a5568;
font-size: 0.875rem;
padding: 0.5rem;
border-radius: 0.5rem;
background: #edf2f7;
}
#upload {
display: none;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
#container {
padding: 1.5rem;
}
}
#llm-output {
font-family: 'IBM Plex Mono', monospace;
background: #282c34;
color: #abb2bf;
border-radius: 8px;
padding: 1.5rem;
margin: 1.5rem auto;
min-height: 100px;
max-height: 400px;
overflow-y: auto;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
#llm-output:empty::after {
content: "Waiting for response...";
color: #5c6370;
font-style: italic;
}
|