candifloss/tile_pattern_gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic styling

Browse Source
This commit is contained in:
Candifloss 2026-08-08 16:30:12 +05:30
parent c79c0a84b3
commit 4c5067072f
2 changed files with 109 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -4,10 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tile Painter</title> <title>Tile Painter</title>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div> <canvas id="canvas"></canvas>
<div class="controls">
<label> <label>
Width Width
<input id="width" type="number" value="512" min="1"> <input id="width" type="number" value="512" min="1">
@ -19,9 +23,7 @@
</label> </label>
<button id="resize">Resize</button> <button id="resize">Resize</button>
</div>
<div>
<label> <label>
Color Color
<input id="color" type="color" value="#000000"> <input id="color" type="color" value="#000000">
@ -33,8 +35,6 @@
</label> </label>
</div> </div>
<canvas id="canvas"></canvas>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>

100
styles.css Normal file
View File

@ -0,0 +1,100 @@
/* reset */
body {
margin: 0;
font-family: sans-serif;
overflow: hidden;
background: #303030;
}
/* canvas */
canvas {
margin: 20px;
object-fit: contain;
}
/* bottom control bar */
.controls {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
box-sizing: border-box;
align-items: center;
background: rgba(97, 97, 97, 0.68);
backdrop-filter: blur(6px);
z-index: 10;
}
.controls label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #ccc;
opacity: 0.8;
}
.controls input,
.controls button {
font: inherit;
font-size: 12px;
padding: 4px;
background: #70707023;
color: #eee;
border: 1px solid #444;
border-radius: 4px;
}
.controls input:hover,
.controls button:hover {
background: #99999934;
}
/* number inputs */
.controls input[type="number"] {
width: 60px;
-moz-appearance: textfield;
}
.controls input::-webkit-outer-spin-button,
.controls input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* color picker */
.controls input[type="color"] {
width: 32px;
height: 24px;
padding: 2px;
}
/* buttons */
.controls button {
cursor: pointer;
background-color: #26869c94;
}
.controls button:hover {
color: #ffffff;
background-color: #135e6ea8;
}
.controls button:active {
color: #ffffff;
background-color: #06677cef;
}