Spaces:

yoon2566
/

25_ITS_1

Running

App Files Files Community

25_ITS_1 / index.html

yoon2566

Update index.html

d19e59d verified 9 months ago

raw

history blame contribute delete

20.5 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>스마트 교통 데이터 구조 분석</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: #333;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	border-radius: 15px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	overflow: hidden;
	}

	.header {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	color: white;
	padding: 30px;
	text-align: center;
	}

	.header h1 {
	font-size: 2.5em;
	margin-bottom: 10px;
	font-weight: 300;
	}

	.header p {
	font-size: 1.1em;
	opacity: 0.9;
	}

	.content {
	padding: 40px;
	}

	.data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 30px;
	margin-bottom: 30px;
	}

	.data-card {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 25px;
	border-left: 5px solid;
	transition: all 0.3s ease;
	cursor: pointer;
	}

	.data-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	}

	.data-card.parking { border-left-color: #3498db; }
	.data-card.parking-info { border-left-color: #2ecc71; }
	.data-card.smart-intersection { border-left-color: #e74c3c; }
	.data-card.right-turn { border-left-color: #f39c12; }
	.data-card.signal-support { border-left-color: #9b59b6; }
	.data-card.signal-phase { border-left-color: #1abc9c; }

	.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	}

	.card-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	font-size: 1.5em;
	color: white;
	}

	.parking .card-icon { background: #3498db; }
	.parking-info .card-icon { background: #2ecc71; }
	.smart-intersection .card-icon { background: #e74c3c; }
	.right-turn .card-icon { background: #f39c12; }
	.signal-support .card-icon { background: #9b59b6; }
	.signal-phase .card-icon { background: #1abc9c; }

	.card-title {
	font-size: 1.4em;
	font-weight: 600;
	color: #2c3e50;
	}

	.card-subtitle {
	font-size: 0.9em;
	color: #7f8c8d;
	margin-top: 5px;
	}

	.field-list {
	list-style: none;
	}

	.field-item {
	background: white;
	margin: 8px 0;
	padding: 12px 15px;
	border-radius: 8px;
	border-left: 3px solid #ecf0f1;
	transition: all 0.2s ease;
	}

	.field-item:hover {
	border-left-color: #3498db;
	transform: translateX(5px);
	}

	.field-name {
	font-weight: 600;
	color: #2c3e50;
	display: inline-block;
	min-width: 120px;
	}

	.field-desc {
	color: #7f8c8d;
	margin-left: 10px;
	}

	.stats-bar {
	background: #2c3e50;
	color: white;
	padding: 20px;
	display: flex;
	justify-content: space-around;
	text-align: center;
	}

	.stat-item h3 {
	font-size: 2em;
	margin-bottom: 5px;
	}

	.stat-item p {
	opacity: 0.8;
	}

	.toggle-btn {
	background: #3498db;
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.9em;
	transition: all 0.3s ease;
	margin-top: 10px;
	}

	.toggle-btn:hover {
	background: #2980b9;
	}

	.field-list.collapsed {
	display: none;
	}

	@media (max-width: 768px) {
	.data-grid {
	grid-template-columns: 1fr;
	}

	.header h1 {
	font-size: 2em;
	}

	.content {
	padding: 20px;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h1>🚦 스마트 교통 데이터 구조</h1>
	<p>실시간 교통 및 주차 데이터 필드 분석</p>
	</div>

	<div class="stats-bar">
	<div class="stat-item">
	<h3>6</h3>
	<p>데이터 유형</p>
	</div>
	<div class="stat-item">
	<h3>35+</h3>
	<p>데이터 필드</p>
	</div>
	<div class="stat-item">
	<h3>실시간</h3>
	<p>데이터 수집</p>
	</div>
	</div>

	<div class="content">
	<div class="data-grid">
	<div class="data-card parking" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">🅿️</div>
	<div>
	<div class="card-title">주차 실시간 데이터</div>
	<div class="card-subtitle">실시간 주차 현황 정보</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">prkName</span>
	<span class="field-desc">주차장 이름</span>
	</li>
	<li class="field-item">
	<span class="field-name">totalLots</span>
	<span class="field-desc">총 주차 가능 면수</span>
	</li>
	<li class="field-item">
	<span class="field-name">availLots</span>
	<span class="field-desc">현재 주차 면수 (점유한 공간)</span>
	</li>
	<li class="field-item">
	<span class="field-name">prkId</span>
	<span class="field-desc">주차장 고유 ID</span>
	</li>
	</ul>
	</div>

	<div class="data-card parking-info" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">ℹ️</div>
	<div>
	<div class="card-title">주차장 정보 데이터</div>
	<div class="card-subtitle">주차장 기본 정보 및 운영시간</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">prkName</span>
	<span class="field-desc">주차장 이름</span>
	</li>
	<li class="field-item">
	<span class="field-name">prkAddr</span>
	<span class="field-desc">주차장 주소</span>
	</li>
	<li class="field-item">
	<span class="field-name">prkType</span>
	<span class="field-desc">주차장 유형 (예: 공영)</span>
	</li>
	<li class="field-item">
	<span class="field-name">weekOpenTime</span>
	<span class="field-desc">평일 운영 시작 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">weekEndTime</span>
	<span class="field-desc">평일 운영 종료 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">satOpenTime</span>
	<span class="field-desc">토요일 운영 시작 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">satEndTime</span>
	<span class="field-desc">토요일 운영 종료 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">holiOpenTime</span>
	<span class="field-desc">공휴일 운영 시작 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">holiEndTime</span>
	<span class="field-desc">공휴일 운영 종료 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">xCrdn, yCrdn</span>
	<span class="field-desc">주차장 위치 (경위도)</span>
	</li>
	</ul>
	</div>

	<div class="data-card smart-intersection" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">🚦</div>
	<div>
	<div class="card-title">스마트 교차로 정보</div>
	<div class="card-subtitle">10분마다 수집되는 교차로 데이터</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">crossName</span>
	<span class="field-desc">교차로 이름</span>
	</li>
	<li class="field-item">
	<span class="field-name">colDate</span>
	<span class="field-desc">데이터 수집 일시 (YYYYMMDDHHMM)</span>
	</li>
	<li class="field-item">
	<span class="field-name">volume</span>
	<span class="field-desc">교통량 (차량 수)</span>
	</li>
	<li class="field-item">
	<span class="field-name">los</span>
	<span class="field-desc">서비스 수준 (Level Of Service, 교통 혼잡도 등급: A~F)</span>
	</li>
	<li class="field-item">
	<span class="field-name">delay</span>
	<span class="field-desc">지체 시간 (초)</span>
	</li>
	<li class="field-item">
	<span class="field-name">walker</span>
	<span class="field-desc">보행자 수</span>
	</li>
	<li class="field-item">
	<span class="field-name">crash</span>
	<span class="field-desc">사고 발생 여부 (0: 없음, 1: 발생)</span>
	</li>
	</ul>
	</div>

	<div class="data-card right-turn" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">↪️</div>
	<div>
	<div class="card-title">우회전 안전 운행 지원</div>
	<div class="card-subtitle">우회전 시 보행자/자전거 감지 데이터</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">crossName</span>
	<span class="field-desc">감지된 교차로 이름</span>
	</li>
	<li class="field-item">
	<span class="field-name">colDate</span>
	<span class="field-desc">데이터 수집 일시 (YYYYMMDDHHMMSS)</span>
	</li>
	<li class="field-item">
	<span class="field-name">objectType</span>
	<span class="field-desc">감지된 객체 유형 (예: 보행자, 자전거, 데이터없음)</span>
	</li>
	<li class="field-item">
	<span class="field-name">objectPos</span>
	<span class="field-desc">객체 위치/상태 (예: 대기자, 횡단자, 무단횡단자)</span>
	</li>
	<li class="field-item">
	<span class="field-name">signalPhase</span>
	<span class="field-desc">해당 지점의 신호 상태</span>
	</li>
	<li class="field-item">
	<span class="field-name">xCrdn, yCrdn</span>
	<span class="field-desc">객체 감지 위치</span>
	</li>
	</ul>
	</div>

	<div class="data-card signal-support" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">🔧</div>
	<div>
	<div class="card-title">신호 교차로 지원</div>
	<div class="card-subtitle">교차로 신호 제어 기본 정보</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">lcName</span>
	<span class="field-desc">교차로 이름</span>
	</li>
	<li class="field-item">
	<span class="field-name">lcNo</span>
	<span class="field-desc">교차로 번호</span>
	</li>
	<li class="field-item">
	<span class="field-name">genMain</span>
	<span class="field-desc">신호 제어 관련 코드 (상세 정의는 API 문서 확인 필요)</span>
	</li>
	<li class="field-item">
	<span class="field-name">ringType</span>
	<span class="field-desc">신호 제어 관련 코드 (상세 정의는 API 문서 확인 필요)</span>
	</li>
	<li class="field-item">
	<span class="field-name">intType</span>
	<span class="field-desc">신호 제어 관련 코드 (상세 정의는 API 문서 확인 필요)</span>
	</li>
	</ul>
	</div>

	<div class="data-card signal-phase" onclick="toggleFields(this)">
	<div class="card-header">
	<div class="card-icon">⏱️</div>
	<div>
	<div class="card-title">신호-교차로 현시정보</div>
	<div class="card-subtitle">신호등 타이밍 및 현시 정보</div>
	</div>
	</div>
	<button class="toggle-btn">필드 보기</button>
	<ul class="field-list collapsed">
	<li class="field-item">
	<span class="field-name">lcNo</span>
	<span class="field-desc">교차로 번호</span>
	</li>
	<li class="field-item">
	<span class="field-name">ringNo</span>
	<span class="field-desc">링 번호 (신호등 제어 체계)</span>
	</li>
	<li class="field-item">
	<span class="field-name">phaseNo</span>
	<span class="field-desc">현시 번호 (신호등 단계)</span>
	</li>
	<li class="field-item">
	<span class="field-name">minSplit</span>
	<span class="field-desc">최소 현시 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">maxSplit</span>
	<span class="field-desc">최대 현시 시간</span>
	</li>
	<li class="field-item">
	<span class="field-name">yellow</span>
	<span class="field-desc">황색등 시간</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<script>
	function toggleFields(card) {
	const fieldList = card.querySelector('.field-list');
	const toggleBtn = card.querySelector('.toggle-btn');

	if (fieldList.classList.contains('collapsed')) {
	fieldList.classList.remove('collapsed');
	toggleBtn.textContent = '필드 숨기기';
	card.style.transform = 'scale(1.02)';
	} else {
	fieldList.classList.add('collapsed');
	toggleBtn.textContent = '필드 보기';
	card.style.transform = 'scale(1)';
	}
	}

	// 페이지 로드 시 애니메이션 효과
	document.addEventListener('DOMContentLoaded', function() {
	const cards = document.querySelectorAll('.data-card');
	cards.forEach((card, index) => {
	card.style.opacity = '0';
	card.style.transform = 'translateY(30px)';

	setTimeout(() => {
	card.style.transition = 'all 0.6s ease';
	card.style.opacity = '1';
	card.style.transform = 'translateY(0)';
	}, index * 100);
	});
	});

	// 검색 기능 (향후 확장 가능)
	function searchFields(query) {
	const cards = document.querySelectorAll('.data-card');
	cards.forEach(card => {
	const text = card.textContent.toLowerCase();
	if (text.includes(query.toLowerCase())) {
	card.style.display = 'block';
	} else {
	card.style.display = 'none';
	}
	});
	}
	</script>
	</body>
	</html>