<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ian Xia - 首页</title>
    <!-- Bootstrap -->
    <link href="https://cdn.gh.ink/assembly/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.gh.ink/assembly/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Modal -->
    <link rel="stylesheet" href="../static/css/modal.css">
    <!-- Favicon -->
    <link rel="icon" href="https://cdn.gh.ink/image/avatar/Bigsk.png" type="image/png">

		<meta name="author" content="Bigsk">
		<meta name="description" content="Bigsk的个人网站">
		<meta name="keywords" content="bigsk,ianxia,xiaxinzhe,blog,摄影,开发,开源,全栈,博客">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="index.html">
          <img src="../static/images/logo.png" alt="Ian Xia 的 Logo" height="40">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html"><b>首页</b></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html"><b>关于</b></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    <b>更多</b>
			  </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="https://blog.ianxia.com"><b>博客</b></a>
                <a class="dropdown-item" href="https://demo.ianxia.com"><b>DEMO</b></a>
                <a class="dropdown-item" href="https://adsb.ianxia.com"><b>ADS-B</b></a>
                <a class="dropdown-item" href="https://tools.ianxia.com"><b>小工具</b></a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://www.ghink.net"><b>我的工作室</b></a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../en_US/index.html"><b>English</b></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <br>
    <h2 class="text-center">摄影作品</h2>
    <br>
    <div class="container">
      <div class="row text-center">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Sunrise%20Pavilion.jpg" alt="日出早亭" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Sunset%20Lake.jpg" alt="夕阳湖畔" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Sunrise%20Snow.jpg" alt="雪原黎明" onclick="show_modal(this)">
          </div>
        </div>
      </div>
      <div class="row text-center mt-4">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Overlooking%20Puppy.jpg" alt="犬目远眺" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Snow%20Highway.jpg" alt="雪国公路" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Walk%20Alone.jpg" alt="独行山涧" onclick="show_modal(this)">
          </div>
        </div>
      </div>
      <div class="row text-center mt-4">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Dusk%20Approaching.jpg" alt="黄昏近前" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Green%20Plants.jpg" alt="漫山碧透" onclick="show_modal(this)">
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <img class="card-img-top img-obj" src="../static/images/Mountain%20Sky.jpg" alt="连峰远山" onclick="show_modal(this)">
          </div>
        </div>
      </div>
    </div>
    <br>
    <h2 class="text-center">编程作品</h2>
	<br>
    <div class="container">
      <div class="row text-center">
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Image Modal</h5>
              <p class="card-subtitle"><span class="badge badge-success">JavaScript</span></p>
              <p class="card-text mr-auto">使用模态框大图来展示你的网站图片</p>
              <a href="https://git.ghink.net/bigsk/Image_Modal" class="btn btn-primary" target="_blank">了解更多</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Piuka</h5>
              <p class="card-subtitle"><span class="badge badge-success">Python</span></p>
              <p class="card-text">强大的Python&trade;下载引擎</p>
              <a href="https://git.ghink.net/Ghink/Piuka" class="btn btn-primary" target="_blank">了解更多</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 pb-1 pb-md-0">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Log4Py</h5>
              <p class="card-subtitle"><span class="badge badge-success">Python</span></p>
              <p class="card-text">灵活的Python&trade;日志模块</p>
              <a href="https://git.ghink.net/Ghink/log4py" class="btn btn-primary" target="_blank">了解更多</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
	<script>
		let date = new Date();
	</script>
    <footer class="text-center">
      <div class="container">
        <div class="row">
          <div class="col-md-6 mr-auto text-left">
            <p style="color: #516069"><strong>版权所有 © Ian Xia <script>document.write(date.getFullYear().toString());</script>。 保留所有权利。</strong></p>
          </div>
          <div class="col-md-6 ml-auto text-right">
            <a href="mailto:i@ianxia.com" style="color: #516069" class="px-1"><i class="fa fa-envelope-o"></i></a>
            <a href="https://github.com/bigsk05" style="color: #516069" class="px-1"><i class="fa fa-github-alt"></i></a>
            <a href="https://gitee.com/bigsk" style="color: #516069" class="px-1"><i class="fa fa-code-fork"></i></a>
            <a href="https://git.ghink.net/bigsk" style="color: #516069" class="px-1"><i class="fa fa-code"></i></a>
            <a href="https://t.me/Bigskkk" style="color: #516069" class="px-1"><i class="fa fa-paper-plane-o"></i></a>
            <a href="https://twitter.com/Bigskkk" style="color: #516069" class="px-1"><i class="fa fa-twitter"></i></a>
            <a href="https://www.facebook.com/ianxia.bigsk" style="color: #516069" class="px-1"><i class="fa fa-facebook-official"></i></a>
            <a href="https://www.instagram.com/bigskkkk/" style="color: #516069" class="px-1"><i class="fa fa-instagram"></i></a>
            <a href="https://wpa.qq.com/msgrd?v=3&uin=1206066991&site=qq&menu=yes" style="color: #516069" class="px-1"><i class="fa fa-qq"></i></a>
          </div>
        </div>
      </div>
      <br>
    </footer>
    <div class="modal" id="modal">
      <span class="close" id="close">×</span>
      <img class="modal_img" id="modal_img">
      <div id="caption"></div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.gh.ink/js/jquery/jquery-3.6.0.min.js"></script><!-- Grey Filter Detector -->
    <script>
      $.ajax({
        type: "GET",
        url: "https://open.geh.ink/grey_filter",
        dataType: "json",
        success: function(data, textStatus){
          for (let i=0;i<data["content"]["accurate_slot"].length;i++) {
            // Accurate Slot
            if (Date.now()/1000 >= data["content"]["accurate_slot"][i][0] && Date.now()/1000 <= data["content"]["accurate_slot"][i][1]) {
              $("html").css({
                '-webkit-filter': 'grayscale(100%)',
                '-moz-filter': 'grayscale(100%)',
                '-ms-filter': 'grayscale(100%)',
                '-o-filter': 'grayscale(100%)',
                'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
                '_filter': 'none'
              });
              break;
            }
          }
          for (let i=0;i<data["content"]["day_slot"].length;i++) {
            // Day Slot
            let begin = new Date(
              date.getFullYear().toString() + "-" + 
              data["content"]["day_slot"][i][0][0].toString() + "-" + 
              data["content"]["day_slot"][i][0][1].toString() + " " + 
              data["content"]["day_slot"][i][0][2].toString() + ":" +
              data["content"]["day_slot"][i][0][3].toString() + ":" +
              data["content"]["day_slot"][i][0][4].toString()
            )
            let end = new Date(
              date.getFullYear().toString() + "-" + 
              data["content"]["day_slot"][i][1][0].toString() + "-" + 
              data["content"]["day_slot"][i][1][1].toString() + " " + 
              data["content"]["day_slot"][i][1][2].toString() + ":" +
              data["content"]["day_slot"][i][1][3].toString() + ":" +
              data["content"]["day_slot"][i][1][4].toString()
            )
            if (Date.now() >= begin.getTime() && Date.now() <= end.getTime()) {
              $("html").css({
                '-webkit-filter': 'grayscale(100%)',
                '-moz-filter': 'grayscale(100%)',
                '-ms-filter': 'grayscale(100%)',
                '-o-filter': 'grayscale(100%)',
                'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
                '_filter': 'none'
              });
              break;
            }
          }
        }
      });
    </script>
    <!-- owl carousel -->
    <script src="https://cdn.gh.ink/site/ghink/v2/js/owl.carousel.js"></script>
    <!-- script for tesimonials carousel slider -->
    <!-- script for owlcarousel -->
    <script>
      $(document).ready(function () {
        $('.owl-testimonial').owlCarousel({
          loop: true,
          margin: 0,
          nav: false,
          responsiveClass: true,
          autoplay: false,
          autoplayTimeout: 5000,
          autoplaySpeed: 1000,
          autoplayHoverPause: false,
          responsive: {
            0: {
              items: 1,
              nav: false
            },
            480: {
              items: 1,
              nav: false
            },
            667: {
              items: 1,
              nav: false
            },
            1000: {
              items: 1,
              nav: false
            }
          }
        })
      })
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.gh.ink/js/popper/1.16.1/popper.min.js"></script>
    <script src="https://cdn.gh.ink/assembly/bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <!-- Modal for image display -->
    <script src="../static/js/modal.js"></script>
  </body>
</html>