A simple gradient creator for minecraft
keii.dev
1<!DOCTYPE html>
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Minecraft Gradient Picker</title>
7 <link rel="stylesheet" href="minecraft-gradient/style.css">
8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
9</head>
10<body>
11 <div class="card m-5 pb-5">
12 <div class="card-header">
13 Minecraft Gradient
14 </div>
15 <div class="card-body">
16 <div class="gradient mx-auto rounded pb-5" id="gradient" style="background: linear-gradient(to right, #3494E6 0.5%, #333333 53.31%, #986a44 55.02%, #333333 77.88%, #EC6EAD 99%)">
17 </div>
18 <div id="control-points">
19 </div>
20
21 <ul class="list-group mt-3" id="color-list">
22 </ul>
23 <button class="btn btn-primary mt-3" onclick="
24 gradient = document.getElementById('gradient')
25
26 var index = undefined
27 controlPoints.forEach((point, i) => {
28 if(point.x > 0.5 && index == undefined)
29 {
30 index = i
31 }
32 })
33
34 controlPoints.splice(index, 0, new ControlPoint(
35 0.5,
36 new Color(255, 255, 255, 255)
37 ))
38
39 generatePointsHTML()
40 generateCSSGradient()
41 generateMinecraftBlocks()
42 ">Add Point</button>
43
44 <div class="d-flex" style="gap: 10px">
45 <div class="input-group my-3">
46 <span class="input-group-text">Number of blocks</span>
47 <input type="number" class="form-control" id="numitems" placeholder="Number of blocks" value="10" onchange="var a = parseInt(event.target.value); if(!isNaN(a)) {numItems = a} else {numItems = 10; document.getElementById('numitems').value = 10}; generateMinecraftBlocks()">
48 </div>
49
50 <div class="input-group my-3">
51 <span class="input-group-text">Width</span>
52 <input type="number" class="form-control" id="widthitems" placeholder="Width of blocks" value="1" onchange="var a = parseInt(event.target.value); if(!isNaN(a)) {widthItems = a} else {widthItems = 1; document.getElementById('widthitems').value = 1}; generateMinecraftBlocks()">
53 </div>
54
55 <div class="input-group my-3">
56 <span class="input-group-text">Offset</span>
57 <input type="number" class="form-control" id="offsetitems" placeholder="Random offset for blocks" value="0" onchange="var a = parseFloat(event.target.value); if(!isNaN(a)) {offsetItems = a} else {offsetItems = 0; document.getElementById('offsetitems').value = 0}; generateMinecraftBlocks()">
58 </div>
59 </div>
60 <div class="form-check form-switch">
61 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked value="true" onclick="onlySolids = this.checked; console.log(onlySolids); generateMinecraftBlocks()">
62 <label class="form-check-label" style="width: 100px" for="flexSwitchCheckChecked">Only solids</label>
63 </div>
64
65 <div id="minecraft-group" class="d-flex">
66
67 </div>
68 </div>
69 <div class="card-footer">
70
71 </div>
72 </div>
73 <script src="minecraft-gradient/block.js"></script>
74 <script src="minecraft-gradient/script.js"></script>
75 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
76</body>
77</html>