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: #f0f0f0; | |
} | |
#app { | |
width: 80%; | |
max-width: 800px; | |
background: white; | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
border-radius: 8px; | |
overflow: hidden; | |
} | |
header { | |
background: #007aff; | |
color: white; | |
padding: 1rem; | |
text-align: center; | |
} | |
.list-item { | |
padding: 1rem; | |
border-bottom: 1px solid #e0e0e0; | |
cursor: pointer; | |
} | |
.list-item:hover { | |
background-color: #f9f9f9; | |
} | |
.detail-view { | |
padding: 1rem; | |
display: none; | |
} | |
.detail-view.active { | |
display: block; | |
} | |
button { | |
background-color: #007aff; | |
color: white; | |
border: none; | |
padding: 0.5rem 1rem; | |
border-radius: 4px; | |
cursor: pointer; | |
margin-top: 1rem; | |
} | |
button:hover { | |
background-color: #005bb5; | |
} |