You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
594 lines
16 KiB
594 lines
16 KiB
/* 기본 및 공통 스타일 */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f0f2f5; /* 기본 배경색 (로그인 페이지 등에서 사용) */
|
|
color: #333; /* 기본 글자색 (로그인 페이지 등에서 사용) */
|
|
/* [수정] flexbox 레이아웃 적용 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh; /* 전체 뷰포트 높이 사용 */
|
|
}
|
|
|
|
/* [추가] 로그인 페이지 좌측 상단 타이틀 */
|
|
.page-title {
|
|
position: absolute; /* 페이지 기준 절대 위치 */
|
|
top: 2rem; /* 위쪽 여백 */
|
|
left: 4rem; /* 왼쪽 여백 */
|
|
font-size: 2.5rem; /* 폰트 크기 */
|
|
color: #f0f0f0; /* 요청대로 밝은 색상 (흰색에 가까움) */
|
|
font-weight: 600;
|
|
/* 배경 이미지와 구분을 위한 텍스트 그림자 */
|
|
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
|
|
z-index: 10; /* 다른 요소들 위에 표시 */
|
|
}
|
|
|
|
|
|
/* ========== [Dark Theme 수정] ========== */
|
|
button {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
/* [수정] 다크 테마 기본 버튼 스타일 */
|
|
border: 1px solid #555;
|
|
background-color: #3a3a3a;
|
|
color: #e0e0e0;
|
|
padding: 5px 10px;
|
|
}
|
|
/* ====================================== */
|
|
|
|
|
|
/* 1. 로그인 페이지 스타일 (index.html) */
|
|
/* ... (기존 로그인 스타일 동일 - 다크 테마의 영향을 받지 않도록 고유 스타일 유지) ... */
|
|
.login-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
|
|
/* ========== [수정됨] 배경 이미지 적용 ========== */
|
|
background-image: url('drone_background.png'); /* 배경 이미지 파일 경로 */
|
|
background-size: cover; /* 화면을 꽉 채우도록 (비율 유지) */
|
|
background-position: center; /* 이미지 중앙 정렬 */
|
|
background-repeat: no-repeat; /* 이미지 반복 안 함 */
|
|
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); <-- 기존 배경 제거 */
|
|
/* ============================================ */
|
|
}
|
|
|
|
.login-container {
|
|
/* [수정] 배경색을 body 기본 배경색과 유사하게 변경 */
|
|
background: #f0f2f5;
|
|
padding: 2rem 3rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
/* [추가] 너비를 기존보다 2배가량 넓게 설정 (예: 700px) */
|
|
width: 700px;
|
|
/* [추가] width 사용 시 padding이 너비에 포함되도록 설정 */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-container h1 {
|
|
font-size: 1.5rem;
|
|
color: #444; /* body의 color(#e0e0e0)를 상속받지 않도록 명시 */
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.input-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
color: #333; /* body의 color(#e0e0e0)를 상속받지 않도록 명시 */
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
background-color: #fff; /* 다크 테마 상속 방지 */
|
|
color: #333; /* 다크 테마 상속 방지 */
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
background-color: #5a67d8;
|
|
color: white;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
.login-button:hover {
|
|
background-color: #434190;
|
|
}
|
|
|
|
|
|
/* 2. 대시보드 페이지 스타일 (dashboard.html) */
|
|
header {
|
|
background-color: #333; /* 이미 어두움 */
|
|
padding: 0 1rem;
|
|
/* [수정] 크기 고정 */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-button {
|
|
background: none;
|
|
border: none;
|
|
color: #aaa; /* 이미 밝음 */
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: white;
|
|
border-bottom: 3px solid #5a67d8;
|
|
}
|
|
|
|
.logout-button {
|
|
background-color: #d9534f;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.logout-button:hover {
|
|
background-color: #c9302c;
|
|
}
|
|
|
|
/* ========== [Dark Theme 수정] ========== */
|
|
main {
|
|
padding: 1rem;
|
|
/* [수정] 남은 공간을 모두 채움 */
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0; /* 내용이 많을 때 축소 가능하도록 */
|
|
|
|
/* [추가] 다크 테마 배경 및 글자색 */
|
|
background-color: #1a1a1a;
|
|
color: #e0e0e0;
|
|
}
|
|
/* ====================================== */
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
/* [수정] display: block -> flex */
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* [수정] 부모(main) 공간을 채움 */
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 2-1. Video 탭 (PDF 2페이지) */
|
|
/* (이 부분은 대부분 이미 어두운 테마 스타일을 가지고 있음) */
|
|
|
|
/* [추가] .video-container가 공간을 채우도록 */
|
|
.video-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ========== .video-player 스타일 수정 ========== */
|
|
.video-player {
|
|
width: 100%;
|
|
/* [제거] min-height: 720px; */
|
|
/* [추가] .video-container 공간을 채움 */
|
|
flex-grow: 1;
|
|
min-height: 0; /* 축소 가능하도록 */
|
|
background-color: #111; /* video-test.html 배경색 적용 (이미 어두움) */
|
|
color: #eee; /* video-test.html 글자색 적용 (이미 밝음) */
|
|
display: flex;
|
|
flex-direction: row; /* 가로 정렬로 변경 */
|
|
gap: 10px; /* video-test.html gap 적용 */
|
|
padding: 10px; /* video-test.html padding 적용 */
|
|
box-sizing: border-box;/* video-test.html box-sizing 적용 */
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ========== [수정됨] #current-model <select> 스타일 -> Segmented Control 스타일로 수정 ========== */
|
|
.segmented-control-container {
|
|
position: absolute;
|
|
top: 40px; /* #info (12px) 아래 여유 공간 */
|
|
left: 20px;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-wrap: wrap; /* 좁은 화면에서 줄바꿈 */
|
|
gap: 4px; /* 버튼 사이 간격 */
|
|
background-color: rgba(50, 50, 50, 0.7); /* 반투명 배경 (이미 어두움) */
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* 실제 라디오 버튼은 숨김 */
|
|
.segmented-control-container input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* 버튼처럼 보일 라벨 스타일 */
|
|
.segmented-control-button {
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
font-size: 0.85rem; /* 폰트 약간 작게 */
|
|
color: #eee;
|
|
background-color: #555;
|
|
border: 1px solid #777;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
user-select: none; /* 텍스트 선택 방지 */
|
|
}
|
|
|
|
/* 마우스 오버시 */
|
|
.segmented-control-button:hover {
|
|
background-color: #666;
|
|
}
|
|
|
|
/* 선택된(checked) 라디오 버튼의 *다음* 형제(label) 스타일 */
|
|
.segmented-control-container input[type="radio"]:checked + .segmented-control-button {
|
|
background-color: #5a67d8; /* 활성 탭 색상과 유사하게 */
|
|
color: white;
|
|
border-color: #434190;
|
|
font-weight: bold;
|
|
}
|
|
/* ========== [수정됨] 스타일 변경 끝 ========== */
|
|
|
|
|
|
/* ========== video-test.html 스타일 추가 (이미 어두움) ========== */
|
|
#video-wrap {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
position: relative;
|
|
}
|
|
#info {
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
#frame {
|
|
flex: 1;
|
|
min-height: 0;
|
|
max-width: 100%;
|
|
background: #000;
|
|
object-fit: contain;
|
|
border: 1px solid #333;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#det-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#det-title {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
/* main으로부터 color: #e0e0e0 상속받음 */
|
|
}
|
|
#det-list {
|
|
flex: 1;
|
|
font-size: 11px;
|
|
background: #000;
|
|
border: 1px solid #333;
|
|
padding: 6px;
|
|
overflow-y: auto;
|
|
white-space: pre;
|
|
/* .video-player로부터 color: #eee 상속받음 */
|
|
}
|
|
.status {
|
|
font-size: 11px;
|
|
color: #6cf;
|
|
}
|
|
.status.err {
|
|
color: #f66;
|
|
}
|
|
|
|
/* 2-2. AI Models 탭 (PDF 3페이지) */
|
|
|
|
/* [수정됨] .toolbar 스타일 */
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* [추가됨] 새로고침 버튼을 맨 오른쪽으로 밀기 */
|
|
.toolbar .refresh-button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ========== [Dark Theme 수정] ========== */
|
|
/* [추가됨] 파일명 표시 레이블 */
|
|
#file-name-display {
|
|
font-size: 0.9rem;
|
|
/* [수정] 글자색 */
|
|
color: #ccc;
|
|
/* [수정] 배경색 */
|
|
background-color: #2a2a2a;
|
|
/* [수정] 테두리 */
|
|
border: 1px solid #444;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
min-width: 350px;
|
|
text-align: left;
|
|
font-style: italic;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
|
|
.hidden-file-input {
|
|
display: none;
|
|
}
|
|
|
|
.model-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
/* [수정] 배경색 */
|
|
background: #2a2a2a;
|
|
box-shadow: none; /* 다크 모드에서는 그림자 제거 */
|
|
}
|
|
|
|
.model-table th,
|
|
.model-table td {
|
|
/* [수정] 테두리 */
|
|
border: 1px solid #444;
|
|
padding: 0.8rem 1rem;
|
|
text-align: left;
|
|
/* main으로부터 color: #e0e0e0 상속받음 */
|
|
}
|
|
|
|
.model-table th {
|
|
/* [수정] 배경색 */
|
|
background-color: #333;
|
|
text-align: center;
|
|
}
|
|
/* ====================================== */
|
|
|
|
/* [수정됨] nth-child 선택자 수정 (컬럼 1, 4 중앙 정렬) */
|
|
.model-table td:nth-child(1),
|
|
.model-table td:nth-child(4) {
|
|
text-align: center;
|
|
}
|
|
/* [수정됨] nth-child 선택자 수정 (컬럼 5 '삭제' 중앙 정렬) */
|
|
.model-table td:nth-child(5) {
|
|
text-align: center;
|
|
}
|
|
|
|
/* ========== [Dark Theme 수정] ========== */
|
|
.btn-browse {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
/* [수정] 테두리 */
|
|
border: 1px solid #666;
|
|
padding: 5px 10px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-family: Arial, sans-serif;
|
|
line-height: normal;
|
|
/* [수정] 배경색 */
|
|
background-color: #4f4f4f;
|
|
/* [수정] 글자색 (기본 button 스타일에서 상속) */
|
|
/* color: #e0e0e0; */
|
|
}
|
|
.btn-browse:hover {
|
|
/* [수정] hover 배경색 */
|
|
background-color: #5a5a5a;
|
|
}
|
|
/* ====================================== */
|
|
|
|
.btn-action { background-color: #4CAF50; color: white; border:none; }
|
|
.btn-delete { background-color: #f44336; color: white; border:none; }
|
|
|
|
/* [추가됨] 바운딩 박스 스타일 */
|
|
#bbox-container {
|
|
position: absolute;
|
|
pointer-events: none; /* 클릭 이벤트 방지 */
|
|
z-index: 5; /* 프레임(1) 위, 정보(10) 아래 */
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bbox {
|
|
position: absolute;
|
|
border: 2px solid red;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* [추가] 요소 숨기기 위한 유틸리티 클래스 */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* ... (파일 상단 body, button 등 공통 스타일은 그대로 둡니다) ... */
|
|
|
|
|
|
/* 1. 로그인 페이지 스타일 (index.html) */
|
|
/* [수정] 이미지와 유사하게 변경 */
|
|
.login-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
|
|
/* [수정] 배경 이미지 제거 */
|
|
/* background-image: url('drone_background.png'); */
|
|
/* background-size: cover; */
|
|
/* background-position: center; */
|
|
/* background-repeat: no-repeat; */
|
|
/* body의 기본 배경색(#f0f2f5)이 적용됩니다. */
|
|
}
|
|
|
|
.login-container {
|
|
/* [수정] 배경색을 흰색으로 변경 */
|
|
background: #ffffff;
|
|
padding: 2rem 3rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
/* [수정] text-align 제거 (기본값 left) */
|
|
/* text-align: center; */
|
|
/* [수정] 너비를 좁게 설정 (예: 400px) */
|
|
width: 400px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-container h1 {
|
|
/* [수정] 폰트 크기 및 여백 조정 */
|
|
font-size: 2.2rem; /* 이미지처럼 크게 */
|
|
color: #333; /* 다크 테마 상속 방지 (기존 #444보다 진하게) */
|
|
margin-bottom: 0.5rem; /* 부제목과 가깝게 */
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* [추가] 부제목 스타일 */
|
|
.login-subtext {
|
|
font-size: 1rem;
|
|
color: #888; /* 이미지처럼 연한 회색 */
|
|
margin-top: 0;
|
|
margin-bottom: 2.5rem; /* 입력창과 여백 */
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 1rem;
|
|
text-align: left;
|
|
/* [추가] 아이콘 배치를 위해 relative 속성 추가 */
|
|
position: relative;
|
|
}
|
|
|
|
.input-group label {
|
|
/* 이 스타일은 더 이상 사용되지 않지만, 다른 곳에서 쓸 수 있으므로 둡니다. */
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* [추가] 아이콘 스타일 */
|
|
.input-group .icon {
|
|
position: absolute;
|
|
left: 1rem; /* input의 padding-left와 유사하게 */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #aaa;
|
|
font-size: 1.1rem;
|
|
/* 아이콘이 입력 이벤트를 가로채지 않도록 */
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
/* [수정] 아이콘 공간 확보를 위해 padding-left 늘림 */
|
|
padding: 1rem 1rem 1rem 3rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
color: #333;
|
|
font-size: 1rem; /* placeholder 글자 크기 */
|
|
}
|
|
|
|
.login-button {
|
|
/* [수정] width: 100% 제거 (auto로 변경) */
|
|
width: auto;
|
|
/* [수정] 이미지와 유사한 padding으로 변경 */
|
|
padding: 0.8rem 2.5rem;
|
|
background-color: #5a67d8;
|
|
color: white;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
.login-button:hover {
|
|
background-color: #434190;
|
|
}
|
|
|
|
/* ... (기존 CSS 코드) ... */
|
|
|
|
/* [수정] 로그인 페이지 하단 흰색 바 */
|
|
.footer-bar {
|
|
position: absolute; /* 뷰포트(페이지 전체) 기준 */
|
|
bottom: 0; /* 하단에 고정 */
|
|
left: 0; /* 왼쪽 끝 */
|
|
width: 100%; /* 전체 너비 */
|
|
height: 50px; /* 요청한 높이 50px */
|
|
background-color: #ffffff; /* 흰색 배경 */
|
|
opacity: 0.5; /* [수정] 70% 투명도 (0.3 -> 0.7) */
|
|
|
|
z-index: 100;
|
|
|
|
/* [추가] Flexbox를 사용하여 중앙 정렬 및 간격 설정 */
|
|
display: flex;
|
|
justify-content: center; /* 수평 중앙 정렬 */
|
|
align-items: center; /* 수직 중앙 정렬 */
|
|
gap: 20px; /* 자식 요소(이미지) 사이의 간격 */
|
|
}
|
|
|
|
/* ====================================================== */
|
|
/* [수정] 비디오 오버레이 (FPS, 모델명) 스타일 */
|
|
/* ====================================================== */
|
|
.video-overlay {
|
|
position: absolute;
|
|
z-index: 10; /* #info와 동일한 레벨 */
|
|
background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은 배경 */
|
|
color: #ffffff; /* 흰색 텍스트 */
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px; /* 기본 폰트 크기 */
|
|
font-weight: bold;
|
|
pointer-events: none; /* 클릭 이벤트 방지 */
|
|
white-space: nowrap; /* 줄바꿈 방지 */
|
|
|
|
/* [추가] 요청사항: 가독성을 위한 그림자 */
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.video-overlay.top-right {
|
|
top: 100px;
|
|
right: 10px;
|
|
|
|
/* [추가] 요청사항: AI 모델명 3배 크게 (14px * 3) */
|
|
font-size: 60px;
|
|
}
|
|
|
|
.video-overlay.bottom-right {
|
|
/* [수정] 요청사항: 10px -> 30px (조금 더 위로) */
|
|
bottom: 70px;
|
|
right: 10px;
|
|
|
|
/* [추가] 요청사항: FPS 표시 2배 크게 (14px * 2) */
|
|
font-size: 28px;
|
|
/* [추가] 요청사항: 폰트 색상 노란색 */
|
|
color: #FFEE00;
|
|
} |