DarkCat09/dc09.ru-old
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

Optimized pictures, improved compatibility with mobile browsers, added hints

Browse source
This commit is contained in:
DarkCat09 2021-08-13 14:34:50 +04:00
parent 06d5469978
commit 17ce3ba86d
7 changed files with 123 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
css/style.css
View file

@ -18,6 +18,11 @@ body {
bottom: 0; bottom: 0;
background-color: #001; background-color: #001;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
--topmenu-bg: rgba(81, 75, 144, 0.4);
--popups-rgb: 34;
--popups-alpha: 0.8;
--hint-alpha: 0.4;
--popups-bg: rgba(var(--popups-rgb), var(--popups-rgb), var(--popups-rgb), var(--popups-alpha));
} }
img.logo { img.logo {
@ -32,7 +37,7 @@ img.logo {
margin: 10px; margin: 10px;
border-radius: 5px; border-radius: 5px;
position: fixed; position: fixed;
background-color: #514b9066; background-color: var(--topmenu-bg);
z-index: 998; z-index: 998;
} }
.top-menu { .top-menu {
@ -57,12 +62,11 @@ img.logo {
.context-menu-like { .context-menu-like {
margin: 0; margin: 0;
padding: 0; padding: 0;
/*display: none;*/
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
border-radius: 5px; border-radius: 5px;
background-color: #222222d4; background-color: var(--popups-bg);
} }
.context-menu-like ul { .context-menu-like ul {
margin: 0; margin: 0;
@ -142,6 +146,38 @@ span.minecraft-text {
font-weight: 500; font-weight: 500;
} }
.hint {
position: absolute;
pointer-events: none;
top: 40%;
left: 35%;
margin: 0;
padding: 0;
background-color: rgba(var(--popups-rgb),var(--popups-rgb),var(--popups-rgb),var(--hint-alpha));
backdrop-filter: blur(4px);
border-radius: 5px;
opacity: 0;
transition: opacity 0.4s ease-out 0s;
z-index: 1000;
}
.hint > span {
margin: 0;
padding: 5px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 1.7em;
}
#stars {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.space-obj { .space-obj {
position: fixed; position: fixed;
text-align: center; text-align: center;
@ -150,8 +186,7 @@ span.minecraft-text {
z-index: 997; z-index: 997;
} }
.space-obj > img { .space-obj > img {
/* 360 degrees in 20 minutes (instead of 23 hours) */ animation: rotate 480s linear 0s infinite normal;
animation: rotate 1200s linear 0s infinite normal;
/* unselectable */ /* unselectable */
-webkit-touch-callout: none; -webkit-touch-callout: none;

BIN
img/earth.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 365 KiB

BIN
img/moon.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 475 KiB

BIN
img/sun.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 319 KiB

BIN
img/sun.xcf Normal file
View file

Binary file not shown.

55
index.html
View file

@ -9,7 +9,7 @@
<!-- Font Awesome --> <!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a966b160a8.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/a966b160a8.js" crossorigin="anonymous"></script>
</head> </head>
<body onload="setupUi();"> <body onload="setupUi();initStars();">
<!-- Top Menu --> <!-- Top Menu -->
<nav class="menu"> <nav class="menu">
<ul class="top-menu"> <ul class="top-menu">
@ -18,52 +18,52 @@
<img src="logo/dc09logo.svg" alt="DC09" class="logo" /> <img src="logo/dc09logo.svg" alt="DC09" class="logo" />
</li> </li>
<!-- About Me Pop-up Card --> <!-- About Me Pop-up Card -->
<li id="item-about"> <li id="item-about" class="withhint">
<a href="javascript:void(0);" onclick="showAboutCard(event);" title="About Me"> <a href="javascript:void(0);" onclick="showAboutCard(event);">
<i class="fas fa-user"></i> <i class="fas fa-user"></i>
</a> </a>
</li> </li>
<!-- My Profile on GitHub --> <!-- My Profile on GitHub -->
<li id="item-github"> <li id="item-github" class="withhint">
<a href="https://github.com/DarkCat09" title="GitHub"> <a href="https://github.com/DarkCat09">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
</a> </a>
</li> </li>
<!-- My Discord Nick#Tag and My Bots --> <!-- My Discord Nick#Tag and My Bots -->
<li id="item-discord"> <li id="item-discord" class="withhint">
<a href="javascript:void(0);" onclick="showDiscordSubmenu(event);" title="Discord"> <a href="javascript:void(0);" onclick="showDiscordSubmenu(event);">
<i class="fab fa-discord"></i> <i class="fab fa-discord"></i>
</a> </a>
<nav class="submenu context-menu-like popup"> <nav class="submenu context-menu-like popup">
<li> <li id="item-dscopy" class="withhint">
<a href="javascript:void(0);" onclick="copyDiscordTag(event);">DarkCat09#5587</a> <a href="javascript:void(0);" onclick="copyDiscordTag(event);">DarkCat09#5587</a>
</li> </li>
<li title="Plays music in the voice channel"> <li id="item-dscm" class="withhint">
<a href="https://github.com/DarkCat09/catmusic-discord-bot">CatMusic Bot</a> <a href="https://github.com/DarkCat09/catmusic-discord-bot">CatMusic Bot</a>
</li> </li>
<li title="Processes an attached image"> <li id="item-dspt" class="withhint">
<a href="https://github.com/DarkCat09/pictools-discord-bot">PicTools Bot</a> <a href="https://github.com/DarkCat09/pictools-discord-bot">PicTools Bot</a>
</li> </li>
<li title="Downloads torrent-files from Rutor without VPN"> <li id="item-dsgp" class="withhint">
<a href="https://github.com/DarkCat09/getp2p-discord-bot">GetP2P Bot</a> <a href="https://github.com/DarkCat09/getp2p-discord-bot">GetP2P Bot</a>
</li> </li>
<li title="Scans a file or a URL on VirusTotal"> <li id="item-dsvt" class="withhint">
<a href="https://github.com/DarkCat09/vtdiscord-bot">VtDiscord Bot</a> <a href="https://github.com/DarkCat09/vtdiscord-bot">VtDiscord Bot</a>
</li> </li>
</nav> </nav>
</li> </li>
<!-- E-mail --> <!-- E-mail -->
<li id="item-mail"> <li id="item-email" class="withhint">
<a href="mailto:aacd0709@mail.ru?subject=Hello from Github.io" title="Send an email"> <a href="mailto:aacd0709@mail.ru?subject=Hello from GitHub!">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
</a> </a>
</li> </li>
<li id="item-youtube"> <li id="item-youtube" class="withhint">
<a href="https://youtube.com/" title="My YouTube Channel (coming soon)"> <a href="https://youtube.com/">
<i class="fab fa-youtube"></i> <i class="fab fa-youtube"></i>
</a> </a>
</li> </li>
<li id="item-minecraft"> <li id="item-minecraft" class="withhint">
<a href="#"> <a href="#">
<span class="minecraft-text">MC</span> <span class="minecraft-text">MC</span>
</a> </a>
@ -74,10 +74,24 @@
<div class="space-wrapper"> <div class="space-wrapper">
<!-- The Space --> <!-- The Space -->
<div class="space-obj"> <div class="space-obj">
<!-- Stars -->
<canvas id="stars"></canvas>
<!-- Space Object --> <!-- Space Object -->
<img src="img/earth.png" alt="Can't load image" /> <img src="img/earth.gif" alt="Can't load image" />
</div> </div>
</div> </div>
<!-- Hints -->
<div class="hint" id="hint-about"><span>About me</span></div>
<div class="hint" id="hint-github"><span>GitHub</span></div>
<div class="hint" id="hint-discord"><span>Discord</span></div>
<div class="hint" id="hint-dscopy"><span>Copy my nickname and tag</span></div>
<div class="hint" id="hint-dscm"><span>Plays music in the voice channel</span></div>
<div class="hint" id="hint-dspt"><span>Processes an attached image</span></div>
<div class="hint" id="hint-dsgp"><span>Downloads torrent-files from Rutor without VPN</span></div>
<div class="hint" id="hint-dsvt"><span>Scans a file or a URL on VirusTotal</span></div>
<div class="hint" id="hint-email"><span>Send an email</span></div>
<div class="hint" id="hint-youtube"><span>My Youtube channel (coming soon)</span></div>
<div class="hint" id="hint-minecraft"><span>Minecraft</span></div>
<!-- "Copied!" Message --> <!-- "Copied!" Message -->
<div class="msg-wrapper card-wrapper context-menu-like popup"> <div class="msg-wrapper card-wrapper context-menu-like popup">
<div class="msg-card card"> <div class="msg-card card">
@ -109,6 +123,11 @@
<i class="fas fa-sun"></i> Sun <i class="fas fa-sun"></i> Sun
</a> </a>
</li> </li>
<li>
<i class="fas fa-wrench"></i> Speed:
<input type="range" min="30" max="1200" step="30" value="480"
oninput="spaceObjSpeed(this.value);" onclick="event.stopPropagation();" />
</li>
</ul> </ul>
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->

50
js/script.js
View file

@ -1,4 +1,5 @@
function setupUi() { function setupUi() {
// Context Menu
document.body.addEventListener('contextmenu', (e) => { document.body.addEventListener('contextmenu', (e) => {
var menu = document.querySelector('.context-menu'); var menu = document.querySelector('.context-menu');
menu.style.top = e.pageY + 'px'; menu.style.top = e.pageY + 'px';
@ -7,12 +8,33 @@ function setupUi() {
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
// Hide Pop-ups
document.body.addEventListener('click', () => { document.body.addEventListener('click', () => {
var popups = document.querySelectorAll('.popup'); var popups = document.querySelectorAll('.popup');
for (var i = 0; i < popups.length; i++) { for (var i = 0; i < popups.length; i++) {
togglePopup(popups[i], 0); togglePopup(popups[i], 0);
} }
}); });
// Initialize Hints
var itemswh = document.querySelectorAll('.withhint');
for (var j = 0; j < itemswh.length; j++) {
itemswh[j].addEventListener('mouseover', showHint);
//itemswh[j].addEventListener('mousemove', showHint);
itemswh[j].addEventListener('mouseleave', hideHint);
}
};
function initStars() {
var colors = ['#aaa','#ddd','#eee','#fff'];
var canvas = document.querySelector('canvas#stars');
var w = canvas.width;
var h = canvas.height;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, w, h);
for (var star = 0; star < 200; star++) {
ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
ctx.fillRect(Math.round(Math.random()*w), Math.round(Math.random()*h), 1, 1);
}
}; };
function togglePopup(el, mode=1) { function togglePopup(el, mode=1) {
@ -65,7 +87,7 @@ function copyDiscordTag(e) {
togglePopup(document.querySelector('.msg-wrapper')); togglePopup(document.querySelector('.msg-wrapper'));
setTimeout(() => { setTimeout(() => {
togglePopup(document.querySelector('.msg-wrapper'), 0); togglePopup(document.querySelector('.msg-wrapper'), 0);
}, 3000); }, 1500);
e.stopPropagation(); e.stopPropagation();
}; };
@ -73,14 +95,34 @@ function changePicture(e, num) {
var img = document.querySelector('.space-obj > img'); var img = document.querySelector('.space-obj > img');
switch (num) { switch (num) {
case 0: case 0:
img.src = 'img/earth.png'; img.src = 'img/earth.gif';
break; break;
case 1: case 1:
img.src = 'img/moon.png'; img.src = 'img/moon.gif';
break; break;
case 2: case 2:
img.src = 'img/sun.png'; img.src = 'img/sun.gif';
break; break;
} }
togglePopup(document.querySelector('.context-menu')); togglePopup(document.querySelector('.context-menu'));
}; };
function spaceObjSpeed(spd) {
document.querySelector('.space-obj>img').style.animationDuration = `${spd}s`;
};
function showHint(e) {
var elid = e.target.id;
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
var hintel = document.getElementById(hintid);
if (hintel)
hintel.style.opacity = '1';
};
function hideHint(e) {
var elid = e.target.id;
var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
var hintel = document.getElementById(hintid);
if (hintel)
hintel.style.opacity = '0';
};