-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (127 loc) · 5.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KVStorageBuddy</title>
<link rel="stylesheet" href="public/build/tailwind.css">
<style>
.blurry-blob::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, var(--blob-color-start), var(--blob-color-end));
transform: translate(-50%, -50%);
filter: blur(80px);
z-index: -1;
}
.blob-1 {
--blob-color-start: #ff9a9e;
--blob-color-end: #fad0c4;
}
.blob-2 {
--blob-color-start: #a18cd1;
--blob-color-end: #fbc2eb;
}
.blob-3 {
--blob-color-start: #f093fb;
--blob-color-end: #f5576c;
}
.blob-4 {
--blob-color-start: #4facfe;
--blob-color-end: #00f2fe;
}
.blob-5 {
--blob-color-start: #43e97b;
--blob-color-end: #38f9d7;
}
.blob-6 {
--blob-color-start: #fa709a;
--blob-color-end: #fee140;
}
</style>
</head>
<body>
<section class="py-24 bg-white">
<div class="max-w-3xl px-10 mx-auto xl:px-5">
<div class="flex flex-col justify-center space-y-8">
<h2
class="font-sign text-sign w-full mx-auto text-4xl font-extrabold leading-none text-left text-gray-900 sm:text-5xl md:text-7xl">
add new</h2>
<p class="w-full max-w-3xl mx-auto text-xl text-left text-gray-500 md:text-2xl">add new pair of label
and a text into your local storage, scroll down to see the list of texts you've added.</p>
<form id="kv-form" <div
class="flex flex-col w-full mx-auto space-y-5 md:space-y-0 md:space-x-5 md:flex-row">
<input type="text"
class="flex-1 w-full px-5 py-5 text-2xl bg-gray-200 border border-gray-300 rounded-lg focus:ring-4 focus:border-blue-600 focus:ring-blue-600 focus:ring-opacity-50 focus:outline-none"
placeholder="label to identify" id="key">
<input type="text"
class="flex-1 w-full px-5 py-5 text-2xl bg-gray-200 border border-gray-300 rounded-lg focus:ring-4 focus:border-blue-600 focus:ring-blue-600 focus:ring-opacity-50 focus:outline-none"
placeholder="your shit" id="value">
<button type="submit"
class="flex-shrink-0 px-10 py-5 text-2xl font-medium text-center text-white bg-blue-600 rounded-lg focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50 focus:ring-offset-2 focus:outline-none font-sign shadow-md hover:shadow-2xl transition-all duration-700">save
me</button>
</div>
</form>
<p class="text-gray-400 font-sign pt-4"><span class="font-medium font-sign text-gray-700">trusted by
engineers at</span> microsoft, amazon, google, apple, twillio</p>
<br>
<hr>
<br>
<div id="store" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 w-full max-w-6xl p-4"></div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const form = document.getElementById('kv-form');
const store = document.getElementById('store');
const renderStore = () => {
store.innerHTML = '';
Object.keys(localStorage).forEach(key => {
const value = localStorage.getItem(key);
const kvPair = document.createElement('div');
kvPair.className = `relative bg-white shadow-xl rounded-lg p-6 shadow hover:shadow-2xl transition-all duration-700`;
kvPair.innerHTML = `
<h1 class="text-2xl font-bold mb-4">${key}</h1>
<p class="font-sign text-gray-600 mb-6" id="${key}">${value}</p>
<button
class="font-sm shadow-md hover:shadow-2xl transition-all duration-700 text-center text-white bg-[#365E3B] rounded-lg focus:ring-4 focus:ring-green-700 focus:ring-opacity-50 focus:ring-offset-2 focus:outline-none px-4 py-2"
onclick="copyThis('${value}')">
copy to clipboard
</button>
<button
class="font-sm shadow-md hover:shadow-2xl transition-all text-center text-white bg-[#d20000] rounded-lg focus:ring-4 focus:ring-red-600 focus:ring-opacity-50 focus:ring-offset-2 focus:outline-none px-4 py-2"
onclick="deleteKey('${key}')">
delete
</button>
`;
store.appendChild(kvPair);
});
};
// Initial rendering of the store
renderStore();
// Handle form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
const key = document.getElementById('key').value;
const value = document.getElementById('value').value;
localStorage.setItem(key, value);
renderStore();
form.reset();
});
});
function deleteKey(key) {
localStorage.removeItem(key);
document.getElementById('store').removeChild(document.getElementById(key).parentNode);
}
function copyThis(value) {
navigator.clipboard.writeText(value);
alert(value + ' copied!');
}
</script>
</body>
</html>