朗
！doctype
}头>
  <元 字符集="UTF-8">
  <元 姓名="视口" 内容="宽度=设备宽度，初始比例=1.0">
  <标题>网站大全</标题>
  <风格>
* {
边缘: 0;
填充: 0;
      箱体尺寸: 边框框;
字体系列：system-ui，无衬线；
    }
身体 {
背景：#f5f7fb；
填充：2REM；
显示: 弯曲;
justify-content：中心；
    }
.容器 {
最大容忍度：1200px；
宽容度：100%；
    }
.页眉 {
显示: 弯曲;
justify-content：间距；
      对齐项目: 中心;
底边距：2REM；
垫底：1REM；
下边框：2px固体#e5e7eb；
    }
H1{
字体大小：2REM；
颜色：#1f2937；
    }
.btn{
填充：0.6REM1.2REM；
      边境: 没有一个;
边界半径：8px；
字体大小：1REM；
光标：指针；
背景：#2563eb；
      颜色: 白色的;
过渡：0.2s；
    }
.btn：盘旋{
背景：#1d4ed8；
    }
.网格 {
      显示: 网格;
网格模板列：重复(自动填充，minmax(180px，1FR))；
差距：1REM；
上距离：1rem；
    }
.卡片 {
      背景: 白色的;
填充：1.5REM；
边界半径：12px；
      文本对齐: 中心;
箱形阴影：02px8px RGBA(0,0,0,0.06);
边框：1px实体#eef2f6；边界：1px实体#eef2f6；
    }
。卡片图标
字体大小：2REM；
底边距：0.5REM；
    }
.卡片标题REM
字体粗细：600；
底边距：0.3REM；
REM}.card-url {
      font-size: 0.8rem;
      color: #6b7280;
      word-break: break-all;
    }
    .admin-panel {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      margin-bottom: 2rem;
      border: 1px solid #e5e7eb;
      display: none;
    }
    .admin-panel.active {
      display: block;
    }
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }
    .modal-overlay.active {
      display: flex;
    }
    .modal-box {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      max-width: 400px;
      width: 90%;
      text-align: center;
    }
    .modal-box input {
      width: 100%;
      padding: 0.6rem;
      margin: 0.5rem 0;
      border: 1px solid #d1d5db;
      border-radius: 8px;
font-size:1rem；
    }
.modal-box.btn{
宽度：100%；
边缘顶部：0.5rem；
    }
.error-msg{
颜色：#dc2626；
显示：无；
裕度：0.5rem0；
  
}</风格>
</头>
<身体>

<div 班级="容器">
  <div 班级="页眉">
    <H1>🌐 网站大全</H1>
    <div>
      <按钮 班级="btn" 身份标识="设置Btn" onClick="handleSettings()">
⚙️   设置
      </按钮>
      <按钮 班级="btn" 身份标识="logoutBtn" 风格="背景：#6b7280；显示：没有一个；" onClick="handleLogout()">
        退出
      </按钮>
    </div>
  </div>

<! -- 管理面板 -->
  <div 班级="管理面板" 身份标识="adminPanel">
    <H3>📝 管理网站</H3>
    <div 风格="显示：弯曲；差距：0.5REM；柔性缠绕：包；边缘：1REM0；">
      <输入 类型="文本" 身份标识="站点名" 占位符="名称" 风格="弯曲：1；填充：0.5REM；边界：1PX固体#d1d5db；边界半径：8px；">
      <输入 类型="文本" 身份标识="siteurl" 占位符="网址" 风格="弯曲：2；填充：0.5REM；边界：1PX固体#d1d5db；边界半径：8px；">
      <输入 类型="文本" 身份标识="siteIcon" 占位符="图标" 风格="弯曲：1；填充：0.5REM；边界：1PX固体#d1d5db；边界半径：8px；" 价值="🌐">
      <按钮 班级="btn" onClick="addSite()">添加</按钮>
