mirror of
https://github.com/QuiteAFancyEmerald/Holy-Unblocker.git
synced 2025-05-14 20:30:02 -04:00
115 lines
No EOL
3.9 KiB
HTML
115 lines
No EOL
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Connect 3</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-size: 0;
|
|
background-color: #303030;
|
|
color: white;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
.grid {
|
|
background-color: #424242;
|
|
padding: 20px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.3);
|
|
border-radius: 2px;
|
|
width: 355px;
|
|
height: 355px;
|
|
position: relative;
|
|
}
|
|
.grid::after {
|
|
content: attr(data-score);
|
|
font-size: 72px;
|
|
text-align: center;
|
|
display: block;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
}
|
|
.grid > span {
|
|
position: absolute;
|
|
padding: 20px;
|
|
border-radius: 2px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px;
|
|
box-shadow: 0 0.5px 3px rgba(0,0,0,0.3);
|
|
transition: left .2s, top .2s;
|
|
}
|
|
.grid > span.square {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke-linejoin='round' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Cpath d='M1 1H9V9H1z'/%3E%3C/svg%3E")
|
|
}
|
|
.grid > span.circle {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Ccircle cx='5' cy='5' r='4'/%3E%3C/svg%3E")
|
|
}
|
|
.grid > span.triangle {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke-linejoin='round' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Cpath d='M5 1.5L9 8.5H1z'/%3E%3C/svg%3E")
|
|
}
|
|
.grid > span.plus {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke-linecap='round' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Cpath d='M5 1V9M1 5H9'/%3E%3C/svg%3E")
|
|
}
|
|
.grid > span.minus {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke-linecap='round' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Cpath d='M2 5H8'/%3E%3C/svg%3E")
|
|
}
|
|
.grid > span.hexagon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' stroke-linejoin='round' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1'%3E%3Cpath d='M4 1H8L10.6 5L8 9H4L1.4 5z'/%3E%3C/svg%3E");
|
|
background-size: 24px 20px;
|
|
}
|
|
.grid > span.dot {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='rgba(0,0,0,0.3)'%3E%3Ccircle cx='5' cy='5' r='1'/%3E%3C/svg%3E");
|
|
}
|
|
.grid > span::after {
|
|
content: '';
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke-linejoin='round' stroke-linecap='round' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M1 2V1H2M9 8V9H8 M9 2V1H8M2 9H1V8'/%3E%3C/svg%3E");
|
|
transform: scale(1.2);
|
|
opacity: 0;
|
|
transition: all .2s;
|
|
}
|
|
.grid > span.active::after {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
.grid > span.entering {
|
|
padding: 0 20px;
|
|
animation: entering .2s .2s forwards;
|
|
}
|
|
@keyframes entering {
|
|
from {padding: 0 20px;}
|
|
to {padding: 20px;}
|
|
}
|
|
.grid > span.exiting {
|
|
pointer-events: none;
|
|
animation: exiting .2s forwards;
|
|
}
|
|
@keyframes exiting {
|
|
from {padding: 20px; margin-top: 0;}
|
|
to {padding: 0 20px; margin-top: 40px;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/BinBashBanana/gstore/html5games/connect3/connect3.js"></script>
|
|
</body>
|
|
</html> |