![图片[1]-只需要一个文件 就能搭建一个影视网站!!!](https://www.baoshanren.cn/wp-content/uploads/2024/10/20241024165439453-截屏2024-10-24-16.54.19-1024x576.png)
搭建教程： https://www.dalao.net/thread-31908.htm
以下内容保存为html文件即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缤纷TV - 基于大佬论坛动力支撑</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
body {
padding: 0;
margin: 0;
background: linear-gradient(90deg, #edc0bf 0, #c4caef 58%);
font-family: 'Inter', sans-serif;
}
.container {
width: 90%;
max-width: 600px;
margin: 20px auto;
padding: 10px;
border-radius: 10px;
}
.module {
background-color: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ad-banner {
width: 100%;
border-radius: 10px;
}
.notification p {
background-color: #e0f7fa;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
text-align: center;
color: #00796b;
font-weight: bold;
}
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 10px;
overflow: hidden;
background-color: #000;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.search-section {
text-align: center;
margin-bottom: 20px;
}
.search-section p {
margin-bottom: 10px;
font-size: 20px;
color: #007BFF;
}
.search-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background-color: rgba(255, 255, 255, 0.3);
padding: 10px;
border-radius: 10px;
}
.search-section input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.3);
transition: border-color 0.3s;
}
.search-section input[type="text"]:focus {
border-color: #007BFF;
}
.search-section button {
padding: 10px 20px;
border: none;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s;
}
.search-section button:hover {
transform: scale(1.05);
}
.result-card {
display: flex;
flex-direction: column;
padding: 15px;
border: 1px solid #ddd;
border-radius: 10px;
margin: 10px 0;
cursor: pointer;
background-color: #fff;
transition: box-shadow 0.3s, background-color 0.3s;
}
.result-card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
}
.result-card h3 {
margin: 0;
font-size: 20px;
color: #333;
}
.result-card .info {
margin-top: 5px;
}
.result-card .info p {
margin: 0;
color: #666;
font-size: 14px;
}
.result-card .info .type {
margin-top: 5px;
color: #007BFF;
}
.result-card .info .date-remarks {
margin-top: 5px;
font-size: 14px;
color: #666;
}
.details-section {
display: none;
}
.details-container {
display: flex;
flex-direction: column;
background-color: #f0f8ff;
padding: 20px;
border-radius: 10px;
}
.intro-container {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.intro-container img {
width: 100%;
max-width: 150px;
height: auto;
object-fit: cover;
border-radius: 10px;
margin-right: 20px;
display: none;
}
.intro-container div {
flex: 1;
}
.intro-container h3 {
margin: 0;
font-size: 24px;
color: #007BFF;
}
.intro-container p {
margin: 5px 0;
color: #666;
font-size: 16px;
}
.episode-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.episode-buttons button {
padding: 10px;
border: none;
background-color: #007BFF;
color: #fff;
border-radius: 5px;
cursor: pointer;
flex: 1 1 30%;
font-size: 14px;
transition: background-color 0.3s, transform 0.3s;
}
.episode-buttons button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.back-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
width: 100px;
transition: background-color 0.3s, transform 0.3s;
}
.back-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.cards-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 20px;
}
.card {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: calc(50% - 10px);
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: scale(1.02);
}
.card h3 {
margin: 0 0 10px 0;
font-size: 18px;
color: #007BFF;
}
.card p {
margin: 0;
font-size: 16px;
color: #333;
}
.card button {
padding: 10px 20px;
margin-top: 10px;
border: none;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: transform 0.3s;
}
.card button:hover {
transform: scale(1.05);
}
.card img {
width: 100%;
max-width: 150px;
height: auto;
border-radius: 10px;
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #007BFF;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.no-results {
text-align: center;
color: #ff0000;
font-weight: bold;
margin-top: 20px;
background-color: #ffe0e0;
padding: 10px;
border-radius: 5px;
}
@media (max-width: 600px) {
.cards-container {
flex-direction: column;
align-items: center;
}
.card {
width: 100%;
max-width: 90%;
margin: 0 auto;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="module">
<img src="https://img.fish9.cn/yingshicdn/assets/eleme_shuiyin-D5BAbDDn.png" alt="广告图片" class="ad-banner">
</div>
</header>
<div class="cards-container">
<div class="card">
<img src="https://www.freeimg.cn/i/2024/08/02/66ac91ae435c9.png" alt="展示图片">
</div>
<div class="card" id="datetime-card">
<h3>当前时间</h3>
<p id="current-datetime"></p>
<div class="button-group">
<button onclick="alert('')">广告合作</button>
<button onclick="alert1('')">打赏我们</button>
</div>
<button onclick="redirectToURL()">下载源码</button>
</div>
</div>
<div class="module">
<div class="notification">
<p>你是不是像我在太阳下低头，流着汗水默默辛苦的工作？</p>
</div>
<div class="video-section">
<div class="video-wrapper">
<iframe id="video-player" src="https://vip.yyzyplay.com/?url=" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="module">
<div class="search-section">
<p>想看啥，尽情搜~</p>
<div class="search-bar">
<input type="text" id="search-query" placeholder="请输入电影名称">
<button id="search-button">搜索</button>
</div>
</div>
<div id="search-results" class="result-section"></div>
<div id="details-section" class="details-section">
<button class="back-button" onclick="showSearchResults()">返回搜索结果</button>
<div class="details-container">
<div class="intro-container">
<img id="detail-pic" src="" alt="影片图片">
<div>
<h3 id="detail-name"></h3>
<p id="detail-director"></p>
<p id="detail-actor"></p>
<p id="detail-content"></p>
</div>
</div>
<div id="episode-buttons" class="episode-buttons"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
function updateDateTime() {
var now = new Date();
var dateTimeString = now.toLocaleString();
$('#current-datetime').text(dateTimeString);
}
setInterval(updateDateTime, 1000);
updateDateTime();
$('#search-button').click(function () {
var query = $('#search-query').val();
if (query) {
$('#search-results').empty();
$('#search-results').append('<div class="loading-container"><div class="loading-spinner"></div></div>');
showSearchResults();
$.ajax({
url: '/api',
type: 'GET',
data: {
ac: 'list',
wd: query
},
success: function (response) {
$('#search-results').empty();
var resultBody = $('#search-results');
try {
var jsonResponse = JSON.parse(response);
if (jsonResponse.code === 1) {
var list = jsonResponse.list;
if (list.length > 0) {
list.forEach(function (item) {
var card = $('<div class="result-card" data-id="' + item.vod_id + '">' +
'<h3>' + item.vod_name + '</h3>' +
'<div class="info">' +
'<p class="date-remarks">更新日期: ' + item.vod_time + ' | 最新期数: ' + item.vod_remarks + ' | <span class="type">类型: ' + item.type_name + '</span>' + '</p>' +
'</div>' +
'</div>');
card.click(function () {
var vod_id = $(this).data('id');
$('#details-section').append('<div class="loading-container"><div class="loading-spinner"></div></div>');
$.ajax({
url: '/api',
type: 'GET',
data: {
ac: 'detail',
ids: vod_id
},
success: function (detailResponse) {
$('#details-section .loading-container').remove();
try {
var detailJson = JSON.parse(detailResponse);
if (detailJson.code === 1) {
var detail = detailJson.list[0];
if (detail.vod_pic) {
$('#detail-pic').attr('src', detail.vod_pic).show();
} else {
$('#detail-pic').attr('src', '').hide();
}
$('#detail-name').text(detail.vod_name);
$('#detail-director').text('导演: ' + detail.vod_director);
$('#detail-actor').text('主演: ' + detail.vod_actor);
$('#detail-content').text(detail.vod_content);
var playUrls = detail.vod_play_url.split('#');
var episodeButtons = $('#episode-buttons');
episodeButtons.empty();
if (playUrls.length > 0) {
playUrls.forEach(function (playUrl) {
var parts = playUrl.split('$');
var episodeButton = $('<button>' + parts[0] + '</button>');
episodeButton.click(function () {
$('#video-player').attr('src', 'https://play.dytv.cc/player/?url=' + parts[1]);
});
episodeButtons.append(episodeButton);
});
}
showDetailsSection();
}
} catch (e) {
console.error('Error parsing detail response:', e);
}
},
error: function () {
$('#details-section .loading-container').remove();
console.error('Error fetching detail data');
}
});
});
resultBody.append(card);
});
} else {
resultBody.append('<p class="no-results">没有找到相关结果</p>');
}
} else {
resultBody.append('<p class="no-results">搜索失败，请稍后再试</p>');
}
} catch (e) {
resultBody.append('<p class="no-results">解析搜索结果时出错，请稍后再试</p>');
console.error('Error parsing search response:', e);
}
},
error: function () {
$('#search-results').empty();
$('#search-results').append('<p class="no-results">搜索失败，请检查网络连接</p>');
console.error('Error fetching search data');
}
});
} else {
$('#search-results').empty();
$('#search-results').append('<p class="no-results">请输入搜索内容</p>');
}
});
});
function showDetailsSection() {
$('#search-results').hide();
$('#details-section').show();
}
function showSearchResults() {
$('#details-section').hide();
$('#search-results').show();
}
function redirectToURL() {
window.location.href = "https://www.baoshanren.cn/";
}
function alert1() {
window.location.href = "https://www.baoshanren.cn/zanzhu";
}
function alert() {
window.location.href = "https://qm.qq.com/q/ZJLDAWXEgS";
}
</script>
</body>
</html>
© 版权声明
THE END
暂无评论内容