Skip to content

Commit 5bc3202

Browse files
matt-fiddmatt-fidd
committed
Initial commit
0 parents  commit 5bc3202

File tree

5 files changed

+229
-0
lines changed

5 files changed

+229
-0
lines changed

‎README.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<div id="top"></div>
2+
3+
4+
<!-- PROJECT SHIELDS -->
5+
[![Contributors][contributors-shield]][contributors-url]
6+
[![Forks][forks-shield]][forks-url]
7+
[![Stargazers][stars-shield]][stars-url]
8+
[![Issues][issues-shield]][issues-url]
9+
[![License][license-shield]][license-url]
10+
11+
<!-- PROJECT LOGO -->
12+
<br />
13+
<div align="center">
14+
15+
<h3 align="center">KeepAlive</h3>
16+
17+
<p align="center">
18+
A simple website to keep a screen awake and stop a device from sleeping.
19+
</p>
20+
</div>
21+
22+
<!-- TABLE OF CONTENTS -->
23+
<details>
24+
<summary>Table of Contents</summary>
25+
<ol>
26+
<li>
27+
<a href="#about-the-project">About The Project</a>
28+
<ul>
29+
<li><a href="#built-with">Built With</a></li>
30+
</ul>
31+
</li>
32+
<li>
33+
<a href="#getting-started">Getting Started</a>
34+
<ul>
35+
<li><a href="#prerequisites">Prerequisites</a></li>
36+
<li><a href="#installation">Installation</a></li>
37+
</ul>
38+
</li>
39+
<li><a href="#usage">Usage</a></li>
40+
<li><a href="#contact">Contact</a></li>
41+
<li><a href="#attributions">Attributions</a></li>
42+
</ol>
43+
</details>
44+
45+
46+
<!-- ABOUT THE PROJECT -->
47+
## About The Project
48+
49+
<!--[![Product Name Screen Shot][product-screenshot]](https://example.com)-->
50+
Hosted publicly on github pages: https://matt-fidd.github.io/keepalive
51+
52+
<p align="right">(<a href="#top">back to top</a>)</p>
53+
54+
55+
56+
### Built With
57+
58+
* [HTML](https://en.wikipedia.org/wiki/HTML)
59+
* [CSS](https://en.wikipedia.org/wiki/CSS)
60+
* [JavaScript](https://en.wikipedia.org/wiki/JavaScript)
61+
62+
<p align="right">(<a href="#top">back to top</a>)</p>
63+
64+
65+
<!-- GETTING STARTED -->
66+
## Getting Started
67+
68+
To get a local copy up and running follow these simple example steps.
69+
70+
### Installation
71+
72+
1. Clone the repo
73+
```sh
74+
git clone https://github.com/matt-fidd/keepalive.git
75+
```
76+
2. Point a web hosting server at the directory
77+
78+
<p align="right">(<a href="#top">back to top</a>)</p>
79+
80+
81+
<!-- CONTACT -->
82+
## Contact
83+
84+
Project Link: [https://github.com/matt-fidd/keepalive](https://github.com/matt-fidd/keepalive)
85+
86+
<p align="right">(<a href="#top">back to top</a>)</p>
87+
88+
<!-- ATTRIBUTIONS -->
89+
## Attributions
90+
91+
<a href="https://www.flaticon.com/free-icons/bed" title="bed icon">Bed icon created by Freepik - Flaticon</a>
92+
93+
<p align="right">(<a href="#top">back to top</a>)</p>
94+
95+
96+
<!-- MARKDOWN LINKS & IMAGES -->
97+
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
98+
[contributors-shield]: https://img.shields.io/github/contributors/matt-fidd/keepalive.svg?style=for-the-badge
99+
[contributors-url]: https://github.com/matt-fidd/keepalive/graphs/contributors
100+
[forks-shield]: https://img.shields.io/github/forks/matt-fidd/keepalive.svg?style=for-the-badge
101+
[forks-url]: https://github.com/matt-fidd/keepalive/network/members
102+
[stars-shield]: https://img.shields.io/github/stars/matt-fidd/keepalive.svg?style=for-the-badge
103+
[stars-url]: https://github.com/matt-fidd/keepalive/stargazers
104+
[issues-shield]: https://img.shields.io/github/issues/matt-fidd/keepalive.svg?style=for-the-badge
105+
[issues-url]: https://github.com/matt-fidd/keepalive/issues
106+
[license-shield]: https://img.shields.io/github/license/matt-fidd/keepalive.svg?style=for-the-badge
107+
[license-url]: https://github.com/matt-fidd/keepalive/blob/master/LICENSE.txt

‎favicon.ico

1.12 KB
Binary file not shown.

‎index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang='en'>
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>KeepAlive</title>
6+
<link rel='stylesheet' href='style.css'>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
9+
<link rel='icon' href='favicon.ico' type='image/x-icon'>
10+
</head>
11+
<body>
12+
<div class='container'>
13+
<p class='status'>Idle</p>
14+
<p class='instructions'>Click anywhere to <span>activate</span> KeepAlive</p>
15+
<p class='message'></p>
16+
</div>
17+
18+
<script src='script.js'></script>
19+
</body>
20+
</html>
21+

‎script.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const html = document.querySelector('html');
2+
const container = document.querySelector('.container');
3+
const status = container.querySelector('.status');
4+
const instructions = container.querySelector('.instructions');
5+
const instructionsAction = instructions.querySelector('span');
6+
const message = container.querySelector('.message');
7+
8+
let wakeLock = null;
9+
10+
const states = {
11+
'active': {
12+
status: 'Active',
13+
instructionAction: 'deactivate'
14+
},
15+
'inactive': {
16+
status: 'Inactive',
17+
instructionAction: 'activate'
18+
},
19+
'idle': {
20+
status: 'Idle',
21+
instructionAction: 'activate'
22+
}
23+
}
24+
25+
function setState(state, messageText) {
26+
const stateObject = states[state];
27+
28+
if (!stateObject)
29+
throw new Error('Invalid state');
30+
31+
status.innerText = stateObject.status;
32+
html.style.background = `var(--${state}-colour)`;
33+
instructionsAction.innerText = stateObject.instructionAction;
34+
message.innerText = messageText ?? '';
35+
}
36+
37+
document.addEventListener('click', async () => {
38+
try {
39+
if (wakeLock)
40+
return wakeLock.release();
41+
42+
wakeLock = await navigator.wakeLock.request('screen');
43+
setState('active');
44+
45+
wakeLock.addEventListener('release', () => {
46+
wakeLock = null;
47+
setState('inactive');
48+
});
49+
} catch (err) {
50+
wakeLock = null;
51+
setState('idle', `${err.name}, ${err.message}`);
52+
}
53+
});
54+
55+
html.click();
56+

‎style.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
:root {
2+
--margin-amount: 3rem;
3+
--inactive-colour: red;
4+
--active-colour: green;
5+
--idle-colour: orange;
6+
}
7+
8+
* {
9+
box-sizing: border-box;
10+
11+
/* stop double click highlighting */
12+
-webkit-touch-callout: none;
13+
-webkit-user-select: none;
14+
-khtml-user-select: none;
15+
-moz-user-select: none;
16+
-ms-user-select: none;
17+
user-select: none;
18+
}
19+
20+
html {
21+
font-family: Arial;
22+
background-color: var(--idle-colour);
23+
cursor: pointer;
24+
}
25+
26+
.container {
27+
margin: var(--margin-amount);
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
height: calc(100vh - calc(var(--margin-amount) * 2));
33+
}
34+
35+
.container p {
36+
margin-top: 1rem;
37+
margin-bottom: 1rem;
38+
text-align: center;
39+
}
40+
41+
.status {
42+
font-weight: bold;
43+
font-size: 2em;
44+
}
45+

0 commit comments

Comments
 (0)