zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

guestbook ip js keyboard

Browse source
This commit is contained in:
zyqunix 2025-06-12 11:22:40 +02:00
parent 6728ebcfbf
commit eb2229631a
8 changed files with 50 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ip/index.html
View file

@ -9,10 +9,10 @@
</head>
<body>
<h1>IP Lookup</h1>
<div class="card shadow">
<div class="cards shadow">
<input type="text" id="ipInput" placeholder="Enter IP address">
<button id="lookupElem">Lookup</button>
<div class="your tooltip" data-tooltip="Only provides IPv4.">Your IP: <span id="your-ip">69.420.69.69</span></div>
<div class="your" data-tooltip="Only provides IPv4.">Your IP: <span id="your-ip">69.420.69.69</span></div>
</div>
<div id="output"></div>

52
ip/style.css
View file

@ -6,9 +6,9 @@ h1 {
}
input[type="text"] {
background: #1e1e1e;
border: 1px solid #444;
color: #f0f0f0;
background: var(--surface0);
border: 1px solid var(--surface1);
color: var(--text);
padding: 12px 15px;
border-radius: 8px;
font-size: 1rem;
@ -20,7 +20,7 @@ input[type="text"] {
}
button {
background: #c099ff;
background: var(--mauve);
color: #1e1e1e;
border: none;
padding: 12px 20px;
@ -32,7 +32,7 @@ button {
}
button:hover {
background: #a875ff;
background: var(--pastel-violet);
}
#output {
@ -52,13 +52,11 @@ table {
th, td {
padding: 10px 14px;
border: 2px solid #2a2a2a;
background-color: #1f1f1f;
border-radius: 12px;
}
th:hover,
td:hover {
background-color: #232323;
tr:hover {
background-color: var(--surface1);
}
th {
@ -74,35 +72,5 @@ th {
}
#your-ip:not(:hover) {
filter: blur(10px);
}
.tooltip {
display: flex;
justify-content: center;
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 125%;
background-color: #2a2a2a;
border: 2px solid rgba(150, 150, 150, 0.1);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
cursor: default;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
filter: blur(50px);
}