Your IP : 216.73.216.55
@font-face {
font-family: os;
font-weight: 400;
font-style: normal;
src: url('os.woff');
}
* {
outline: none;
box-sizing: border-box;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Caveat', 'Freckle Face', 'Papyrus', 'Impact', 'Permanent Marker', 'Poppins', 'Kalam', 'Creepster', cursive;
word-break: break-word;
}
body {
padding: 0;
margin: 0;
background: #1a1a1a; /* Darker background */
color: #eaeaea; /* Light gray text */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2084 1665.313"><g><polygon fill="rgba(255, 255, 255, 0.1)" points="805.739,1013.96 1011.405,558.436 1205.173,1013.96" /><polygon fill="rgba(255, 255, 255, 0.1)" points="53.331,612.826 434.068,291.013 732.085,657.019 592.708,606.028 513.388,638.889" /><polygon fill="rgba(255, 255, 255, 0.1)" points="90.725,308.011 524.72,32.656 753.615,528.974 489.592,175.433" /><polygon fill="rgba(255, 255, 255, 0.1)" points="1921.887,612.826 1541.15,291.013 1243.133,657.019 1382.51,606.028 1461.83,638.889" /><polygon fill="rgba(255, 255, 255, 0.1)" points="1884.493,308.011 1450.499,32.656 1221.603,528.974 1485.626,175.433" /><polygon fill="rgba(255, 255, 255, 0.1)" points="40.867,711.41 207.439,1089.88 286.759,1032.09 269.762,1259.852 472.595,1485.348 672.028,1367.501 778.544,1632.656 1079.96,1625.858 1147.949,1407.161 1218.204,1578.266 1493.558,1457.019 1529.819,1225.858 1658.997,1343.705 1918.487,1047.954 2032.935,862.118 2043.133,697.812 1760.98,965.234 1766.646,1085.348 1696.391,1017.359 1498.091,1035.489 1328.119,1311.977 1235.201,1144.271 1013.105,1160.135 902.057,1444.554 792.142,1159.002 499.79,1093.28 478.261,1159.002 402.34,1093.28 394.408,1012.826" /></g></svg>');
background-size: 150px 150px; /* Ghost pattern size */
background-repeat: repeat;
}
.header {
background: #222; /* Darker header */
display: flex;
align-items: center;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
animation: fadeIn 1s;
}
.header > div {
padding: 20px;
}
.left {
width: 50%;
}
.right {
width: 100%;
text-align: right;
}
button {
background: #ff8c00; /* Pumpkin orange */
cursor: pointer;
margin: 3px;
color: white;
padding: 6px 14px;
border: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
button:hover {
background: #ff4500;
animation: shake 0.5s;
transform: scale(1.1);
}
textarea {
width: 100%;
font-family: courier;
height: 120px;
font-size: 0.9em;
padding: 6px;
border-radius: 6px;
background: #333; /* Darker textarea */
border: none;
resize: none;
color: #eaeaea; /* Light gray text */
animation: fadeIn 1s;
}
::-webkit-scrollbar {
width: 0px;
}
.content {
text-align: center;
padding: 20px;
}
.holder {
display: inline-block;
width: 1100px;
max-width: 90%;
margin-top: 50px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
text-align: center;
background: #222; /* Dark background for holder */
animation: fadeIn 1s;
}
.title {
padding: 20px;
font-weight: bold;
font-size: 1.2em;
color: #ff8c00;
animation: pulse 1s infinite;
}
.v-list {
margin: 20px 0;
}
table {
width: 100%;
text-align: left;
padding: 10px;
}
th {
background: #800080; /* Purple for table header */
border-radius: 3px;
padding: 5px;
color: white;
}
td {
padding: 3px 5px;
border-radius: 3px;
}
tr.selected {
background: rgba(255, 255, 255, 0.1); /* Ghostly effect for selected row */
}
.ban {
background: #e84949;
}
.ban:hover {
background: red;
}
.footer {
text-align: center;
margin-top: 130px;
background: #333; /* Dark footer */
border-top: 1px solid #666; /* Lighter border */
padding: 30px;
animation: fadeIn 1s;
}
.footer > div {
text-align: center;
}
.info {
font-size: 0.8em;
}
.credit {
font-size: 0.6em;
}
.credit a {
text-decoration: none;
color: #E91E63;
font-weight: bold;
}
.connected {
width: 30px;
height: 30px;
display: inline-block;
background: #17ff17; /* Green */
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-weight: normal;
font-size: 0.8em;
}
.disconnected {
width: 30px;
height: 30px;
display: inline-block;
background: #ff3838; /* Red */
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-weight: normal;
font-size: 0.8em;
}
@keyframes plusAnimation {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.multi {
padding: 23px;
animation: plusAnimation 0.6s ease-in-out;
}
.box {
border: 1px solid #666; /* Lighter border */
margin: 15px 0;
}
.box .title {
background: #444; /* Darker box title */
color: #ff8c00;
padding: 2px;
font-size: 0.9em;
animation: bounce 1s infinite;
}
.box .content {
font-size: 0.8em;
}
.box1 {
background: #3ba6a9; /* Teal box */
text-align: center;
color: white;
padding: 10px;
font-size: 1em;
border-radius: 6px;
}
.box1 .rows-holder {
display: inline-block;
text-align: left;
}
.box1 > .row {
display: inline-block;
width: 300px;
}
.loader {
position: fixed;
background: #2b962b; /* Green loader */
padding: 10px;
border-top: 1px solid green;
color: white;
bottom: 0;
left: 0;
width: 100%;
}
.loader-error {
position: fixed;
background: #b60f0f; /* Red loader error */
padding: 10px;
border-top: 1px solid #ae0e0e;
color: white;
bottom: 0;
left: 0;
width: 100%;
}
.c-input-holder {
display: inline-block;
}
.c-input {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
background: #444; /* Dark input background */
border-radius: 50px;
padding: 4px;
}
.input-text {
width: 100%;
}
.input-btn {
width: 50%;
}
.input-text input[type=text] {
border: none;
width: 90%;
margin: 0;
background: #666; /* Darker input */
color: #fff;
}
.input-btn button {
margin: 0;
width: 100%;
}
.input {
margin: 6px 0;
}
@keyframes ghostAnimation {
0% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(-10px);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 0.8;
}
}
.input-text input[type=text] {
border: none;
width: 90%;
margin: 0;
background: #666;
color: #fff;
animation: ghostAnimation 2s ease-in-out infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes shake {
0% { transform: translate(1px, 0); }
25% { transform: translate(-1px, 0); }
50% { transform: translate(1px, 0); }
75% { transform: translate(-1px, 0); }
100% { transform: translate(0, 0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}