iorebuild
161 lines
5.6 KiB
HTML
161 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
=============================================================================
|
|
Resume — 可编辑简历构建器
|
|
=============================================================================
|
|
纯静态页面，浏览器直接打开即可使用。
|
|
依赖：style.css（样式） + app.js（逻辑）
|
|
所有文字 contenteditable，所见即所得。
|
|
工具栏：打印PDF | 导出XML | 导入XML | 配色◀▶ | 版式◀▶ | 重置
|
|
=============================================================================
|
|
-->
|
|
<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="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="toolbar no-print">
|
|
<button class="btn btn-print" onclick="window.print()">🖨️ 打印 / 导出 PDF</button>
|
|
<button class="btn btn-xml" onclick="Resume.exportXML()">📤 导出 XML</button>
|
|
<button class="btn btn-xml" onclick="document.getElementById('importFile').click()">📥 导入 XML</button>
|
|
<span class="theme-switcher no-print" title="颜色主题">
|
|
<button class="btn btn-theme" onclick="Resume.prevTheme()">◀</button>
|
|
<span class="theme-label" id="themeLabel">经典蓝</span>
|
|
<button class="btn btn-theme" onclick="Resume.nextTheme()">▶</button>
|
|
</span>
|
|
<span class="theme-switcher no-print" title="设计版式">
|
|
<button class="btn btn-theme" onclick="Resume.prevDesign()">◀</button>
|
|
<span class="theme-label" id="designLabel">经典双栏</span>
|
|
<button class="btn btn-theme" onclick="Resume.nextDesign()">▶</button>
|
|
</span>
|
|
<button class="btn btn-reset" onclick="Resume.reset()">↺ 重置</button>
|
|
<input type="file" id="importFile" accept=".xml" style="display:none" onchange="Resume.importXML(this)">
|
|
</div>
|
|
<div class="edit-hint no-print">💡 点击文字直接编辑 · 点击 [+ 添加] 增条目 · 悬停条目右侧删 · 改完 Ctrl+P 出 PDF</div>
|
|
|
|
<!-- Page -->
|
|
<div class="page">
|
|
|
|
<div class="resume-grid">
|
|
|
|
<!-- ============================================================
|
|
Sidebar — 左侧个人信息栏
|
|
内容：姓名/头衔、联系方式、技能标签、教育背景、自定义栏目
|
|
============================================================ -->
|
|
<aside class="sidebar">
|
|
|
|
<!-- Name -->
|
|
<section class="name-section">
|
|
<h1>
|
|
<span contenteditable="true" data-placeholder="你的姓名"></span>
|
|
<span class="sub" contenteditable="true" data-placeholder="职位 / 方向"></span>
|
|
</h1>
|
|
</section>
|
|
|
|
<!-- Contact -->
|
|
<section>
|
|
<h2>联系方式</h2>
|
|
<div class="info-item">
|
|
<span class="info-label">📧</span>
|
|
<span contenteditable="true" data-placeholder="邮箱"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">📱</span>
|
|
<span contenteditable="true" data-placeholder="手机号"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">📍</span>
|
|
<span contenteditable="true" data-placeholder="城市"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">🔗</span>
|
|
<span contenteditable="true" data-placeholder="GitHub / 博客 / 主页"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills -->
|
|
<section>
|
|
<h2>技术栈</h2>
|
|
<div class="skill-tags" id="skillTags">
|
|
<!-- dynamic -->
|
|
</div>
|
|
<div class="add-btn-group no-print">
|
|
<button class="add-btn" onclick="Resume.addSkill()">+ 添加技能</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Education -->
|
|
<section>
|
|
<h2>教育背景</h2>
|
|
<div class="editable-block">
|
|
<h3 contenteditable="true" data-placeholder="学校名称"></h3>
|
|
<div class="section-sub" contenteditable="true" data-placeholder="专业 · 学历"></div>
|
|
<div class="date" contenteditable="true" data-placeholder="起止时间"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Custom sidebar sections (dynamic) -->
|
|
<div id="sidebarCustom">
|
|
<!-- dynamic -->
|
|
</div>
|
|
<div class="add-btn-group no-print">
|
|
<button class="add-btn" onclick="Resume.addSidebarSection()">+ 添加栏目</button>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<!-- ====== Main Content ====== -->
|
|
<main class="main">
|
|
|
|
<!-- Summary -->
|
|
<section>
|
|
<h2>个人概述</h2>
|
|
<p class="summary-text" contenteditable="true" data-placeholder="用一段话概括你的核心竞争力和职业方向…"></p>
|
|
</section>
|
|
|
|
<!-- Experience -->
|
|
<section>
|
|
<h2>工作经历</h2>
|
|
<div id="experienceList">
|
|
<!-- dynamic -->
|
|
</div>
|
|
<div class="add-btn-group no-print">
|
|
<button class="add-btn" onclick="Resume.addExperience()">+ 添加工作经历</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects -->
|
|
<section>
|
|
<h2>项目经历</h2>
|
|
<div id="projectList">
|
|
<!-- dynamic -->
|
|
</div>
|
|
<div class="add-btn-group no-print">
|
|
<button class="add-btn" onclick="Resume.addProject()">+ 添加项目经历</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Additional -->
|
|
<section>
|
|
<h2>其他</h2>
|
|
<div id="extraList">
|
|
<!-- dynamic -->
|
|
</div>
|
|
<div class="add-btn-group no-print">
|
|
<button class="add-btn" onclick="Resume.addExtra()">+ 添加条目</button>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |