mans/ip-svc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make responsive
All checks were successful
Build docker container / Build image (push) Successful in 30s
Details

Browse Source
This commit is contained in:
Mans Ziesel 2024-06-03 14:28:04 +02:00
parent ef915583aa
commit d8776bb51b
1 changed files with 60 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
templates/index.html
View File

@ -1,54 +1,64 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>My IP</title> <title>My IP</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 5rem; font-size: 2rem;
color: #333; color: #333;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #fff; max-width: 90%;
border-radius: 8px; width: 100%;
overflow: hidden; }
} li {
li { padding: 15px 0px;
padding: 15px 20px; border-bottom: 1px solid #ddd;
border-bottom: 1px solid #ddd; word-wrap: break-word;
} }
li:last-child { li:last-child {
border-bottom: none; border-bottom: none;
} }
.noselect { .noselect {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
color: #555; color: #555;
} }
b { b {
color: #000; color: #000;
} }
</style> @media (min-width: 600px) {
</head> body {
<body> font-size: 3rem;
<ul id="ips"> padding: 40px;
<li> }
<span class="noselect">{{ .Type }}: </span><b>{{ .Address }}</b> }
</li> @media (min-width: 900px) {
</ul> body {
</body> font-size: 4rem;
}
}
</style>
</head>
<body>
<ul id="ips">
<li>
<span class="noselect">{{ .Type }}: </span><b>{{ .Address }}</b>
</li>
</ul>
<script> <script>
async function getIp() { async function getIp() {
const isIpv4 = "{{ .Type }}" == "IPv4"; const isIpv4 = "{{ .Type }}" == "IPv4";
@ -70,4 +80,5 @@
} }
getIp(); getIp();
</script> </script>
</body>
</html> </html>