xlive/templates/index.html

119 lines
4.5 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="page-title">AI全球直播平台</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function setLanguage() {
const userLang = navigator.language || navigator.userLanguage;
document.documentElement.lang = userLang;
const translations = {
en: {
title: "AI Global Live Platforms",
watch: "Watch Live"
},
zh: {
title: "AI全球直播平台",
watch: "观看直播"
},
// Add more translations as needed
};
const lang = translations[userLang.split('-')[0]] || translations['en'];
document.getElementById('page-title').innerText = lang.title;
document.querySelectorAll('.watch-link').forEach(link => {
link.innerText = lang.watch;
});
}
document.addEventListener("DOMContentLoaded", setLanguage);
</script>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
#video_container {
background-color: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
#close_button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background-color: red;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 18px;
z-index: 1001;
}
#mute_tip {
text-align: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
</style>
</head>
<body>
<div id="main_flash_alert">Flash Alert</div>
<video id="video_player" controls style="display:none;"></video>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.12.2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/mpegts-1.7.2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/hls-0.14.17.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/dash-v4.5.1.all.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/json2.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/srs.page.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/srs.log.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/srs.utility.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/winlin.utility.js') }}"></script>
<h1 id="page-title">AI全球直播平台</h1>
<div class="container" id="platforms">
{% for platform in platforms %}
<div class="platform">
<img src="{{ platform.image }}" alt="{{ platform.name }}">
<h2>{{ platform.name }}</h2>
<p>{{ platform.description }}</p>
<a href="javascript:void(0);" onclick="apply_url_change('{{ platform.link }}')" class="watch-link">观看直播</a>
</div>
{% endfor %}
</div>
<div id="overlay">
<div id="video_container">
<button id="close_button" onclick="closeOverlay()">×</button>
<video id="overlay_video_player" controls style="max-width: 100%; max-height: 100%;"></video>
<div id="mute_tip">如果您听不到声音,请手动点击播放窗口右下角的静音按钮。</div>
</div>
</div>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>