-
Notifications
You must be signed in to change notification settings - Fork 35
/
index.html
197 lines (172 loc) · 11.6 KB
/
index.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<link rel="icon" href="/DockDoor/Assets.xcassets/AppIcon.appiconset/icon_128x128.png">
<title>DockDoor</title>
<script src="https://cdn.jsdelivr.net/npm/i18next@latest/dist/umd/i18next.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/i18next-xhr-backend@latest/dist/umd/i18nextXHRBackend.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
</head>
<body>
<header>
<img src="https://github.com/ejbills/DockDoor/raw/main/DockDoor/Assets.xcassets/AppIcon.appiconset/icon_256x256@2x.png" width="200px" alt="DockDoor logotype">
<h1>DockDoor</h1>
</header>
<main>
<!-- For those who haven't activated JavaScript in their browser. -->
<!-- The link points to a method on how to activate JavaScript. -->
<noscript>
It looks like you do not have JavaScript activated. You can activate it using this <a href="https://www.enable-javascript.com">tutorial</a>.
If you find yourself unable to activate JavaScript, try on another computer or browser.
</noscript>
<div class="dropdown">
<button id="languageButton" class="button" data-translate="languageButton"></button>
<div id="dropdownContent" class="dropdown-content">
<a href="#" class="lang-option" data-lang="en">English</a>
<a href="#" class="lang-option" data-lang="fr">Français</a> <!-- French -->
<!-- <a href="#" class="lang-option" data-lang="he" dir="rtl">עברית</a> <!-- Hebrew -->
<a href="#" class="lang-option" data-lang="pl">Polski</a> <!-- Polish -->
<a href="https://github.com/ejbills/DockDoor?tab=readme-ov-file#translating-the-website-httpsdockdoornet" target="_blank" data-translate="helpTranslate"></a>
</div>
</div>
<button id="toggleDarkMode" class="button">
<span id="darkModeIcon"></span>
</button>
<div class="centered">
<p class="quick-links">
<a href="#" data-translate="home"></a>
<span class="margin"><a href="#download" data-translate="download"></a></span>
<span class="margin"><a href="#faq" data-translate="faq"></a></span>
<span class="margin"><a href="https://github.com/ejbills/DockDoor" data-translate="viewGit" target="_blank"></a></span>
<span class="margin"><a href="#contribute" data-translate="contribute"></a></span>
</p>
<h1 class="intro" id="1" data-translate="introHeading"></h1>
<p class="explanation" data-translate="introText"></p>
<p><em data-translate="introSmall"></em></p>
<video width="100%" autoplay loop playsinline muted>
<source src="/resources/dockPeekDemo1920.mp4" type="video/mp4">
<p>Video demonstration of DockDoor while running.</p>
</video>
<hr>
<h1 class="s-intro" id="2" data-translate="2Heading"></h1>
<p class="explanation" style="line-height: 2;" data-translate="2Text"></p>
<p data-translate="2Small"></p>
<img src="/resources/dockPeek1920.png" alt="An example of use of DockDoor: traffic light buttons allow users to manage their windows and applications." width="100%">
<p class="explanation" style="line-height: 2;" data-translate="2Text2"></p>
<img src="/resources/dockPeekCommented.png" alt="Description of the controls on window previews." class="responsive-img">
<hr>
<h1 class="s-intro" id="5" data-translate="5Heading"></h1>
<p class="explanation" data-translate="5Text"></p>
<img src="/resources/largePreviewDemo.png" alt="A screenshot showing the large preview option." class="responsive-img">
<hr>
<h1 class="s-intro" id="3" data-translate="3Heading"></h1>
<p class="explanation" style="line-height: 2;" data-translate="3Text"></p>
<img src="" id="variations" class="responsive-img" alt="A series of images showing the customization options for traffic light buttons and window titles.">
<p class="explanation" data-translate="3Small"></p>
<img src="" id="apptitle" class="responsive-img" alt="A series of images showing the customization options for application titles.">
<div class="dark-box">
<p class="explanation" data-translate="3Text2" style="margin-top: 5px;"></p>
<img src="/resources/variations/dark-mode.png" alt="A screenshot of the dark mode" class="responsive-img">
</div>
<hr>
<h1 class="s-intro" id="4" data-translate="4Heading"></h1>
<p class="explanation" data-translate="4Text"></p>
<p><span data-translate="4Small"></span> <a href="https://github.com/ejbills/DockDoor?tab=readme-ov-file#windows-like-alt--tab-window-switcher"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Echo_link-blue_icon.svg" alt="Chainlink icon" style="display:inline;" width="auto"></a></p>
<video width="100%" autoplay loop playsinline muted>
<source src="/resources/windowSwitcherDemo1920.mp4" type="video/mp4">
</video>
<hr>
<h1 class="s-intro" id="download" data-translate="downloadHeading"></h1>
<p><em data-translate="downloadSmall"></em> <em><strong><a href="https://github.com/ejbills/DockDoor" data-translate="viewGit"></a></strong></em>.</p>
<p>
<a href="https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg"><img src="https://img.shields.io/github/v/release/ejbills/DockDoor?style=flat-square" alt="Latest release"></a>
<img src="https://img.shields.io/github/downloads/ejbills/DockDoor/total?label=total%20downloads&style=flat-square" alt="Total downloads">
<a href="https://github.com/ejbills/DockDoor/stargazers"><img src="https://img.shields.io/github/stars/ejbills/DockDoor" alt="Stars"></a>
<a href="https://github.com/ejbills/DockDoor/network/members"><img src="https://img.shields.io/github/forks/ejbills/DockDoor" alt="Forks"></a>
<a href="https://github.com/ejbills/DockDoor/issues"><img src="https://img.shields.io/github/issues/ejbills/DockDoor?style=flat-square" alt="Issues"></a>
<a href="https://github.com/ejbills/DockDoor/blob/main/LICENSE"><img src="https://img.shields.io/github/license/ejbills/DockDoor?style=flat-square"alt="License"></a>
<a href="https://github.com/ejbills/DockDoor/graphs/contributors"><img src="https://img.shields.io/github/contributors/ejbills/DockDoor?style=flat-square" alt="Contributors"></a>
</p>
<button class="button" onclick="window.location.href='https://github.com/ejbills/DockDoor/releases/latest/download/DockDoor.dmg';">
<strong data-translate="downloadDownload"></strong>
</button>
<button class="button" onclick="window.location.href='https://formulae.brew.sh/cask/dockdoor';">
<strong data-translate="downloadHomebrew"></strong>
</button>
<p class="explanation" data-translate="downloadTranslateText"></p>
<button class="button" onclick="window.location.href='https://crowdin.com/project/dockdoor';">
<strong data-translate="downloadTranslate"></strong>
</button>
<p class="explanation" data-translate="downloadDonateText"></p>
<button class="button" onclick="window.location.href='https://www.buymeacoffee.com/keplercafe';">
<strong data-translate="downloadDonate"></strong>
</button>
<hr>
<h1 class="s-intro" id="contribute" data-translate="contributeHeading"></h1>
<p class="explanation"><span data-translate="contributeText1"></span><br><span data-translate="contributeText2"></span><br><span data-translate="contributeText3"></span> <a href="https://github.com/ejbills/DockDoor?tab=readme-ov-file#contributing"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Echo_link-blue_icon.svg" alt="Chainlink icon" style="display:inline;" width="auto"></a></p>
<hr>
<h1 class="s-intro" id="faq" data-translate="faqHeading"></h1>
<div class="details-container">
<details>
<summary data-translate="faqQ1"></summary>
<div data-translate="faqA1"></div>
</details>
<details>
<summary data-translate="faqQ2"></summary>
<div data-translate="faqA2"></div>
</details>
<details>
<summary data-translate="faqQ3">
</summary>
<div>
<span data-translate="faqA3-1"></span>
<br><br>
<span data-translate="faqA3-2"></span>
<br><br>
<span data-translate="faqA3-3"></span>
</div>
</details>
<details>
<summary data-translate="faqQ4"></summary>
<div>
<span data-translate="faqA4-1"></span>
<br>
<span data-translate="faqA4-2"></span>
</div>
</details>
</div>
<p><span data-translate="faqDocumentation"></span> <a href="https://github.com/ejbills/DockDoor/issues"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Echo_link-blue_icon.svg" alt="Chainlink icon" style="display:inline;" width="auto"></a></p>
</div>
</main>
<script type="text/JavaScript">
document.getElementById('languageButton').addEventListener('click', function() {
var dropdownContent = document.getElementById('dropdownContent');
// Toggle display of the dropdown menu
if (dropdownContent.style.display === 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});
let variationsimage = document.getElementById('variations');
let variationsimages = ['/resources/variations/bl-br.png', '/resources/variations/bl-tl.png', '/resources/variations/bl-tr.png', '/resources/variations/br-bl.png', '/resources/variations/br-tl.png', '/resources/variations/br-tr.png', '/resources/variations/tl-bl.png', '/resources/variations/tl-br.png', '/resources/variations/tl-tr.png', '/resources/variations/tr-bl.png', '/resources/variations/tr-br.png', '/resources/variations/tr-tl.png']
let variationsIndex = 0;
setInterval(function(){
variationsIndex = (variationsIndex + 1) % variationsimages.length;
variationsimage.src = variationsimages[variationsIndex];
}, 500);
let apptitleimage = document.getElementById('apptitle');
let apptitleimages = ['/resources/adjusted/previewDefault.png', '/resources/adjusted/previewEmbedded.png', '/resources/adjusted/previewPopover.png']
let apptitleIndex = 0;
setInterval(function(){
apptitleIndex = (apptitleIndex + 1) % apptitleimages.length;
apptitleimage.src = apptitleimages[apptitleIndex];
}, 1000);
</script>
<script src="/translate.js"></script>
<script src="/dark-mode.js"></script>
</body>
</html>