设为首页收藏本站
切换到宽版

 找回密码
 立即注册
搜索
司令论坛»论坛 › 源码板块 › 网站源码 › 司令论坛地址发布页最新版源码HTML源码
返回列表 发新帖
查看: 207|回复: 0

司令论坛地址发布页最新版源码HTML源码

[复制链接]
司令

796

主题

5

回帖

1336

积分

管理员

积分
1336
发表于 2026-1-16 15:13:12 | 显示全部楼层 |阅读模式

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  7.   <title>司令论坛 · 官方入口</title>
  8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
  9.   <style>
  10.     /* ===== 主题变量 ===== */
  11.     :root {
  12.       --primary: #4361ee;
  13.       --primary-light: #4895ef;
  14.       --primary-dark: #3a56d4;
  15.       --bg-body: #f9fbfd;
  16.       --bg-card: #ffffff;
  17.       --text-main: #2b2d42;
  18.       --text-muted: #6c757d;
  19.       --border-color: #eaeef5;
  20.       --success: #4ade80;
  21.       --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  22.       --shadow-md: 0 6px 16px rgba(0,0,0,0.08);
  23.       --radius: 16px;
  24.       --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  25.     }

  27.     .dark-mode {
  28.       --primary: #4cc9f0;
  29.       --primary-light: #5abaff;
  30.       --primary-dark: #3db9e8;
  31.       --bg-body: #0f172a;
  32.       --bg-card: #1e293b;
  33.       --text-main: #f1f5f9;
  34.       --text-muted: #94a3b8;
  35.       --border-color: #334155;
  36.       --success: #34d399;
  37.       --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  38.       --shadow-md: 0 6px 16px rgba(0,0,0,0.25);
  39.     }

  41.     * {
  42.       margin: 0;
  43.       padding: 0;
  44.       box-sizing: border-box;
  45.     }

  47.     body {
  48.       min-height: 100vh;
  49.       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  50.       background-color: var(--bg-body);
  51.       color: var(--text-main);
  52.       padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  53.       display: flex;
  54.       justify-content: center;
  55.       align-items: center;
  56.       line-height: 1.6;
  57.       -webkit-font-smoothing: antialiased;
  58.       -moz-osx-font-smoothing: grayscale;
  59.     }

  61.     .container {
  62.       width: 100%;
  63.       max-width: 540px;
  64.       background: var(--bg-card);
  65.       border-radius: var(--radius);
  66.       box-shadow: var(--shadow-md);
  67.       overflow: hidden;
  68.       animation: fadeIn 0.4s ease-out;
  69.     }

  71.     @keyframes fadeIn {
  72.       from { opacity: 0; transform: translateY(12px); }
  73.       to { opacity: 1; transform: translateY(0); }
  74.     }

  76.     .header {
  77.       display: flex;
  78.       justify-content: space-between;
  79.       align-items: center;
  80.       padding: 26px 26px 18px; /* 调整：减少 bottom padding，避免与 links-grid 重叠 */
  81.       border-bottom: 1px solid var(--border-color);
  82.     }

  84.     h1 {
  85.       font-size: 1.8rem;
  86.       font-weight: 800;
  87.       background: linear-gradient(90deg, var(--primary), var(--primary-light));
  88.       -webkit-background-clip: text;
  89.       background-clip: text;
  90.       color: transparent;
  91.       letter-spacing: -0.8px;
  92.     }

  94.     .actions {
  95.       display: flex;
  96.       gap: 12px;
  97.     }

  99.     .btn {
  100.       border: none;
  101.       border-radius: 12px;
  102.       padding: 10px 16px;
  103.       cursor: pointer;
  104.       font-size: 14px;
  105.       font-weight: 600;
  106.       display: flex;
  107.       align-items: center;
  108.       gap: 6px;
  109.       transition: var(--transition);
  110.       outline: none;
  111.       position: relative;
  112.       min-width: 42px;
  113.       justify-content: center;
  114.     }

  116.     .bookmark-btn {
  117.       background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  118.       color: white;
  119.       box-shadow: 0 3px 8px rgba(67, 97, 238, 0.35);
  120.     }

  122.     .bookmark-btn:hover {
  123.       transform: translateY(-2px);
  124.       box-shadow: 0 5px 12px rgba(67, 97, 238, 0.45);
  125.     }

  127.     .theme-btn {
  128.       width: 44px;
  129.       height: 44px;
  130.       padding: 0;
  131.       border-radius: 50%;
  132.       background: var(--bg-card);
  133.       color: var(--text-main);
  134.       display: flex;
  135.       align-items: center;
  136.       justify-content: center;
  137.       box-shadow: var(--shadow-sm);
  138.     }

  140.     .theme-btn:hover {
  141.       transform: rotate(25deg) scale(1.1);
  142.       background: var(--primary);
  143.       color: white;
  144.     }

  146.     .links-grid {
  147.       padding: 22px 26px; /* 上下 = 22px，等于 gap 值，实现首尾对称 */
  148.       display: flex;
  149.       flex-direction: column;
  150.       gap: 22px; /* 所有卡片间距一致 */
  151.     }

  153.     .link-card {
  154.       padding: 22px;
  155.       border-radius: var(--radius);
  156.       background: var(--bg-card);
  157.       border: 1px solid var(--border-color);
  158.       transition: var(--transition);
  159.       position: relative;
  160.       overflow: hidden;
  161.     }

  163.     .link-card::before {
  164.       content: '';
  165.       position: absolute;
  166.       top: 0;
  167.       left: 0;
  168.       height: 100%;
  169.       width: 4px;
  170.       background: var(--primary);
  171.       opacity: 0.7;
  172.     }

  174.     .link-card:hover {
  175.       transform: translateY(-4px);
  176.       box-shadow: var(--shadow-md);
  177.       border-color: var(--primary);
  178.     }

  180.     .link-header {
  181.       display: flex;
  182.       justify-content: space-between;
  183.       align-items: flex-start;
  184.       margin-bottom: 10px;
  185.     }

  187.     .link-title {
  188.       font-size: 1.18rem;
  189.       font-weight: 700;
  190.       display: flex;
  191.       align-items: center;
  192.       gap: 10px;
  193.       flex: 1;
  194.     }

  196.     .link-title i {
  197.       color: var(--primary);
  198.       font-size: 1.15rem;
  199.     }

  201.     .copy-btn {
  202.       background: none;
  203.       border: none;
  204.       color: var(--text-muted);
  205.       cursor: pointer;
  206.       width: 32px;
  207.       height: 32px;
  208.       border-radius: 8px;
  209.       display: flex;
  210.       align-items: center;
  211.       justify-content: center;
  212.       transition: var(--transition);
  213.       flex-shrink: 0;
  214.     }

  216.     .copy-btn:hover {
  217.       background: rgba(67, 97, 238, 0.1);
  218.       color: var(--primary);
  219.     }

  221.     .copy-btn.copied {
  222.       color: var(--success) !important;
  223.       transform: scale(1.1);
  224.     }

  226.     .link-url {
  227.       text-decoration: none;
  228.       font-size: 0.96rem;
  229.       color: var(--text-muted);
  230.       word-break: break-all;
  231.       display: block;
  232.       padding: 4px 0;
  233.       position: relative;
  234.       transition: color 0.2s;
  235.     }

  237.     .link-url:hover {
  238.       color: var(--primary);
  239.     }

  241.     .link-url::after {
  242.       content: '';
  243.       position: absolute;
  244.       bottom: 0;
  245.       left: 0;
  246.       width: 0;
  247.       height: 1.6px;
  248.       background: var(--primary);
  249.       transition: width 0.3s ease;
  250.     }

  252.     .link-url:hover::after {
  253.       width: 100%;
  254.     }

  256.     .footer {
  257.       padding: 18px 26px;
  258.       text-align: center;
  259.       font-size: 12px;
  260.       color: var(--text-muted);
  261.       border-top: 1px solid var(--border-color);
  262.       font-weight: 500;
  263.     }

  265.     /* 响应式 */
  266.     @media (max-width: 480px) {
  267.       .container {
  268.         margin: 0 12px;
  269.       }
  270.       .header,
  271.       .links-grid {
  272.         padding-left: 20px;
  273.         padding-right: 20px;
  274.       }
  275.       h1 {
  276.         font-size: 1.55rem;
  277.       }
  278.       .link-card {
  279.         padding: 18px;
  280.       }
  281.       .btn {
  282.         padding: 9px 14px;
  283.         font-size: 13px;
  284.       }
  285.       .theme-btn {
  286.         width: 42px;
  287.         height: 42px;
  288.       }
  289.     }

  291.     /* 可访问性：仅当键盘导航时显示焦点 */
  292.     .btn:focus:not(:focus-visible) {
  293.       outline: none;
  294.     }

  296.     .btn:focus-visible {
  297.       outline: 2px solid var(--primary);
  298.       outline-offset: 2px;
  299.       border-radius: 12px;
  300.     }

  302.     .copy-btn:focus-visible {
  303.       outline-offset: 1px;
  304.       border-radius: 8px;
  305.     }
  306.   </style>
  307. </head>
  308. <body class="light-mode">
  309.   <div class="container">
  310.     <div class="header">
  311.       <h1>司令论坛</h1>
  312.       <div class="actions">
  313.         <button class="btn bookmark-btn" onclick="bookmarkPage()" aria-label="收藏本页">
  314.           <i class="fas fa-bookmark"></i> 收藏
  315.         </button>
  316.         <button class="btn theme-btn" onclick="toggleTheme()" title="切换明暗主题" aria-label="切换主题">
  317.           <i class="fas fa-moon" id="themeIcon"></i>
  318.         </button>
  319.       </div>
  320.     </div>

  322.     <div class="links-grid" id="linksGrid">
  323.       <!-- 链接将由 JS 渲染 -->
  324.     </div>

  326.     <div class="footer">
  327.       Copyright &copy; 2026 cmdrbbs.com All Rights Reserved
  328.     </div>
  329.   </div>

  331.   <script>
  332.     // 链接数据（便于维护）
  333.     const links = [
  334.       {
  335.         title: "司令论坛",
  336.         url: "https://www.cmdrbbs.com",
  337.         icon: "fa-link"
  338.       },
  339.       {
  340.         title: "三毛机场 · 5元1200G",
  341.         url: "https://gw-1.xn--ehqx7tcnnope.com/#/register?code=MMWgjJKw",
  342.         icon: "fa-link"
  343.       }
  344.     ];

  346.     // 渲染链接卡片
  347.     function renderLinks() {
  348.       const grid = document.getElementById('linksGrid');
  349.       grid.innerHTML = links.map((link, index) => `
  350.         <div class="link-card">
  351.           <div class="link-header">
  352.             <span class="link-title">
  353.               <i class="fas ${link.icon}"></i> ${link.title}
  354.             </span>
  355.             <button class="copy-btn"
  356.                     onclick="copyUrl(this, '${link.url}')"
  357.                     aria-label="复制链接"
  358.                     data-index="${index}">
  359.               <i class="fas fa-copy"></i>
  360.             </button>
  361.           </div>
  362.           <a href="${link.url}" target="_blank" class="link-url" rel="noopener noreferrer">
  363.             ${link.url}
  364.           </a>
  365.         </div>
  366.       `).join('');
  367.     }

  369.     // 复制链接功能
  370.     async function copyUrl(btn, url) {
  371.       try {
  372.         await navigator.clipboard.writeText(url);
  373.         const icon = btn.querySelector('i');
  374.         icon.className = 'fas fa-check';
  375.         btn.classList.add('copied');
  376.         
  377.         setTimeout(() => {
  378.           icon.className = 'fas fa-copy';
  379.           btn.classList.remove('copied');
  380.         }, 2000);
  381.       } catch (err) {
  382.         console.warn('复制失败:', err);
  383.         alert('无法复制链接，请手动复制');
  384.       }
  385.     }

  387.     // 主题切换
  388.     function toggleTheme() {
  389.       const body = document.body;
  390.       const isDark = body.classList.contains('dark-mode');
  391.       const newMode = isDark ? 'light-mode' : 'dark-mode';
  392.       
  393.       body.classList.remove(isDark ? 'dark-mode' : 'light-mode');
  394.       body.classList.add(newMode);
  395.       
  396.       const icon = document.getElementById('themeIcon');
  397.       icon.className = newMode === 'dark-mode' ? 'fas fa-sun' : 'fas fa-moon';
  398.       
  399.       localStorage.setItem('siteTheme', newMode);
  400.     }

  402.     // 初始化
  403.     document.addEventListener('DOMContentLoaded', () => {
  404.       // 渲染链接
  405.       renderLinks();
  406.       
  407.       // 应用主题
  408.       const saved = localStorage.getItem('siteTheme') || 'light-mode';
  409.       document.body.className = saved;
  410.       document.getElementById('themeIcon').className =
  411.         saved === 'dark-mode' ? 'fas fa-sun' : 'fas fa-moon';
  412.     });

  414.     // 收藏提示
  415.     function bookmarkPage() {
  416.       alert('📌 请使用快捷键收藏本页：\n\nWindows/Linux: Ctrl + D\nMac: ⌘ Command + D');
  417.     }
  418.   </script>

  420.   <!-- 统计脚本（建议异步加载） -->
  421.   <script async charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
  422.   <script>
  423.     window.addEventListener('load', () => {
  424.       if (typeof LA !== 'undefined') {
  425.         LA.init({id:"3OdH4Am1dhJUBXA2",ck:"3OdH4Am1dhJUBXA2"});
  426.       }
  427.     });
  428.   </script>
  429. </body>
  430. </html>
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|司令论坛

GMT+8, 2026-2-26 06:28 , Processed in 0.083497 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表