File size: 1,672 Bytes
45175fe 04d9713 f7e25b8 04d9713 f7e25b8 45175fe 04d9713 f7e25b8 04d9713 f7e25b8 94df80a 45175fe 04d9713 f7e25b8 04d9713 f7e25b8 45175fe 94df80a 04d9713 94df80a 04d9713 94df80a f7e25b8 94df80a f7e25b8 94df80a f7e25b8 94df80a 45175fe 04d9713 f7e25b8 04d9713 f7e25b8 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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1e1e1e;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
#app {
width: 100%;
max-width: 800px;
background: #1e1e1e;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: #1e1e1e;
color: white;
padding: 1rem;
text-align: center;
border-bottom: 1px solid #333;
}
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: linear-gradient(135deg, #ff6b6b, #f06595);
transition: transform 0.3s;
}
.grid-item:hover {
transform: scale(1.05);
}
.grid-item img {
width: 50px;
height: 50px;
margin-bottom: 1rem;
}
.grid-item h2 {
font-size: 1rem;
margin: 0;
}
.hidden {
display: none;
}
.detail-view {
padding: 1rem;
}
.detail-view img {
width: 100%;
margin-bottom: 1rem;
}
footer {
background: #1e1e1e;
padding: 1rem;
text-align: center;
border-top: 1px solid #333;
}
button {
background-color: #007aff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #005bb5;
} |