-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
139 lines (132 loc) · 8.3 KB
/
index.html
File metadata and controls
139 lines (132 loc) · 8.3 KB
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
<!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="Quickly present your text in a large, readable format. Ideal for sharing email addresses and other details.">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png?v=1.4.1">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png?v=1.4.1">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png?v=1.4.1">
<link rel="manifest" href="./manifest.json?v=1.4.1">
<link rel="mask-icon" href="./images/safari-pinned-tab.svg?v=1.4.1" color="#08180b">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#08180b">
<!-- Open Graph Meta Tags for Social Media -->
<meta property="og:site_name" content="Mr. Shareman">
<meta property="og:title" content="Mr. Shareman - show me your screen">
<meta property="og:description" content="Quickly present your text in a large, readable format. Ideal for sharing email addresses and other details.">
<meta property="og:image" content="./images/meta/og-image-1200x630.png">
<meta property="og:image:alt" content="Mr. Shareman (preview image)">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://michalsvatos.github.io/mr-shareman/">
<meta property="og:type" content="website">
<!-- #CSS -->
<link rel="stylesheet" href="./style.css?v=1.4.1">
<link rel="manifest" href="./manifest.json?v=1.4.1">
</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="1024"></textarea>
<p class="app__message">Message exceeds 140 characters.<br>Not a big deal, but trimming is advised.</p>
<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> (v1.4.1) | 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--font-size js-modal-font-size" data-font-size-action="increase">
<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--font-size js-modal-font-size" data-font-size-action="decrease">
<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.4.1"></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>