<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红岩精神可视化展示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
background-color: #f9f3f3;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(to right, #8B0000, #B22222);
color: white;
padding: 40px 0;
text-align: center;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.intro {
background-color: white;
padding: 25px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
border-left: 5px solid #8B0000;
}
.intro p {
margin-bottom: 15px;
text-align: justify;
}
.section-title {
font-size: 1.8rem;
color: #8B0000;
margin: 30px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e0c9c9;
}
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto 40px;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #8B0000;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
.timeline-item:nth-child(odd) {
left: 0;
}
.timeline-item:nth-child(even) {
left: 50%;
}
.timeline-content {
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid #8B0000;
}
.timeline-date {
font-weight: bold;
color: #8B0000;
margin-bottom: 5px;
}
.timeline-item::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: white;
border: 4px solid #8B0000;
border-radius: 50%;
top: 20px;
z-index: 1;
}
.timeline-item:nth-child(odd)::after {
right: -10px;
}
.timeline-item:nth-child(even)::after {
left: -10px;
}
.figures {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
.figure-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 280px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.figure-card:hover {
transform: translateY(-10px);
}
.figure-img {
height: 200px;
background-color: #8B0000;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
text-align: center;
padding: 10px;
}
.figure-content {
padding: 20px;
}
.figure-name {
font-size: 1.3rem;
color: #8B0000;
margin-bottom: 10px;
}
.word-cloud-container {
background-color: white;
border-radius: 10px;
padding: 25px;
margin-bottom: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
#wordCloud {
height: 400px;
text-align: center;
position: relative;
}
.word {
position: absolute;
cursor: pointer;
transition: all 0.3s ease;
}
.word:hover {
color: #8B0000;
transform: scale(1.2);
}
.quote-section {
background-color: #8B0000;
color: white;
padding: 40px;
border-radius: 10px;
margin-bottom: 40px;
text-align: center;
}
.quote {
font-size: 1.5rem;
font-style: italic;
margin-bottom: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.author {
font-size: 1.1rem;
opacity: 0.9;
}
footer {
text-align: center;
padding: 20px;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #e0c9c9;
}
@media screen and (max-width: 768px) {
.timeline::after {
left: 31px;
}
.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-item:nth-child(even) {
left: 0;
}
.timeline-item::after {
left: 21px;
}
.timeline-item:nth-child(odd)::after,
.timeline-item:nth-child(even)::after {
left: 21px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>红岩精神</h1>
<p class="subtitle">信仰之光 民族之魂——红岩精神的可视化展示</p>
</header>
<section class="intro">
<p>红岩精神是在抗日战争和解放战争时期，以周恩来同志为首的中共中央南方局和八路军办事处在歌乐山麓、嘉陵江畔与反动势力作斗争，培育形成的伟大革命精神。</p>
<p>红岩精神的本质是爱国、奋斗、团结、奉献，它体现了共产党人坚如磐石的理想信念、和衷共济的爱国情怀、艰苦卓绝的凛然斗志和百折不挠的浩然正气。</p>
</section>
<h2 class="section-title">红岩精神历史脉络</h2>
<section class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">1939年</div>
<p>中共中央南方局在重庆成立，周恩来任书记</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">1941年</div>
<p>皖南事变后，南方局在极其险恶的环境中坚持斗争</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">1943年</div>
<p>红岩村成为中国共产党在国统区的指挥中心</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">1945年</div>
<p>毛泽东赴重庆谈判，红岩村成为重要活动地点</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">1949年</div>
<p>重庆解放前夕，众多革命志士在渣滓洞、白公馆英勇就义</p>
</div>
</div>
</section>
<h2 class="section-title">红岩精神代表人物</h2>
<section class="figures">
<div class="figure-card">
<div class="figure-img">江竹筠（江姐）</div>
<div class="figure-content">
<h3 class="figure-name">江竹筠</h3>
<p>坚贞不屈的共产党员，在渣滓洞监狱受尽酷刑仍坚守党的秘密，英勇就义时年仅29岁。</p>
</div>
</div>
<div class="figure-card">
<div class="figure-img">许云峰</div>
<div class="figure-content">
<h3 class="figure-name">许云峰</h3>
<p>《红岩》小说中的英雄人物原型，在狱中坚贞不屈，英勇斗争，最终壮烈牺牲。</p>
</div>
</div>
<div class="figure-card">
<div class="figure-img">小萝卜头</div>
<div class="figure-content">
<h3 class="figure-name">宋振中</h3>
<p>共和国最小的烈士，年仅8岁便在狱中帮助传递情报，牺牲时手中还握着铅笔。</p>
</div>
</div>
</section>
<h2 class="section-title">红岩精神关键词</h2>
<section class="word-cloud-container">
<div id="wordCloud"></div>
</section>
<section class="quote-section">
<p class="quote">"毒刑拷打，那是太小的考验，竹签子是竹子做的，共产党员的意志是钢铁！"</p>
<p class="author">—— 江竹筠（江姐）
</section>
<footer>
<p>红岩精神可视化展示 | 纪念革命先烈，传承红色基因</p>
</footer>
</div>
<script>
// 红岩精神关键词数据
const words = [
{text: "信仰", size: 60},
{text: "忠诚", size: 55},
{text: "爱国", size: 50},
{text: "奉献", size: 50},
{text: "坚贞", size: 45},
{text: "不屈", size: 45},
{text: "团结", size: 40},
{text: "奋斗", size: 40},
{text: "牺牲", size: 40},
{text: "正气", size: 35},
{text: "理想", size: 35},
{text: "信念", size: 35},
{text: "凛然", size: 30},
{text: "英勇", size: 30},
{text: "坚定", size: 30},
{text: "革命", size: 25},
{text: "气节", size: 25},
{text: "担当", size: 25},
{text: "使命", size: 20},
{text: "责任", size: 20}
];
// 生成词云
function generateWordCloud() {
const container = document.getElementById('wordCloud');
const width = container.clientWidth;
const height = container.clientHeight;
// 清空容器
container.innerHTML = '';
// 创建词云元素
words.forEach(word => {
const wordElement = document.createElement('div');
wordElement.className = 'word';
wordElement.textContent = word.text;
wordElement.style.fontSize = `${word.size}px`;
wordElement.style.color = `rgba(139, 0, 0, ${0.7 + Math.random() * 0.3})`;
wordElement.style.fontWeight = 'bold';
// 随机位置（避免重叠的简单实现）
let overlap = true;
let attempts = 0;
while (overlap && attempts < 100) {
const left = Math.random() * (width - word.size * word.text.length * 0.6);
const top = Math.random() * (height - word.size);
// 简单检查是否重叠
overlap = false;
const existingWords = document.getElementsByClassName('word');
for (let i = 0; i < existingWords.length; i++) {
const existing = existingWords[i];
const rect1 = {
left: left,
top: top,
right: left + word.size * word.text.length * 0.6,
bottom: top + word.size
};
const existingRect = existing.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const rect2 = {
left: existingRect.left - containerRect.left,
top: existingRect.top - containerRect.top,
right: existingRect.right - containerRect.left,
bottom: existingRect.bottom - containerRect.top
};
if (!(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)) {
overlap = true;
break;
}
}
if (!overlap) {
wordElement.style.left = `${left}px`;
wordElement.style.top = `${top}px`;
container.appendChild(wordElement);
break;
}
attempts++;
}
});
}
// 页面加载完成后生成词云
window.addEventListener('load', generateWordCloud);
window.addEventListener('resize',generateWordCloud);
</script>
</body>
</html>
index.html
index.html