first commit
This commit is contained in:
rouce
commit
104dc2b746
7 changed files with 853 additions and 0 deletions
8
LICENSE
Normal file
8
LICENSE
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
MIT License
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
6
README.md
Normal file
6
README.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
# myco.systems
|
||||
|
||||
Trying to keep it under 50 MiB, currently it's around 18 MiB
|
||||
#### Woah spinny
|
||||
|
||||
|
||||
79
public/donations/index.html
Normal file
79
public/donations/index.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Your Mycelial Network</title>
|
||||
<link rel="stylesheet" type="text/css" href="../styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
<link rel="icon" type="image/x-icon" href="../icons/red-background/favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<h1><a href="/" style="color:#fff">Myco.Systems</a></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://coop.myco.systems/">coop.myco.systems</a></li>
|
||||
<li><a href="https://web.myco.systems/">web.myco.systems</a></li>
|
||||
<li><a href="/donations">Where do my donations go?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="inner-content">
|
||||
<section class="inner-section-cube">
|
||||
<div class="color-cube">
|
||||
<div class="cube-face cube-front"></div>
|
||||
<div class="cube-face cube-back"></div>
|
||||
<div class="cube-face cube-bottom"></div>
|
||||
<div class="cube-face cube-top"></div>
|
||||
<div class="cube-face cube-left"></div>
|
||||
<div class="cube-face cube-right"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="inner-section">
|
||||
<div class="section-container">
|
||||
<div class="section-button">
|
||||
<h2>Domations</h2>
|
||||
<p>where them domations go</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card-button" id="donateButton">Donate</div>
|
||||
|
||||
<div class="card-wrap card-out" id="card">
|
||||
<main class="tabs-wrap">
|
||||
<nav class="tabs-nav" id="wallets">
|
||||
</nav>
|
||||
<section class="tabs-info">
|
||||
<div class="tabs-info-row">
|
||||
<div class="tabs-info-qr">
|
||||
<img id="qrImage" alt="wallet.name" />
|
||||
</div>
|
||||
<div class="tabs-info-details">
|
||||
<div class="tabs-info-title" id="donateTitle"></div>
|
||||
<div class="tabs-info-warn" id="donateWarn"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-info-input">
|
||||
<span>Address:</span>
|
||||
<input type="text" id="walletAddress" />
|
||||
<button type="button" id="copyButton">✚ Copy</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<p>© MycoSystems</p>
|
||||
<p><a style="color:#fff !important" href="https://creativecommons.org/licenses/by/4.0/">Copyright info</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
public/donations/scripts.js
Normal file
95
public/donations/scripts.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var donateButton = document.getElementById('donateButton');
|
||||
var card = document.getElementById('card');
|
||||
|
||||
donateButton.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
if (card.classList.contains('card-out')) {
|
||||
card.classList.remove('card-out');
|
||||
card.classList.add('card-in');
|
||||
} else {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if(event.target === card || card.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (card.classList.contains('card-in')) {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
var cryptoWallets = [
|
||||
{
|
||||
symbol: 'XMR',
|
||||
name: 'Monero',
|
||||
address: '49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi',
|
||||
},
|
||||
{
|
||||
symbol: 'LTC',
|
||||
name: 'Litecoin',
|
||||
address: 'LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV',
|
||||
},
|
||||
{
|
||||
symbol: 'BTC',
|
||||
name: 'Bitcoin',
|
||||
address: 'bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0',
|
||||
}
|
||||
];
|
||||
|
||||
var walletsContainer = document.getElementById('wallets');
|
||||
var qrImage = document.getElementById('qrImage');
|
||||
var donateTitle = document.getElementById('donateTitle');
|
||||
var donateWarn = document.getElementById('donateWarn');
|
||||
var walletAddress = document.getElementById('walletAddress');
|
||||
var copyButton = document.getElementById('copyButton');
|
||||
|
||||
function selectWallet(symbol) {
|
||||
var wallet = cryptoWallets.find(function (w) {
|
||||
return w.symbol === symbol;
|
||||
});
|
||||
if (!wallet) return;
|
||||
|
||||
var buttons = Array.from(walletsContainer.children);
|
||||
buttons.forEach(function (button) {
|
||||
button.classList.remove('active');
|
||||
if (button.textContent === symbol) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
qrImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + wallet.address;
|
||||
donateTitle.textContent = 'Donate ' + wallet.name;
|
||||
donateWarn.textContent = 'Send only ' + wallet.name + ' (' + wallet.symbol + ') to this deposit address. Sending any other coin or token to this address may result in the loss of your donation. Thanks!';
|
||||
walletAddress.value = wallet.address;
|
||||
copyButton.textContent = 'Copy';
|
||||
}
|
||||
|
||||
function copyText() {
|
||||
var input = document.createElement('input');
|
||||
document.body.appendChild(input);
|
||||
input.value = walletAddress.value;
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(input);
|
||||
copyButton.textContent = 'Copied';
|
||||
}
|
||||
|
||||
cryptoWallets.forEach(function (wallet) {
|
||||
var button = document.createElement('button');
|
||||
button.textContent = wallet.symbol;
|
||||
button.addEventListener('click', function () {
|
||||
selectWallet(wallet.symbol);
|
||||
});
|
||||
walletsContainer.appendChild(button);
|
||||
});
|
||||
|
||||
copyButton.addEventListener('click', copyText);
|
||||
|
||||
selectWallet(cryptoWallets[0].symbol);
|
||||
});
|
||||
98
public/index.html
Normal file
98
public/index.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Your Mycelial Network</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<script src="scripts.js"></script>
|
||||
<link rel="icon" type="image/x-icon" href="icons/red-background/favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<h1>Myco.Systems</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://coop.myco.systems/">coop.myco.systems</a></li>
|
||||
<li><a href="https://web.myco.systems/">web.myco.systems</a></li>
|
||||
<li><a href="/donations">Where do my donations go?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="inner-content">
|
||||
<section class="inner-section-cube">
|
||||
<div class="color-cube">
|
||||
<div class="cube-face cube-front"></div>
|
||||
<div class="cube-face cube-back"></div>
|
||||
<div class="cube-face cube-bottom"></div>
|
||||
<div class="cube-face cube-top"></div>
|
||||
<div class="cube-face cube-left"></div>
|
||||
<div class="cube-face cube-right"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="inner-section">
|
||||
<div class="section-container">
|
||||
<div class="section-button">
|
||||
<h2>Blog</h2>
|
||||
<p>Description</p>
|
||||
</div>
|
||||
<div class="section-button-green">
|
||||
<div class="section-button-title-logo">
|
||||
<img src="logo.png" alt="Client site logo">
|
||||
<h1>web.myco.systems</h1>
|
||||
</div>
|
||||
<div class="section-button-body">
|
||||
<h3>Hey there! Join us at Web.Myco.Systems - Your Gateway to Open-Source!</h3>
|
||||
<p style="font-weight: 500;" >Our client portal isn't just about transactions; it's about building a relationship that caters specifically to your requirements. Explore our services, containerized stacks, personal cloud support, or just send us an email so we can get in touch!</p>
|
||||
<p>Explore:</p>
|
||||
</div>
|
||||
<div class="section-button-footer">
|
||||
<button class="client-button">Services</button>
|
||||
<button class="client-button">Showcase</button>
|
||||
<button class="client-button">Stacks</button>
|
||||
<div class="button-text-footer">
|
||||
<p>Footer text goes here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card-button" id="donateButton">Donate</div>
|
||||
|
||||
<div class="card-wrap card-out" id="card">
|
||||
<main class="tabs-wrap">
|
||||
<nav class="tabs-nav" id="wallets">
|
||||
</nav>
|
||||
<section class="tabs-info">
|
||||
<div class="tabs-info-row">
|
||||
<div class="tabs-info-qr">
|
||||
<img id="qrImage" alt="wallet.name" />
|
||||
</div>
|
||||
<div class="tabs-info-details">
|
||||
<div class="tabs-info-title" id="donateTitle"></div>
|
||||
<div class="tabs-info-warn" id="donateWarn"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs-info-input">
|
||||
<span>Address:</span>
|
||||
<input type="text" id="walletAddress" />
|
||||
<button type="button" id="copyButton">✚ Copy</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<p>© MycoSystems</p>
|
||||
<p><a style="color:#fff !important" href="https://creativecommons.org/licenses/by/4.0/">Copyright info</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
95
public/scripts.js
Normal file
95
public/scripts.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var donateButton = document.getElementById('donateButton');
|
||||
var card = document.getElementById('card');
|
||||
|
||||
donateButton.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
if (card.classList.contains('card-out')) {
|
||||
card.classList.remove('card-out');
|
||||
card.classList.add('card-in');
|
||||
} else {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('click', function(event) {
|
||||
if(event.target === card || card.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (card.classList.contains('card-in')) {
|
||||
card.classList.remove('card-in');
|
||||
card.classList.add('card-out');
|
||||
}
|
||||
});
|
||||
|
||||
var cryptoWallets = [
|
||||
{
|
||||
symbol: 'XMR',
|
||||
name: 'Monero',
|
||||
address: '49r2aeun8DtV5VqZpZSwRpS83WfUWEaLt4NG8HJwwVkbiT1vSsXTXrPFKkKTdc6MPX9iezbTidNPvhGZKCnM1338TfK6Hgi',
|
||||
},
|
||||
{
|
||||
symbol: 'LTC',
|
||||
name: 'Litecoin',
|
||||
address: 'LRAm7h5XENknfYEpbdVsvyGY8D6MiXGTDV',
|
||||
},
|
||||
{
|
||||
symbol: 'BTC',
|
||||
name: 'Bitcoin',
|
||||
address: 'bc1qkv97ajh7f0a72l9rsjd3fmmly5q5uywr06q3x0',
|
||||
}
|
||||
];
|
||||
|
||||
var walletsContainer = document.getElementById('wallets');
|
||||
var qrImage = document.getElementById('qrImage');
|
||||
var donateTitle = document.getElementById('donateTitle');
|
||||
var donateWarn = document.getElementById('donateWarn');
|
||||
var walletAddress = document.getElementById('walletAddress');
|
||||
var copyButton = document.getElementById('copyButton');
|
||||
|
||||
function selectWallet(symbol) {
|
||||
var wallet = cryptoWallets.find(function (w) {
|
||||
return w.symbol === symbol;
|
||||
});
|
||||
if (!wallet) return;
|
||||
|
||||
var buttons = Array.from(walletsContainer.children);
|
||||
buttons.forEach(function (button) {
|
||||
button.classList.remove('active');
|
||||
if (button.textContent === symbol) {
|
||||
button.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
qrImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + wallet.address;
|
||||
donateTitle.textContent = 'Donate ' + wallet.name;
|
||||
donateWarn.textContent = 'Send only ' + wallet.name + ' (' + wallet.symbol + ') to this deposit address. Sending any other coin or token to this address may result in the loss of your donation. Thanks!';
|
||||
walletAddress.value = wallet.address;
|
||||
copyButton.textContent = 'Copy';
|
||||
}
|
||||
|
||||
function copyText() {
|
||||
var input = document.createElement('input');
|
||||
document.body.appendChild(input);
|
||||
input.value = walletAddress.value;
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(input);
|
||||
copyButton.textContent = 'Copied';
|
||||
}
|
||||
|
||||
cryptoWallets.forEach(function (wallet) {
|
||||
var button = document.createElement('button');
|
||||
button.textContent = wallet.symbol;
|
||||
button.addEventListener('click', function () {
|
||||
selectWallet(wallet.symbol);
|
||||
});
|
||||
walletsContainer.appendChild(button);
|
||||
});
|
||||
|
||||
copyButton.addEventListener('click', copyText);
|
||||
|
||||
selectWallet(cryptoWallets[0].symbol);
|
||||
});
|
||||
472
public/styles.css
Normal file
472
public/styles.css
Normal file
|
|
@ -0,0 +1,472 @@
|
|||
body, h1, h2, h3, h4, h5, h6, p, ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
font-family: 'Merriweather Sans', Arial, sans-serif;
|
||||
line-height: normal;
|
||||
}
|
||||
body{
|
||||
background-color: #241916;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header-container h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header-container nav {
|
||||
float: right;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.header-container nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-container nav ul li {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.header-container nav ul li a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-container nav ul li a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom left;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.header-container nav ul li a:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: .5rem;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.inner-section {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: fixed;
|
||||
top: 3.5rem;
|
||||
bottom: 4.5rem;
|
||||
right: 0.2rem;
|
||||
left: 0.2rem;
|
||||
}
|
||||
|
||||
.inner-section-cube {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.section-button-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.client-button {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #50526e;
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.client-button:hover {
|
||||
background-color: #3a3d50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-button-green {
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(101, 140, 135, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: background 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-button-green:hover {
|
||||
background: rgba(101, 140, 135, 0.4);
|
||||
}
|
||||
|
||||
.section-button {
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: background 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.section-button:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
padding: 5px;
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
color: #fff !important;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.footer-container:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.footer-container a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-container a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-container a:hover::before {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
right: 1.9rem;
|
||||
bottom: 1.9rem;
|
||||
padding: 5px 30px;
|
||||
background-color: #232222;
|
||||
color: #e3e3e3;
|
||||
border-radius: 5px;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.card-button:hover {
|
||||
animation: wobble 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
15% {
|
||||
transform: translateX(-2px) rotate(-2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(2px) rotate(2deg);
|
||||
}
|
||||
45% {
|
||||
transform: translateX(-1px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(1px) rotate(1deg);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-0.5px) rotate(-0.5deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-out {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
right: -520px;
|
||||
bottom: 0;
|
||||
transition: right 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.card-in {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: right 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
transition: color 300ms ease-out, background 300ms ease-out, border 300ms ease-out, transform 300ms ease-out, opacity 300ms ease-out;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
options,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: normal;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-wrap {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
max-width: 520px;
|
||||
background-color: #232323;
|
||||
border-top-left-radius: 9px;
|
||||
}
|
||||
|
||||
.tabs-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #743c2f;
|
||||
}
|
||||
|
||||
.tabs-nav > button {
|
||||
flex: 1;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
padding: 0.8em 0;
|
||||
background-color: #232222;
|
||||
font-weight: bold;
|
||||
color: #733c2f;
|
||||
}
|
||||
|
||||
.tabs-nav > button:hover {
|
||||
background-color: #733c2f;
|
||||
color: #232222;
|
||||
}
|
||||
|
||||
.tabs-nav > button.active {
|
||||
background-color: #733c2f;
|
||||
border-color: #733c2f;
|
||||
color: #232222;
|
||||
}
|
||||
|
||||
.tabs-info {
|
||||
min-height: 100px;
|
||||
padding-top: 1em;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
margin-bottom: 1em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-qr > img {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
padding: 0.75em 1em;
|
||||
color: #733c2f;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-input > span {
|
||||
margin-right: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-input > input {
|
||||
flex: 1;
|
||||
margin-right: 1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-input > button {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-details {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.tabs-info .tabs-info-warn {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.color-cube {
|
||||
--cube-color: #743c2f;
|
||||
position: fixed;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(-20deg) rotateY(-40deg);
|
||||
animation: rotateCube 5s linear infinite;
|
||||
}
|
||||
|
||||
.cube-face {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid rgba(0, 0, 0, 0.4);
|
||||
background-color: var(--cube-color);
|
||||
transition: background-color 500ms;
|
||||
}
|
||||
|
||||
.cube-front {
|
||||
transform: translateZ(140px);
|
||||
}
|
||||
|
||||
.cube-back {
|
||||
transform: rotateY(180deg) translateZ(140px);
|
||||
}
|
||||
|
||||
.cube-bottom {
|
||||
transform: rotateX(-90deg) translateZ(140px);
|
||||
}
|
||||
|
||||
.cube-top {
|
||||
transform: rotateX(90deg) translateZ(140px);
|
||||
}
|
||||
|
||||
.cube-left {
|
||||
transform: rotateY(-90deg) translateZ(140px);
|
||||
}
|
||||
|
||||
.cube-right {
|
||||
transform: rotateY(90deg) translateZ(140px);
|
||||
}
|
||||
|
||||
.color-name {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
margin: 55px 0 30px;
|
||||
}
|
||||
|
||||
.heard-output,
|
||||
.confidence-output {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.colors-list {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid #111;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@keyframes rotateCube {
|
||||
to {
|
||||
transform: rotateX(-20deg) rotateY(-400deg);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue