251 lines
10 KiB
HTML
251 lines
10 KiB
HTML
{{template "components/header.html" .}}
|
|
{{template "components/preloader.html" .}}
|
|
|
|
<!-- ------------------------------------- -->
|
|
<!-- Header Start -->
|
|
<!-- ------------------------------------- -->
|
|
<header class="header-fp p-0 w-100 position-absolute top-0 start-0 z-3">
|
|
<nav class="navbar navbar-expand-lg bg-transparent py-2 py-lg-3">
|
|
<div class="custom-container d-flex align-items-center justify-content-between w-100">
|
|
<a href="/" class="text-nowrap logo-img">
|
|
<img src="../assets/images/logos/dark-logo.svg" class="dark-logo" alt="Logo-Dark" />
|
|
<img src="../assets/images/logos/light-logo.svg" class="light-logo" alt="Logo-light" />
|
|
</a>
|
|
<button class="navbar-toggler border-0 p-0 shadow-none text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
|
|
<i class="ti ti-menu-2 fs-8"></i>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ms-auto mb-2 gap-xl-4 gap-3 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link fs-4 fw-semibold text-white" href="#">图片</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link fs-4 fw-semibold text-white" href="#">视频</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link fs-4 fw-semibold text-white" href="#">新闻</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link fs-4 fw-semibold text-white" href="#">地图</a>
|
|
</li>
|
|
</ul>
|
|
<div class="ms-3">
|
|
<a href="#" class="btn btn-light btn-sm py-6 px-8">登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- ------------------------------------- -->
|
|
<!-- Header End -->
|
|
<!-- ------------------------------------- -->
|
|
|
|
<!-- ------------------------------------- -->
|
|
<!-- Responsive Sidebar Start -->
|
|
<!-- ------------------------------------- -->
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
|
<div class="offcanvas-header">
|
|
<a href="/">
|
|
<img src="../assets/images/logos/dark-logo.svg" alt="Logo-light" />
|
|
</a>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<ul class="list-unstyled ps-0">
|
|
<li class="mb-1">
|
|
<a href="#" class="px-0 fs-4 d-block text-dark link-primary w-100 py-2">图片</a>
|
|
</li>
|
|
<li class="mb-1">
|
|
<a href="#" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">视频</a>
|
|
</li>
|
|
<li class="mb-1">
|
|
<a href="#" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">新闻</a>
|
|
</li>
|
|
<li class="mb-1">
|
|
<a href="#" class="px-0 fs-4 d-block w-100 py-2 text-dark link-primary">地图</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a href="#" class="btn btn-primary w-100">登录</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- ------------------------------------- -->
|
|
<!-- Responsive Sidebar End -->
|
|
<!-- ------------------------------------- -->
|
|
|
|
<!-- ------------------------------------- -->
|
|
<!-- Search Section with Background -->
|
|
<!-- ------------------------------------- -->
|
|
<div class="main-wrapper position-relative" style="min-height: 100vh; overflow: hidden;">
|
|
<!-- Background Image -->
|
|
<div class="position-fixed top-0 start-0 w-100 h-100" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; z-index: 0;">
|
|
<div class="w-100 h-100" style="background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1));"></div>
|
|
</div>
|
|
|
|
<!-- Search Container -->
|
|
<div class="position-relative z-2 d-flex align-items-center justify-content-center" style="min-height: 100vh; padding-top: 120px; padding-bottom: 60px;">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 col-xl-7">
|
|
<!-- Logo/Brand -->
|
|
<div class="text-center mb-5">
|
|
<h1 class="text-white fw-bolder mb-0" style="font-size: 5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">搜索</h1>
|
|
</div>
|
|
|
|
<!-- Search Box -->
|
|
<div class="search-container position-relative">
|
|
<form action="/search" method="GET" class="w-100">
|
|
<div class="input-group input-group-lg shadow-lg" style="border-radius: 50px; overflow: hidden;">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
class="form-control border-0 py-8 px-9 fs-4"
|
|
placeholder="搜索网页"
|
|
autocomplete="off"
|
|
style="background: rgba(255,255,255,0.95);"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary border-0 px-9 py-8"
|
|
style="border-radius: 0 50px 50px 0;"
|
|
>
|
|
<i class="ti ti-search fs-6"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Banner Carousel -->
|
|
<div class="mt-4">
|
|
<div id="bannerCarousel" class="carousel slide shadow-lg" data-bs-ride="carousel" data-bs-interval="3000" style="border-radius: 20px; overflow: hidden;">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
<button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
<button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<a href="#" class="d-block">
|
|
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="今日图片" style="height: 200px; object-fit: cover;">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5 class="text-white fw-bold">今日图片</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<a href="#" class="d-block">
|
|
<img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="热门搜索" style="height: 200px; object-fit: cover;">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5 class="text-white fw-bold">热门搜索</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<a href="#" class="d-block">
|
|
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" class="d-block w-100" alt="随机图片" style="height: 200px; object-fit: cover;">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h5 class="text-white fw-bold">随机图片</h5>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#bannerCarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#bannerCarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
.search-container input:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#bannerCarousel {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#bannerCarousel .carousel-item img {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
#bannerCarousel .carousel-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#bannerCarousel .carousel-caption {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 10px;
|
|
padding: 10px 20px;
|
|
bottom: 20px;
|
|
}
|
|
|
|
#bannerCarousel .carousel-control-prev,
|
|
#bannerCarousel .carousel-control-next {
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#bannerCarousel .carousel-control-prev:hover,
|
|
#bannerCarousel .carousel-control-next:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
#bannerCarousel .carousel-indicators button {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border: 2px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
#bannerCarousel .carousel-indicators button.active {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-wrapper h1 {
|
|
font-size: 3rem !important;
|
|
}
|
|
|
|
#bannerCarousel .carousel-item img {
|
|
height: 150px !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
<!-- Import Js Files -->
|
|
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../assets/libs/simplebar/dist/simplebar.min.js"></script>
|
|
<script src="../assets/js/theme/app.init.js"></script>
|
|
<script src="../assets/js/theme/theme.js"></script>
|
|
<script src="../assets/js/theme/app.min.js"></script>
|