Add finishing touches
This commit is contained in:
parent
fc9ecee9b1
commit
def6f62726
3 changed files with 196 additions and 61 deletions
|
@ -4,19 +4,41 @@
|
|||
<body>
|
||||
<div class="grid"></div>
|
||||
<div class="controls">
|
||||
<h2>controls</h2>
|
||||
<div class="colourButtonWrapper">
|
||||
<label class="colourButtonContainer"><input checked name="colourButton" class="colourButton" type="radio" value="gray"><span class="colourButtonCheckmark colourButton_gray"></span></label>
|
||||
</div>
|
||||
<label>how many squares (this will remove your map)</label>
|
||||
<h2>Controls</h2>
|
||||
<div class="colourButtonWrapper"></div>
|
||||
<label>How many squares (this will remove your map)</label>
|
||||
<input class="amountOfSquares" type="number" min="10" max="50" value="20"></input>
|
||||
<label for="giveParameters">give parameters</label>
|
||||
<textarea id="parametersToGive" rows="10" cols="50">planetPopulation = 100</textarea>
|
||||
<label for="readParameters">read parameters</label>
|
||||
<textarea id="parametersFrom" rows="10" cols="50" disabled></textarea>
|
||||
<button class="toggleExperimental hidden">experimental</button>
|
||||
<a class="downloadJSON"></a>
|
||||
|
||||
<label for="currentName">Planet parameters</label>
|
||||
<div class="input_container">
|
||||
<label for="currentName">Name:</label>
|
||||
<input id="currentName" type="text" placeholder="name"></input>
|
||||
</div>
|
||||
<div class="input_container">
|
||||
<label for="currentShipCount">Ship count:</label>
|
||||
<input id="currentShipCount" type="number" value="20"></input>
|
||||
</div>
|
||||
|
||||
<label>Hovered planet parameters</label>
|
||||
<div class="input_container">
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" type="text" disabled></input>
|
||||
</div>
|
||||
<div class="input_container">
|
||||
<label class="small_label" for="shipCount">Ship count:</label>
|
||||
<input id="shipCount" type="number" disabled></input>
|
||||
</div>
|
||||
<div class="input_container">
|
||||
<label class="small_label" for="owner">Owner:</label>
|
||||
<input id="owner" type="number" disabled></input>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="confirm">Use Map</button>
|
||||
<button class="clear">Clear Map</button>
|
||||
</div>
|
||||
|
||||
<textarea id="mapOutput" class="output hidden"></textarea>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<body>
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,8 +7,9 @@ body {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: black;
|
||||
color: cyan;
|
||||
color: #ff7f00;
|
||||
line-height: 1.5rem;
|
||||
overflow:hidden;
|
||||
align-items: center;
|
||||
|
@ -70,7 +71,7 @@ body {
|
|||
clip-path: polygon(
|
||||
50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
|
||||
);
|
||||
background: #444466;
|
||||
background: #804000;
|
||||
width: calc(4.75% - 2px);
|
||||
height: 130%;
|
||||
}
|
||||
|
@ -79,14 +80,6 @@ body {
|
|||
filter:brightness(80%);
|
||||
}
|
||||
|
||||
.row>.square.planet-red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.row .planet-blue {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
/* Customize the label (the container) */
|
||||
.colourButtonContainer {
|
||||
position: relative;
|
||||
|
@ -110,7 +103,7 @@ body {
|
|||
width: 25px;
|
||||
}
|
||||
.colourButton_gray{
|
||||
background-color: gray;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.colourButton_blue{
|
||||
background-color: blue;
|
||||
|
@ -138,7 +131,7 @@ body {
|
|||
}
|
||||
|
||||
.planet_gray{
|
||||
background-color: gray;
|
||||
background-color: lightgray;
|
||||
}
|
||||
.planet_blue{
|
||||
background-color: blue;
|
||||
|
@ -165,7 +158,7 @@ body {
|
|||
background-color: purple;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
/* On mouse-over, add a gray background color */
|
||||
.colourButtonContainer:hover input ~ .colourButtonCheckmark {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
@ -201,10 +194,51 @@ label {
|
|||
padding-top: 1rem;
|
||||
}
|
||||
input, textarea {
|
||||
border: 1px solid darkcyan;
|
||||
color: darkcyan;
|
||||
border: 1px solid #804000;
|
||||
color: #804000;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
background: black;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.input_container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input_container label {
|
||||
width: 140px;
|
||||
font-size: normal;
|
||||
|
||||
}
|
||||
|
||||
.input_container input {
|
||||
width: 100%;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.output {
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #E67300; /* Green */
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue