Refactored weapon forms and enhanced styling.
This commit is contained in:
IM23a-spirgif
@@ -573,7 +573,7 @@ form.addEventListener('submit', e => {
|
||||
mag_size: parseFloat(data.get('magazin')),
|
||||
reload_time: parseFloat(data.get('reload-time')),
|
||||
damage_multiplier: parseFloat(data.get('multiplier')),
|
||||
guntype: data.getAll('gun-type')
|
||||
guntype: data.get('gun-type') ? [data.get('gun-type')] : []
|
||||
};
|
||||
|
||||
// 2) Add it local
|
||||
|
||||
+133
-21
@@ -1,5 +1,5 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
@@ -453,41 +453,153 @@ body.menu-open {
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.select-wrapper > input[type="text"],
|
||||
.select-wrapper > select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.select-wrapper > select {
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
background-image: url("data:image/svg+xml;utf8,\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23666' viewBox='0 0 24 24'>\
|
||||
<path d='M7 10l5 5 5-5z'/>\
|
||||
</svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 1em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
.select-wrapper > input[type="text"]:focus,
|
||||
.select-wrapper > select:focus {
|
||||
outline: none;
|
||||
border-color: darkred;
|
||||
box-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
|
||||
outline: none;
|
||||
border-color: darkred;
|
||||
box-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.select-wrapper > input[type="text"]::placeholder {
|
||||
color: #888;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#weapon-form {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40px 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2500;
|
||||
}
|
||||
|
||||
/* When JS opens it, we set display:flex */
|
||||
#weapon-form.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* The white “card” in the center */
|
||||
#weapon-form > div {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Header inside the card */
|
||||
#weapon-form h2 {
|
||||
margin-top: 0;
|
||||
color: #222;
|
||||
font-size: 1.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* All form inputs stretch full width */
|
||||
#weapon-form form input[type="text"],
|
||||
#weapon-form form input[type="number"],
|
||||
#weapon-form form select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
background: #fafafa;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Multi-select box a bit taller */
|
||||
#weapon-form form select[multiple] {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
/* On focus, highlight */
|
||||
#weapon-form form input:focus,
|
||||
#weapon-form form select:focus {
|
||||
outline: none;
|
||||
border-color: darkred;
|
||||
box-shadow: 0 0 4px rgba(139, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Buttons in the modal */
|
||||
#weapon-form form button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Confirm (Create) */
|
||||
#weapon-form form button[type="submit"] {
|
||||
background-color: darkred;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#weapon-form form button[type="submit"]:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* Cancel */
|
||||
#weapon-form form button#weapon-cancel {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#weapon-form form button#weapon-cancel:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/* The “Create New Weapon” opener button */
|
||||
#weapon-create {
|
||||
margin: 0 0 20px;
|
||||
padding: 10px 16px;
|
||||
background-color: darkred;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#weapon-create:hover {
|
||||
background-color: red;
|
||||
}
|
||||
+24
-18
@@ -25,13 +25,15 @@
|
||||
</header>
|
||||
<body>
|
||||
<main>
|
||||
<label for="weapon-search"></label>
|
||||
<input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
|
||||
<br>
|
||||
<label for="weapon-select"></label>
|
||||
<select id="weapon-select" name="weapons">
|
||||
<option value="">Select a Weapon</option>
|
||||
</select>
|
||||
<div class="select-wrapper">
|
||||
<label for="weapon-search"></label>
|
||||
<input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
|
||||
<br>
|
||||
<label for="weapon-select"></label>
|
||||
<select id="weapon-select" name="weapons">
|
||||
<option value="">Select a Weapon</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="weapon-create">Create New Weapon</button>
|
||||
<div id="weapon-form">
|
||||
<div>
|
||||
@@ -67,16 +69,18 @@
|
||||
<input type="number" name="multiplier" min="0" required>
|
||||
</label><br><br>
|
||||
|
||||
<label>
|
||||
Weapon Type:<br>
|
||||
<select name="gun-type" multiple>
|
||||
<div class="select-wrapper">
|
||||
<label for="gun-type">Weapon Type:</label>
|
||||
<select id="gun-type" name="gun-type">
|
||||
<option value="">Select a type</option>
|
||||
<option value="PISTOL">Pistol</option>
|
||||
<option value="SECONDARY">Secondary</option>
|
||||
<option value="WW2">WW2</option>
|
||||
<option value="RIFLE">Rifle</option>
|
||||
<option value="SOVIET">Soviet</option>
|
||||
</select>
|
||||
</label><br><br>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit">Create</button>
|
||||
<button type="button" id="weapon-cancel">Cancel</button>
|
||||
@@ -97,14 +101,16 @@
|
||||
<label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
|
||||
<label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
|
||||
</div>
|
||||
|
||||
<label for="operative-search"></label>
|
||||
<input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
|
||||
<div class="select-wrapper">
|
||||
<label for="operative-search"></label>
|
||||
<input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
|
||||
<br>
|
||||
<label for="operative-select"></label>
|
||||
<select id="operative-select">
|
||||
<option value="">Select an operative</option>
|
||||
</select>
|
||||
</div>
|
||||
<br>
|
||||
<label for="operative-select"></label>
|
||||
<select id="operative-select">
|
||||
<option value="">Select an operative</option>
|
||||
</select><br>
|
||||
<div id="weapon-stats"></div>
|
||||
<div id="calculated-stats"></div>
|
||||
<h3>Operative Specific Modifiers</h3>
|
||||
|
||||
Reference in New Issue
Block a user