기초 임베디드 실험 발표 : HTML 소스

Tuesday. June 04, 2019 - 2 mins
<!DOCTYPE html>
<html>
<title>Embedded System Basic Project</title>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: "굴림체";
  font-size : 11pt;
}

/* Style the header */
.header {
  grid-area: header;
  background-color: #FA7268;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left left right right right' 
    'footer footer footer footer footer footer';
  
  /* grid-column-gap: 10px; - if you want gap between the columns */
} 

.left,
.right {
  padding: 10px;
  height: 800px; /* Should be removed. Only for demonstration */
}

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #FA7268;
  padding: 10px;
  /*text-align: center;*/
}
pre {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  white-space: pre;
  margin: 1em 0;
} 
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left left left left' 
      'right right right right right rightright right right' 
      'footer footer footer footer footer footer';
  }
}
</style>
<script type = "text/javascript" src="/socket.io/socket.io.js">
</script>
<script type ="text/javascript">
    var socket = io.connect();
    if(socket !=null && socket != undefined){
        socket.on('server_login', function(data){
            document.getElementById("login_result").innerText = data;
        });
    } 
    function func_btn(){
        socket.emit('client_ID+PSW', document.getElementById("username").value + document.getElementById("psw").value);
    }
</script>
</head>
<body>

<div class="grid-container">
  <div class="header" style = "color : aliceblue">
    <h2 >기초임베디드실험 프로젝트 발표</h2>
    <p class="w3-xlarge">32144034 장원준</p>
  </div>
  
  <div class="left">
    <div class="w3-twothird" >
      <h1>로그인 페이지</h1>
      <form>
            User name:<br>
            <input type="text" id ="username"><br>
            User password:<br>
            <input type="password" id ="psw">
        </form>
        <br>
        <input type ="button" value ="로그인" onclick= "func_btn()">
        <h3 id ="login_result">결과</h3>
    </div>
  </div>     
    
  <div class="right" style="background-color:#ccc;">
  <div class="w3-twothird">
      <h1>방범용으로 활용하는 라이다 센서</h1>
      <h5 class="w3-padding-32">LIDAR 센서를 사용하여 반경 안에 침입자가 있는지 확인한다.</h5>
      <img src ="image001.png"  alt="초음파레이더">
      <p class="w3-text-grey">반경 20cm 안에 물체를 감지하였을 경우에 "Danger" 라는 문구를 띄운다.<br>5v DC모터와 라이다센서가 필요하다.</p>
      <a href="https://youtu.be/rPjpmY5jl2Q">참고 자료</a>
    </div>
  </div>
  
  <div class="footer">
  <div class="logo" style="float:left">
      <img src = "깃헙이미지.png" height="40" width="40">
  </div>
  <div class="txtbox" style="float:left"> 
      <a href = "https://lucas-jang.github.io/"><pre>   Github Blog   </pre></a>
  </div>
  <div class="logo" style="float:left">
      <img src = "메일.png" height="40" width="40">
  </div>
  <div class="txtbox" style="float:left"> 
      <a href = "mailto:joon11132dj@gmail.com"><pre>   Mail   </pre></a>
  </div>
  <div class="logo" style="float:left">
      <img src = "페이스북.png" height="50" width="50">
  </div>
  <div class="txtbox" style="float:left"> 
      <a href = "https://www.facebook.com/profile.php?id=100006424331312"><pre>   FaceBook   </pre></a>
  </div>
  </div>
</div>

</body>
</html>
기초 임베디드 실험 발표 : HTML 소스

Related Posts
