mirror of
https://github.com/He4eT/browser-milje-2077.git
synced 2026-05-05 01:17:25 +00:00
114 lines
3.5 KiB
HTML
114 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Milje 2077 Settings</title>
|
|
<style>
|
|
.form {
|
|
width: 100%;
|
|
}
|
|
|
|
.form hr {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
}
|
|
|
|
.form-group input, .form button {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.color-slider {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="settingsForm" class="form">
|
|
<div class="form-group">
|
|
<label for="randomSeed">
|
|
<strong>Pattern Seed</strong>
|
|
<small>Set to 0 for the "random" seed (Default: 0)</small>
|
|
</label>
|
|
<input type="number" id="randomSeed" name="randomSeed" min="0" step="1" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="halfPatternSize">
|
|
<strong>Pattern Size</strong>
|
|
<small>The pattern will be mirrored horizontally and vertically (Default: 16)</small>
|
|
</label>
|
|
<input type="number" id="halfPatternSize" name="halfPatternSize" min="1" step="1" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="scaleFactor">
|
|
<strong>Scale Factor</strong>
|
|
<small>Size of the smallest dot in the pattern (Default: 16)</small>
|
|
</label>
|
|
<input type="number" id="scaleFactor" name="scaleFactor" min="1" step="1" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="gridSize">
|
|
<strong>Grid Size</strong>
|
|
<small>Additional grid for the pattern (Default: 3)</small>
|
|
</label>
|
|
<input type="number" id="gridSize" name="gridSize" min="1" step="1" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="density">
|
|
<strong>Density</strong>
|
|
<small>Probability of holes (Default: 0.5)</small>
|
|
</label>
|
|
<input type="number" id="densityValue" name="densityValue" min="0" max="1" step="0.1" required>
|
|
<input type="range" id="density" name="density" min="0" max="1" step="0.1" value="0" class="color-slider">
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<div class="form-group">
|
|
<label for="red">
|
|
<strong>Red</strong>
|
|
<small>(Default: 255)</small>
|
|
</label>
|
|
<input type="number" id="redValue" name="redValue" min="0" max="255" value="0" step="1">
|
|
<input type="range" id="red" name="red" min="0" max="255" value="0" class="color-slider">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="green">
|
|
<strong>Green</strong>
|
|
<small>(Default: 255)</small>
|
|
</label>
|
|
<input type="number" id="greenValue" name="greenValue" min="0" max="255" value="0" step="1">
|
|
<input type="range" id="green" name="green" min="0" max="255" value="0" class="color-slider">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="blue">
|
|
<strong>Blue</strong>
|
|
<small>(Default: 255)</small>
|
|
</label>
|
|
<input type="number" id="blueValue" name="blueValue" min="0" max="255" value="0" step="1">
|
|
<input type="range" id="blue" name="blue" min="0" max="255" value="0" class="color-slider">
|
|
</div>
|
|
|
|
<hr/>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
|
|
<script type="module" src="./optionSliders.js"></script>
|
|
<script type="module" src="./options.js"></script>
|
|
</body>
|
|
</html>
|