chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add font awesome

Browse Source
This commit is contained in:
chris 2021-12-29 19:20:33 -05:00
parent e73724bcbc
commit 1b4b38ff6b
4 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
MTG/down.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

66
MTG/index.html
View File

@ -14,6 +14,8 @@
<title>MTG Life Counter</title> <title>MTG Life Counter</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu.css" /> <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head> </head>
<body> <body>
@ -29,13 +31,13 @@
Player 1</div> Player 1</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(1)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(1)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(1)" id="lifeUp">▲</div> <div onclick="lifeIncrease(1)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount1">20</div> <div id="lifeCount1">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(1)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(1)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(1)" id="lifeDown">▼</div> <div onclick="lifeDecrease(1)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -45,13 +47,13 @@
Player 2</div> Player 2</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(2)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(2)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(2)" id="lifeUp">▲</div> <div onclick="lifeIncrease(2)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount2">20</div> <div id="lifeCount2">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(2)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(2)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(2)" id="lifeDown">▼</div> <div onclick="lifeDecrease(2)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -60,13 +62,13 @@
Player 3</div> Player 3</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(3)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(3)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(3)" id="lifeUp">▲</div> <div onclick="lifeIncrease(3)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount3">20</div> <div id="lifeCount3">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(3)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(3)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(3)" id="lifeDown">▼</div> <div onclick="lifeDecrease(3)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -75,13 +77,13 @@
Player 4</div> Player 4</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(4)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(4)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(4)" id="lifeUp">▲</div> <div onclick="lifeIncrease(4)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount4">20</div> <div id="lifeCount4">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(4)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(4)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(4)" id="lifeDown">▼</div> <div onclick="lifeDecrease(4)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -90,13 +92,13 @@
Player 5</div> Player 5</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(5)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(5)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(5)" id="lifeUp">▲</div> <div onclick="lifeIncrease(5)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount5">20</div> <div id="lifeCount5">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(5)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(5)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(5)" id="lifeDown">▼</div> <div onclick="lifeDecrease(5)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -105,13 +107,13 @@
Player 6</div> Player 6</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(6)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(6)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(6)" id="lifeUp">▲</div> <div onclick="lifeIncrease(6)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount6">20</div> <div id="lifeCount6">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(6)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(6)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(6)" id="lifeDown">▼</div> <div onclick="lifeDecrease(6)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -120,13 +122,13 @@
Player 7</div> Player 7</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(7)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(7)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(7)" id="lifeUp">▲</div> <div onclick="lifeIncrease(7)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount7">20</div> <div id="lifeCount7">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(7)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(7)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(7)" id="lifeDown">▼</div> <div onclick="lifeDecrease(7)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>
@ -135,13 +137,13 @@
Player 8</div> Player 8</div>
<div class="life"> <div class="life">
<span class="vert"> <span class="vert">
<div onclick="lifeIncrease5(8)" id="lifeUp" class="fiveLife">▲</div> <div onclick="lifeIncrease5(8)" class="lifeUp" class="fiveLife"><i class="fas fa-arrow-circle-up"></i></div>
<div onclick="lifeIncrease(8)" id="lifeUp">▲</div> <div onclick="lifeIncrease(8)" class="lifeUp"><i class="fas fa-chevron-circle-up"></i></div>
</span> </span>
<div id="lifeCount8">20</div> <div id="lifeCount8">20</div>
<span class="vert"> <span class="vert">
<div onclick="lifeDecrease5(8)" id="lifeDown" class="fiveLife">▼</div> <div onclick="lifeDecrease5(8)" class="lifeDown" class="fiveLife"><i class="fas fa-arrow-circle-down"></i></div>
<div onclick="lifeDecrease(8)" id="lifeDown">▼</div> <div onclick="lifeDecrease(8)" class="lifeDown"><i class="fas fa-chevron-circle-down"></i></div>
</span> </span>
</div> </div>
</div> </div>

30
MTG/style.css
View File

@ -10,8 +10,9 @@ body {
background-color: rgb(82, 100, 100); background-color: rgb(82, 100, 100);
/* height: 100vh; */ /* height: 100vh; */
/* width: 100vw; */ /* width: 100vw; */
/* margin: 0 auto; */ margin: 0;
display: flex; display: flex;
height: 100%
/* align-items: center */ /* align-items: center */
} }
main { main {
@ -22,12 +23,12 @@ main {
flex-wrap: wrap; flex-wrap: wrap;
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
align-items: center; /* align-items: center; */
position: relative; position: relative;
/* margin: 0 auto; */ /* margin: 0 auto; */
padding-bottom: 70px; padding-bottom: 70px;
margin-top: 70px; margin-top: 70px;
margin-bottom: 70px; margin-bottom: -50px;
} }
.name { .name {
font-size: 3rem; font-size: 3rem;
@ -97,7 +98,7 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* flex-grow: 1; */ /* flex-grow: 1; */
margin: 3%; /* margin: 3%; */
gap: 0; gap: 0;
} }
@ -131,16 +132,29 @@ main {
.fiveLife { .fiveLife {
display: flex; display: flex;
color: blue; position: relative;
z-index: 10;
/* font-size: 3rem; */ /* font-size: 3rem; */
} }
.fiveLife::after{
content: '5';
display: inline-block;
position: absolute;
font-size: 10px;
color: #aaa;
z-index: -1;
}
.lifeUp{
color: #00cc00
}
.lifeDown{
color:#e60000
}
.vert{ .vert{
flex-direction: column; flex-direction: column;
font-size: 5rem ; font-size: 5rem ;
} }
.fiveLifeDown {
color: greenyellow;
}
.lifeFlex{ .lifeFlex{
flex-direction: column flex-direction: column
} }

BIN
MTG/up.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB