minnan-zhangzhou/refer/profile.html

<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>闽南文化｜我的</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
*{-webkit-tap-highlight-color:transparent}body{margin:0;background:#e9e4da;font-family:"PingFang SC","Microsoft YaHei",sans-serif}.hide-scroll::-webkit-scrollbar{display:none}.hide-scroll{scrollbar-width:none;-ms-overflow-style:none}.paper{background-color:#faf3e5;background-image:radial-gradient(circle at 16% 8%,rgba(159,55,40,.055) 0 1px,transparent 1px),radial-gradient(circle at 76% 28%,rgba(181,135,48,.05) 0 1px,transparent 1px);background-size:20px 20px,27px 27px}.brick{background-color:#9d3829;background-image:linear-gradient(90deg,rgba(255,240,213,.09) 1px,transparent 1px),linear-gradient(rgba(255,240,213,.09) 1px,transparent 1px);background-size:34px 15px}.modal{background:rgba(55,37,30,.5)}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-3 sm:p-8">
<main class="relative w-[375px] h-[812px] overflow-hidden bg-[#faf3e5] flex flex-col paper">
<header class="brick relative flex-none overflow-hidden px-4 pt-3 pb-5 text-white">
<div class="flex items-center justify-between text-[11px]"><span class="font-semibold">9:41</span><div class="flex gap-1.5"><iconify-icon icon="solar:cellular-linear"></iconify-icon><iconify-icon icon="solar:wifi-router-linear"></iconify-icon><iconify-icon icon="solar:battery-charge-linear"></iconify-icon></div></div>
<div class="absolute -right-2 bottom-0 text-[#f6d492]/25"></div><div class="absolute left-2 top-10 text-[#fff1c7]/20"></div>
<div class="relative mt-4 flex items-center gap-3"><button aria-label="Change profile avatar" class="w-16 h-16 rounded-full border-2 border-[#f3d18b] bg-[#fff5dc] text-[#a83f2d] flex items-center justify-center shadow-lg" onclick="changeAvatar()"><iconify-icon icon="ph:user-circle-duotone" id="avatarIcon" width="48"></iconify-icon></button><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><h1 class="truncate text-[18px] font-bold" id="nickname">燕尾巷游客</h1><button aria-label="编辑资料" class="rounded-full bg-white/15 px-2 py-1 text-[9px]" onclick="editProfile()"><iconify-icon icon="ph:pencil-simple-duotone"></iconify-icon> 编辑</button></div></div></div>
</header>
<div class="flex-1 min-h-0 overflow-y-auto hide-scroll pb-6">
<section class="px-4 pt-4"><div class="rounded-2xl border border-[#e0c592] bg-white/90 p-3 shadow-sm"><div class="flex items-center justify-between"><h2 class="text-[15px] font-bold text-[#873428]">我的收藏</h2><span class="text-[9px] text-[#a7834c]">一键查看心仪目的地</span></div><div class="mt-3 grid grid-cols-3 gap-2" id="favoriteTabs"><button class="favorite bg-[#a83f2d] text-white rounded-xl py-2 text-[10px]" onclick="switchFavorite(this,'route')">收藏路线</button><button class="favorite bg-[#f5e5c9] text-[#765347] rounded-xl py-2 text-[10px]" onclick="switchFavorite(this,'spot')">收藏景点</button><button class="favorite bg-[#f5e5c9] text-[#765347] rounded-xl py-2 text-[10px]" onclick="switchFavorite(this,'food')">收藏美食</button></div><div class="mt-3 rounded-xl bg-[#fbf3e5] p-3 text-[10px] text-[#765f53]" id="favoriteContent"><p>土楼摄影线 · 古城逛吃线 · 东山滨海线</p><a class="mt-2 inline-flex items-center gap-1 text-[#a83f2d]" href="travel.html">前往对应页面 <iconify-icon icon="ph:arrow-right-bold"></iconify-icon></a></div></div></section>
<section class="px-4 pt-5"></section>
<section class="px-4 pt-5"><h2 class="text-[15px] font-bold text-[#873428]">反馈与消息</h2><div class="mt-3 overflow-hidden rounded-2xl border border-[#e5d2af] bg-white divide-y divide-[#efe5d3]"><button class="w-full p-3 flex items-center gap-3 text-left" onclick="showMessages()"><span class="relative w-9 h-9 rounded-xl bg-[#f7e2dc] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:bell-ringing-duotone" width="21"></iconify-icon><i class="absolute right-0 top-0 w-2.5 h-2.5 rounded-full bg-[#db3b30] border-2 border-white"></i></span><span class="flex-1"><b class="block text-[12px] text-[#61463c]">消息通知中心</b><small class="text-[9px] text-[#9a8375]">活动预告、政策公告、预约提醒</small></span><span class="rounded-full bg-[#a83f2d] px-2 py-0.5 text-[8px] text-white" id="unread">3 未读</span></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="openPanel('意见反馈进度','关于景区导览标识的建议已受理，当前进度：相关部门处理中，预计 2 个工作日内答复。')"><span class="w-9 h-9 rounded-xl bg-[#f5e8c9] text-[#b08031] flex items-center justify-center"><iconify-icon icon="ph:chat-circle-dots-duotone" width="21"></iconify-icon></span><span class="flex-1"><b class="block text-[12px] text-[#61463c]">我的意见反馈</b><small class="text-[9px] text-[#9a8375]">历史投诉与建议 · 查看处理进度</small></span><span class="text-[9px] text-[#b17d32]">处理中</span></button></div></section>
<section class="px-4 pt-5"><h2 class="text-[15px] font-bold text-[#873428]">便民设置</h2><div class="mt-3 overflow-hidden rounded-2xl border border-[#e5d2af] bg-white divide-y divide-[#efe5d3]" id="settings"><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('我的投稿')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:pen-nib-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">我的投稿</b><small class="text-[9px] text-[#9a8375]">记录我与闽南文化的故事</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('邀请好友')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:user-plus-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">邀请好友</b><small class="text-[9px] text-[#9a8375]">分享闽南文化之旅</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('在线客服')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:headset-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">在线客服</b><small class="text-[9px] text-[#9a8375]">获取实时人工服务</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('隐私设置')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:shield-check-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">隐私设置</b><small class="text-[9px] text-[#9a8375]">管理授权、位置与消息权限</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('清除缓存')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:broom-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">清除缓存</b><small class="text-[9px] text-[#9a8375]">当前缓存 18.6 MB</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button><button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('关于小程序')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="ph:info-duotone" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">关于小程序</b><small class="text-[9px] text-[#9a8375]">漳州文旅公共服务平台</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button></div></section>
</div>
<nav class="flex-none bg-[#fffaf1] border-t border-[#e9dbc5] px-3 pt-2 pb-3"><div class="flex justify-between"><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="home.html"><iconify-icon icon="ph:house-duotone" width="21"></iconify-icon><span class="text-[10px]">首页</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="heritage.html"><iconify-icon icon="ph:hand-heart-duotone" width="21"></iconify-icon><span class="text-[10px]">传承</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="explore.html"><iconify-icon icon="ph:compass-duotone" width="21"></iconify-icon><span class="text-[10px]">资讯</span></a><a class="text-[#a79d93] flex flex-col items-center gap-0.5 w-12" href="travel.html"><iconify-icon icon="ph:map-trifold-duotone" width="21"></iconify-icon><span class="text-[10px]">文旅</span></a><a class="text-[#a83f2d] flex flex-col items-center gap-0.5 w-12" href="profile.html"><iconify-icon icon="ph:user-circle-fill" width="21"></iconify-icon><span class="text-[10px] font-semibold">我的</span></a></div></nav>
</main>
<div class="hidden fixed inset-0 z-50 modal items-center justify-center p-6" id="modal"><div class="w-[315px] rounded-2xl border-2 border-[#d0a354] bg-[#fff9ec] p-5 shadow-xl"><div class="flex items-start justify-between"><div><p class="text-[9px] text-[#b17d32]">闽南文化 · 个人中心</p><h2 class="text-[17px] font-bold text-[#843428]" id="modalTitle"></h2></div><button aria-label="关闭" class="text-[#8b6d5c]" onclick="closeModal()"><iconify-icon icon="ph:x-bold"></iconify-icon></button></div><div class="mt-3 text-[11px] leading-6 text-[#80695c]" id="modalBody"></div><button class="mt-4 w-full rounded-xl bg-[#a83f2d] py-2 text-[10px] text-white" onclick="closeModal()">我知道了</button></div></div>
<div class="hidden fixed left-1/2 top-8 z-[60] max-w-[310px] -translate-x-1/2 rounded-full bg-[#49332d]/95 px-4 py-2 text-center text-xs text-white shadow-lg" id="toast"></div>
<script>
const favorites={route:'土楼摄影线 · 古城逛吃线 · 东山滨海线',spot:'田螺坑土楼 · 漳州古城 · 南门湾沙滩',food:'阿芬卤面 · 古城四果汤 · 建国蚵仔煎'};
const settingData=[['我的投稿','记录我与闽南文化的故事','ph:pen-nib-duotone'],['邀请好友','分享闽南文化之旅','ph:user-plus-duotone'],['在线客服','获取实时人工服务','ph:headset-duotone'],['隐私设置','管理授权、位置与消息权限','ph:shield-check-duotone'],['清除缓存','当前缓存 18.6 MB','ph:broom-duotone'],['关于小程序','漳州文旅公共服务平台','ph:info-duotone']];
function switchFavorite(btn,key){document.querySelectorAll('.favorite').forEach(x=>x.className='favorite bg-[#f5e5c9] text-[#765347] rounded-xl py-2 text-[10px]');btn.className='favorite bg-[#a83f2d] text-white rounded-xl py-2 text-[10px]';document.getElementById('favoriteContent').innerHTML=`<p>${favorites[key]}</p><a class="mt-2 inline-flex items-center gap-1 text-[#a83f2d]" href="${key==='route'?'travel.html':'explore.html'}">前往对应页面 <iconify-icon icon="ph:arrow-right-bold"></iconify-icon></a>`}
function renderSettings(){document.getElementById('settings').innerHTML=settingData.map(s=>`<button class="w-full p-3 flex items-center gap-3 text-left" onclick="setting('${s[0]}')"><span class="w-8 h-8 rounded-xl bg-[#f7e6df] text-[#a83f2d] flex items-center justify-center"><iconify-icon icon="${s[2]}" width="19"></iconify-icon></span><span class="flex-1"><b class="block text-[11px] text-[#61463c]">${s[0]}</b><small class="text-[9px] text-[#9a8375]">${s[1]}</small></span><iconify-icon class="text-[#b9a898]" icon="ph:caret-right-bold"></iconify-icon></button>`).join('')}
function editProfile(){const name=prompt('请输入新的微信昵称',document.getElementById('nickname').textContent);if(name&&name.trim()){document.getElementById('nickname').textContent=name.trim();toast('昵称已更新')}}
function changeAvatar(){const icons=['ph:user-circle-duotone','ph:smiley-duotone','ph:flower-lotus-duotone'];const icon=document.getElementById('avatarIcon'),next=(icons.indexOf(icon.getAttribute('icon'))+1)%icons.length;icon.setAttribute('icon',icons[next]);toast('头像已更换')}
function generatePoster(){openPanel('打卡纪念海报',`<div class="rounded-xl bg-[#9b382c] p-5 text-center text-white"><iconify-icon class="text-[#f4d383]" icon="ph:flower-lotus-duotone" width="45"></iconify-icon><h3 class="mt-2 text-base font-bold">我在漳州集齐山海烟火</h3><p class="mt-1 text-[9px] text-[#f6d99d]">7 枚印章 · 5 枚徽章 · 1,280 积分</p></div><p class="mt-2 text-center">海报已生成，可长按保存并分享朋友圈。</p>`)}
function showMessages(){document.getElementById('unread').textContent='已读';openPanel('消息通知中心','08-08 木偶戏预约提醒<br>08-07 古城七夕灯游会预告<br>08-06 文旅惠民消费券政策公告')}
function setting(name){const text={我的投稿:'投稿入口已为你打开，欢迎分享你与闽南文化的故事。',邀请好友:'邀请链接已生成，快把这份闽南文化之旅分享给好友吧。',在线客服:'在线客服已收到你的咨询，请稍候为你接入服务。',隐私设置:'位置权限：仅使用期间；消息通知：已开启；个性化推荐：已关闭。',清除缓存:'缓存已清除，本次释放 18.6 MB。',关于小程序:'漳州文旅公共服务平台，为游客提供文化、出游、预约与便民服务。'}[name];name==='清除缓存'?toast(text):openPanel(name,text)}
function openPanel(title,body){document.getElementById('modalTitle').textContent=title;document.getElementById('modalBody').innerHTML=body;const m=document.getElementById('modal');m.classList.remove('hidden');m.classList.add('flex')}
function closeModal(){const m=document.getElementById('modal');m.classList.add('hidden');m.classList.remove('flex')}
function toast(message){const t=document.getElementById('toast');t.textContent=message;t.classList.remove('hidden');clearTimeout(window.tt);window.tt=setTimeout(()=>t.classList.add('hidden'),1900)}
switchFavorite(document.querySelector('.favorite'),'route');renderSettings();
</script>
</body></html>