1
0
Fork 0

Merge branch 'front' into 'master'

changing main menu theme

See merge request p1905458/snake!1
This commit is contained in:
Ethanell 2021-03-23 07:22:27 +00:00
commit 9108f2e726
5 changed files with 78 additions and 27 deletions

View file

@ -8,21 +8,20 @@
</head>
<body>
<h1>KyFlo Snake</h1>
<div class="row menu">
<h1 class="linear-wipe">KyFlo Snake</h1>
<div class="row" id="menu">
<div class="col s6 offset-s3">
<div class="col s10 offset-s1 input-field">
<input type="text" id="nickname">
<label for="nickname">Nickname :</label>
<div class="col s10 offset-s1" style="padding: 0">
<input type="text" id="nickname" placeholder="Choose a nickname :">
</div>
<button class="col s8 offset-s2">Level 1</button>
<button class="col s8 offset-s2">Level 2</button>
<button class="col s8 offset-s2">Level 3</button>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<canvas></canvas>
<script type="module" src="sources/js/index.js"></script>
</body>
</html>
</html>

View file

@ -1,14 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
html{
height: 100%;
}
body{
height: 100vh;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-image: url("../images/yargon-kerman-webp-net-gifmaker-39.gif");
background-image: url("../images/51d84548-b50c-4f95-8e9e-d56c646d3ac4.gif");
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(4px);
backdrop-filter: blur(5px);
}
h1{
@ -16,29 +20,77 @@ h1{
text-align: center;
color: yellow;
margin: 0;
padding-top: 80px;
}
.menu>div{
background-color: black;
#menu{
margin: 0;
margin-top: 150px;
}
.menu button{
#menu>div{
background-color: rgba(0, 0, 0, 0.5);
padding: 50px;
border: 1px solid rgb(0, 255, 200);
}
#menu button{
display: block;
text-align: center;
background-color: transparent;
background-color: rgba(0, 0, 0, 0.5);
border: 3px double #FF4294;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
font-size: 20px;
color: #FF4294;
padding: 15px;
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
color: black;
font-weight: 900;
border-radius: 10px;
font-size: 25px;
border-left: none;
border-bottom: none;
transition-duration: 0.5s;
cursor: pointer;
}
#canvas {
height: 100%;
width: 100%;
right: 0;
top: 0;
position: fixed;
background: white;
}
#menu button:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.linear-wipe {
background: linear-gradient(to right, rgb(255, 136, 0) 20%, #FF0 40%, #FF0 45%, rgb(255, 136, 0) 80%);
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 1s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
#menu input{
border: 3px double rgb(0, 255, 200);
color: rgb(0, 255, 200);
text-align: center;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
border-top: none;
border-right: none;
font-size: 35px;
padding: 10px 0px;
}
::-webkit-input-placeholder, ::placeholder { /* Edge */
color: rgb(0, 255, 200);
text-align: center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

BIN
sources/sound/main.mp3 Normal file

Binary file not shown.