地址发布单页源码（最好看得一版）

综合评论1,517,020字数 1500阅读5分0秒

说明

  • 自动检测是否能够正常访问
  • 自动黑夜/白天模式，也可手动切换
  • 主要是页面好看
  • 复制代码
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>6ke论坛-地址发布页，收藏我回家不迷路！</title>
    7.     <meta name="description" content="6ke论坛-地址发布页，收藏我回家不迷路！">
    8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    9.     <style>
    10.         @font-face {
    11.             font-family: 'HarmonyOS Sans SC';
    12.             src: url('/diy/ziti/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
    13.             font-weight: normal;
    14.             font-style: normal;
    15.         }
    16.         :root {
    17.             --primary-color: #3b82f6;
    18.             --secondary-color: #60a5fa;
    19.             --text-color: #1f2937;
    20.             --card-background: rgba(255, 255, 255, 0.9);
    21.             --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    22.             --background-light: linear-gradient(-45deg, #e6f2ff, #fff0f5, #f0f7ff, #fff5e6);
    23.             --background-dark: linear-gradient(-45deg, #1a202c, #2d3748, #4a5568, #2d3748);
    24.         }
    25.         .dark-mode {
    26.             --primary-color: #60a5fa;
    27.             --secondary-color: #3b82f6;
    28.             --text-color: #e2e8f0;
    29.             --card-background: rgba(26, 32, 44, 0.9);
    30.         }
    31.         * {
    32.             box-sizing: border-box;
    33.             margin: 0;
    34.             padding: 0;
    35.         }
    36.         body {
    37.             font-family: 'HarmonyOS Sans SC', sans-serif;
    38.             color: var(--text-color);
    39.             line-height: 1.6;
    40.             min-height: 100vh;
    41.             display: flex;
    42.             justify-content: center;
    43.             align-items: center;
    44.             background: var(--background-light);
    45.             background-size: 400% 400%;
    46.             animation: gradientBG 15s ease infinite;
    47.             overflow-x: hidden;
    48.             font-size: 16px;
    49.             transition: var(--transition);
    50.         }
    51.         body.dark-mode {
    52.             background: var(--background-dark);
    53.         }
    54.         @keyframes gradientBG {
    55.             0% { background-position: 0% 50%; }
    56.             50% { background-position: 100% 50%; }
    57.             100% { background-position: 0% 50%; }
    58.         }
    59.         .wrapper {
    60.             padding: 2rem;
    61.             width: 100%;
    62.             max-width: 600px;
    63.             position: relative;
    64.         }
    65.         .main {
    66.             background-color: var(--card-background);
    67.             border-radius: 20px;
    68.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    69.             padding: 2.5rem;
    70.             backdrop-filter: blur(10px);
    71.             transition: var(--transition);
    72.         }
    73.         .main:hover {
    74.             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    75.         }
    76.         h1 {
    77.             font-size: 2.5rem;
    78.             color: var(--primary-color);
    79.             text-align: center;
    80.             margin-bottom: 1.5rem;
    81.             font-weight: 700;
    82.         }
    83.         ul {
    84.             list-style-type: none;
    85.             margin-bottom: 1.5rem;
    86.         }
    87.         li {
    88.             margin-bottom: 1rem;
    89.             padding: 1rem;
    90.             background-color: rgba(248, 250, 252, 0.8);
    91.             border-radius: 10px;
    92.             transition: var(--transition);
    93.             cursor: pointer;
    94.             display: flex;
    95.             align-items: center;
    96.             justify-content: space-between;
    97.         }
    98.         .dark-mode li {
    99.             background-color: rgba(26, 32, 44, 0.8);
    100.         }
    101.         li:hover {
    102.             transform: translateY(-3px);
    103.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    104.         }
    105.         li a {
    106.             color: var(--primary-color);
    107.             text-decoration: none;
    108.             font-weight: bold;
    109.             transition: var(--transition);
    110.             display: flex;
    111.             align-items: center;
    112.         }
    113.         li a:hover {
    114.             color: var(--secondary-color);
    115.         }
    116.         li a i {
    117.             margin-right: 0.5rem;
    118.             font-size: 1.2em;
    119.         }
    120.         .notice {
    121.             background-color: rgba(230, 242, 255, 0.8);
    122.             border-left: 4px solid var(--primary-color);
    123.             padding: 1rem;
    124.             margin-top: 1rem;
    125.             border-radius: 10px;
    126.             transition: var(--transition);
    127.         }
    128.         .dark-mode .notice {
    129.             background-color: rgba(44, 55, 72, 0.8);
    130.         }
    131.         .notice:hover {
    132.             background-color: rgba(230, 242, 255, 1);
    133.         }
    134.         .dark-mode .notice:hover {
    135.             background-color: rgba(44, 55, 72, 1);
    136.         }
    137.         .footer {
    138.             margin-top: 2rem;
    139.             text-align: center;
    140.             color: var(--text-color);
    141.             font-weight: 300;
    142.             opacity: 0.8;
    143.             transition: var(--transition);
    144.         }
    145.         .footer:hover {
    146.             opacity: 1;
    147.         }
    148.         .bookmark-btn {
    149.             display: block;
    150.             width: 100%;
    151.             padding: 1rem;
    152.             background-color: var(--primary-color);
    153.             color: white;
    154.             text-align: center;
    155.             border: none;
    156.             border-radius: 10px;
    157.             font-size: 1rem;
    158.             font-weight: 600;
    159.             cursor: pointer;
    160.             transition: var(--transition);
    161.             margin-bottom: 1.5rem;
    162.             position: relative;
    163.             overflow: hidden;
    164.         }
    165.         .bookmark-btn:hover {
    166.             background-color: var(--secondary-color);
    167.             transform: translateY(-2px);
    168.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    169.         }
    170.         .bookmark-btn::after {
    171.             content: '';
    172.             position: absolute;
    173.             top: 50%;
    174.             left: 50%;
    175.             width: 5px;
    176.             height: 5px;
    177.             background: rgba(255, 255, 255, 0.5);
    178.             opacity: 0;
    179.             border-radius: 100%;
    180.             transform: scale(1, 1) translate(-50%);
    181.             transform-origin: 50% 50%;
    182.         }
    183.         .bookmark-btn:focus:not(:active)::after {
    184.             animation: ripple 1s ease-out;
    185.         }
    186.         @keyframes ripple {
    187.             0% { transform: scale(0, 0); opacity: 1; }
    188.             20% { transform: scale(25, 25); opacity: 1; }
    189.             100% { opacity: 0; transform: scale(40, 40); }
    190.         }
    191.         .bg-animation {
    192.             position: fixed;
    193.             top: 0;
    194.             left: 0;
    195.             width: 100%;
    196.             height: 100%;
    197.             z-index: -1;
    198.         }
    199.         .bg-animation span {
    200.             position: absolute;
    201.             display: block;
    202.             width: 20px;
    203.             height: 20px;
    204.             background: rgba(255, 255, 255, 0.2);
    205.             animation: move 25s infinite linear;
    206.         }
    207.         .dark-mode .bg-animation span {
    208.             background: rgba(255, 255, 255, 0.1);
    209.         }
    210.         .bg-animation span:nth-child(1) { top: 20%; left: 20%; animation-duration: 15s; }
    211.         .bg-animation span:nth-child(2) { top: 60%; left: 80%; animation-duration: 17s; width: 40px; height: 40px; }
    212.         .bg-animation span:nth-child(3) { top: 40%; left: 40%; animation-duration: 19s; }
    213.         .bg-animation span:nth-child(4) { top: 80%; left: 10%; animation-duration: 21s; }
    214.         @keyframes move {
    215.             0% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; border-radius: 0; }
    216.             100% { transform: translateX(-1000px) translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
    217.         }
    218.         @media (max-width: 768px) {
    219.             body {
    220.                 font-size: calc(14px + 0.390625vw);
    221.             }
    222.             .main {
    223.                 padding: 2rem;
    224.             }
    225.             h1 {
    226.                 font-size: 2rem;
    227.             }
    228.         }
    229.         .status-badge {
    230.             padding: 2px 6px;
    231.             border-radius: 4px;
    232.             font-size: 0.8em;
    233.             margin-left: 10px;
    234.         }
    235.         .status-normal {
    236.             background-color: #4CAF50;
    237.             color: white;
    238.         }
    239.         .status-error {
    240.             background-color: #f44336;
    241.             color: white;
    242.         }
    243.         .status-checking {
    244.             background-color: #ffeb3b;
    245.             color: black;
    246.         }
    247.         li.disabled {
    248.             opacity: 0.5;
    249.             cursor: not-allowed;
    250.         }
    251.         li.disabled a {
    252.             pointer-events: none;
    253.         }
    254.         .mode-toggle {
    255.             position: absolute;
    256.             top: 10px;
    257.             right: 10px;
    258.             background: none;
    259.             border: none;
    260.             color: var(--text-color);
    261.             font-size: 1.5rem;
    262.             cursor: pointer;
    263.             transition: var(--transition);
    264.             z-index: 10;
    265.         }
    266.         .mode-toggle:hover {
    267.             color: var(--primary-color);
    268.         }
    269.     </style>
    270. </head>
    271. <body>
    272.     <div class="bg-animation">
    273.         <span></span>
    274.         <span></span>
    275.         <span></span>
    276.         <span></span>
    277.     </div>
    278.     <div class="wrapper">
    279.         <button class="mode-toggle" id="mode-toggle">
    280.             <i class="fas fa-moon"></i>
    281.         </button>
    282.         <main class="main">
    283.             <h1>6ke论坛-地址发布页</h1>
    284.             <button class="bookmark-btn">
    285.                 <i class="fas fa-bookmark"></i> Ctrl+D 收藏本页到浏览器收藏夹
    286.             </button>
    287.             <ul id="url-list">
    288.                 <li data-url="https://6.ke/">
    289.                     <span>6ke论坛（主）</span>
    290.                     <a href="https://6.ke/" target="_blank">
    291.                         <i class="fas fa-external-link-alt"></i> https://6.ke
    292.                     </a>
    293.                     <span class="status-badge status-checking">检测中...</span>
    294.                 </li>
    295.                 <li data-url="https://6ke.li/">
    296.                     <span>6ke论坛（备）</span>
    297.                     <a href="https://6ke.li/" target="_blank">
    298.                         <i class="fas fa-external-link-alt"></i> https://6ke.li
    299.                     </a>
    300.                     <span class="status-badge status-checking">检测中...</span>
    301.                 </li>
    302.                  <li data-url="https://baidu.com/">
    303.                     <span>百度搜索</span>
    304.                     <a href="https://baidu.com/" target="_blank">
    305.                         <i class="fas fa-external-link-alt"></i> https://baidu.com
    306.                     </a>
    307.                     <span class="status-badge status-checking">检测中...</span>
    308.                 </li>
    309.                 <li data-url="https://cn.bing.com/">
    310.                     <span>bing</span>
    311.                     <a href="https://cn.bing.com/" target="_blank">
    312.                         <i class="fas fa-external-link-alt"></i> https://cn.bing.com
    313.                     </a>
    314.                     <span class="status-badge status-checking">检测中...</span>
    315.                 </li>
    316.             </ul>
    317.             <div class="notice">
    318.                 <i class="fas fa-info-circle"></i> 部分中国网络屏蔽网址，打不开请挂梯子🪜访问！
    319.             </div>
    320.         </main>
    321.         <footer class="footer">
    322.             <p>&copy; 2024 6ke论坛. 保留所有权利。</p>
    323.         </footer>
    324.     </div>
    326. <script>
    327.         function checkUrl(url, li) {
    328.             return new Promise((resolve) => {
    329.                 const img = new Image();
    330.                 let isResolved = false;
    332.                 const timeoutId = setTimeout(() => {
    333.                     if (!isResolved) {
    334.                         updateUrlStatus(li, false);
    335.                         isResolved = true;
    336.                         resolve();
    337.                     }
    338.                 }, 5000); // 5秒超时
    340.                 img.onload = function() {
    341.                     if (!isResolved) {
    342.                         clearTimeout(timeoutId);
    343.                         updateUrlStatus(li, true);
    344.                         isResolved = true;
    345.                         resolve();
    346.                     }
    347.                 };
    349.                 img.onerror = function() {
    350.                     if (!isResolved) {
    351.                         clearTimeout(timeoutId);
    352.                         updateUrlStatus(li, false);
    353.                         isResolved = true;
    354.                         resolve();
    355.                     }
    356.                 };
    358.                 // 添加一个随机参数来避免缓存
    359.                 img.src = url + '/favicon.ico?' + new Date().getTime();
    360.             });
    361.         }
    363.         function updateUrlStatus(li, isAccessible) {
    364.             const statusBadge = li.querySelector('.status-badge');
    365.             li.classList.remove('disabled');
    366.             if (isAccessible) {
    367.                 statusBadge.textContent = '正常';
    368.                 statusBadge.className = 'status-badge status-normal';
    369.             } else {
    370.                 li.classList.add('disabled');
    371.                 statusBadge.textContent = '无法访问';
    372.                 statusBadge.className = 'status-badge status-error';
    373.             }
    374.         }
    376.         function checkAllUrls() {
    377.             const urlList = document.getElementById('url-list');
    378.             const listItems = urlList.querySelectorAll('li');
    380.             listItems.forEach(li => {
    381.                 const url = li.dataset.url;
    382.                 const statusBadge = li.querySelector('.status-badge');
    383.                 statusBadge.textContent = '检测中...';
    384.                 statusBadge.className = 'status-badge status-checking';
    385.                 checkUrl(url, li);
    386.             });
    387.         }
    389.         // 初始检查
    390.         checkAllUrls();
    392.         // 每5分钟检查一次
    393.         setInterval(checkAllUrls, 5 * 60 * 1000);
    395.         // 暗黑模式切换代码保持不变
    396.         const modeToggle = document.getElementById('mode-toggle');
    397.         const body = document.body;
    398.         const icon = modeToggle.querySelector('i');
    400.         function setDarkMode(isDark) {
    401.             if (isDark) {
    402.                 body.classList.add('dark-mode');
    403.                 icon.classList.remove('fa-moon');
    404.                 icon.classList.add('fa-sun');
    405.                 localStorage.setItem('darkMode', 'enabled');
    406.             } else {
    407.                 body.classList.remove('dark-mode');
    408.                 icon.classList.remove('fa-sun');
    409.                 icon.classList.add('fa-moon');
    410.                 localStorage.setItem('darkMode', 'disabled');
    411.             }
    412.         }
    414.         function checkSystemPreference() {
    415.             return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    416.         }
    418.         function initializeDarkMode() {
    419.             const userPreference = localStorage.getItem('darkMode');
    420.             if (userPreference === 'enabled') {
    421.                 setDarkMode(true);
    422.             } else if (userPreference === 'disabled') {
    423.                 setDarkMode(false);
    424.             } else {
    425.                 setDarkMode(checkSystemPreference());
    426.             }
    427.         }
    429.         // 初始化暗黑模式
    430.         initializeDarkMode();
    432.         // 监听系统主题变化
    433.         window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
    434.             if (localStorage.getItem('darkMode') === null) {
    435.                 setDarkMode(e.matches);
    436.             }
    437.         });
    439.         // 切换按钮点击事件
    440.         modeToggle.addEventListener('click', () => {
    441.             setDarkMode(!body.classList.contains('dark-mode'));
    442.         });
    444.         // 收藏按钮功能
    445.         document.querySelector('.bookmark-btn').addEventListener('click', function(e) {
    446.             e.preventDefault();
    447.             if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
    448.                 window.sidebar.addPanel(document.title, window.location.href, '');
    449.             } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
    450.                 window.external.AddFavorite(location.href, document.title);
    451.             } else if (window.opera && window.print) { // Opera Hotlist
    452.                 this.title = document.title;
    453.                 return true;
    454.             } else { // webkit - safari/chrome
    455.                 alert('请使用' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 添加到收藏夹。');
    456.             }
    457.         });
    458.     </script>
    459. </body>
    460. </html>

     

文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/1239.html文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/1239.html
继续阅读
《寂静》（2023 年韩国电影）在线观看下载
《寂静》（2023 年韩国电影）在线观看下载 综合

《寂静》（2023 年韩国电影）在线观看下载

《寂静》（2023 年韩国电影）：这是一部由金泰昆执导，李善均、朱智勋、金熙元、文成根、芮秀贞等主演的灾难惊悚片。影片于 2023 年 5 月 21 日在戛纳电影节上映，并于 2024 年 7 月 1...
10,460,7384下载 观看
  • 本文由 admin 发表于2024年9月28日 22:49:54
  • 转载请务必保留本文链接：https://bbs.50-0.cn/1239.html
  • 源码
零基础做出能赚钱的牛逼公众号

加载中...

匿名

发表评论

匿名网友
确定