This commit is contained in:
DarkCat09 2021-07-23 11:00:33 +04:00
parent 13af9cffa6
commit 06d5469978
10 changed files with 436 additions and 137 deletions

View file

@ -1,121 +1,168 @@
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
@font-face {
font-family: 'Minecraft';
src: url('../fonts/minecraft.ttf') format('truetype');
font-style: normal;
font-weight: normal;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #001;
font-family: 'Montserrat', sans-serif;
}
img.logo {
width: 4rem;
cursor: default;
pointer-events: none;
}
.menu {
position: fixed;
width: 100%;
z-index: 100;
font-size: 1.2em;
font-family: 'Exo 2', sans-serif;
background-color: #cecdd9;
color: #514b90;
top: 0;
left: 0;
margin: 10px;
border-radius: 5px;
position: fixed;
background-color: #514b9066;
z-index: 998;
}
.menu ul {
list-style: none;
.top-menu {
margin: 0;
padding: 0;
box-shadow: 0 5px 5px gray;
}
.menu ul li {
color: #514b90;
display: inline-block;
position: relative;
text-transform: uppercase;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
transition: color 0.45s ease-in-out;
}
.menu ul li a {
color: #514b90;
text-decoration: none;
}
.menu ul.top-menu > li {
padding-left: 10px;
font-size: 1.2em;
}
.androit-green { color: green; }
.androit-white { color: white; }
.menu ul > li > a {
color: #514b90;
transition: color 0.5s ease-in-out;
}
.menu ul > li:hover > a {
color: #0e0939;
transition: color 0.5s ease-in-out;
}
.dropdown-menu {
list-style: none;
position: absolute;
left: 0;
/*width: 200px;*/
visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.top-menu li {
padding: 10px;
}
.top-menu li a {
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 1.8rem;
}
.context-menu-like {
margin: 0;
padding: 0;
/*display: none;*/
opacity: 0;
z-index: 200;
font-size: 1.2em;
background-color: #aea9c5;
pointer-events: none;
position: absolute;
border-radius: 5px;
transform-origin: left top;
transform: perspective(600px) rotateX(-90deg);
transition: 0.6s ease-in-out;
background-color: #222222d4;
}
.dropdown-menu li {
display: block !important;
.context-menu-like ul {
margin: 0;
padding: 0;
}
.top-menu > #myproj-item:hover .dropdown-menu {
visibility: visible;
opacity: 1;
transform: perspective(600px) rotateX(0deg);
.context-menu-like li {
padding: 5px;
display: block;
padding: 10px;
border-radius: 5px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 1.3rem;
}
.arrow-down {
margin-bottom: 5px;
border: solid #514b90;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
.context-menu-like li:hover {
background-color: #444;
}
.context-menu-like li a {
color: #fff;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 1.3rem;
}
.submenu {
left: 0;
margin-top: 5px;
}
.submenu:before {
content: "";
border: solid transparent;
position: absolute;
left: 8px;
bottom: 100%;
border-bottom-color: #222;
border-width: 9px;
margin-left: 0;
}
.main-content {
/*padding-top: 40px;*/
padding-top: 2.4em;
font-size: 1em;
font-family: sans-serif;
#item-minecraft {
padding-bottom: 12px;
}
span.minecraft-text {
font-family: 'Minecraft';
font-size: 1.25rem;
}
.user-info-wrapper {
padding-top: 2.8em;
display: flex;
flex-direction: row;
.popup {
z-index: 999;
}
.user-info {
display: flex;
flex-direction: row;
.card-wrapper {
position: absolute;
border-radius: 10px;
color: #fff;
font-family: 'Montserrat', sans-serif;
}
.user-info-item {
margin: 10px;
.card { margin: 10px; }
.about-card-wrapper {
margin-top: 18%;
margin-left: 65%;
}
.card {
border: 2px solid #bbb;
border-radius: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease-in-out 0s;
.msg-wrapper {
margin-top: 5%;
margin-left: 65%;
}
.card:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
.card h1 {
margin: 0 0 0 0;
padding: 0;
font-size: 1.8em;
font-weight: 700;
}
h2 {
margin-bottom: 0;
.card h2 {
margin: 0 0 10px 0;
padding: 0;
font-size: 1.3em;
font-weight: 500;
}
.space-obj {
position: fixed;
text-align: center;
width: 100%;
height: 100%;
z-index: 997;
}
.space-obj > img {
/* 360 degrees in 20 minutes (instead of 23 hours) */
animation: rotate 1200s linear 0s infinite normal;
/* unselectable */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

2
css/tuesday.min.css vendored Normal file

File diff suppressed because one or more lines are too long

BIN
fonts/minecraft.ttf Normal file

Binary file not shown.

BIN
img/earth.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/moon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 KiB

BIN
img/sun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

View file

@ -2,48 +2,116 @@
<html>
<head>
<meta charset="UTF-8" />
<title>Сайт DarkCat09</title>
<title>DarkCat09's Site</title>
<link rel="stylesheet" href="css/style.css" />
<!-- Cool Animations! -->
<link rel="stylesheet" href="css/tuesday.min.css" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a966b160a8.js" crossorigin="anonymous"></script>
</head>
<body>
<body onload="setupUi();">
<!-- Top Menu -->
<nav class="menu">
<ul class="top-menu">
<li><a href="#">(Логотип) Главная</a></li>
<li><a href="#about-me">Обо мне</a></li>
<li id="myproj-item">
<a href="https://github.com/DarkCat09">Проекты</a> <i class="arrow-down"></i>
<ul class="dropdown-menu">
<li><a href="https://github.com/DarkCat09/AchSmartHome">AchSmartHome</a></li>
<li><a href="https://github.com/IngCenter/SMM">SMM</a></li>
<li><a href="https://github.com/DarkCat09/RegFileMaker">RegFileMaker</a></li>
<li><a href="https://github.com/DarkCat09/MtkFwTools">MtkFwTools</a></li>
<li><a href="https://github.com/IngCenter/FallSimulator">FallSimulator</a></li>
<li><a href="https://github.com/DarkCat09/PassGen">PassGen</a></li>
<li><a href="https://github.com/DarkCat09/Cash_Machine">Cash_Machine</a></li>
<li><a href="https://github.com/DarkCat09/RRJS">RRJS</a></li>
</ul>
<!-- My Logo, drawn in Inkscape -->
<li id="item-logo" title="DarkCat09">
<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">
<i class="fas fa-user"></i>
</a>
</li>
<!-- My Profile on GitHub -->
<li id="item-github">
<a href="https://github.com/DarkCat09" title="GitHub">
<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">
<i class="fab fa-discord"></i>
</a>
<nav class="submenu context-menu-like popup">
<li>
<a href="javascript:void(0);" onclick="copyDiscordTag(event);">DarkCat09#5587</a>
</li>
<li title="Plays music in the voice channel">
<a href="https://github.com/DarkCat09/catmusic-discord-bot">CatMusic Bot</a>
</li>
<li title="Processes an attached image">
<a href="https://github.com/DarkCat09/pictools-discord-bot">PicTools Bot</a>
</li>
<li title="Downloads torrent-files from Rutor without VPN">
<a href="https://github.com/DarkCat09/getp2p-discord-bot">GetP2P Bot</a>
</li>
<li title="Scans a file or a URL on VirusTotal">
<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">
<i class="fas fa-envelope"></i>
</a>
</li>
<li id="item-youtube">
<a href="https://youtube.com/" title="My YouTube Channel (coming soon)">
<i class="fab fa-youtube"></i>
</a>
</li>
<li id="item-minecraft">
<a href="#">
<span class="minecraft-text">MC</span>
</a>
</li>
<li id="androit-item"><a href="#"><span class="androit-green">Andro</span><span class="androit-white">IT</span></a></li>
<li><a href="http://minespace-world.000webhostapp.com/">Minecraft</a></li>
</ul>
</nav>
<div class="main-content">
<div class="user-info-wrapper">
<div class="card">
<div class="user-info">
<div class="avatar user-info-item">
<img src="https://avatars.githubusercontent.com/u/50486086?v=4" />
</div>
<div class="about user-info-item">
<h2>DarkCat09</h2>
<b>Чечкенёв Андрей</b>
<br />
<span class="age user-info-field">Возраст: <span id="age-js"></span> лет</span>
<!-- The Universe -->
<div class="space-wrapper">
<!-- The Space -->
<div class="space-obj">
<!-- Space Object -->
<img src="img/earth.png" alt="Can't load image" />
</div>
</div>
<!-- "Copied!" Message -->
<div class="msg-wrapper card-wrapper context-menu-like popup">
<div class="msg-card card">
<h1>Copied!</h1>
</div>
</div>
<!-- About Me -->
<div class="about-card-wrapper card-wrapper context-menu-like popup">
<div class="about-card card">
<h1>Hi! I'm Andrew</h1>
<h2>@DarkCat09</h2>
</div>
</div>
<!-- Context Menu -->
<div class="context-menu-like context-menu popup">
<ul>
<li>
<a href="javascript:void(0);" onclick="changePicture(event, 0);">
<i class="fas fa-globe-americas"></i> Earth
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="changePicture(event, 1);">
<i class="fas fa-moon"></i> Moon
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="changePicture(event, 2);">
<i class="fas fa-sun"></i> Sun
</a>
</li>
</ul>
</div>
<!-- JavaScript -->
<script src="js/script.js"></script>
</body>
</html>

10
js/age.js Normal file
View file

@ -0,0 +1,10 @@
// Computing My Age
// Вычисление моего возраста
var birthday = new Date(2009, 7, 13, 13);
try {
// https://ru.stackoverflow.com/questions/576478/javascript-Вычисление-возраста-по-дате-рождения
document.getElementById('age-js').innerHTML = Math.floor((Date.now() - birthday.getTime()) / (24 * 3600 * 365.25 * 1000));
}
catch (ex) {
console.log('Произошла ошибка при попытке рендеринга моего возраста! Подробнее:\n' + ex.message);
}

View file

@ -1,10 +1,86 @@
// Computing My Age
// Вычисление моего возраста
var birthday = new Date(2009, 7, 13, 13);
try {
// https://ru.stackoverflow.com/questions/576478/javascript-Вычисление-возраста-по-дате-рождения
document.getElementById('age-js').innerHTML = Math.floor((Date.now() - birthday.getTime()) / (24 * 3600 * 365.25 * 1000));
function setupUi() {
document.body.addEventListener('contextmenu', (e) => {
var menu = document.querySelector('.context-menu');
menu.style.top = e.pageY + 'px';
menu.style.left = e.pageX + 'px';
togglePopup(menu);
e.preventDefault();
return false;
});
document.body.addEventListener('click', () => {
var popups = document.querySelectorAll('.popup');
for (var i = 0; i < popups.length; i++) {
togglePopup(popups[i], 0);
}
catch (ex) {
console.log('Произошла ошибка при попытке рендеринга моего возраста! Подробнее:\n' + ex.message);
});
};
function togglePopup(el, mode=1) {
var displaying = (el.accessKey.trim() != '' && el.accessKey != '0');
if (mode != 1 && !displaying)
return;
if (!displaying) {
el.style.animation = 'tdExpandInBounce 0.3s ease 0s forwards';
el.style.pointerEvents = 'auto';
el.accessKey = '1';
}
else {
el.style.animation = 'tdShrinkOutBounce 0.3s ease 0s forwards';
el.style.pointerEvents = 'none';
el.accessKey = '0';
}
};
function showDiscordSubmenu(e) {
var submenu = document.querySelector('li#item-discord').querySelector('nav.submenu');
togglePopup(submenu);
e.stopPropagation();
};
function showAboutCard(e) {
var about = document.querySelector('div.about-card-wrapper');
togglePopup(about);
e.stopPropagation();
};
function copyDiscordTag(e) {
var dtag = e.target.innerText;
var text = document.createElement('textarea');
text.style.position = 'absolute';
text.style.left = '-9999px';
text.style.top = '0';
text.innerHTML = dtag;
text.classList.add('copyarea');
e.target.append(text);
text.select();
document.execCommand('copy');
setTimeout(() => {
document.querySelector('textarea.copyarea').remove();
togglePopup(document.querySelector('li#item-discord').querySelector('nav.submenu'));
}, 100);
togglePopup(document.querySelector('.msg-wrapper'));
setTimeout(() => {
togglePopup(document.querySelector('.msg-wrapper'), 0);
}, 3000);
e.stopPropagation();
};
function changePicture(e, num) {
var img = document.querySelector('.space-obj > img');
switch (num) {
case 0:
img.src = 'img/earth.png';
break;
case 1:
img.src = 'img/moon.png';
break;
case 2:
img.src = 'img/sun.png';
break;
}
togglePopup(document.querySelector('.context-menu'));
};

96
logo/dc09logo.svg Normal file
View file

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1715"
height="825"
viewBox="0 0 453.7604 218.28126"
version="1.1"
id="svg3214"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
sodipodi:docname="dc09logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview3216"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
units="px"
width="1800px"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.32756265"
inkscape:cx="850.21903"
inkscape:cy="444.18983"
inkscape:window-width="1366"
inkscape:window-height="705"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs3211" />
<g
inkscape:label="Слой 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.097721,3.065316)">
<path
style="fill:none;fill-opacity:1;stroke:#514b90;stroke-width:26.4583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3297"
sodipodi:type="arc"
sodipodi:cx="-3.3783622"
sodipodi:cy="106.07529"
sodipodi:rx="122.97446"
sodipodi:ry="95.669495"
sodipodi:start="4.7129475"
sodipodi:end="1.5747827"
sodipodi:arc-type="slice"
d="M -3.3096803,10.405815 A 122.97446,95.669495 0 0 1 103.22508,58.381557 122.97446,95.669495 0 0 1 102.94536,154.14546 122.97446,95.669495 0 0 1 -3.8685779,201.74403 l 0.4902157,-95.66874 z" />
<path
style="fill:none;stroke:#e1c08f;stroke-width:26.4583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3525"
sodipodi:type="arc"
sodipodi:cx="119.47025"
sodipodi:cy="106.07515"
sodipodi:rx="91.52832"
sodipodi:ry="93.859245"
sodipodi:start="4.1083814"
sodipodi:end="2.1731524"
sodipodi:arc-type="arc"
d="M 67.487153,28.822783 A 91.52832,93.859245 0 0 1 187.94969,43.799682 91.52832,93.859245 0 0 1 188.04989,168.23456 91.52832,93.859245 0 0 1 67.611638,183.41545"
sodipodi:open="true" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;line-height:1.25;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="155.89256"
y="205.22354"
id="text11016"><tspan
sodipodi:role="line"
id="tspan11014"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke-width:0.264583"
x="155.89256"
y="205.22354">0</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;line-height:1.25;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke:none;stroke-width:0.264583"
x="288.05435"
y="206.58174"
id="text15242"><tspan
sodipodi:role="line"
id="tspan15240"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:271.639px;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#3f6c4c;fill-opacity:1;stroke-width:0.264583"
x="288.05435"
y="206.58174">9</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB