Optimized pictures, improved compatibility with mobile browsers, added hints

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

View file

@ -18,6 +18,11 @@ body {
bottom: 0;
background-color: #001;
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 {
@ -32,7 +37,7 @@ img.logo {
margin: 10px;
border-radius: 5px;
position: fixed;
background-color: #514b9066;
background-color: var(--topmenu-bg);
z-index: 998;
}
.top-menu {
@ -57,12 +62,11 @@ img.logo {
.context-menu-like {
margin: 0;
padding: 0;
/*display: none;*/
opacity: 0;
pointer-events: none;
position: absolute;
border-radius: 5px;
background-color: #222222d4;
background-color: var(--popups-bg);
}
.context-menu-like ul {
margin: 0;
@ -142,6 +146,38 @@ span.minecraft-text {
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 {
position: fixed;
text-align: center;
@ -150,8 +186,7 @@ span.minecraft-text {
z-index: 997;
}
.space-obj > img {
/* 360 degrees in 20 minutes (instead of 23 hours) */
animation: rotate 1200s linear 0s infinite normal;
animation: rotate 480s linear 0s infinite normal;
/* unselectable */
-webkit-touch-callout: none;

BIN
img/earth.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

BIN
img/moon.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 KiB

BIN
img/sun.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 KiB

BIN
img/sun.xcf Normal file

Binary file not shown.

View file

@ -9,7 +9,7 @@
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a966b160a8.js" crossorigin="anonymous"></script>
</head>
<body onload="setupUi();">
<body onload="setupUi();initStars();">
<!-- Top Menu -->
<nav class="menu">
<ul class="top-menu">
@ -18,52 +18,52 @@
<img src="logo/dc09logo.svg" alt="DC09" class="logo" />
</li>
<!-- About Me Pop-up Card -->
<li id="item-about">
<a href="javascript:void(0);" onclick="showAboutCard(event);" title="About Me">
<li id="item-about" class="withhint">
<a href="javascript:void(0);" onclick="showAboutCard(event);">
<i class="fas fa-user"></i>
</a>
</li>
<!-- My Profile on GitHub -->
<li id="item-github">
<a href="https://github.com/DarkCat09" title="GitHub">
<li id="item-github" class="withhint">
<a href="https://github.com/DarkCat09">
<i class="fab fa-github"></i>
</a>
</li>
<!-- My Discord Nick#Tag and My Bots -->
<li id="item-discord">
<a href="javascript:void(0);" onclick="showDiscordSubmenu(event);" title="Discord">
<li id="item-discord" class="withhint">
<a href="javascript:void(0);" onclick="showDiscordSubmenu(event);">
<i class="fab fa-discord"></i>
</a>
<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>
</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>
</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>
</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>
</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>
</li>
</nav>
</li>
<!-- E-mail -->
<li id="item-mail">
<a href="mailto:aacd0709@mail.ru?subject=Hello from Github.io" title="Send an email">
<li id="item-email" class="withhint">
<a href="mailto:aacd0709@mail.ru?subject=Hello from GitHub!">
<i class="fas fa-envelope"></i>
</a>
</li>
<li id="item-youtube">
<a href="https://youtube.com/" title="My YouTube Channel (coming soon)">
<li id="item-youtube" class="withhint">
<a href="https://youtube.com/">
<i class="fab fa-youtube"></i>
</a>
</li>
<li id="item-minecraft">
<li id="item-minecraft" class="withhint">
<a href="#">
<span class="minecraft-text">MC</span>
</a>
@ -74,10 +74,24 @@
<div class="space-wrapper">
<!-- The Space -->
<div class="space-obj">
<!-- Stars -->
<canvas id="stars"></canvas>
<!-- Space Object -->
<img src="img/earth.png" alt="Can't load image" />
<img src="img/earth.gif" alt="Can't load image" />
</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 -->
<div class="msg-wrapper card-wrapper context-menu-like popup">
<div class="msg-card card">
@ -109,6 +123,11 @@
<i class="fas fa-sun"></i> Sun
</a>
</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>
</div>
<!-- JavaScript -->

View file

@ -1,4 +1,5 @@
function setupUi() {
// Context Menu
document.body.addEventListener('contextmenu', (e) => {
var menu = document.querySelector('.context-menu');
menu.style.top = e.pageY + 'px';
@ -7,12 +8,33 @@ function setupUi() {
e.preventDefault();
return false;
});
// Hide Pop-ups
document.body.addEventListener('click', () => {
var popups = document.querySelectorAll('.popup');
for (var i = 0; i < popups.length; i++) {
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) {
@ -65,7 +87,7 @@ function copyDiscordTag(e) {
togglePopup(document.querySelector('.msg-wrapper'));
setTimeout(() => {
togglePopup(document.querySelector('.msg-wrapper'), 0);
}, 3000);
}, 1500);
e.stopPropagation();
};
@ -73,14 +95,34 @@ function changePicture(e, num) {
var img = document.querySelector('.space-obj > img');
switch (num) {
case 0:
img.src = 'img/earth.png';
img.src = 'img/earth.gif';
break;
case 1:
img.src = 'img/moon.png';
img.src = 'img/moon.gif';
break;
case 2:
img.src = 'img/sun.png';
img.src = 'img/sun.gif';
break;
}
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';
};