在wampserver運行的php腳本
更改的別人的模板
index.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Index</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-01.jpg">
<img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-03.jpg">
<img src="img/img-11-03.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-04.jpg">
<img src="img/img-11-04.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-04.jpg">
<img src="img/img-21-04.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-05.jpg">
<img src="img/img-11-05.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-02.jpg">
<img src="img/img-11-02.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-01.jpg">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-06.jpg">
<img src="img/img-11-06.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-02.jpg">
<img src="img/img-21-02.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-07.jpg">
<img src="img/img-11-07.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-08.jpg">
<img src="img/img-11-08.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-03.jpg">
<img src="img/img-21-03.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row tm-row-margin-b tm-content-boxes-row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="tm-content-box">
<i class="fa fa-4x fa-bicycle tm-content-icon"></i>
<h2 class="tm-content-title">XXXXX</h2>
<p>XXXXXX。</p>
<p>XXXXXXXX。</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="tm-content-box">
<i class="fa fa-4x fa-camera tm-content-icon"></i>
<h2 class="tm-content-title">XXXX</h2>
<p>XXXXX。</p>
<p>XXXXX</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
<div class="tm-content-box">
<i class="fa fa-4x fa-street-view tm-content-icon"></i>
<h2 class="tm-content-title">XXXX</h2>
<p>XXXX。</p>
<p>XXXX。</p>
<p>XXXX。</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-testi">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid img-circle tm-testi-img">
<div class="tm-testi-text-box">
<p class="tm-testi-text">XXXXXX。</p>
<p class="tm-testi-text">XXXXX。</p>
</div>
<p class="tm-testi-sig">團隊成員：X、X、X</p>
</div>
</div>
</div> <!-- row -->
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
});
</script>
</body>
</html>
describe.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Describe</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-01.jpg">
<img src="img/img-21-01.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-03.jpg">
<img src="img/img-21-03.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item active">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="describe.php">
<div class="form-group tm-form-group-search">
<input type="file" name="search_term" class="form-control tm-search-input" id="inputSearch">
</div>
<button type="submit" class="btn tm-search-btn">上傳圖片</button>
</form>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-testi">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid img-circle tm-testi-img">
<div class="tm-testi-text-box">
<p class="tm-testi-text">描述圖片的自然語言</p>
</div>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="describe.php">
<div class="form-group tm-form-group-search">
<input type="text" name="search_term" class="form-control tm-search-input" id="inputSearch" placeholder="輸入你的描述...">
</div>
<button type="submit" class="btn tm-search-btn">搜索圖片</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Ut maximus, purus venenatis volutpat pellentesque, lectus metus egestas lacus, nec scelerisque magna tortor eget massa. Nulla in lacinia metus. #000</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-03.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Duis augue risus, auctor nec neque eu, sodales egestas ligula. Ut maximus, purus venenatis volutpat pellentesque, lectus metus egestas lacus, nec scelerisque.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-05.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Nulla in lacinia metus. Quisque hendrerit ullamcorper lacus eget tincidunt. Praesent convallis felis sed efficitur porta. Duis vitae eros elit. Nam vitae quam.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-07.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Praesent convallis felis sed efficitur porta. Duis vitae eros elit. Nam vitae quam metus. Nam congue augue non accumsan consequat. Proin consequat elit.</p>
</div>
</div>
</div> <!-- row -->
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
});
</script>
</body>
</html>style.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Style</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-05.jpg">
<img src="img/img-11-05.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-02.jpg">
<img src="img/img-11-02.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-01.jpg">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-06.jpg">
<img src="img/img-11-06.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item active">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="style.php">
<div class="form-group tm-form-group-search">
<input type="file" name="search_term" class="form-control tm-search-input" id="inputSearch">
</div>
<button type="submit" class="btn tm-search-btn">上傳圖片</button>
</form>
</div>
</div>
</div> <!-- row -->
<div class="row tm-tabs-container">
<div class="tm-tab-links-col">
<nav>
<ul class="tm-tabs">
<li class="tm-tab-link-item">
<a id="tab1" href="javascript:void(0)" class="tm-tab-link active">
<i class="fa fa-music tm-tab-icon"></i>
<div class="tm-tab-link-label">Tab Section First</div>
</a>
</li>
<li class="tm-tab-link-item">
<a id="tab2" href="javascript:void(0)" class="tm-tab-link">
<i class="fa fa-users tm-tab-icon"></i>
<span class="tm-tab-link-label">Second Tab Title</span>
</a>
</li>
<li class="tm-tab-link-item">
<a id="tab3" href="javascript:void(0)" class="tm-tab-link">
<i class="fa fa-heart tm-tab-icon"></i>
<span class="tm-tab-link-label">Third Section Tab</span>
</a>
</li>
<li class="tm-tab-link-item">
<a id="tab4" href="javascript:void(0)" class="tm-tab-link">
<i class="fa fa-microphone tm-tab-icon"></i>
<span class="tm-tab-link-label">Title Fourth comes up</span>
</a>
</li>
<li class="tm-tab-link-item">
<a id="tab5" href="javascript:void(0)" class="tm-tab-link">
<i class="fa fa-globe tm-tab-icon"></i>
<span class="tm-tab-link-label">Fifth Title goes here</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="tm-tab-content-box-col">
<div id="tab1C" class="tm-tab-content-box">
<img src="img/img-11-04.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>You can <strong>easily</strong> change <a rel="nofollow" href="http://fontawesome.io/icons/" target="_blank">Font Awesome icons</a> in HTML codes. Feel free to modify and use this layout for your websites. Nunc elementum enim nec justo ornare mollis. Sed facilisis urna vitae lectus maximus, scelerisque aliquet ligula cursus.</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div id="tab2C" class="tm-tab-content-box">
<img src="img/img-11-05.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>Nam tortor lacus, fringilla nex quam a, volupat laoreet dui. Nunc consequat nulla vel ipsum cursus, eu tempor mauris gravida. Donec sit amet.
</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div id="tab3C" class="tm-tab-content-box">
<img src="img/img-11-03.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p><em>Nunc finibus vehicula pharetra. Fusce sed ante a odio fringilla bibendum. Donec et pharetra orci. Praesent tempus efficitur tellus.</em>
</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div id="tab4C" class="tm-tab-content-box">
<img src="img/img-11-02.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>Donec a suscipit turpis. Duis hendrerit risus arcu, et eleifend ipsum vaius vel. Nam tortor lacus, fringilla nec quam a, volupat laoreet dui.
</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div id="tab5C" class="tm-tab-content-box">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>Proin volupat luctus lacus, sollicitudin dictum orci vestibulum eu. Sed quis fringilla nulla.
</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- Preloader, https://ihatetomatoes.net/create-custom-preloading-screen/ -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
// Tabs
// http://stackoverflow.com/questions/11645081/how-to-build-simple-tabs-with-jquery
$('.tm-tab-content-box').hide();
//$('#tab1C').fadeIn('slow');
$('#tab1C').show();
$('.tm-tab-link').click(function(){
var t = $(this).attr('id');
$('.tm-tab-link').removeClass('active');
$(this).addClass('active');
$('.tm-tab-content-box').hide();
$('#'+ t + 'C').fadeIn('slow');
});
// Remove preloader
// https://ihatetomatoes.net/create-custom-preloading-screen/
$('body').addClass('loaded');
});
</script>
</body>
</html>
mul_label.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Blog</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-03.jpg">
<img src="img/img-11-03.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-04.jpg">
<img src="img/img-11-04.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-11-07.jpg">
<img src="img/img-11-07.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
<a href="img/img-11-08.jpg">
<img src="img/img-11-08.jpg" alt="Image" class="img-fluid tm-header-img col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item active">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="mul_label.php">
<div class="form-group tm-form-group-search">
<input type="file" name="search_term" class="form-control tm-search-input" id="inputSearch">
</div>
<button type="submit" class="btn tm-search-btn">上傳圖片</button>
</form>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-testi">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid img-circle tm-testi-img">
<div class="tm-testi-text-box">
<p class="tm-testi-text">描述圖片的標記</p>
</div>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="mul_label.php">
<div class="form-group tm-form-group-search">
<input type="text" name="search_term" class="form-control tm-search-input" id="inputSearch" placeholder="輸入你的描述...">
</div>
<button type="submit" class="btn tm-search-btn">搜索圖片</button>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Ut maximus, purus venenatis volutpat pellentesque, lectus metus egestas lacus, nec scelerisque magna tortor eget massa. Nulla in lacinia metus. #000</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-03.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Duis augue risus, auctor nec neque eu, sodales egestas ligula. Ut maximus, purus venenatis volutpat pellentesque, lectus metus egestas lacus, nec scelerisque.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-05.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Nulla in lacinia metus. Quisque hendrerit ullamcorper lacus eget tincidunt. Praesent convallis felis sed efficitur porta. Duis vitae eros elit. Nam vitae quam.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-about-box-2">
<img src="img/img-11-07.jpg" alt="Image" class="img-fluid">
<p class="tm-about-description-2">Praesent convallis felis sed efficitur porta. Duis vitae eros elit. Nam vitae quam metus. Nam congue augue non accumsan consequat. Proin consequat elit.</p>
</div>
</div>
</div> <!-- row -->
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
});
</script>
</body>
</html>
text.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Contact</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-04.jpg">
<img src="img/img-21-04.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-02.jpg">
<img src="img/img-21-02.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item active">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="text.php">
<div class="form-group tm-form-group-search">
<input type="file" name="search_term" class="form-control tm-search-input" id="inputSearch">
</div>
<button type="submit" class="btn tm-search-btn">上傳圖片</button>
</form>
</div>
</div>
</div> <!-- row -->
<div id="tab5C" class="tm-tab-content-box">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>提取圖片中重要文本信息</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
});
/* Google map
------------------------------------------------*/
var map = '';
var center;
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(37.769725, -122.462154),
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
function calculateCenter() {
center = map.getCenter();
}
function loadGoogleMap(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
// DOM is ready
$(function() {
loadGoogleMap(); // Google Map
});
</script>
</body>
</html>
face.php
<!DOCTYPE html>
<html lang="en">
<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>Pic Magic Contact</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header gallery -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<section class="tm-header-gallery">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-04.jpg">
<img src="img/img-21-04.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<div class="tm-site-name">
<h1 class="text-uppercase tm-site-name-h1">PICTURE MAGIC</h1>
<h2 class="tm-site-name-h2">by /Shen/Chen/Zhang</h2>
</div>
<img src="img/logo-bg.jpg" alt="Image" class="img-fluid tm-header-img">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0">
<a href="img/img-21-02.jpg">
<img src="img/img-21-02.jpg" alt="Image" class="img-fluid tm-header-img">
</a>
</div>
</section>
</div>
</div>
<!-- Navigation -->
<div class="row">
<div class="col-lg-12">
<nav class="navbar">
<div id="tmNavbar">
<div class="nav navbar-nav tm-nav">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</div>
<div class="nav-item">
<a class="nav-link" href="describe.php">Describe</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="style.php">Style</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="mul_label.php">Mul_Label</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 tm-pad-0 tm-nav-item-pair">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item">
<a class="nav-link" href="text.php">Text</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 nav-item active">
<a class="nav-link" href="face.php">Face</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-search-form-container tm-blue-bg">
<form class="form-inline tm-search-form" method="get" action="face.php">
<div class="form-group tm-form-group-search">
<input type="file" name="search_term" class="form-control tm-search-input" id="inputSearch">
</div>
<button type="submit" class="btn tm-search-btn">上傳圖片</button>
</form>
</div>
</div>
</div> <!-- row -->
<div id="tab5C" class="tm-tab-content-box">
<img src="img/img-11-01.jpg" alt="Image" class="img-fluid tm-tab-content-img">
<div class="tm-tab-content-text">
<p>描述圖片中人臉的表情</p>
<ul class="tm-ul-plus">
<li>Vestibulum ullamcorper et lectus</li>
<li>Donec efficitur placer magna</li>
<li>Praesent venenatis diam pellentesque</li>
<li>Nunc consequat nulla vel ipsum</li>
</ul>
</div>
</div>
<div class="row tm-nav-2-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<nav class="tm-flex-center">
<ul class="tm-nav-2">
<li class="tm-nav-item-2"><a href="index.php" class="tm-nav-link-2">Home</a></li>
<li class="tm-nav-item-2"><a href="describe.php" class="tm-nav-link-2">Describe</a></li>
<li class="tm-nav-item-2"><a href="style.php" class="tm-nav-link-2">Style</a></li>
<li class="tm-nav-item-2"><a href="mul_label.php" class="tm-nav-link-2">Mul_Label</a></li>
<li class="tm-nav-item-2"><a href="text.php" class="tm-nav-link-2">Text</a></li>
<li class="tm-nav-item-2"><a href="face.php" class="tm-nav-link-2">Face</a></li>
</ul>
</nav>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="tm-social-icons-container text-xs-center">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
<footer class="row tm-footer">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<p class="text-xs-center tm-copyright">Copyright © 2018
| Team: <a href="http://www.sdu.edu.cn/" target="_parent">ShanDong University</a></p>
</div>
</footer>
</div> <!-- container-fluid -->
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
<script>
$(window).load(function(){
/* Gallery pop up
-----------------------------------------*/
$('.tm-header-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
});
/* Google map
------------------------------------------------*/
var map = '';
var center;
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(37.769725, -122.462154),
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
function calculateCenter() {
center = map.getCenter();
}
function loadGoogleMap(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}
// DOM is ready
$(function() {
loadGoogleMap(); // Google Map
});
</script>
</body>
</html>