</div>
    <div 身份标识="adminGrid" 班级="网格"></div>
</div>

<! -- 公开网格 -->
  <H2 风格="上边距：1REM；">📌 所有站点</H2>
  <div 身份标识="publicGrid" 班级="网格"></div>
</div>

<!-- 登录弹窗 - 不显示账号提示，但需要同时输入账号和密码 -->
<div 班级="模态覆盖" 身份标识="passwordModal">
  <div 班级="模态框">
    <H3>🔐 管理员验证</H3>
    <p 风格="颜色：#6b7280；边缘：0.5REM0；">请输入管理员账号和密码</p>
    <输入 类型="文本" 身份标识="登录帐户" 占位符="账号">
    <输入 类型="密码" 身份标识="loginPassword" 占位符="密码">
    <div 班级="错误-消息" 身份标识="登录错误">❌ 账号或密码错误</div>
    <按钮 班级="btn" onClick="confirmLogin()">登录</按钮>
    <按钮 班级="btn" 风格="背景：#6b7280；上边距：0.5REM；" onClick="closeModal()">取消</按钮>
</div>
</div>

<脚本>
//============================================================
  // 需要同时输入账号和密码，但不显示账号提示
//============================================================

Const admin_ACCOUNT='1705083705@qq.com'；
Const admin_PASSWORD='qazwsx'；
let sites = [];
  let isAdmin = false;

  // ----- 初始化 -----
  function loadSites() {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      try {
        sites = JSON.parse(stored);
      } catch (e) {
        sites = [];
      }
    }
    if (!sites || sites.length === 0) {
      sites = [
        { name: '百度', url: 'https://www.baidu.com', icon: '🌐' },
        { name: '知乎', url: 'https://www.zhihu.com', icon: '📚' },
        { name: 'GitHub', url: 'https://github.com', icon: '🐙' },
        { name: 'B站', url: 'https://www.bilibili.com', icon: '📺' },
        { name: 'Google', url: 'https://www.google.com', icon: '🔍' }
      ];
    }
    saveSites();
  }

  function saveSites() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(sites));
    renderAll();
  }

  // ----- 渲染 -----
