-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (121 loc) · 7.39 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mr. Shareman - show me your screen</title>
<meta name="description" content="Mr. Shareman - simple app for quickly sharing some text on the screen.">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.3.2">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.3.2">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.3.2">
<link rel="manifest" href="./manifest.json?v=1.3.2">
<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.3.2" color="#08180b">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#08180b">
<!-- #CSS -->
<link rel="stylesheet" href="./style.css?v=1.3.2">
<link rel="manifest" href="./manifest.json?v=1.3.2">
</head>
<body>
<div class="glares"></div>
<div class="app">
<h1 class="app__title" data-title="══╣ Mr. Shareman ╠══">
<span class="app__title-text">
══╣ Mr. Shareman ╠══
</span>
</h1>
<h2 class="app__subtitle" data-title="▾ show me your screen ▾">
<span class="app__subtitle-text">
▾ show me your screen ▾
</span>
</h2>
<div id="form" class="app__form" data-length="140">
<label for="text" class="app__label">Write what you wanna share</label>
<textarea class="app__textarea" name="" id="text" maxlength="140"></textarea>
<div class="app__buttons">
<button class="app__button js-button-clear">Clear [X]</button>
<button class="app__button js-button-screen">> Show me!</button>
</div>
</div>
<div class="app__desc">
<p>
Write/paste something, push the button and show your screen. Simple.
</p>
<p>
// Also works offline right from your homescreen as a Progressive Web Application (PWA)
</p>
</div>
</div>
<footer class="footer">
<p>
⇾ ~ made with ♥ for coding by Michal Svatos | No cookies, no tracking!
<br>
<a href="https://github.com/MichalSvatos/mr-shareman" target="_blank" rel="noopener">Source code</a> | Icons by <a href="https://github.com/iconoir-icons/iconoir" target="_blank" rel="noopener">iconoir</a>
</p>
</footer>
<div class="modal js-modal">
<button class="modal__button modal__button--close js-modal-close">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
<path d="M6.758 17.243 12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button class="modal__button modal__button--fullscreen js-modal-fullscreen">
<span class="modal__button-icon modal__button-icon--on">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="m20 20-5-5m0 0v4m0-4h4M4 20l5-5m0 0v4m0-4H5M20 4l-5 5m0 0V5m0 4h4M4 4l5 5m0 0V5m0 4H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
<span class="modal__button-icon modal__button-icon--off">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
<path d="M9 9 4 4m0 0v4m0-4h4m7 5 5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4m7-5 5 5m0 0v-4m0 4h-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
<button class="modal__button modal__button--lights js-modal-button-switch js-modal-lights">
<span class="modal__button-icon modal__button-icon--on">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M9 18h6m-5 3h4m-5-6c.001-2-.499-2.5-1.5-3.5-1-1-1.476-2.013-1.5-3.5-.047-3.05 2-5 6-5 4.001 0 6.049 1.95 6 5-.023 1.487-.5 2.5-1.5 3.5-.999 1-1.499 1.5-1.5 3.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
<span class="modal__button-icon modal__button-icon--off">
<svg width="24" height="24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="m21 2-1 1M3 2l1 1m17 13-1-1M3 16l1-1m5 3h6m-5 3h4M12 3C8 3 5.952 4.95 6 8c.023 1.487.5 2.5 1.5 3.5S9 13 9 15h6c0-2 .5-2.5 1.5-3.5h0c1-1 1.477-2.013 1.5-3.5.048-3.05-2-5-6-5z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>
</button>
<button class="modal__button modal__button--qr js-modal-button-switch js-modal-qr">
<span class="modal__button-icon modal__button-icon--on">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12v3M12 3v3m6 6v3m-6 3h9m-3 3h3M6 12h3M6 6.01 6.01 6M12 12.01l.01-.01M3 12.01l.01-.01M12 9.01l.01-.01M12 15.01l.01-.01M15 21.01l.01-.01m-3.01.01.01-.01M21 12.01l.01-.01M21 15.01l.01-.01M18 6.01l.01-.01M6 18.01l.01-.01M9 3.6v4.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6Zm12 0v4.8a.6.6 0 0 1-.6.6h-4.8a.6.6 0 0 1-.6-.6V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6Zm-12 12v4.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6v-4.8a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6ZM22.03 1.97 1.97 22.03"/></svg>
</span>
<span class="modal__button-icon modal__button-icon--off">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" stroke-width="1.5" color="currentColor" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15 12v3M12 3v3m6 6v3m-6 3h9m-3 3h3M6 12h3M6 6.01 6.01 6M12 12.01l.01-.01M3 12.01l.01-.01M12 9.01l.01-.01M12 15.01l.01-.01M15 21.01l.01-.01m-3.01.01.01-.01M21 12.01l.01-.01M21 15.01l.01-.01M18 6.01l.01-.01M9 3.6v4.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6zm12 0v4.8a.6.6 0 0 1-.6.6h-4.8a.6.6 0 0 1-.6-.6V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6zM6 18.01l.01-.01M9 15.6v4.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6v-4.8a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6z"/></svg>
</span>
</button>
<button class="modal__button modal__button--plus js-modal-plus">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 12h6m6 0h-6m0 0V6m0 6v6"/></svg>
</button>
<button class="modal__button modal__button--minus js-modal-minus">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" color="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 12h12"/></svg>
</button>
<div class="modal__body js-modal-body" data-font-size="100">
<!-- filled by JS -->
</div>
<div id="qr-code-container"></div>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="./script.js?v=1.3.2"></script>
<script>
window.addEventListener('load', () => {
registerSW();
});
// Register the Service Worker
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator
.serviceWorker
.register('/mr-shareman/serviceworker.js', {scope: '/mr-shareman/'});
} catch (e) {
console.log('SW registration failed');
}
}
}
</script>
</body>
</html>