110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
:root {
|
|
--panel-blue: #16325f;
|
|
--panel-cyan: #52d7ff;
|
|
--panel-ice: #e8f6ff;
|
|
--panel-amber: #ffb347;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at 18% 18%, rgba(86, 227, 255, 0.22) 0%, rgba(86, 227, 255, 0.00) 28%),
|
|
radial-gradient(circle at 84% 16%, rgba(255, 195, 108, 0.18) 0%, rgba(255, 195, 108, 0.00) 26%),
|
|
linear-gradient(135deg, #eef7ff 0%, #edf5ff 44%, #fef7ec 100%);
|
|
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
|
|
}
|
|
.card {
|
|
width: __WIDTH__px;
|
|
margin: 0 auto;
|
|
padding: 26px 26px 20px 26px;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
font-size: 38px;
|
|
color: #1c2b52;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0 0 18px rgba(82, 215, 255, 0.14);
|
|
}
|
|
.subtitle {
|
|
margin-top: 8px;
|
|
font-size: 17px;
|
|
color: #5c708f;
|
|
}
|
|
.graph-wrap {
|
|
margin-top: 18px;
|
|
border-radius: 24px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(243,250,255,0.88) 54%, rgba(255,249,240,0.90) 100%);
|
|
border: 1px solid rgba(157, 221, 255, 0.72);
|
|
box-shadow:
|
|
0 10px 32px rgba(34, 60, 108, 0.10),
|
|
0 0 0 1px rgba(255,255,255,0.42) inset,
|
|
0 0 48px rgba(82, 215, 255, 0.10);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.legend {
|
|
margin-top: 14px;
|
|
font-size: 14px;
|
|
color: #6f7d96;
|
|
line-height: 1.7;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="title">群友社交关系图</div>
|
|
<div class="subtitle">__GROUP_TITLE__</div>
|
|
<div class="subtitle">__SUMMARY_TEXT__</div>
|
|
<div class="graph-wrap">
|
|
<svg width="__WIDTH__" height="__HEIGHT__" viewBox="0 0 __WIDTH__ __HEIGHT__">
|
|
<defs>
|
|
<linearGradient id="panelBgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#f8fdff"></stop>
|
|
<stop offset="56%" stop-color="#edf7ff"></stop>
|
|
<stop offset="100%" stop-color="#fff8ef"></stop>
|
|
</linearGradient>
|
|
<radialGradient id="panelGlowLeft" cx="20%" cy="18%" r="36%">
|
|
<stop offset="0%" stop-color="#52D7FF" stop-opacity="0.42"></stop>
|
|
<stop offset="100%" stop-color="#52D7FF" stop-opacity="0"></stop>
|
|
</radialGradient>
|
|
<radialGradient id="panelGlowRight" cx="84%" cy="15%" r="30%">
|
|
<stop offset="0%" stop-color="#FFC16C" stop-opacity="0.26"></stop>
|
|
<stop offset="100%" stop-color="#FFC16C" stop-opacity="0"></stop>
|
|
</radialGradient>
|
|
<pattern id="techGrid" width="32" height="32" patternUnits="userSpaceOnUse">
|
|
<path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(110,168,214,0.10)" stroke-width="1"></path>
|
|
<circle cx="0" cy="0" r="1.4" fill="rgba(82,215,255,0.16)"></circle>
|
|
</pattern>
|
|
__EDGE_DEFS__
|
|
__NODE_DEFS__
|
|
</defs>
|
|
<rect x="0" y="0" width="__WIDTH__" height="__HEIGHT__" fill="url(#panelBgGradient)"></rect>
|
|
<rect x="0" y="0" width="__WIDTH__" height="__HEIGHT__" fill="url(#techGrid)"></rect>
|
|
<ellipse cx="250" cy="160" rx="240" ry="140" fill="url(#panelGlowLeft)"></ellipse>
|
|
<ellipse cx="1280" cy="150" rx="220" ry="126" fill="url(#panelGlowRight)"></ellipse>
|
|
<path d="M46 54 L126 54" stroke="rgba(84,212,255,0.78)" stroke-width="3" stroke-linecap="round"></path>
|
|
<path d="M46 54 L46 134" stroke="rgba(84,212,255,0.34)" stroke-width="2" stroke-linecap="round"></path>
|
|
<path d="M1412 54 L1492 54" stroke="rgba(255,190,98,0.56)" stroke-width="3" stroke-linecap="round"></path>
|
|
<path d="M1492 54 L1492 134" stroke="rgba(255,190,98,0.26)" stroke-width="2" stroke-linecap="round"></path>
|
|
<path d="M46 1066 L126 1066" stroke="rgba(84,212,255,0.42)" stroke-width="3" stroke-linecap="round"></path>
|
|
<path d="M46 986 L46 1066" stroke="rgba(84,212,255,0.20)" stroke-width="2" stroke-linecap="round"></path>
|
|
<path d="M1412 1066 L1492 1066" stroke="rgba(255,190,98,0.38)" stroke-width="3" stroke-linecap="round"></path>
|
|
<path d="M1492 986 L1492 1066" stroke="rgba(255,190,98,0.18)" stroke-width="2" stroke-linecap="round"></path>
|
|
__EDGE_SVG__
|
|
__EDGE_LABELS__
|
|
__NODE_SVG__
|
|
</svg>
|
|
</div>
|
|
<div class="legend">
|
|
说明：节点越大代表连接群友越多；头像右下角数字是连接人数；连线越粗代表互动越强。为保证可读性，图中仅保留主要关系线，边上的数字只标最强的一小部分关系。
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|