diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/InstagramFormatterWeb.iml b/.idea/InstagramFormatterWeb.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/InstagramFormatterWeb.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..b3cf36f
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..693a816
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Instagram Formatter
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ee868fb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,42 @@
+document.getElementById('uploadForm').addEventListener('submit', async function (event) {
+ event.preventDefault();
+
+ const formData = new FormData();
+ const imageInput = document.getElementById('imageInput').files[0];
+
+ if (!imageInput) {
+ alert("Please select an image to upload.");
+ return;
+ }
+
+ formData.append('image', imageInput);
+
+ try {
+ const response = await fetch('https://dev.nevets.tech/igformatter/upload', {
+ method: 'POST',
+ body: formData
+ });
+
+ if (!response.ok) {
+ throw new Error('Image upload failed');
+ }
+
+ const arrayBuffer = await response.arrayBuffer();
+ downloadImage(arrayBuffer);
+
+ } catch (error) {
+ console.error('Error:', error);
+ alert('There was an error processing your image.');
+ }
+});
+
+function downloadImage(arrayBuffer) {
+ const blob = new Blob([arrayBuffer], { type: "image/png" });
+ const cardElement = document.getElementById("card");
+
+ let urlCreator = window.URL || window.webkitURL;
+ cardElement.href = urlCreator.createObjectURL(blob);
+ cardElement.style.display = 'unset';
+ cardElement.download = "formatted_image.png";
+ cardElement.click();
+}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..d6fa938
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,57 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+
+.container {
+ background: white;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+h1 {
+ margin-bottom: 20px;
+ color: #333;
+}
+
+input[type="file"] {
+ margin-bottom: 15px;
+}
+
+button {
+ background-color: #1da1f2;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #0a85d9;
+}
+
+#card {
+ margin-top: 20px;
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #28a745;
+ color: white;
+ border-radius: 5px;
+ text-decoration: none;
+}
+
+#card:hover {
+ background-color: #218838;
+}
+
+#preview {
+ margin-top: 20px;
+}