version: '3.8'
services:
  60s:
    image: vikiboss/60s:latest
    container_name: 60s
    ports:
      - "4399:4399"  #冒号前面的是实机端口
    restart: always

everyday_60s:
  layout: markdown
  title: 每日60s
  content: |
    <div class="linklist center" style="grid-template-columns: repeat(1, 1fr); margin-bottom: 0px; ">
      <a class="link" title="点击图片放大查看" href="javascript:void(0);">
        <div class="flex">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
            <path fill="currentColor" d="m13.629 20.472l-.542.916c-.483.816-1.69.816-2.174 0l-.542-.916c-.42-.71-.63-1.066-.968-1.262c-.338-.197-.763-.204-1.613-.219c-1.256-.021-2.043-.098-2.703-.372a5 5 0 0 1-2.706-2.706C2 14.995 2 13.83 2 11.5v-1c0-3.273 0-4.91.737-6.112a5 5 0 0 1 1.65-1.651C5.59 2 7.228 2 10.5 2h3c3.273 0 4.91 0 6.113.737a5 5 0 0 1 1.65 1.65C22 5.59 22 7.228 22 10.5v1c0 2.33 0 3.495-.38 4.413a5 5 0 0 1-2.707 2.706c-.66.274-1.447.35-2.703.372c-.85.015-1.275.022-1.613.219c-.338.196-.548.551-.968 1.262" opacity=".5"></path>
            <path fill="currentColor" d="M7.25 9A.75.75 0 0 1 8 8.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 3.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75"></path>
          </svg>
          <span>点击图片放大查看</span>
        </div>
      </a>
    </div>

    <div class="linklist center" style="grid-template-columns: repeat(1, 1fr);" id="imageButtonContainer">
      <a class="link" title="点击加载图片" href="javascript:void(0);" onclick="loadImage()">
        <div class="flex" id="loadImageBtn">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
            <g fill="none">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
              <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
              <circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
            </g>
          </svg>
          <span>点击加载图片</span>
        </div>
      </a>
    </div>

    <div id="image-container" style="margin-top: 10px; margin-bottom: 10px;"></div>

    <script type="text/javascript">
      // 清除localStorage中的状态，这样页面刷新后按钮能恢复
      localStorage.removeItem('imageButtonClicked');

      if (localStorage.getItem('imageButtonClicked') === 'true') {
        document.getElementById('imageButtonContainer').style.display = 'none';
      }

      function loadImage() {
        // Load image
        var imageContainer = document.getElementById('image-container');
        var img = document.createElement('img');
        <!-- 替换为自己的Api，自己没有服务器也可用这个，不过有概率被墙 -->
        // 在URL末尾附加时间戳，避免浏览器缓存
        img.src = 'https://60s-api.viki.moe/v2/60s?encoding=image-proxy' + new Date().getTime();
        img.alt = '动态加载的图片';
        img.style.maxWidth = '100%';
        img.style.border = '2px solid #ddd';
        img.style.marginTop = '0px'; // 图片的上边距
        
        // Wrap the image with a fancybox link
        var fancyboxLink = document.createElement('a');
        fancyboxLink.setAttribute('href', img.src);  // Set href to image source for fancybox zoom
        fancyboxLink.setAttribute('data-fancybox', 'gallery'); // Add fancybox group (can be a gallery)
        fancyboxLink.appendChild(img);
        
        imageContainer.appendChild(fancyboxLink);

        // Hide the image button and save the state in localStorage
        document.getElementById('imageButtonContainer').style.display = 'none';
        localStorage.setItem('imageButtonClicked', 'true');
      }
    </script>
    <!-- 这里的css和js别忘记换成公用cdn或者自己的 -->
    <link rel="stylesheet" href="/jquery.fancybox.min.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.fancybox.min.js"></script>