distract-block/blockSite.js at master · CDDR1/distract-block · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
const overlay = document.createElement('div');
overlay.innerHTML = `
<style>
    #distract-overlay {
        position: fixed;
        display: grid;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #333d;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        z-index: 999999;
    }
    #distract-overlay-modal {
        position: relative;
        max-width: 900px;
        width: 100%;
        padding: 1rem;
        margin: auto;
        background-color: #333;
        color: white;
    }
    #distract-overlay h2 {
        font-size: 2em;
        color: inherit;
        margin: 0;
    }

    #distract-overlay button {
        margin: 0 1rem 1rem 0;
        padding: 0.5rem 2rem;
        border-style: none;
        background: none;
        color: inherit;
        font: inherit;
        font-size: 1.5em;
        font-weight: bolder;
    }

    #distract-overlay button:hover {
        opacity: 0.7;
    }

    #distract-overlay p {
        color: inherit;
        margin-top: 0;
    }

    #distract-overlay .button-primary {
        background-color: #1565dd;
    }

    #distract-overlay .button-secondary {
        border: 4px solid #1565dd;
        background-color: transparent;
    }
    #distract-overlay .button-blacklist {
        background-color: white;
        color: black;
    }
</style>
<div id="distract-overlay">
    <div id="distract-overlay-modal">
        <h2>It's a Trap!</h2>
        <p>
            This site is on your blacklist because it poses a major
            risk to your productivity. If you want to visit anyway, go
            to extension settings and remove it from your blacklist.
        </p>
        <button class="button-primary" id="button-back" autofocus>
            Go Back
        </button>
    </div>
</div>
`;

document.documentElement.appendChild(overlay);

const backButton = document.getElementById('button-back');

backButton.addEventListener('click', (e) => {
    window.history.back();
});