File size: 1,455 Bytes
45175fe 04d9713 c1434c9 45175fe 04d9713 f7e25b8 04d9713 c1434c9 94df80a 45175fe 04d9713 f7e25b8 04d9713 c1434c9 45175fe 94df80a 04d9713 94df80a 04d9713 c1434c9 94df80a c1434c9 94df80a 45175fe 04d9713 f7e25b8 c1434c9 f7e25b8 c1434c9 04d9713 |
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 |
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e1e;
color: white;
}
#app {
width: 100%;
max-width: 800px;
background: #2c2c2c;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: #1e1e1e;
color: white;
padding: 1rem;
text-align: center;
border-bottom: 1px solid #444;
}
main {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.grid-item {
padding: 1rem;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
background: var(--gradient);
}
.grid-item img {
width: 50px;
height: 50px;
margin-bottom: 1rem;
}
.grid-item h2 {
font-size: 1.25rem;
margin: 0;
}
footer {
background: #333;
padding: 1rem;
text-align: center;
border-top: 1px solid #444;
}
button {
background-color: #007aff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #005bb5;
} |