-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (80 loc) · 3.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sometimes you just need to grab a quick filler text without the extra hassle.">
<title>Quicksum — Quick Lorem Ipsum</title>
<link rel="stylesheet" href="styles.css">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="public/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/svg+xml" href="public/favicon.svg">
<link href="https://api.fontshare.com/v2/css?f[]=synonym@1&display=swap" rel="stylesheet">
<script type="text/javascript">
function getIpsum() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("showTip");
//tooltip.innerHTML = "Copied: " + copyText.value;
tooltip.innerHTML = "Copied!";
}
function outFunc() {
var tooltip = document.getElementById("showTip");
tooltip.innerHTML = "Copy to clipboard";
}
</script>
</head>
<body>
<div class="container content">
<header class="masthead">
<h3 class="masthead-title">
<a href="/" title="Home"><img src="public/logo.svg" class="logo" alt"" /></a>
</h3>
<p>Sometimes you just need to grab a quick filler text without the <strong>extra hassle.</strong></p>
</header>
<main class="body">
<div class="main">
<textarea wrap="virtual" name="myInput" rows="6" cols="60" id="myInput" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis quam, blandit ut semper sit amet, pulvinar sit amet mi. In consectetur arcu massa, at cursus ante dignissim. Proin tempus blandit gravida. Cras nec purus sed ligula scelerisque lobortis vel non libero. Sed vel elit aliquam, vehicula velit eu, feugiat nisi.</textarea>
<div class="tooltip">
<button onclick="getIpsum()" onmouseout="outFunc()" class="copyText">
<span class="tooltiptext" id="showTip">Copy to clipboard</span>
Copy text
</button>
</div>
</div>
</main>
<footer class="footer">
Built by <a href="https://darriagada.is/?ref=quicksum">@notdarriagada</a>. Based on <a href="https://www.w3schools.com/howto/howto_js_copy_clipboard.asp" target="_blank">this tutorial.</a>
</footer>
<nav>
<div class="theme-switch-wrapper" style="position:fixed;bottom:20px;right:20px;">
<span style="font-size:13px">Nightmode </span>
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div></label>
</div>
</nav>
</div>
<script type="text/javascript">
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
</body>
</html>