Steven/InstagramFormatterWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added custom params, batch uploads, and progess bars

Browse Source
This commit is contained in:
Steven Tracey
2024-08-23 11:30:52 -04:00
parent b37592e57e
commit 56b6e80e3e
4 changed files with 331 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@@ -8,20 +8,38 @@
</head>
<body>
<div class="container">
<div id="progress-container"></div>
<div id="error-message" style="color: red; text-align: center; display: none;">You can only upload up to 10 images.</div>
<h1>Instagram Formatter</h1>
<form id="uploadForm">
<input type="file" id="imageInput" name="image" accept="image/*" required>
<input type="file" id="imageInput" name="image" accept="image/*" multiple required>
<button type="submit">Upload and Format</button>
</form>
<div class="card">
<a id="card" href="#"></a>
<div id="done-imgs" class="card">
<a class="card-link" id="card" href="#">
<img class="card-img" id="cardImg" alt="Formatted Image Preview" src="assets/preview.png"/>
</a>
</div>
<!--
<a id="card" style="display: none;">Download Formatted Image</a>
<div id="download-all-container" style="text-align: center; margin-top: 20px;">
<button id="download-all" style="display: none;">Download All</button>
</div>
<div id="preview"></div>
-->
<button type="button" class="collapsible">Advanced </button>
<div class="content">
<label for="color">Color:</label>
<input type="color" id="color" name="color" placeholder="Enter color" value="#ffffff">
<label for="width">Width:</label>
<input type="text" id="width" name="width" placeholder="Enter width" value="1080">
<label for="height">Height:</label>
<input type="text" id="height" name="height" placeholder="Enter height" value="1080">
<label for="min-border">Minimum Border:</label>
<input type="text" id="min-border" name="min-border" placeholder="Enter minimum border" value="16">
</div>
</div>
<script src="script.js"></script>
</body>