函数renderGrid(gridId，showActions=false){
const grid=document.getElementById(gridId)；
    if (!grid) return;
if(sites.length====0){
grid.innerHTML='<p 风格="颜色：#6b7280；格线柱:1/-1; 文本对齐:中心;">暂无网站</p>';
返回；
    }
让超文本标记语言="；
sites.forEach((站点，索引)=>{
超文本标记语言+='
        <div 班级="卡">
          <div 班级="卡片图标">${site.icon||'🌐'}</div>
          <div 班级="卡片标题">${site.name}</div>
          <div 班级="card-url"><一个 href="${site.url}" 目标="_空白">${site.url}</一个></div>
${showActions？'
            <div 风格="上边距：0.5REM；显示：弯曲；差距：0.3REM；justify-content：中心；">
              <按钮 班级="btn" 风格="填充：0.2REM0.8REM；字体大小：0.8REM；背景：#f59e0b；" onClick="editSite(${指数})">编辑</按钮>
              <按钮 班级="btn" 风格="填充：0.2REM0.8REM；字体大小：0.8REM；背景：#ef4444；" onClick="deleteSite(${指数})">删除</按钮>
            </div>
` : `
            <div 风格="上边距：0.5REM；">
              <一个 href="${site.url}" 目标="_空白" 班级="btn" 风格="填充：0.2REM1REM；字体大小：0.8REM；文字装饰：没有一个；显示：内联块；">访问</一个>
            </div>
`}
        </div>
`;
    });
grid.innerHTML=html；
  }

函数renderAll(){
renderGrid('publicGrid'，false)；
常量isAdminPanel=文件。getElementById('adminPanel').classList。包含(“活动”)；
renderGrid('adminGrid'，isAdminPanel)；
  }

// ----- 设置按钮 -----
window.handleSettings=函数(){
if(isAdmin){
Const panel=document.getElementById('adminPanel')；
if(panel.classList.contains('active')){
panel.scrollIntoView({行为：'光滑的'})；
}else{
setAdminState(true)；
      }
}else{
showModal()；
    }
  };

window.handleLogout=函数(){
    if (confirm('确认退出？')) {
setAdminState(false)；
    }
  };

// ----- 管理员状态 -----
函数setAdminState(状态){
isAdmin=status；
Const panel=document.getElementById('adminPanel')；
常量logoutBtn=document.getElementById('logoutBtn')；
if (status) {
      panel.classList.add('active');
      logoutBtn.style.display = 'inline-block';
      settingsBtn.textContent = '⚙️ 设置';
      settingsBtn.style.background = '#6b7280';
    } else {
      panel.classList.remove('active');
      logoutBtn.style.display = 'none';
      settingsBtn.textContent = '⚙️ 设置';
      settingsBtn.style.background = '#2563eb';
    }
    renderAll();
  }

  // ----- 弹窗（需要输入账号和密码，但不显示账号提示） -----
  function showModal() {
    document.getElementById('passwordModal').classList.add('active');
    document.getElementById('loginAccount').value = '';
    document.getElementById('loginPassword').value = '';
    document.getElementById('loginError').style.display = 'none';
    document.getElementById('loginAccount').focus();
  }

  window.closeModal = function() {
    document.getElementById('passwordModal').classList.remove('active');
  };

  window.confirmLogin = function() {
    const account = document.getElementById('loginAccount').value.trim();
    const password = document.getElementById('loginPassword').value.trim();
    const errorEl = document.getElementById('loginError');

    if (account === ADMIN_ACCOUNT && password === ADMIN_PASSWORD) {
      errorEl.style.display = 'none';
      setAdminState(true);
      closeModal();
    } else {
      errorEl.style.display = 'block';
      document.getElementById('loginPassword').value = '';
      document.getElementById('loginPassword').focus();
    }
  };

  // ----- CRUD 操作 -----
  window.addSite = function() {
    const name = document.getElementById('siteName').value.trim();
常量url=文件。getElementById('siteurl')。价值。修剪()；
    const icon = document.getElementById('siteIcon').value.trim() || '🌐';

    if (!name || !url) {
      alert('请填写名称和网址');
      return;
    }

    sites.push({ name, url, icon });
      saveSites();
    document.getElementById('siteName').value = '';
    document.getElementById('siteUrl').value = '';
document.getElementById('siteIcon').value='🌐'；
  };

  window.editSite = function(index) {
const site=站点[索引]；
    if (!site) return;
    const newName = prompt('修改名称:', site.name);
    if (newName !== null) site.name = newName || site.name;
    const newUrl = prompt('修改网址:', site.url);
    if (newUrl !== null) site.url = newUrl || site.url;
    const newIcon = prompt('修改图标 (emoji):', site.icon);
    if (newIcon !== null) site.icon = newIcon || site.icon;
      saveSites();
  };

  window.deleteSite = function(index) {
if(confirm('确定删除"${sites[index].name}"吗？‘)){
站点.splice(索引，1)；
      saveSites();
    }
  };

  // ----- 启动 -----
  document.addEventListener('DOMContentLoaded', function() {
    loadSites();
    setAdminState(false);

    // 回车键支持
    document.getElementById('loginAccount').addEventListener('keydown', function(e) {
      if (e.key === 'Enter') document.getElementById('loginPassword').focus();
    });
    document.getElementById('loginPassword').addEventListener('keydown', function(e) {
      if (e.key === 'Enter') confirmLogin();
    });

    // 点击遮罩关闭
    document.getElementById('passwordModal').addEventListener('click', function(e) {
      if (e.target === this) closeModal();
    });
  });
</script>
</身体>
</html>常数设置Btn=文件。getElementById('settingsBtn')；Constorage_KEY='SiteList'；