<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络应用四象限管理工具</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 25px 20px;
background: linear-gradient(to right, #4b6cb7, #182848);
color: white;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
margin-bottom: 25px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.subtitle {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.instructions {
background-color: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
line-height: 1.8;
}
.instructions h2 {
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.instructions-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.instruction-card {
background: #f8f9ff;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #4b6cb7;
}
.instruction-card h3 {
color: #2c3e50;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.quadrant-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 15px;
height: 600px;
margin-bottom: 30px;
}
.quadrant {
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.quadrant::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
}
.quadrant-content {
position: relative;
z-index: 2;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 15px;
padding: 10px;
align-content: flex-start;
}
.quadrant-header {
position: relative;
z-index: 2;
padding: 10px 0;
margin-bottom: 15px;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
.quadrant h3 {
font-size: 1.4rem;
margin-bottom: 8px;
}
.quadrant p {
font-size: 0.9rem;
opacity: 0.9;
}
.quadrant-1 {
background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
}
.quadrant-2 {
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}
.quadrant-3 {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}
.quadrant-4 {
background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}
.app-card {
background: rgba(255, 255, 255, 0.85);
padding: 12px 15px;
border-radius: 8px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
cursor: move;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
max-width: 180px;
backdrop-filter: blur(5px);
border: 1px solid rgba(0,0,0,0.05);
}
.app-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}
.app-card i {
font-size: 1.2rem;
min-width: 25px;
}
.app-card .app-name {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-input-section {
background-color: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
text-align: center;
}
.input-group {
display: flex;
max-width: 600px;
margin: 0 auto;
gap: 15px;
}
.input-group input {
flex: 1;
padding: 14px 20px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
}
.input-group input:focus {
border-color: #4b6cb7;
outline: none;
box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.2);
}
.btn {
background: linear-gradient(to right, #4b6cb7, #182848);
color: white;
border: none;
padding: 0 30px;
font-size: 1.1rem;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(75, 108, 183, 0.3);
font-weight: 600;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(75, 108, 183, 0.4);
}
.examples {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.example-app {
background: #f1f5ff;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.example-app:hover {
background: #4b6cb7;
color: white;
}
footer {
text-align: center;
padding: 25px;
color: #6c757d;
font-size: 0.9rem;
}
.axis-label {
position: absolute;
font-weight: bold;
font-size: 1.1rem;
color: #2c3e50;
z-index: 10;
}
.x-axis {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255,255,255,0.7);
padding: 5px 15px;
border-radius: 20px;
}
.y-axis {
top: 50%;
left: 10px;
transform: translateY(-50%) rotate(-90deg);
background: rgba(255,255,255,0.7);
padding: 5px 15px;
border-radius: 20px;
writing-mode: vertical-rl;
}
@media (max-width: 900px) {
.quadrant-container {
height: 500px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.quadrant-container {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 1fr);
height: 1000px;
}
.input-group {
flex-direction: column;
}
.btn {
padding: 14px;
}
.axis-label {
display: none;
}
}
.drag-over {
box-shadow: inset 0 0 0 3px #4b6cb7;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-chart-pie"></i> 网络应用四象限管理工具</h1>
<p class="subtitle">帮助家庭科学规划网络应用使用时间，平衡数字生活</p>
</header>
<section class="instructions">
<h2><i class="fas fa-info-circle"></i> 使用说明与分级原则</h2>
<p>本工具基于四象限管理法，帮助您和孩子共同评估各类网络应用的质量和互动性，从而科学规划使用时间。</p>
<div class="instructions-content">
<div class="instruction-card">
<h3><i class="fas fa-ruler-combined"></i> 评估维度</h3>
<p><strong>内容质量：</strong> 评估应用的教育价值、信息准确性和内容适宜性</p>
<p><strong>互动性：</strong> 评估应用的参与程度（被动接收 ↔ 主动创造）</p>
</div>
<div class="instruction-card">
<h3><i class="fas fa-th-large"></i> 四象限说明</h3>
<p><strong>第一象限：</strong> 高质量/高互动 - 优先使用</p>
<p><strong>第二象限：</strong> 高质量/低互动 - 适度使用</p>
<p><strong>第三象限：</strong> 低质量/高互动 - 限制使用</p>
<p><strong>第四象限：</strong> 低质量/低互动 - 避免使用</p>
</div>
<div class="instruction-card">
<h3><i class="fas fa-clock"></i> 时间分配建议</h3>
<p><strong>第一象限：</strong> 40-50% 数字时间</p>
<p><strong>第二象限：</strong> 30-40% 数字时间</p>
<p><strong>第三象限：</strong> 10-20% 数字时间</p>
<p><strong>第四象限：</strong> 0-10% 数字时间</p>
</div>
</div>
</section>
<div class="axis-label x-axis">内容质量（低 → 高）</div>
<div class="axis-label y-axis">互动性（被动 → 主动）</div>
<div class="quadrant-container">
<div class="quadrant quadrant-1" id="quadrant1">
<div class="quadrant-header">
<h3><i class="fas fa-star"></i> 高质量/高互动</h3>
<p>建议时间：40-50% | 教育性创造工具</p>
</div>
<div class="quadrant-content">
<div class="app-card" draggable="true">
<i class="fab fa-youtube"></i>
<span class="app-name">教育频道</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-code"></i>
<span class="app-name">编程学习</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-music"></i>
<span class="app-name">音乐创作</span>
</div>
</div>
</div>
<div class="quadrant quadrant-2" id="quadrant2">
<div class="quadrant-header">
<h3><i class="fas fa-book"></i> 高质量/低互动</h3>
<p>建议时间：30-40% | 教育性内容</p>
</div>
<div class="quadrant-content">
<div class="app-card" draggable="true">
<i class="fas fa-book-reader"></i>
<span class="app-name">电子书</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-video"></i>
<span class="app-name">纪录片</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-graduation-cap"></i>
<span class="app-name">在线课程</span>
</div>
</div>
</div>
<div class="quadrant quadrant-3" id="quadrant3">
<div class="quadrant-header">
<h3><i class="fas fa-gamepad"></i> 低质量/高互动</h3>
<p>建议时间：10-20% | 娱乐性社交应用</p>
</div>
<div class="quadrant-content">
<div class="app-card" draggable="true">
<i class="fab fa-tiktok"></i>
<span class="app-name">短视频</span>
</div>
<div class="app-card" draggable="true">
<i class="fab fa-instagram"></i>
<span class="app-name">社交媒体</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-dice"></i>
<span class="app-name">休闲游戏</span>
</div>
</div>
</div>
<div class="quadrant quadrant-4" id="quadrant4">
<div class="quadrant-header">
<h3><i class="fas fa-tv"></i> 低质量/低互动</h3>
<p>建议时间：0-10% | 被动娱乐</p>
</div>
<div class="quadrant-content">
<div class="app-card" draggable="true">
<i class="fas fa-scroll"></i>
<span class="app-name">无目的浏览</span>
</div>
<div class="app-card" draggable="true">
<i class="fas fa-ad"></i>
<span class="app-name">广告平台</span>
</div>
</div>
</div>
</div>
<section class="app-input-section">
<h2><i class="fas fa-plus-circle"></i> 添加新的网络应用</h2>
<p>输入应用名称，然后将其拖放到合适的象限中</p>
<div class="input-group">
<input type="text" id="app-input" placeholder="输入应用名称（如：微信、抖音、哔哩哔哩）">
<button class="btn" id="add-app-btn"><i class="fas fa-plus"></i> 添加应用</button>
</div>
<div class="examples">
<p>快速添加示例：</p>
<div class="example-app" data-app="知乎">知乎</div>
<div class="example-app" data-app="王者荣耀">王者荣耀</div>
<div class="example-app" data-app="网易云音乐">网易云音乐</div>
<div class="example-app" data-app="喜马拉雅">喜马拉雅</div>
<div class="example-app" data-app="小红书">小红书</div>
</div>
</section>
<footer>
<p>© 2023 家庭数字健康计划 | 帮助家庭建立健康的数字生活习惯</p>
<p>提示：定期与孩子一起回顾和调整应用分类，培养孩子的数字素养</p>
</footer>
</div>
<script>
// 添加新应用
document.getElementById('add-app-btn').addEventListener('click', function() {
const input = document.getElementById('app-input');
const appName = input.value.trim();
if (appName) {
createAppCard(appName);
input.value = '';
}
});
// 按Enter键添加
document.getElementById('app-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.getElementById('add-app-btn').click();
}
});
// 快速添加示例
document.querySelectorAll('.example-app').forEach(item => {
item.addEventListener('click', function() {
const appName = this.getAttribute('data-app');
createAppCard(appName);
});
});
// 创建应用卡片
function createAppCard(appName) {
const appCard = document.createElement('div');
appCard.className = 'app-card';
appCard.draggable = true;
appCard.innerHTML = `
<i class="fas fa-mobile-alt"></i>
<span class="app-name">${appName}</span>
`;
// 添加拖拽事件
appCard.addEventListener('dragstart', handleDragStart);
// 添加到输入区域下方
document.querySelector('.app-input-section').appendChild(appCard);
}
// 拖拽功能
let draggedItem = null;
function handleDragStart(e) {
draggedItem = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
setTimeout(() => this.style.opacity = '0.4', 0);
}
function handleDragOver(e) {
e.preventDefault();
this.classList.add('drag-over');
return false;
}
function handleDragEnter(e) {
e.preventDefault();
this.classList.add('drag-over');
}
function handleDragLeave() {
this.classList.remove('drag-over');
}
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
if (draggedItem !== this) {
// 创建新卡片
const newAppCard = document.createElement('div');
newAppCard.className = 'app-card';
newAppCard.draggable = true;
newAppCard.innerHTML = draggedItem.innerHTML;
// 添加拖拽事件
newAppCard.addEventListener('dragstart', handleDragStart);
// 添加到象限中
this.querySelector('.quadrant-content').appendChild(newAppCard);
// 移除原卡片（如果是新添加的）
if (draggedItem.parentElement.className === 'app-input-section') {
draggedItem.remove();
}
}
this.classList.remove('drag-over');
return false;
}
function handleDragEnd() {
this.style.opacity = '1';
document.querySelectorAll('.quadrant').forEach(quadrant => {
quadrant.classList.remove('drag-over');
});
}
// 设置拖拽事件监听器
document.querySelectorAll('.app-card').forEach(card => {
card.addEventListener('dragstart', handleDragStart);
card.addEventListener('dragend', handleDragEnd);
});
document.querySelectorAll('.quadrant').forEach(quadrant => {
quadrant.addEventListener('dragover', handleDragOver);
quadrant.addEventListener('dragenter', handleDragEnter);
quadrant.addEventListener('dragleave', handleDragLeave);
quadrant.addEventListener('drop', handleDrop);
});
</script>
</body>
</html>
index.html
index.html