RemoteSlide-Controller/overlay.html at master · RemoteSlide/RemoteSlide-Controller · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="remote-slide-overlay remote-slide-overlay-wrapper" id="remoteSlideOverlayWrapper">
    <div style="position: absolute; right: 2px; top: 2px; z-index: 9999; min-width: 25px; min-height: 25px;">
        <div id="remoteSlideStatusIcons">
            <i id="remoteSlideStatus-times" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-times-circle-o fa-2x" aria-hidden="true"></i>
            <i id="remoteSlideStatus-check" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
            <i id="remoteSlideStatus-question" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-question-circle-o fa-2x" aria-hidden="true"></i>
        </div>
    </div>
</div>

<!-- TODO: display overlay while no remote is connected -->

<!-- Laser -->
<div id="rs-laser-dots">
</div>
<div id='rs-laser-dot' style='position: fixed; z-index: 9999; display: none;'><i class="fa fa-circle" aria-hidden="true"></i><span class="laser-pos"></span></div>


<!-- Laser Calibration -->
<style>
    /* Stand-ins for the handful of Font Awesome glyphs this overlay uses. The
       stylesheet used to come from a CDN, which Manifest V3 discourages and
       which the CSP of a site like Google Slides blocks outright - leaving the
       laser dot and the calibration marks invisible exactly where they matter.
       These are characters every system font ships, so nothing has to be
       loaded. Scoped to the overlay container so a page's own .fa rules, and
       its own icons, are left alone. */
    #remoteSlideOverlayHtmlContainer .fa {
        display: inline-block;
        font-family: inherit;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-rendering: auto;
    }

    #remoteSlideOverlayHtmlContainer .fa-2x {
        font-size: 2em;
    }

    #remoteSlideOverlayHtmlContainer .fa-circle::before { content: "\25CF"; }         /* filled circle */
    #remoteSlideOverlayHtmlContainer .fa-circle-o::before { content: "\25CB"; }       /* hollow circle */
    #remoteSlideOverlayHtmlContainer .fa-dot-circle-o::before { content: "\25C9"; }   /* circle with a dot */
    #remoteSlideOverlayHtmlContainer .fa-square::before { content: "\25A0"; }
    #remoteSlideOverlayHtmlContainer .fa-star::before { content: "\2605"; }
    #remoteSlideOverlayHtmlContainer .fa-crosshairs::before { content: "\2316"; }
    #remoteSlideOverlayHtmlContainer .fa-plus::before { content: "\271A"; }
    #remoteSlideOverlayHtmlContainer .fa-times::before { content: "\2715"; }
    #remoteSlideOverlayHtmlContainer .fa-times-circle-o::before { content: "\2297"; }
    #remoteSlideOverlayHtmlContainer .fa-check-circle-o::before { content: "\2714"; }
    #remoteSlideOverlayHtmlContainer .fa-question-circle-o::before { content: "?"; }

    .rs-laser-dot {
        position: fixed;
        z-index: 2147483648; /* Yeah... https://stackoverflow.com/a/18578245 - Minimum value: 2147483647 */
    }

    .laser-calibration-dot {
        position: fixed;
        color: lime;
        z-index: 2147483648;
    }

    .laser-calibration-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2147483647;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .laser-calibration-dot.topLeft {
        left: 10px;
        top: 10px;
    }

    .laser-calibration-dot.topRight {
        right: 10px;
        top: 10px;
    }

    .laser-calibration-dot.bottomLeft {
        left: 10px;
        bottom: 10px;
    }

    .laser-calibration-dot.bottomRight {
        right: 10px;
        bottom: 10px;
    }

    .laser-calibration-dot.center {
        left: 50%;
        top: 50%;
    }

    .overlay-message-content {
        z-index: 2147483648;
        font-size: 36px;
        font-weight: bold;
        color: white;
    }
</style>
<div>
    <div class="laser-calibration-backdrop" style="display:none;"></div>
    <div class="overlay-message-content" style=" position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);"></div>

    <div><!-- Top Left -->
        <div class="laser-calibration-dot topLeft" style="display: none;">
            <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        </div>
    </div>
    <div><!-- Top Right -->
        <div class="laser-calibration-dot topRight" style="display: none;">
            <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        </div>
    </div>
    <div><!-- Center -->
        <div class="laser-calibration-dot center" style="display: none;">
            <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        </div>
    </div>
    <div><!-- Bottom Left -->
        <div class="laser-calibration-dot bottomLeft" style="display: none;">
            <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        </div>
    </div>
    <div><!-- Bottom Right -->
        <div class="laser-calibration-dot bottomRight" style="display: none;">
            <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        </div>
    </div>
</div>