50 lines
1.9 KiB
HTML
50 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Instagram Formatter</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</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/*" multiple required>
|
|
<button type="submit">Upload and Format</button>
|
|
</form>
|
|
|
|
<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>
|
|
|
|
<div id="download-all-container" style="text-align: center; margin-top: 20px;">
|
|
<button id="download-all" style="display: none;">Download All</button>
|
|
</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">
|
|
|
|
<label for="anti-aliasing">AntiAliasing:</label>
|
|
<input type="checkbox" id="anti-aliasing" name="anti-aliasing" checked>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|