Optimized pictures, improved compatibility with mobile browsers, added hints

2021-08-13 14:34:50 +04:00 · 2021-08-13 14:34:50 +04:00 · 17ce3ba86d
commit 17ce3ba86d
parent 06d5469978
7 changed files with 123 additions and 27 deletions
--- a/css/style.css
+++ b/css/style.css
@ -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;
--- a/img/earth.gif
+++ b/img/earth.gif
--- a/img/moon.gif
+++ b/img/moon.gif
--- a/img/sun.gif
+++ b/img/sun.gif
--- a/img/sun.xcf
+++ b/img/sun.xcf
--- a/index.html
+++ b/index.html
@ -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 -->
--- a/js/script.js
+++ b/js/script.js
@ -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';
+};