☰

Access Control For Mindfulness (ctrl+m)

Beautiful mindful page for website access control. Press Ctrl+S to enable access control and custom access time.

  1. // ==UserScript==
  2. // @name         Access Control For Mindfulness (ctrl+m)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.2
  5. // @description  Beautiful mindful page for website access control. Press Ctrl+S to enable access control and custom access time.
  6. // @author       KQ yang
  7. // @match        *://*/*
  8. // @license      MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Default configuration
  15.     const DEFAULT_CONFIG = {
  16.         startHour: 12,
  17.         endHour: 14,
  18.         restrictedSites: {},
  19.         messageStyle: "background-color: white; margin-top: 20vh; margin-left: 100px; margin-right: 100px; font-size:64px"
  20.     };
  21.  
  22.     // Load configuration from localStorage
  23.     let CONFIG = JSON.parse(localStorage.getItem('mindfulnessConfig')) || DEFAULT_CONFIG;
  24.  
  25.     // 添加样式
  26.     function addStyles() {
  27.         const styleSheet = document.createElement("style");
  28.         styleSheet.textContent = `
  29.             .mindfulness-panel {
  30.                 position: fixed;
  31.                 top: 50%;
  32.                 left: 50%;
  33.                 transform: translate(-50%, -50%);
  34.                 background: white;
  35.                 padding: 30px;
  36.                 border-radius: 12px;
  37.                 box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  38.                 z-index: 999999;
  39.                 min-width: 380px;
  40.                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  41.             }
  42.  
  43.             .mindfulness-panel h2 {
  44.                 margin: 0 0 25px 0;
  45.                 color: #2c3e50;
  46.                 font-size: 24px;
  47.                 text-align: center;
  48.                 font-weight: 600;
  49.             }
  50.  
  51.             .mindfulness-panel .setting-group {
  52.                 margin-bottom: 20px;
  53.                 padding: 15px;
  54.                 background: #f8f9fa;
  55.                 border-radius: 8px;
  56.             }
  57.  
  58.             .mindfulness-panel .setting-item {
  59.                 margin-bottom: 15px;
  60.             }
  61.  
  62.             .mindfulness-panel label {
  63.                 display: block;
  64.                 margin-bottom: 8px;
  65.                 color: #495057;
  66.                 font-weight: 500;
  67.             }
  68.  
  69.             .mindfulness-panel input[type="number"] {
  70.                 width: 70px;
  71.                 padding: 8px;
  72.                 border: 2px solid #e9ecef;
  73.                 border-radius: 6px;
  74.                 font-size: 14px;
  75.                 transition: border-color 0.2s;
  76.             }
  77.  
  78.             .mindfulness-panel input[type="number"]:focus {
  79.                 outline: none;
  80.                 border-color: #4dabf7;
  81.             }
  82.  
  83.             .mindfulness-panel .toggle-switch {
  84.                 position: relative;
  85.                 display: inline-block;
  86.                 width: 60px;
  87.                 height: 34px;
  88.             }
  89.  
  90.             .mindfulness-panel .toggle-switch input {
  91.                 opacity: 0;
  92.                 width: 0;
  93.                 height: 0;
  94.             }
  95.  
  96.             .mindfulness-panel .toggle-slider {
  97.                 position: absolute;
  98.                 cursor: pointer;
  99.                 top: 0;
  100.                 left: 0;
  101.                 right: 0;
  102.                 bottom: 0;
  103.                 background-color: #ccc;
  104.                 transition: .4s;
  105.                 border-radius: 34px;
  106.             }
  107.  
  108.             .mindfulness-panel .toggle-slider:before {
  109.                 position: absolute;
  110.                 content: "";
  111.                 height: 26px;
  112.                 width: 26px;
  113.                 left: 4px;
  114.                 bottom: 4px;
  115.                 background-color: white;
  116.                 transition: .4s;
  117.                 border-radius: 50%;
  118.             }
  119.  
  120.             .mindfulness-panel input:checked + .toggle-slider {
  121.                 background-color: #2196F3;
  122.             }
  123.  
  124.             .mindfulness-panel input:checked + .toggle-slider:before {
  125.                 transform: translateX(26px);
  126.             }
  127.  
  128.             .mindfulness-panel .button-group {
  129.                 display: flex;
  130.                 justify-content: center;
  131.                 gap: 15px;
  132.                 margin-top: 25px;
  133.             }
  134.  
  135.             .mindfulness-panel button {
  136.                 padding: 10px 20px;
  137.                 border: none;
  138.                 border-radius: 6px;
  139.                 font-size: 14px;
  140.                 font-weight: 500;
  141.                 cursor: pointer;
  142.                 transition: all 0.2s;
  143.             }
  144.  
  145.             .mindfulness-panel button.save {
  146.                 background-color: #228be6;
  147.                 color: white;
  148.             }
  149.  
  150.             .mindfulness-panel button.save:hover {
  151.                 background-color: #1c7ed6;
  152.             }
  153.  
  154.             .mindfulness-panel button.cancel {
  155.                 background-color: #e9ecef;
  156.                 color: #495057;
  157.             }
  158.  
  159.             .mindfulness-panel button.cancel:hover {
  160.                 background-color: #dee2e6;
  161.             }
  162.  
  163.             .mindfulness-panel .site-info {
  164.                 color: #868e96;
  165.                 font-size: 14px;
  166.                 text-align: center;
  167.                 margin-bottom: 20px;
  168.             }
  169.  
  170.             .mindfulness-panel .time-inputs {
  171.                 display: flex;
  172.                 gap: 20px;
  173.                 justify-content: center;
  174.             }
  175.  
  176.             .mindfulness-panel .status-label {
  177.                 margin-left: 10px;
  178.                 font-size: 14px;
  179.                 color: #495057;
  180.             }
  181.         `;
  182.         document.head.appendChild(styleSheet);
  183.     }
  184.  
  185.     // 创建配置面板
  186.     function createConfigPanel() {
  187.         const panel = document.createElement('div');
  188.         panel.className = 'mindfulness-panel';
  189.  
  190.         const currentHost = window.location.hostname;
  191.         const isRestricted = CONFIG.restrictedSites[currentHost];
  192.  
  193.         panel.innerHTML = `
  194.             <h2>Mindfulness Settings</h2>
  195.  
  196.             <div class="site-info">
  197.                 Current Site: ${currentHost}
  198.             </div>
  199.  
  200.             <div class="setting-group">
  201.                 <div class="setting-item">
  202.                     <label class="toggle-switch">
  203.                         <input type="checkbox" id="restrictSite" ${isRestricted ? 'checked' : ''}>
  204.                         <span class="toggle-slider"></span>
  205.                     </label>
  206.                     <span class="status-label">
  207.                         ${isRestricted ? 'Site is restricted' : 'Site is not restricted'}
  208.                     </span>
  209.                 </div>
  210.  
  211.                 <div class="setting-item">
  212.                     <label>Access Time Range</label>
  213.                     <div class="time-inputs">
  214.                         <div>
  215.                             <label>Start</label>
  216.                             <input type="number" id="startHour" value="${CONFIG.startHour}" min="0" max="23">
  217.                         </div>
  218.                         <div>
  219.                             <label>End</label>
  220.                             <input type="number" id="endHour" value="${CONFIG.endHour}" min="0" max="23">
  221.                         </div>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.  
  226.             <div class="button-group">
  227.                 <button class="save" id="saveConfig">Save Changes</button>
  228.                 <button class="cancel" id="cancelConfig">Cancel</button>
  229.             </div>
  230.         `;
  231.  
  232.         // 添加事件监听器
  233.         panel.querySelector('#restrictSite').addEventListener('change', function(e) {
  234.             const statusLabel = panel.querySelector('.status-label');
  235.             statusLabel.textContent = e.target.checked ? 'Site is restricted' : 'Site is not restricted';
  236.         });
  237.  
  238.         panel.querySelector('#saveConfig').addEventListener('click', saveConfiguration);
  239.         panel.querySelector('#cancelConfig').addEventListener('click', () => panel.remove());
  240.  
  241.         document.body.appendChild(panel);
  242.     }
  243.  
  244.     // 保存配置
  245.     function saveConfiguration() {
  246.         const panel = document.querySelector('.mindfulness-panel');
  247.         const currentHost = window.location.hostname;
  248.  
  249.         const newStartHour = parseInt(panel.querySelector('#startHour').value) || 12;
  250.         const newEndHour = parseInt(panel.querySelector('#endHour').value) || 14;
  251.         const newIsRestricted = panel.querySelector('#restrictSite').checked;
  252.  
  253.         // 保存新配置
  254.         CONFIG.startHour = newStartHour;
  255.         CONFIG.endHour = newEndHour;
  256.  
  257.         if (newIsRestricted) {
  258.             CONFIG.restrictedSites[currentHost] = true;
  259.         } else {
  260.             delete CONFIG.restrictedSites[currentHost];
  261.         }
  262.  
  263.         // 保存到 localStorage
  264.         localStorage.setItem('mindfulnessConfig', JSON.stringify(CONFIG));
  265.  
  266.         // 关闭面板
  267.         panel.remove();
  268.  
  269.         // 如果网站现在是不受限的，刷新页面恢复访问
  270.         if (!newIsRestricted && wasPreviouslyBlocked()) {
  271.             window.location.reload();
  272.         } else {
  273.             // 检查并应用新的限制
  274.             checkAndApplyRestriction();
  275.         }
  276.     }
  277.  
  278.     // 检查页面是否之前被阻止
  279.     function wasPreviouslyBlocked() {
  280.         const currentContent = document.body.innerHTML;
  281.         return currentContent.includes("Dear Me!") &&
  282.                currentContent.includes("You preserved this page") &&
  283.                currentContent.includes("maintained mindfulness");
  284.     }
  285.  
  286.     // 检查并应用访问限制
  287.     function checkAndApplyRestriction() {
  288.         const currentHost = window.location.hostname;
  289.  
  290.         // 如果当前网站不在限制列表中，直接返回
  291.         if (!CONFIG.restrictedSites[currentHost]) {
  292.             return;
  293.         }
  294.  
  295.         const now = new Date();
  296.         const hours = now.getHours();
  297.         const minutes = now.getMinutes();
  298.  
  299.         // 检查是否在允许的时间范围内
  300.         if (hours < CONFIG.startHour || (hours >= CONFIG.endHour && minutes > 0)) {
  301.             // 如果在限制时间内，替换页面内容
  302.             // 设置背景和内容
  303.             document.body.innerHTML = `
  304.                 <style>
  305.                     @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap');
  306.  
  307.                     body {
  308.                         margin: 0;
  309.                         padding: 0;
  310.                         min-height: 100vh;
  311.                         background: linear-gradient(135deg, #1a1a1a 0%, #363636 100%);
  312.                         display: flex;
  313.                         justify-content: center;
  314.                         align-items: center;
  315.                         font-family: 'Cormorant Garamond', serif;
  316.                         color: #d4af37;
  317.                         overflow: hidden;
  318.                     }
  319.  
  320.                     .sacred-container {
  321.                         text-align: center;
  322.                         width: 90vw;
  323.                         max-width: 1400px;
  324.                         padding: 60px;
  325.                         background: rgba(0, 0, 0, 0.85);
  326.                         border-radius: 30px;
  327.                         box-shadow: 0 0 100px rgba(212, 175, 55, 0.25);
  328.                         border: 3px solid rgba(212, 175, 55, 0.4);
  329.                         position: relative;
  330.                     }
  331.  
  332.                     .sacred-symbol {
  333.                         font-size: 7em;
  334.                         margin: 20px 0;
  335.                         color: #d4af37;
  336.                     }
  337.  
  338.                     .lotus-symbol {
  339.                         width: 120px;
  340.                         height: 120px;
  341.                         margin: 20px auto;
  342.                         background: linear-gradient(45deg, #d4af37, #FFD700);
  343.                         -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L9,12L3,14L9,16L12,22L15,16L21,14L15,12L12,2M12,5.5L14,12.5L18,13.75L14,15L12,19L10,15L6,13.75L10,12.5L12,5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  344.                         mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L9,12L3,14L9,16L12,22L15,16L21,14L15,12L12,2M12,5.5L14,12.5L18,13.75L14,15L12,19L10,15L6,13.75L10,12.5L12,5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  345.                     }
  346.  
  347.                     .sacred-title {
  348.                         font-size: 7em;
  349.                         margin-bottom: 40px;
  350.                         font-weight: 600;
  351.                         text-transform: uppercase;
  352.                         letter-spacing: 8px;
  353.                         color: #d4af37;
  354.                         text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  355.                         line-height: 1.2;
  356.                     }
  357.  
  358.                     .sacred-message {
  359.                         font-size: 4.5em;
  360.                         line-height: 1.3;
  361.                         margin-bottom: 40px;
  362.                         color: #e5e5e5;
  363.                     }
  364.  
  365.                     .sacred-quote {
  366.                         font-style: italic;
  367.                         font-size: 4em;
  368.                         color: #d4af37;
  369.                         margin: 40px auto;
  370.                         padding: 30px 40px;
  371.                         border-left: 5px solid #d4af37;
  372.                         text-align: left;
  373.                         max-width: 90%;
  374.                         line-height: 1.3;
  375.                     }
  376.  
  377.                     .sacred-time {
  378.                         font-size: 4.2em;
  379.                         color: #d4af37;
  380.                         margin-top: 50px;
  381.                         padding: 30px;
  382.                         border-top: 2px solid rgba(212, 175, 55, 0.3);
  383.                         line-height: 1.3;
  384.                     }
  385.  
  386.                     .time-highlight {
  387.                         font-size: 1.2em;
  388.                         font-weight: 600;
  389.                         text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  390.                     }
  391.  
  392.                     /* 响应式调整 */
  393.                     @media (max-width: 768px) {
  394.                         .sacred-title { font-size: 5em; }
  395.                         .sacred-message { font-size: 3.5em; }
  396.                         .sacred-quote { font-size: 3em; }
  397.                         .sacred-time { font-size: 3.2em; }
  398.                         .lotus-symbol {
  399.                             width: 80px;
  400.                             height: 80px;
  401.                         }
  402.                     }
  403.  
  404.                     @media (max-width: 480px) {
  405.                         .sacred-container { padding: 30px; }
  406.                         .sacred-title { font-size: 4em; }
  407.                         .sacred-message { font-size: 2.8em; }
  408.                         .sacred-quote { font-size: 2.5em; }
  409.                         .sacred-time { font-size: 2.5em; }
  410.                         .lotus-symbol {
  411.                             width: 60px;
  412.                             height: 60px;
  413.                         }
  414.                     }
  415.                 </style>
  416.  
  417.                 <div class="sacred-container">
  418.                     <div class="lotus-symbol"></div>
  419.                     <div class="sacred-title">Beloved Me</div>
  420.  
  421.                     <div class="sacred-message">
  422.                         This stop page kept! A victory! <br>
  423.                     </div>
  424.  
  425.                     <div class="sacred-quote">
  426.                         "The future you thanks to this conscious moment."
  427.                     </div>
  428.  
  429.                     <div class="sacred-time">
  430.                         The site awailable between<br>
  431.                         <span class="time-highlight">${CONFIG.startHour}:00 - ${CONFIG.endHour}:00</span>
  432.                     </div>
  433.  
  434.                     <div class="lotus-symbol"></div>
  435.                 </div>
  436.             `;
  437.         }
  438.     }
  439.  
  440.     // 添加快捷键监听器
  441.     document.addEventListener('keydown', function(e) {
  442.         if (e.ctrlKey && (e.key === 'm' || e.key === 'M')) {
  443.             e.preventDefault();
  444.             createConfigPanel();
  445.         }
  446.     });
  447.  
  448.     // 初始化
  449.     addStyles();
  450.     checkAndApplyRestriction();
  451. })();