body{ font-family: Arial, sans-serif;
background:#f5f5f5;
margin: 0;
padding: 20px;
color:#333;
}
.container{ max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1{ text-align: center;
color:#003366;
}
#camera-container{ position: relative;
width: 100%;
height: 300px;
background:#000;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
}
#camera-placeholder{ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 18px;
}
video, canvas{ width: 100%;
height: 100%;
object-fit: cover;
}
#error{ color: red;
font-weight: bold;
margin-top: 15px;
}
.warning{ background:#fff3cd;
border: 1px solid#ffeaa7;
padding: 10px;
border-radius: 5px;
margin-top: 15px;
color:#856404;
}
pre{ background:#f8f9fa;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
white-space: pre-wrap;
}
button{ margin-top: 10px;
margin-right: 10px;
padding: 8px 16px;
background:#003366;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover{ background:#002244;
}