151 lines
7.4 KiB
HTML
151 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>闪耀吧！噜咪 - 官方网站</title>
|
||
<!-- 引入好看的中文字体 (ZCOOL KuaiLe) -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Welcome Overlay -->
|
||
<div id="welcome-overlay">
|
||
<button id="enter-button">米子付了尾款再去掉</button>
|
||
</div>
|
||
|
||
<!-- Background Video -->
|
||
<div class="video-background">
|
||
<video autoplay muted loop id="bg-video">
|
||
<source src="background-video.mp4" type="video/mp4">
|
||
您的浏览器不支持视频播放。
|
||
</video>
|
||
</div>
|
||
|
||
<!-- Main Content Container -->
|
||
<div class="main-container">
|
||
|
||
<!-- Top-Left Logo -->
|
||
<header class="logo">
|
||
<img src="image/logo.png" alt="闪耀吧！噜咪 Logo">
|
||
</header>
|
||
|
||
<!-- Top-Right Icons -->
|
||
<div class="top-right-icons">
|
||
<a href="#" class="icon-link" id="sound-on-btn"><img src="image/sound-on-icon.png" alt="打开声音"></a>
|
||
<a href="#" class="icon-link" id="sound-off-btn"><img src="image/sound-off-icon.png" alt="关闭声音"></a>
|
||
</div>
|
||
|
||
<!-- Right Navigation -->
|
||
<nav class="main-nav">
|
||
|
||
<!-- 1. 按钮：情报分析 (颜色不变) -->
|
||
<a href="#analysis" class="svg-nav-link">
|
||
<svg class="nav-button-svg" viewBox="0 0 400 125" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<pattern id="btn-pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||
<rect width="20" height="20" fill="#f4c364"/>
|
||
<circle cx="10" cy="10" r="2.5" fill="#f8d58c"/>
|
||
</pattern>
|
||
<filter id="shadow-main-1" x="-10%" y="-10%" width="120%" height="140%">
|
||
<feDropShadow dx="0" dy="6" stdDeviation="0" flood-color="#4a2b16" flood-opacity="1"/>
|
||
</filter>
|
||
<filter id="shadow-text-1" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="2" dy="3" stdDeviation="0" flood-color="#6b8a7f" flood-opacity="1"/>
|
||
</filter>
|
||
</defs>
|
||
<g filter="url(#shadow-main-1)">
|
||
<path d="M 25,10 L 365,10 C 385,10 390,25 390,40 L 390,75 C 390,90 380,105 360,105 L 25,105 C 10,105 5,90 5,75 L 5,40 C 5,25 10,10 25,10 Z"
|
||
fill="url(#btn-pattern-1)" stroke="#ffffff" stroke-width="8"/>
|
||
</g>
|
||
<path d="M 30 22 H 365" stroke="#ffffff" stroke-width="2" stroke-dasharray="6 6" stroke-linecap="round" opacity="0.7" />
|
||
<text x="50%" y="52%" text-anchor="middle" dominant-baseline="middle"
|
||
filter="url(#shadow-text-1)" font-family="'ZCOOL KuaiLe', sans-serif"
|
||
font-weight="bold" font-size="65" fill="#bde8d1" stroke="#ffffff" stroke-width="5" paint-order="stroke">
|
||
<tspan rotate="-5">情</tspan><tspan dx="2" rotate="3" dy="5">报</tspan><tspan dx="2" rotate="-3" dy="-5">分</tspan><tspan dx="2" rotate="4">析</tspan>
|
||
</text>
|
||
</svg>
|
||
</a>
|
||
|
||
<!-- 2. 按钮：下载舆情 (颜色已更新) -->
|
||
<a href="#download" class="svg-nav-link">
|
||
<svg class="nav-button-svg" viewBox="0 0 400 125" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<!-- 新的波点图案：参考图的橙红色 -->
|
||
<pattern id="btn-pattern-2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
|
||
<rect width="20" height="20" fill="#f79474"/>
|
||
<circle cx="10" cy="10" r="2.5" fill="#e86b55"/>
|
||
</pattern>
|
||
<!-- 按钮主体投影颜色不变 -->
|
||
<filter id="shadow-main-2" x="-10%" y="-10%" width="120%" height="140%">
|
||
<feDropShadow dx="0" dy="6" stdDeviation="0" flood-color="#4a2b16" flood-opacity="1"/>
|
||
</filter>
|
||
<!-- 新的文字阴影颜色：参考图的橄榄绿 -->
|
||
<filter id="shadow-text-2" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="2" dy="3" stdDeviation="0" flood-color="#798d5c" flood-opacity="1"/>
|
||
</filter>
|
||
</defs>
|
||
<g filter="url(#shadow-main-2)">
|
||
<path d="M 25,10 L 365,10 C 385,10 390,25 390,40 L 390,75 C 390,90 380,105 360,105 L 25,105 C 10,105 5,90 5,75 L 5,40 C 5,25 10,10 25,10 Z"
|
||
fill="url(#btn-pattern-2)" stroke="#ffffff" stroke-width="8"/>
|
||
</g>
|
||
<path d="M 30 22 H 365" stroke="#ffffff" stroke-width="2" stroke-dasharray="6 6" stroke-linecap="round" opacity="0.7" />
|
||
<!-- 新的文字颜色：参考图的浅绿色 -->
|
||
<text x="50%" y="52%" text-anchor="middle" dominant-baseline="middle"
|
||
filter="url(#shadow-text-2)" font-family="'ZCOOL KuaiLe', sans-serif"
|
||
font-weight="bold" font-size="65" fill="#bddd8a" stroke="#ffffff" stroke-width="5" paint-order="stroke">
|
||
<tspan rotate="-4">下</tspan><tspan dx="2" rotate="4" dy="4">载</tspan><tspan dx="2" rotate="-3" dy="-4">舆</tspan><tspan dx="2" rotate="3">情</tspan>
|
||
</text>
|
||
</svg>
|
||
</a>
|
||
|
||
</nav>
|
||
|
||
<!-- Bottom-Left Slogan -->
|
||
<div class="slogan">
|
||
<img src="image/口号.png" alt="与路子一起百连抓宠，搜集噜咪全图鉴！">
|
||
</div>
|
||
|
||
<!-- Bottom-Right Downloads -->
|
||
<div class="downloads">
|
||
<a href="#appstore"><img src="image/app-store.png" alt="Download on the App Store"></a>
|
||
<a href="#googleplay"><img src="image/google-play.png" alt="Get it on Google Play"></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Audio Player -->
|
||
<audio id="bg-music" src="background-music.mp3" loop></audio>
|
||
|
||
<!-- Intelligence Analysis Modal -->
|
||
<div id="analysis-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-btn">×</span>
|
||
<h2>情报分析</h2>
|
||
<p>请上传QQ聊天记录文件：</p>
|
||
<input type="file" id="file-upload">
|
||
<button id="start-analysis-btn">开始分析</button>
|
||
<p id="analysis-status"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Download Sentiment Modal -->
|
||
<div id="download-modal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-btn">×</span>
|
||
<h2>下载舆情</h2>
|
||
<p>以下是已完成的分析报告：</p>
|
||
<ul id="report-list">
|
||
<!-- Reports will be listed here -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main script -->
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html> |