diff options
| author |   Andrew Opalach <andrew@akon.city>
| 2025-12-12 15:39:20 -0500 |
|---|---|---|
| committer | Andrew Opalach <andrew@akon.city>
| 2025-12-12 15:39:20 -0500 |
| commit | e7747d48a2b9d5f172be9e7102c3ac5e9d22f9dd (patch) | |
| tree | e4d31670b001d34ac60b9946b7294344dbc92537 /website/static | |
| parent | 4479a8801e3c2aa901cd1499f459272805472222 (diff) | |
| download | modpacks-master.tar.gz modpacks-master.tar.bz2 modpacks-master.zip | |
Diffstat (limited to 'website/static')
| -rw-r--r-- | website/static/index.html | 5 | ||||
| -rw-r--r-- | website/static/index.js | 34 | ||||
| -rw-r--r-- | website/static/style.css | 9 | ||||
| -rw-r--r-- | website/static/template.html | 4 |
4 files changed, 38 insertions, 14 deletions
diff --git a/website/static/index.html b/website/static/index.html index 6394fcf..73d5cb9 100644 --- a/website/static/index.html +++ b/website/static/index.html @@ -8,13 +8,14 @@ </head> <body onload="init()"> <div id="main"> - <img id="preview" src=""> + <img id="preview" src="" onload="this.style.display='inherit'" onerror="this.style.display='none'"/> + <p id="status"/></p> <div id="input"> <input id="username" type="text" placeholder="Username"/> <input id="file" type="file"/> </div> <div id="resources"> - <form action="http://<IP>:12444/static/template.html" method="get"> + <form action="/static/template.html" method="get"> <button type="submit">Get Template</button> </form> <form action="https://api.labymod.net/capes/capecreator/" method="get" target="_blank"> diff --git a/website/static/index.js b/website/static/index.js index 22bfc20..869eb0b 100644 --- a/website/static/index.js +++ b/website/static/index.js @@ -1,25 +1,39 @@ -const IP = "http://<IP>:12444"; +function onUsernameChanged(usernameInput) { + var preview = document.getElementById('preview'); + if (!usernameInput.value) { + preview.src = ''; + return false; + } + preview.src = '/static/capes/' + usernameInput.value + '.png?t=' + new Date().getTime(); + return true; +} function init() { - document.getElementById('file').addEventListener('change', handleFileSelect, false); + var filePicker = document.getElementById('file'); + filePicker.addEventListener('change', handleFileSelect, false); + var usernameInput = document.getElementById('username'); + filePicker.disabled = !onUsernameChanged(usernameInput); + usernameInput.addEventListener('input', (event) => { + filePicker.disabled = !onUsernameChanged(event.target); + }); } function handleFileSelect(event) { - var username = document.getElementById('username').value - if (!username) { - return; - } + var username = document.getElementById('username').value; + if (!username) return; const reader = new FileReader(); - const url = IP + '/capes'; var formData = new FormData(); formData.append('username', username); formData.append('data', event.target.files[0]); - fetch(url, { - method : "POST", + fetch('/capes', { + method : 'POST', body: formData }).then((response) => { if (response.ok) { - document.getElementById('preview').src = IP + '/static/capes/' + username + '.png'; + document.getElementById('preview').src = '/static/capes/' + username + '.png?t=' + new Date().getTime(); + document.getElementById('status').innerText = 'Upload success.'; + } else { + document.getElementById('status').innerText = 'Failed to upload cape. Image not a .png? or greater than 1024x1024?'; } }); } diff --git a/website/static/style.css b/website/static/style.css index 242ced7..0bab63f 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -14,6 +14,15 @@ image-rendering: pixelated; } +#status { + margin: inherit; + padding: 4px; +} + +#status:empty { + display: none; +} + #template { width: 100%; display: flex; diff --git a/website/static/template.html b/website/static/template.html index f7d62de..dade2f9 100644 --- a/website/static/template.html +++ b/website/static/template.html @@ -7,7 +7,7 @@ </head> <body> <div id="template"> - <img id="preview" src="http://<IP>:12444/static/template.png"/> + <img id="preview" src="/static/template.png"/> <ul> <div class="input-color"> <p>Top</p> @@ -48,7 +48,7 @@ </ul> </div> <div id="desc"> - <p>Right click and "Save Image As...", edit, then upload <a href="http://<IP>:12444/capes">here</a>.</p> + <p>Right click and "Save Image As...", edit, then upload <a href="/capes">here</a>.</p> <p>If you don't want to edit the Elytra texture, you can crop it out.</p> <p>Feel free to scale. Only use integer scaling (Multiply width/height by a whole number).</p> </div> |