Design and code update, fixed IE8 compat, use new clipboard API when available.
This commit is contained in:
parent
3d6d5b87ab
commit
c491d967ba
4 changed files with 165 additions and 139 deletions
2
LICENSE
2
LICENSE
|
|
@ -1,4 +1,4 @@
|
|||
Copyright (c) 2020-2023, flashwave <me@flash.moe>
|
||||
Copyright (c) 2020-2024, flashwave <me@flash.moe>
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
||||
|
||||
|
|
|
|||
|
|
@ -3,37 +3,32 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Your IP Addresses</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/style.css" type="text/css" rel="stylesheet">
|
||||
<link rel="preconnect" href="//fonts.googleapis.com">
|
||||
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
|
||||
<link href="/style.css" rel="stylesheet">
|
||||
<link href="//fonts.googleapis.com/css2?family=Electrolize&family=Victor+Mono:ital,wght@0,100..700;1,100..700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<div class="fullscreen-overlay">
|
||||
<div class="ipbox nojs">
|
||||
<div class="ipbox-background"></div>
|
||||
<div class="ipbox-content">
|
||||
<div class="ipbox-title">This Website</div>
|
||||
<div class="ipbox-address">needs javascript</div>
|
||||
</div>
|
||||
<div class="background-gradient-top"></div>
|
||||
<div class="background-gradient-bottom"></div>
|
||||
<div class="container">
|
||||
<div class="addrbox addrbox-v4 js-address" data-subdomain="ipv4">
|
||||
<div class="addrbox-label">Your IPv4 address is</div>
|
||||
<div class="addrbox-value">
|
||||
<span class="js-address-value"><noscript><a class="addrbox-noscript" href="//ipv4.flash.moe">ipv4.flash.moe</a></noscript></span>
|
||||
<a class="addrbox-copy material-symbols-outlined js-address-copy" href="javascript:void(0);"></a>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
<div class="boxgrid">
|
||||
<div class="ipbox ipv4" id="ipv4-click">
|
||||
<div class="ipbox-background"></div>
|
||||
<div class="ipbox-content">
|
||||
<div class="ipbox-title">Your IPv4 address is</div>
|
||||
<div class="ipbox-address" id="ipv4">loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ipbox ipv6" id="ipv6-click">
|
||||
<div class="ipbox-background"></div>
|
||||
<div class="ipbox-content">
|
||||
<div class="ipbox-title">Your IPv6 address is</div>
|
||||
<div class="ipbox-address" id="ipv6">loading...</div>
|
||||
<div class="addrbox addrbox-v6 js-address" data-subdomain="ipv6">
|
||||
<div class="addrbox-label">Your IPv6 address is</div>
|
||||
<div class="addrbox-value">
|
||||
<span class="js-address-value"><noscript><a class="addrbox-noscript" href="//ipv6.flash.moe">ipv6.flash.moe</a></noscript></span>
|
||||
<a class="addrbox-copy material-symbols-outlined js-address-copy" href="javascript:void(0);"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/script.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
114
public/script.js
114
public/script.js
|
|
@ -14,77 +14,89 @@ var createXHR = function() {
|
|||
} catch(e) {}
|
||||
}
|
||||
|
||||
return null;
|
||||
throw 'no impl';
|
||||
}
|
||||
|
||||
var getRemoteString = function(url, callback) {
|
||||
var xhr = createXHR();
|
||||
xhr.onload = function(ev) {
|
||||
callback({ success: true, info: ev, text: xhr.responseText });
|
||||
};
|
||||
xhr.onerror = function(ev) {
|
||||
callback({ success: false, info: ev });
|
||||
};
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
var selectTextInElement = function(target) {
|
||||
// MSIE
|
||||
if(document.body.createTextRange) {
|
||||
var range = document.body.createTextRange();
|
||||
range.moveToElementText(target);
|
||||
range.select();
|
||||
return;
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
if(window.getSelection) {
|
||||
var select = window.getSelection(),
|
||||
range = document.createRange();
|
||||
range.selectNodeContents(target);
|
||||
select.removeAllRanges();
|
||||
select.addRange(range);
|
||||
return;
|
||||
try {
|
||||
var xhr = createXHR();
|
||||
xhr.onload = function(ev) {
|
||||
callback({ success: true, info: ev, text: xhr.responseText });
|
||||
};
|
||||
xhr.onerror = function(ev) {
|
||||
callback({ success: false, info: ev });
|
||||
};
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
} catch(ex) {
|
||||
callback({ success: false, info: ex });
|
||||
}
|
||||
};
|
||||
|
||||
var copySelectedText = function() {
|
||||
if(document.execCommand) {
|
||||
var copyTextInElement = function(target, skipClipboardAPI) {
|
||||
if(!skipClipboardAPI && 'clipboard' in navigator) {
|
||||
// for some reason I'm supporting IE8 with this and it gets mad over the catch keyword...
|
||||
navigator.clipboard.writeText(target.textContent)['catch'](function(ex) {
|
||||
copyTextInElement(target, true);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if('execCommand' in document) {
|
||||
if('createTextRange' in document.body) { // MSIE
|
||||
var range = document.body.createTextRange();
|
||||
range.moveToElementText(target);
|
||||
range.select();
|
||||
} else if('getSelection' in window) { // Mozilla
|
||||
var select = window.getSelection();
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(target);
|
||||
select.removeAllRanges();
|
||||
select.addRange(range);
|
||||
} else return;
|
||||
|
||||
document.execCommand('copy');
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
(function() {
|
||||
var fields = [
|
||||
{ target: 'ipv4', ext: 'v4', clickTarget: 'ipv4-click' },
|
||||
{ target: 'ipv6', ext: 'v6', clickTarget: 'ipv6-click' },
|
||||
];
|
||||
var fields = document.querySelectorAll('.js-address');
|
||||
|
||||
for(var i in fields)
|
||||
for(var i = 0; i < fields.length; ++i)
|
||||
(function(field) {
|
||||
var valueField = field.querySelector('.js-address-value');
|
||||
if(valueField === null)
|
||||
return;
|
||||
|
||||
var setValueField = function(text) {
|
||||
valueField['textContent' in valueField ? 'textContent' : 'innerText'] = text;
|
||||
};
|
||||
|
||||
setValueField('loading...');
|
||||
|
||||
var subdomain = field.getAttribute('data-subdomain');
|
||||
if(typeof subdomain !== 'string')
|
||||
return;
|
||||
|
||||
var copyButton = field.querySelector('.js-address-copy');
|
||||
|
||||
var host = location.host.split('.');
|
||||
host[0] += field.ext;
|
||||
host[0] = subdomain;
|
||||
|
||||
var url = location.protocol + '//' + host.join('.') + '/';
|
||||
|
||||
getRemoteString(url, function(info) {
|
||||
var target = document.getElementById(field.target),
|
||||
prop = 'textContent' in target ? 'textContent' : 'innerText';
|
||||
|
||||
if(info.success) {
|
||||
target[prop] = info.text;
|
||||
if(!info.success) {
|
||||
setValueField('not available');
|
||||
return;
|
||||
}
|
||||
|
||||
if(field.clickTarget) {
|
||||
var clickTarget = document.getElementById(field.clickTarget);
|
||||
if(clickTarget)
|
||||
clickTarget.onclick = function() {
|
||||
selectTextInElement(target);
|
||||
copySelectedText();
|
||||
};
|
||||
}
|
||||
} else
|
||||
target[prop] = 'not available';
|
||||
setValueField(info.text);
|
||||
|
||||
if(copyButton)
|
||||
copyButton.onclick = function() { copyTextInElement(valueField); };
|
||||
});
|
||||
})(fields[i]);
|
||||
})();
|
||||
|
|
|
|||
145
public/style.css
145
public/style.css
|
|
@ -3,91 +3,110 @@
|
|||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
outline-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 12px/20px Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
font-family: 'Electrolize', Verdana, 'Dejavu Sans', sans-serif;
|
||||
color: #000;
|
||||
background-color: #ff9290;
|
||||
padding: 114px 10px 10px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
.fullscreen-overlay {
|
||||
.background-gradient-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 25%;
|
||||
z-index: 1;
|
||||
background: -moz-linear-gradient(top, #db5176 0%, #ff9290 100%);
|
||||
background: -webkit-linear-gradient(top, #db5176 0%, #ff9290 100%);
|
||||
background: linear-gradient(to bottom, #db5176 0%, #ff9290 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db5176', endColorstr='#ff9290', GradientType=0);
|
||||
}
|
||||
|
||||
.background-gradient-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #000;
|
||||
background-image: repeating-linear-gradient(-45deg, #440, #440 10px, #000 10px, #000 20px);
|
||||
z-index: 20001;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 25%;
|
||||
z-index: 1;
|
||||
background: -moz-linear-gradient(top, #ff9290 0%, #4c8999 100%);
|
||||
background: -webkit-linear-gradient(top, #ff9290 0%, #4c8999 100%);
|
||||
background: linear-gradient(to bottom, #ff9290 0%, #4c8999 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9290', endColorstr='#4c8999', GradientType=0);
|
||||
}
|
||||
|
||||
.ipv4 { --ipv-colour: #437675; margin-left: 22px !important; }
|
||||
.ipv6 { --ipv-colour: #66678d; margin-left: -22px !important; }
|
||||
|
||||
.ipbox {
|
||||
max-width: 600px;
|
||||
.container {
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
max-width: 850px;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 1px 5px #000);
|
||||
}
|
||||
.ipbox-content {
|
||||
padding: 5px 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ipbox-title {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.ipbox-address {
|
||||
font-size: 2em;
|
||||
line-height: 1.3em;
|
||||
font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
user-select: text;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
.ipbox-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 20px);
|
||||
height: 100%;
|
||||
background-image: linear-gradient(0deg, #1118 0%, #2228 50%, #3338 50%, #5558 100%);
|
||||
transform: skew(-15deg);
|
||||
background-color: var(--ipv-colour);
|
||||
margin: 0 10px;
|
||||
}
|
||||
.ipbox:not(.nojs):active .ipbox-background {
|
||||
background-image: linear-gradient(0deg, #1118 0%, #2228 50%, #3338 50%, #3338 100%);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { color: #fff; }
|
||||
.container { background: #000; }
|
||||
}
|
||||
|
||||
.boxgrid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin: 0 15px;
|
||||
.addrbox {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.nojs {
|
||||
--ipv-colour: #933;
|
||||
cursor: not-allowed;
|
||||
.addrbox-v4 .addrbox-label,
|
||||
.addrbox-v4 .addrbox-copy {
|
||||
color: #59a063;
|
||||
}
|
||||
|
||||
.addrbox-v6 .addrbox-label,
|
||||
.addrbox-v6 .addrbox-copy {
|
||||
color: #fe6c7e;
|
||||
}
|
||||
|
||||
.addrbox-label {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.addrbox-value {
|
||||
font-family: 'Victor Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 2em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.addrbox-noscript {
|
||||
color: inherit;
|
||||
text-decoration: underline dashed;
|
||||
}
|
||||
.addrbox-noscript:hover,
|
||||
.addrbox-noscript:focus {
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
.addrbox-noscript:active {
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
.addrbox-copy {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.addrbox-copy:hover,
|
||||
.addrbox-copy:focus {
|
||||
border-style: dashed;
|
||||
border-color: currentColor;
|
||||
}
|
||||
.addrbox-copy:active {
|
||||
border-style: dotted;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue