{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
  <h1 class="mt-4">포렌식</h1>
  <p></p>
  <hr>

  <!-- 탭 헤더 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">해시</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu1-tab" data-bs-toggle="tab" href="#menu1" role="tab" aria-controls="menu1" aria-selected="false">메타정보</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu2-tab" data-bs-toggle="tab" href="#menu2" role="tab" aria-controls="menu2" aria-selected="false">암호</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu3-tab" data-bs-toggle="tab" href="#menu3" role="tab" aria-controls="menu3" aria-selected="false">은닉</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="menu4-tab" data-bs-toggle="tab" href="#menu4" role="tab" aria-controls="menu4" aria-selected="false">레지스트리</a>
    </li>
  </ul>

  <!-- 탭 콘텐츠 -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      
        <p>
             <div class="card">
                <div class="card-body">
                    해시란?<br>
                    임의의 길이를 가진 데이터를 <strong>고정된 길이의 값으로 변환하는 함수나 결과</strong>를 말함. 이때 결과값을 해시값이라고 부른다.<br>    
                </div>
            </div>
            <br>     
실습
<form action="" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="part" value="encoding">
  <fieldset class="mt-3">

    <!-- 라디오 버튼 -->
    <div class="mb-3">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="convert_select" id="radioString" value="string" onclick="toggleInput('string')">
        <label class="form-check-label" for="radioString">문자열</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="convert_select" id="radioFile" value="file" onclick="toggleInput('file')">
        <label class="form-check-label" for="radioFile">파일</label>
      </div>
    </div>

    <!-- 문자열 입력 -->
    <div id="stringInput" class="mb-3" style="display:none;">
      <label for="inputText" class="form-label">문자열 입력</label>
      <input type="text" class="form-control" id="inputText" name="inputText" placeholder="문자열을 입력하세요">
    </div>

    <!-- 파일 업로드 -->
    <div id="fileInput" class="mb-3" style="display:none;">
      <label for="inputFile" class="form-label">파일 업로드</label>
      <input class="form-control" type="file" id="inputFile" name="inputFile">
    </div>

    <!-- 전송 버튼 -->
    <button type="submit" name="button" class="btn btn-primary">변환</button>

  </fieldset>
</form>

<script>
  function toggleInput(type) {
    const stringDiv = document.getElementById('stringInput');
    const fileDiv = document.getElementById('fileInput');

    if (type === 'string') {
      stringDiv.style.display = 'block';
      fileDiv.style.display = 'none';
    } else if (type === 'file') {
      stringDiv.style.display = 'none';
      fileDiv.style.display = 'block';
    }
  }
</script>


        <hr>
        변환결과:<br>
		<div id="result"><strong>{{convert_text}}</strong> : {{convert_result}}</div>

      </p>
    </div>

    <div class="tab-pane fade" {% if active_tab == 'menu1' %}show active{% endif %}" id="menu1" role="tabpanel" aria-labelledby="menu1-tab">
      <p></p>
             <div class="card">
                <div class="card-body">
                    메타정보란?<br>
                    파일의 속성정보를 말함.<br>
					사진의 속성정보 : EXIF를 통해 
					사진을 찍었던 카메라 정보
					EXIF(Exchangeable Image File Format) : 교환 이미지 파일 형식 
					디지털카메라 등에서 사용되는 이미지 파일 
					<br>
                </div>
            </div>
			<br>
			<center>
			<img src="{{url_for('static',filename='img/meta2.jpg')}}" width="800" height="600" alt="메타정보"><br>
			</center>
			<br>
			<form action="" method="POST">
				<button type="submit" name="button" class="btn btn-primary">사진분석</button>
			</form>
			<hr>
			분석결과<br>

    </div>

    <div class="tab-pane fade" id="menu2" role="tabpanel" aria-labelledby="menu2-tab">
      <p>HTML 인코딩/디코딩 내용</p>
    </div>


    <div class="tab-pane fade" id="menu3" role="tabpanel" aria-labelledby="menu3-tab">
      <p>암호화 내용</p>
    </div>


    <div class="tab-pane fade" id="menu4" role="tabpanel" aria-labelledby="menu4-tab">
      <p>해시 내용</p>
    </div>

  </div>

</div>
{% endblock %}