diff --git a/Images/add.png b/Images/add.png index 3a8c91f..24c319a 100644 Binary files a/Images/add.png and b/Images/add.png differ diff --git a/Images/add_pwa_desktop.png b/Images/add_pwa_desktop.png index 6bc8b4a..58f8fee 100644 Binary files a/Images/add_pwa_desktop.png and b/Images/add_pwa_desktop.png differ diff --git a/Images/add_pwa_phone.png b/Images/add_pwa_phone.png index 3daec98..60f1a2f 100644 Binary files a/Images/add_pwa_phone.png and b/Images/add_pwa_phone.png differ diff --git a/Images/collage.png b/Images/collage.png index 07ec4d8..ad3ac23 100644 Binary files a/Images/collage.png and b/Images/collage.png differ diff --git a/Images/convert.png b/Images/convert.png index fe711be..0ace973 100644 Binary files a/Images/convert.png and b/Images/convert.png differ diff --git a/Images/convert24.png b/Images/convert24.png index 7896eac..3bc0bfd 100644 Binary files a/Images/convert24.png and b/Images/convert24.png differ diff --git a/Images/convert32.png b/Images/convert32.png index 1f1b9cf..b340f87 100644 Binary files a/Images/convert32.png and b/Images/convert32.png differ diff --git a/Images/convert48.png b/Images/convert48.png index 572956c..6f5288c 100644 Binary files a/Images/convert48.png and b/Images/convert48.png differ diff --git a/Images/convert64.png b/Images/convert64.png new file mode 100644 index 0000000..3e26100 Binary files /dev/null and b/Images/convert64.png differ diff --git a/Images/dog5.jpg b/Images/dog5.jpg index 90dcf47..d008e1c 100644 Binary files a/Images/dog5.jpg and b/Images/dog5.jpg differ diff --git a/Images/download.png b/Images/download.png index 70a5381..a857642 100644 Binary files a/Images/download.png and b/Images/download.png differ diff --git a/Images/drag_and_drop.png b/Images/drag_and_drop.png index 225e369..b6ff500 100644 Binary files a/Images/drag_and_drop.png and b/Images/drag_and_drop.png differ diff --git a/Images/file_conversion.png b/Images/file_conversion.png index 4e0ddf4..0b21784 100644 Binary files a/Images/file_conversion.png and b/Images/file_conversion.png differ diff --git a/Images/gif.png b/Images/gif.png index b3aa60b..563eec5 100644 Binary files a/Images/gif.png and b/Images/gif.png differ diff --git a/Images/img_and_video.png b/Images/img_and_video.png index ac46cb9..37e50f7 100644 Binary files a/Images/img_and_video.png and b/Images/img_and_video.png differ diff --git a/Images/leaf.svg b/Images/leaf.svg index bc9dc6a..ff36d3a 100644 --- a/Images/leaf.svg +++ b/Images/leaf.svg @@ -1,55 +1 @@ - - - - - - - - - - - - - - - image/svg+xml - - - - - Openclipart - - - plane tree autumn leaf - 2008-02-20T00:53:14 - autumn, clip art, clipart, colour, fall, green, leaf, plane tree leaf, plant, rust, silhouette, - http://openclipart.org/detail/14536/plane-tree-autumn-leaf-by-kattekrab - - - kattekrab - - - - - autumn - clip art - clipart - colour - fall - green - leaf - plane tree leaf - plant - rust - silhouette - - - - - - - - - - - + \ No newline at end of file diff --git a/Images/note.png b/Images/note.png index 80f7fe0..af08b93 100644 Binary files a/Images/note.png and b/Images/note.png differ diff --git a/Images/star.svg b/Images/star.svg index 9d62684..8726c9f 100644 --- a/Images/star.svg +++ b/Images/star.svg @@ -1,154 +1 @@ - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - Openclipart - - - star - 2013-11-20T18:55:50 - yellow star - https://openclipart.org/detail/188950/star-by-crisg-188950 - - - crisg - - - - - 2D - icon - star - - - - - - - - - - - + \ No newline at end of file diff --git a/Images/stars.svg b/Images/stars.svg index ca4f350..81efc8a 100644 --- a/Images/stars.svg +++ b/Images/stars.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/Images/upload.png b/Images/upload.png index c5fd413..0b3d4cf 100644 Binary files a/Images/upload.png and b/Images/upload.png differ diff --git a/Pages/For Images/collageCreator.html b/Pages/For Images/collageCreator.html deleted file mode 100644 index 655ec91..0000000 --- a/Pages/For Images/collageCreator.html +++ /dev/null @@ -1,574 +0,0 @@ - - - - - - - - - - - MediaCraft Pro - Get stunning photo collages from our limited collection - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Create your custimized photo collages -

-

- Unleash your creativity with our photo collage creator. Choose from a - variety of grid templates, upload your photos, and create personalized - collages in minutes. - ✓ Best For Small Media Files. Start transforming today! - -

- -

- Select your collage -

-
-
-

How to use it?

- -
    -
  • Choose your collage.
    • -
  • - Upload or drag and drop the necessary number of images - corresponding to the selected template. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
- -
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
- -
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
- -
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
-
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
-
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
-
-

- -
-
- -
-
- MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image - MediaCraft Placeholder Image -
-
-

- -
-
-
-
-
- - - - - - - - diff --git a/Pages/For Images/convertToAVIF.html b/Pages/For Images/convertToAVIF.html deleted file mode 100644 index 8079382..0000000 --- a/Pages/For Images/convertToAVIF.html +++ /dev/null @@ -1,288 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to convert images to AVIF format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your images in AVIF format -

-

- Our user-friendly interface makes it easy to convert your images. Get - started now and discover the endless possibilities for transforming your - image files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • ✔ Converts supported file type to AVIF.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Images to AVIF only -

-

Supported Formats: JPG, PNG, WEBP

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert JPG to AVIF - Convert PNG to AVIF - Convert WEBP to AVIF -
-
-
-
- - - - - - - - diff --git a/Pages/For Images/convertToJPG.html b/Pages/For Images/convertToJPG.html deleted file mode 100644 index 7ba81e6..0000000 --- a/Pages/For Images/convertToJPG.html +++ /dev/null @@ -1,288 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to convert images to JPG format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your images in JPG format -

-

- Our user-friendly interface makes it easy to convert your images. Get - started now and discover the endless possibilities for transforming your - image files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • ✔ Converts supported file type to JPG.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Images to JPG only -

-

Supported Formats: PNG, WEBP, AVIF

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVIF to JPG - Convert PNG to JPG - Convert WEBP to JPG -
-
-
-
- - - - - - - - diff --git a/Pages/For Images/convertToPNG.html b/Pages/For Images/convertToPNG.html deleted file mode 100644 index 735fc58..0000000 --- a/Pages/For Images/convertToPNG.html +++ /dev/null @@ -1,288 +0,0 @@ - - - - - - - - - - - ediaCraft PRO - Free online tool to convert images to PNG format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your images in PNG Format -

-

- Our user-friendly interface makes it easy to convert your images. Get - started now and discover the endless possibilities for transforming your - image files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • ✔ Converts supported file type to PNG.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Images to PNG only -

-

Supported Formats: JPG, WEBP, AVIF

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVIF to PNG - Convert JPG to PNG - Convert WEBP to PNG -
-
-
-
- - - - - - - - diff --git a/Pages/For Images/convertToWEBP.html b/Pages/For Images/convertToWEBP.html deleted file mode 100644 index d13ed4c..0000000 --- a/Pages/For Images/convertToWEBP.html +++ /dev/null @@ -1,289 +0,0 @@ - - - - - - - - - - - - ediaCraft PRO - Free online tool to convert images to WEBP format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your images in WEBP Format -

-

- Our user-friendly interface makes it easy to convert your images. Get - started now and discover the endless possibilities for transforming your - image files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • ✔ Converts supported file type to WEBP.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Images to WEBP only -

-

Supported Formats: JPG, PNG, AVIF

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVIF to WEBP - Convert JPG to WEBP - Convert PNG to WEBP -
-
-
-
- - - - - - - - diff --git a/Pages/For Images/gifCreator.html b/Pages/For Images/gifCreator.html deleted file mode 100644 index 3d3505c..0000000 --- a/Pages/For Images/gifCreator.html +++ /dev/null @@ -1,420 +0,0 @@ - - - - - - - - - - - MediaCraft Pro - Free online tool to animate your moments with GIFs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Animate Your Moments with out GIF creator -

-

- Bring your photos and videos to life with GIFs. Create GIFs from your - photos or videos, set the animation speed, and share your memorable - moments in a dynamic format. - ✓ Best For Small Media Files. Start animating your moments - today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple media files. -
    • -
  • - Supported Image Formats: JPG, PNG, WEBP, AVIF. (Max Size: 5MB per - file) -
    • -
  • - Supported Video Formats: MP4, MOV, WEBM, MKV. (Max Size: 10MB per - file) -
    • -
  • Edit your GIF.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Create animated GIFs from your photos or videos -

-

- Supported Image Formats: JPG, PNG, WEBP, AVIF -

-

- Supported Video Formats: MP4, MOV, WEBM, MKV -

- - - - -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - - -
- -
-
-
-
-
-
-
-
- - - - - - - - diff --git a/Pages/For Images/imageConverter.html b/Pages/For Images/imageConverter.html deleted file mode 100644 index 8a132ac..0000000 --- a/Pages/For Images/imageConverter.html +++ /dev/null @@ -1,311 +0,0 @@ - - - - - - - - - - MediaCraft Pro - Free online tool to convert your images - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Start converting your images today -

-

- Our user-friendly interface makes it easy to convert your images. Get - started now and discover the endless possibilities for transforming your - image files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • Select required format.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
- -
-

Convert Your Images

-

Supported Formats: JPG, PNG, WEBP, AVIF

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- - Convert AVIF to JPG - Convert PNG to JPG - Convert WEBP to JPG -
- -
- Convert AVIF to PNG - Convert JPG to PNG - Convert WEBP to PNG -
- -
- Convert JPG to AVIF - Convert PNG to AVIF - Convert WEBP to AVIF -
- -
- Convert AVIF to WEBP - Convert JPG to WEBP - Convert PNG to WEBP -
-
-
-
- - - - - - - - diff --git a/Pages/For Images/imageEditor.html b/Pages/For Images/imageEditor.html deleted file mode 100644 index 30ff609..0000000 --- a/Pages/For Images/imageEditor.html +++ /dev/null @@ -1,495 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to edit and enhance your images - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - - -
- CLOSE -

- Our browser-based app may experience inconsistencies due to external - libraries despite of restricting image size to 5MB per file. If problems - arise, try refreshing the browser or compressing images before uploading - for editing. -
- MediaCraft PRO is optimized for smaller files. Your understanding is - appreciated. -

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Advanced Image Editing | Edit like a PRO -

-

- Enhance your images with our advanced editing tools. Crop, adjust - brightness, contrast, saturation, color balance, and more. Transform - your images into works of art. - ✓ Best For Small Media Files. Start editing today! -

- -
-
-

How to use it?

- -
    -
  • Upload or drag and drop an image file.
    • -
  • Max File Size: 5MB.
    • -
  • Edit your file.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

Edit Your Images

-

- Supported Image Formats: JPG, PNG, WEBP, AVIF -

- -
-

Upload one at a time

- -
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
-
-
- - - - - - - - - - diff --git a/Pages/For Images/removeBackground.html b/Pages/For Images/removeBackground.html deleted file mode 100644 index 5f5d855..0000000 --- a/Pages/For Images/removeBackground.html +++ /dev/null @@ -1,295 +0,0 @@ - - - - - - - - - - MediaCraft Pro - Free online tool to remove photo backgrounds - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - - -
- CLOSE -

- We have integrated the RemoveBg's API to enable background removal on - our website. However, our free trial has expired and the API requests - will only be accepted if used a paid version of the subscription. -
- We are currently looking for an alternative approach. -

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Remove Backgrounds Effortlessly -

-

- Need a clean cutout of your subject? Our background remover tool lets - you seamlessly remove backgrounds from images, making your subjects - stand out. - ✓ Best For Small Media Files. Start enhancing today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple supported image files. -
    • -
  • Supported Formats: JPG/JPEG, PNG, WEBP, AVIF.
    • -
  • Max File Size: 10MB per file.
    • -
  • ✔ Removes background from your images.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Remove background from your photos -

-

Supported Formats: JPG, PNG, WEBP, AVIF

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/convertToAVI.html b/Pages/For Videos/convertToAVI.html deleted file mode 100644 index fe3ef8e..0000000 --- a/Pages/For Videos/convertToAVI.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to convert videos to AVI format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your videos in AVI Format -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • ✔ Converts supported file type to AVI.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Videos To AVI Only -

-

- Supported Formats: MKV, MOV, MP4, WEBM, WMV -

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert MKV to AVI - Convert MOV to AVI - Convert MP4 to AVI - Convert WEBM to AVI - Convert WMV to AVI -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/convertToMKV.html b/Pages/For Videos/convertToMKV.html deleted file mode 100644 index 3949b77..0000000 --- a/Pages/For Videos/convertToMKV.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to convert videos to MKV format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your videos in MKV Format -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • ✔ Converts supported file type to MKV.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Videos To MKV Only -

-

- Supported Formats: AVI, MOV, MP4, WEBM, WMV -

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVI to MKV - Convert MOV to MKV - Convert MP4 to MKV - Convert WEBM to MKV - Convert WMV to MKV -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/convertToMOV.html b/Pages/For Videos/convertToMOV.html deleted file mode 100644 index 2214da9..0000000 --- a/Pages/For Videos/convertToMOV.html +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - - - - - MediaCraft PRO - Free online tool to convert videos to MOV format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your videos in MOV Format -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • ✔ Converts supported file type to MOV.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Videos To MOV Only -

-

- Supported Formats: AVI, MKV, MP4, WEBM, WMV -

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVI to MOV - Convert MKV to MOV - Convert MP4 to MOV - Convert WEBM to MOV - Convert WMV to MOV -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/convertToMP4.html b/Pages/For Videos/convertToMP4.html deleted file mode 100644 index 278c5f0..0000000 --- a/Pages/For Videos/convertToMP4.html +++ /dev/null @@ -1,299 +0,0 @@ - - - - - - - - - - - - MediaCraft PRO - Free online tool to convert videos to MP4 format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your videos in MP4 Format -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • ✔ Converts supported file type to MP4.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Videos To MP4 Only -

-

- Supported Formats: AVI, MKV, MOV, WEBM, WMV -

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVI to MP4 - Convert MKV to MP4 - Convert MOV to MP4 - Convert WEBM to MP4 - Convert WMV to MP4 -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/convertToWEBM.html b/Pages/For Videos/convertToWEBM.html deleted file mode 100644 index 93911c4..0000000 --- a/Pages/For Videos/convertToWEBM.html +++ /dev/null @@ -1,297 +0,0 @@ - - - - - - - - - - - - MediaCraft PRO - Free online tool to convert videos to WEBM format - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-

- Get your videos in WEBM Format -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • ✔ Converts supported file type to WEBM.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

- Convert Videos To WEBM Only -

-

Supported Formats: AVI, MKV, MOV, MP4, WMV

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert AVI to WEBM - Convert MKV to WEBM - Convert MOV to WEBM - Convert MP4 to WEBM - Convert WMV to WEBM -
-
-
-
- - - - - - - - diff --git a/Pages/For Videos/videoConverter.html b/Pages/For Videos/videoConverter.html deleted file mode 100644 index d30b705..0000000 --- a/Pages/For Videos/videoConverter.html +++ /dev/null @@ -1,353 +0,0 @@ - - - - - - - - - - MediaCraft Pro - Free online tool to convert your videos - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- -

MENU

-
- -
-

- Start converting your videos today -

-

- Our user-friendly interface makes it easy to convert your videos. Get - started now and discover the endless possibilities for transforming your - video files. - ✓ Best For Small Media Files. Start converting today! -

- -
-
-

How to use it?

- -
    -
  • - Upload or drag and drop one or multiple video files. -
    • -
  • - Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV, MTS. -
    • -
  • Max File Size: 100MB per file.
    • -
  • Select required format.
    • -
  • Download.
    • -
- -

- Please note that a file may not preview due to an unsupported - format. -

-
-
-

Convert Your Videos

-

- Supported Formats: AVI, MKV, MOV, MP4, WEBM, WMV -

- -
-
- Drag and Drop -

Drag and Drop

-
- -

OR

- - - -
- -
- -
-
HERE
- Convert MKV to AVI - Convert MOV to AVI - Convert MP4 to AVI - Convert WEBM to AVI - Convert WMV to AVI -
- -
- Convert AVI to MKV - Convert MOV to MKV - Convert MP4 to MKV - Convert WEBM to MKV - Convert WMV to MKV -
- -
- Convert AVI to MOV - Convert MKV to MOV - Convert MP4 to MOV - Convert WEBM to MOV - Convert WMV to MOV -
- -
- Convert AVI to MP4 - Convert MKV to MP4 - Convert MOV to MP4 - Convert WEBM to MP4 - Convert WMV to MP4 -
- -
- Convert AVI to WEBM - Convert MKV to WEBM - Convert MOV to WEBM - Convert MP4 to WEBM - Convert WMV to WEBM -
-
-
-
- - - - - - - - diff --git a/collage.css b/collage.css deleted file mode 100644 index 68d8b57..0000000 --- a/collage.css +++ /dev/null @@ -1,284 +0,0 @@ -.image_grid_section { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - grid-template-rows: auto; - grid-gap: 1rem; - position: relative; - width: 100%; - z-index: 1; -} - -.image_grid_container { - overflow-x: hidden; - display: grid; - place-items: center; - margin: 0.75rem; - padding: 0.75rem; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - background: #e2e2e2; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; -} - -.image_grid { - width: 100%; - height: 100%; - display: grid; - place-items: center; - margin: auto; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - border: 2px solid #efefef; - background: #fff url("./Images/stars.svg") center/cover; -} - -.image_grid_2 { - background: #fff url("./Images/star.svg") center/cover; -} - -.image_grid_3, -.image_grid_4 { - background: #fff url("./Images/leaf.svg") center/cover; -} - -.image_grid_5, -.image_grid_6 { - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(3, 1fr); - background: #fff url("./Images/dog.svg") center/cover; -} - -.image_grid_7 { - background: #fff url("./Images/grass.svg") center/cover; -} - -.image_grid img { - width: 100%; - /* height: 100%; */ - object-fit: cover; - border: 2px solid #efefef; -} - -.images_count, -.select_collage_btn { - background: #ffc107; - border: none; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; -} - -.images_count { - background: #e2e2e2; -} - -/* image_grid_1 */ -.image_grid_1 img:nth-child(1) { - grid-column: 1/3; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_1 img:nth-child(2) { - grid-column: 3/4; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_1 img:nth-child(3) { - border: 2px solid #efefef; -} - -.image_grid_1 img:nth-child(4) { - grid-column: 2/4; - grid-row: 2/3; - border: 2px solid #efefef; -} -/* end of image_grid_1 */ - -/* image_grid_2 */ -.image_grid_2 img:nth-child(1) { - grid-column: 1/4; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_2 img:nth-child(2) { - grid-column: 1/2; - border: 2px solid #efefef; -} - -.image_grid_2 img:nth-child(3) { - grid-column: 2/3; - grid-row: 2/3; - border: 2px solid #efefef; -} - -.image_grid_2 img:nth-child(4) { - border: 2px solid #efefef; -} -/* end of image_grid_2 */ - -/* image_grid_3 */ -.image_grid_3 img:nth-child(1) { - grid-column: 1/3; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_3 img:nth-child(2) { - grid-column: 3/4; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_3 img:nth-child(3) { - grid-column: 1/3; - grid-row: 2/3; - border: 2px solid #efefef; -} - -.image_grid_3 img:nth-child(4) { - border: 2px solid #efefef; -} -/* end of image_grid_3 */ - -/* image_grid_4 */ -.image_grid_4 img:nth-child(1) { - grid-column: 1/2; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_4 img:nth-child(2) { - grid-column: 2/3; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_4 img:nth-child(3) { - grid-column: 3/4; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_4 img:nth-child(4) { - grid-column: 1/4; - grid-row: 2/3; - border: 2px solid #efefef; -} -/* end of image_grid_4 */ - -/* image_grid_5 */ -.image_grid_5 img:nth-child(1) { - grid-column: 1/3; - grid-row: 1/3; - border: 2px solid #efefef; -} - -.image_grid_5 img:nth-child(2) { - grid-column: 3/5; - grid-row: 1/3; - border: 2px solid #efefef; -} - -.image_grid_5 img:nth-child(3) { - grid-column: 5/7; - grid-row: 1/3; - border: 2px solid #efefef; -} - -.image_grid_5 img:nth-child(4) { - grid-column: 1/4; - grid-row: 3/4; - border: 2px solid #efefef; -} - -.image_grid_5 img:nth-child(5) { - grid-column: 4/7; - grid-row: 3/4; - border: 2px solid #efefef; -} -/* end of image_grid_5 */ - -/* image_grid_6 */ -.image_grid_6 img:nth-child(1) { - grid-column: 1/3; - grid-row: 1/3; - border: 2px solid #efefef; -} - -.image_grid_6 img:nth-child(2) { - grid-column: 3/5; - grid-row: 1/2; - border: 2px solid #efefef; -} - -.image_grid_6 img:nth-child(3) { - grid-column: 5/7; - grid-row: 1/3; - border: 2px solid #efefef; -} - -.image_grid_6 img:nth-child(4) { - grid-column: 1/4; - grid-row: 3/4; - border: 2px solid #efefef; -} - -.image_grid_6 img:nth-child(5) { - grid-column: 3/5; - grid-row: 2/4; - border: 2px solid #efefef; -} - -.image_grid_6 img:nth-child(6) { - grid-column: 5/7; - grid-row: 3/4; - border: 2px solid #efefef; -} -/* end of image_grid_6 */ - -.image_grid_7 img:nth-child(8) { - grid-column: 2/4; - grid-row: 3/4; - border: 2px solid #efefef; -} - -.popup_selected_collage { - position: fixed; - top: 8%; - left: 0; - width: 100%; - height: 93vh; - overflow-y: auto; - z-index: 1001; - background: url("./Images/mediacraft_logo_watermark.png") center/contain; - padding: 1rem; -} - -.drag_and_drop_div { - display: grid; - margin: 2rem auto !important; - background: #fff; - box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, - rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; - border: 2px solid #c5b8b8; -} - -.popup_selected_collage .image_grid { - width: 100%; - max-width: 400px; - margin-top: 2rem; -} - -.close_btn { - position: absolute; - top: 0; - right: 0; - padding-right: 0.5rem; - cursor: pointer; -} - -@media screen and (max-width: 768px) { - .popup_selected_collage .image_grid { - width: 100%; - } -} diff --git a/features.html b/features.html deleted file mode 100644 index 92df10c..0000000 --- a/features.html +++ /dev/null @@ -1,338 +0,0 @@ - - - - - - - - - - MediaCraft Pro - Features media conversion, editing and more - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-
-

- MediaCraft Pro | One tool - many advantage -

- -
-
    -
  • ✓ Best For Small Media Files
    • -
  • ✓ No Quality Loss
    • -
  • ✓ Fast And Instant
    • -
-
    -
  • ✓ Max Image Size: 15MB
    • -
  • ✓ Max Video Size: 100MB
    • -
  • ✓ High Quality Results
    • -
-
- -
-
-

- Ease of Use -

-

- MediaCraft Pro offers a user-friendly interface that allows users - to perform a range of image and media conversion tasks without the - need for complex software installations. -

-
- -
-

- No account or SignUp required -

-

- Free and easy to use, MediaCraft Pro is requires no account or - subscription. You can simply drap and drop or upload and see the - result. -

-
- -
-

- No Software Installation Required -

-

- Being browser-based, users can access MediaCraft Pro from any - device with an internet connection, eliminating the need for - software installation and compatibility issues. -

-
- -
-

- Client-Side Processing -

-

- All processing takes place on the client's device, ensuring data - privacy and avoiding the need to upload sensitive media to - external servers. -

-
- -
-

- Limitation Control -

-

- Limitations on GIF creation (size and number of photos), video - uploads, and more allow users to manage their creations - effectively. -

-
- -
-

- Dependent on Client Device -

-

- Processing speed and quality depend on the user's device - specifications, which might lead to varying outcomes. Nonetheless, - Typically Swift. -

-
-
-
-
- - - - - - diff --git a/index.html b/index.html deleted file mode 100644 index 9fdf74a..0000000 --- a/index.html +++ /dev/null @@ -1,509 +0,0 @@ - - - - - - - - - - - MediaCraft Pro - Free image & video converter, editor, GIF maker & more - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Loading...

-
- - -
-
-
- - MediaCraft Pro Logo - MediaCraft Pro - -
- - - -

MENU

-
- -
-
-
-

- Transform Your Media Files with Our Online Tool -

-

- One Stop for everyone -

-

- ✓ Best For Small Media Files. Start converting, editing - and transforming today! - -

-

- Convert your images and videos to various formats, edit images with - advanced tools, create GIFs, and design stunning photo collages. Our - online tool offers a range of features to enhance and transform your - media files effortlessly. -

-
- - MediaCraft Pro Logo -
- -
-
-

Ready to get started ?

-

- Begin your media transformation journey today. Convert, edit, and - create with ease using our online free tool. - Start now! -

-
- -
-

Try it for free

-
- - For Images - - - For Videos - -
-
-
- -
-

Our Services

-

- Explore a range of services to enhance your media files: -

- -
- -
- File Conversion -

Online File Conversion

-
- - - -
- Image Editor -

Image Editor

-
- - - -
- GIF -

GIF Creation

-
- - - -
- Photo Collage -

Custom Photo Collage

-
- -
-
-
- -
-

FAQs

- -
-

- Why MediaCraft Pro - -

-

- MediaCraft Pro is an all-in-one online tool that empowers you to - effortlessly convert your images and videos to various formats. - Whether you need to change the file type, resize images, or transform - videos, our tool offers a range of features to enhance and optimize - your media files. No SignIn or SignUp required. -

-
- -
-

- What formats does MediaCraft Pro support for images and videos? - -

-

- For images, you can convert between popular formats such as JPEG - (JPG), PNG, AVIF, and WebP. When it comes to videos, you can - seamlessly convert them to formats like QuickTime (MOV), Matroska - Video (MKV), MPEG-4 (MP4), Audio Video Interleave (AVI), and WebM. -

-
- -
-

- Can I edit images before converting them? - -

-

- Absolutely! MediaCraft Pro includes advanced image editing tools. - Crop, adjust brightness, contrast, saturation, and more. Edit your - images like a pro before converting them to the desired format. - Enhance your photos and make them stand out effortlessly -

-
- -
-

- MediaCraft Pro's Limitation! - -

-

- NOTE: MediaCraft Pro operates as a browser-based tool and does not - have a connection to external servers. This means that it cannot - handle native image and video formats that require server-based - processing. However, you can make the most of its capabilities to - convert and optimize your media files directly within your browser, - without the need for server interaction. -

-
- -
-

- UnSupported Files! - -

-

- NOT Supported - X Image Formats: HEIC, SVG, BMP, TIFF, - RAW, NETPMB - X Video Formats: FLV, AVCHD -

-
-
- - - - - - diff --git a/js/backgroundRemover.js b/js/backgroundRemover.js deleted file mode 100644 index 0017282..0000000 --- a/js/backgroundRemover.js +++ /dev/null @@ -1,164 +0,0 @@ -import { validateFile, handleDragDropAndUploadEvents } from "../js/reusable.js"; - -// dom selectors -const popupCautionModal = document.querySelector(".popup_caution_modal"); -const closePopUpBtn = document.querySelector(".close_btn"); -popupCautionModal.classList.add("hidden"); - -const fileInput = document.getElementById("fileInput"); -const fileListDiv = document.querySelector(".file_list_div"); -const fileList = document.createElement("ol"); -fileList.className = "file_list"; - -const imagePreviewDiv = document.createElement("div"); -imagePreviewDiv.classList = "image_preview_div"; - -const imagePreviewBeforeBgRemoved = document.createElement("div"); -imagePreviewBeforeBgRemoved.classList = "image_preview_before"; -const imagePreviewAfterBgRemoved = document.createElement("div"); -imagePreviewAfterBgRemoved.classList = "image_preview_after"; - -imagePreviewDiv.appendChild(imagePreviewBeforeBgRemoved); -imagePreviewDiv.insertAdjacentElement("beforeend", imagePreviewAfterBgRemoved); - -// popup modal -if (popupCautionModal) { - // Initially hide the popup - popupCautionModal.classList.add("hidden"); - document.body.style.overflowY = "hidden"; - popupCautionModal.style.overflowY = "scroll"; - - // Show the popup after 2 seconds - setTimeout(() => { - popupCautionModal.classList.remove("hidden"); - popupCautionModal.classList.add("visible"); - popupCautionModal.style.overflowY = "scroll"; - }, 1500); - - closePopUpBtn.addEventListener("click", () => { - popupCautionModal.remove(); - document.body.style.overflowY = "auto"; - }); -} - -async function handleUploadedFiles(uploadedFiles) { - const loadingElement = document.createElement("p"); - loadingElement.innerHTML = `

${uploadedFiles.length} ${ - uploadedFiles.length > 1 ? "files" : "file" - } - Loading...

`; - - if (uploadedFiles.length > 0) { - fileList.innerHTML = ""; - fileListDiv.innerHTML = ""; - fileListDiv.appendChild(loadingElement); - - const maxImageFileSize = 10 * 1024 * 1024; // 10MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (const file of uploadedFiles) { - console.log(file.type); - const fileName = file.name.split(".")[0]; - - // validate image size and type - if ( - !validateFile( - file, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString, - loadingElement - ) - ) { - return; - } - - const formData = new FormData(); - formData.append("image_file", file); // append the actual File object - formData.append("size", "full"); - - const deCipheredKeys = getDeCipheredKey(); - const mainKey = - deCipheredKeys.k1 + - deCipheredKeys.k2 + - deCipheredKeys.k3 + - deCipheredKeys.k4; - - try { - const response = await fetch("https://api.remove.bg/v1.0/removebg", { - method: "POST", - headers: { - "X-Api-Key": mainKey, - }, - body: formData, - }); - - if (!response.ok) { - throw new Error("Failed to remove background"); - } - - const blob = await response.blob(); - - const imgUrlBefore = URL.createObjectURL(file); - imagePreviewBeforeBgRemoved.innerHTML += `

BEFORE

Image Preview Before`; - - const imgUrlAfter = URL.createObjectURL(blob); - imagePreviewAfterBgRemoved.innerHTML += `

AFTER

Image Preview After`; - - imagePreviewDiv.insertAdjacentElement( - "afterbegin", - imagePreviewBeforeBgRemoved - ); - imagePreviewDiv.insertAdjacentElement( - "beforeend", - imagePreviewAfterBgRemoved - ); - - fileListDiv.insertAdjacentElement("afterbegin", imagePreviewDiv); - - const downloadBtn = document.createElement("a"); - downloadBtn.classList = "download drop_shadow p-2"; - downloadBtn.href = imgUrlAfter; - downloadBtn.download = `${fileName} BG Removed.png`; - downloadBtn.textContent = "Download Image"; - imagePreviewAfterBgRemoved.insertAdjacentElement( - "beforeend", - downloadBtn - ); - } catch (error) { - console.error("Error removing background:", error); - } - } - fileListDiv.removeChild(loadingElement); - } -} - -handleDragDropAndUploadEvents(fileInput, handleUploadedFiles); - -// ciphering the key -const key1 = "mZsqCE"; -const key2 = "UJc5z9"; -const key3 = "7nFS4b"; -const key4 = "tBtJry"; - -function reverseKeyChar(key) { - const reversedKey = key.split("").reverse().join(""); - return reversedKey; -} - -function getDeCipheredKey() { - const k1 = reverseKeyChar(key1); - const k2 = reverseKeyChar(key2); - const k3 = reverseKeyChar(key3); - const k4 = reverseKeyChar(key4); - - return { k1, k2, k3, k4 }; -} diff --git a/js/collageCreator.js b/js/collageCreator.js deleted file mode 100644 index 89c97f8..0000000 --- a/js/collageCreator.js +++ /dev/null @@ -1,214 +0,0 @@ -// user stories -// select the template -// when template is selected show upload pictures input and also the template -// after the pictures are uploaded attach download button to download that collage - -import { validateFile, handleDragDropAndUploadEvents } from "./reusable.js"; - -// cookies on the client-side -document.cookie = "cookieName=cookieValue; SameSite=None; Secure"; - -// dom objects declarations -const imageGridContainers = document.querySelectorAll(".image_grid_container"); - -// image count for collage -const imagesCount = document.querySelectorAll(".images_count"); -imagesCount.forEach((img) => { - const count = img.parentElement.previousElementSibling.children.length; - img.innerText = `${count} images`; -}); - -// popup -const popupSelectedCollage = document.createElement("div"); -popupSelectedCollage.classList = "popup_selected_collage"; - -// close btn -const closeBtn = document.createElement("p"); -closeBtn.classList = "px-2 py-1 close_btn bg-danger text-light "; -closeBtn.setAttribute("style", "font-weight: 700"); -closeBtn.innerHTML = `CLOSE`; - -// download collage button -const downloadCollageBtn = document.createElement("button"); -downloadCollageBtn.setAttribute( - "class", - "medium_text download drop_shadow py-1 px-2 mt-2 bg-success text-light border-dark border border-2" -); -downloadCollageBtn.innerHTML = "Download Collage"; - -// files upload container -const uploadFilesContainer = document.createElement("div"); -uploadFilesContainer.classList = - "d-flex justify-content-center align-items-center flex-column p-3 drag_and_drop_div"; -uploadFilesContainer.innerHTML = ` -
-

- Drag and Drop -

Drag and Drop

-
-
OR
- - - `; - -let imageGrid = null; -let downloadEventListenerAttached = false; - -imageGridContainers.forEach((container) => { - const selectCollageBtn = container.querySelector(".select_collage_btn"); - selectCollageBtn.addEventListener("click", () => { - // Clone the image grid - imageGrid = container.querySelector(".image_grid").cloneNode(true); - - // Insert the popupSelectedCollage, closeBtn and selected imageGrid for view... - popupSelectedCollage.insertAdjacentElement("afterbegin", closeBtn); - popupSelectedCollage.insertAdjacentElement( - "afterbegin", - uploadFilesContainer - ); - uploadFilesContainer.insertAdjacentElement("afterend", imageGrid); - container.insertAdjacentElement("beforebegin", popupSelectedCollage); - uploadFilesContainer.querySelector( - ".images_count_element" - ).innerText = `Add ${imageGrid.children.length} images`; - - if (uploadFilesContainer) { - const closeBtn = popupSelectedCollage.querySelector(".close_btn"); - closeBtn.addEventListener("click", () => { - popupSelectedCollage.remove(); - imageGrid.remove(); - downloadCollageBtn.remove(); - }); - } - - // attach download collage button - if (!downloadEventListenerAttached) { - downloadCollageBtn.addEventListener("click", async () => { - downloadEventListenerAttached = true; - const confirmDownload = confirm("Download your collage image?"); - if (!confirmDownload) { - return; - } else { - window.scrollTo(0, 0); - html2canvas(imageGrid, { - allowTaint: true, - cors: false, - scrollX: -window.scrollX, - scrollY: -window.scrollY, - windowWidth: imageGrid.scrollWidth, - windowHeight: imageGrid.scrollHeight, - }).then(async function (canvas) { - const zip = new JSZip(); - - // convert the canvas to a Blob - const canvasBlob = await new Promise((resolve) => { - canvas.toBlob((blob) => { - resolve(blob); - }); - }); - - // add the canvas image to the zip - zip.file("MediaCraft PRO Collage.png", canvasBlob); - - // generate the zip blob - const zipBlob = await zip.generateAsync({ type: "blob" }); - - // create a download link and trigger the download - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = "MediaCraft_PRO_Collage.zip"; - downloadLink.click(); - }); - } - }); - } - }); -}); - -async function handleUploadedFiles(uploadedFiles) { - const currentRequiredImagesCount = - uploadFilesContainer.nextElementSibling.children.length; - - if (uploadedFiles.length !== currentRequiredImagesCount) { - alert( - `Please upload ${currentRequiredImagesCount} images for the selected collage.` - ); - return; - } - - const maxImageFileSize = 10 * 1024 * 1024; // 10MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (let i = 0; i < uploadedFiles.length; i++) { - const file = uploadedFiles[i]; - - // validate image size and type - if ( - !validateFile( - file, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString - ) - ) { - return; - } - } - - for (let i = 0; i < imageGrid.children.length; i++) { - const reader = new FileReader(); - reader.onload = (e) => { - const imgSrc = e.target.result; - imageGrid.children[i].src = imgSrc; - }; - reader.readAsDataURL(uploadedFiles[i]); - } - - await Promise.all( - Array.from(uploadedFiles).map( - (file) => - new Promise((resolve) => { - const reader = new FileReader(); - reader.onloadend = resolve; - reader.readAsDataURL(file); - uploadFilesContainer.remove(); - }) - ) - ); - imageGrid.insertAdjacentElement("beforebegin", downloadCollageBtn); -} - -// handle collage image upload -if (popupSelectedCollage) { - const fileInput = uploadFilesContainer.querySelector("#fileInput"); - // imported from reusable for upload or drag and drop - handleDragDropAndUploadEvents(fileInput, handleUploadedFiles); -} diff --git a/js/gifCreator.js b/js/gifCreator.js deleted file mode 100644 index 4abb83c..0000000 --- a/js/gifCreator.js +++ /dev/null @@ -1,369 +0,0 @@ -import { validateFile, handleDragDropAndUploadEvents } from "./reusable.js"; - -// dom objects selectors -const selectGIFBtns = document.querySelectorAll(".create_gif"); -const labels = document.querySelectorAll("label"); -const gifContainer = document.querySelector(".gif_container"); -const mediaPreviewDiv = document.getElementById("media_preview_div"); -const gifResultContainer = document.createElement("div"); -const gifImage = document.createElement("img"); - -const createGIFBtn = document.createElement("button"); -createGIFBtn.classList = - "drop_shadow px-3 py-2 m-2 bg-warning text-dark border-dark border border-2"; -createGIFBtn.innerHTML = "Create GIF"; - -const downloadBtn = document.createElement("button"); -downloadBtn.classList = - "drop_shadow download px-3 py-2 m-2 bg-success text-light border-dark border border-2"; -downloadBtn.innerHTML = "Download"; - -const dragAndDropDiv = document.querySelector(".drag_and_drop_div"); -dragAndDropDiv.style.display = "none"; //hide initially - -const gifPreviewDiv = document.getElementById("gif_preview_div"); -gifPreviewDiv.style.display = "none"; //hide initially - -let loadingElement = document.createElement("p"); -loadingElement.classList = "text-center"; - -const gifControlsDiv = document.querySelector("#gif_controls_div"); -gifControlsDiv.style.display = "none"; -gifControlsDiv.innerHTML = ` -
- -
- -
- - - -
- -
- -
-`; - -// gif customization props -let gifTextValue = "MediaCraft PRO GIF"; // default value -let gifIntervalValue = 0.25; // default value -const gifTextInput = gifControlsDiv.querySelector("#gif_text"); -const charCountSpan = gifControlsDiv.querySelector(".char_count"); -const gifIntervalInputs = gifControlsDiv.querySelectorAll("#gif_interval"); -const gifWidth = gifControlsDiv.querySelector("#gif_width"); -const gifHeight = gifControlsDiv.querySelector("#gif_height"); -let maxCharacterExceeded = false; - -// display files loading element -function displayLoadingElement(files) { - loadingElement.innerHTML = `${files.length} ${ - files.length > 1 ? "files" : "file" - } - Loading...`; - mediaPreviewDiv.insertAdjacentElement("beforebegin", loadingElement); -} - -function createGIFFromFiles(fileInput, isVideo) { - selectGIFBtns.forEach((btn) => { - btn.remove(); - }); - dragAndDropDiv.style.display = "flex"; - fileInput.style.display = "block"; - - async function handleUploadedFiles(uploadedFiles) { - displayLoadingElement(uploadedFiles); - - if (uploadedFiles.length > 0) { - for (const file of uploadedFiles) { - if (isVideo) { - console.log(file.type); - const maxVideoFileSize = 10 * 1024 * 1024; // 10MB in bytes - const supportedVideoTypes = [ - "video/mp4", - "video/mkv", - "video/mov", - "video/quicktime", - "video/webm", - ]; - const supportedVideoTypesString = supportedVideoTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - // validate video size and type - for (const file of uploadedFiles) { - if ( - !validateFile( - file, - maxVideoFileSize, - supportedVideoTypes, - supportedVideoTypesString, - loadingElement - ) - ) { - return; - } - } - - const reader = new FileReader(); - reader.onload = (e) => { - const videoSrc = e.target.result; - mediaPreviewDiv.innerHTML += ` - - `; - }; - reader.readAsDataURL(file); - } else { - console.log(file.type); - const maxImageFileSize = 5 * 1024 * 1024; // 5MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - // validate image size and type - for (const file of uploadedFiles) { - if ( - !validateFile( - file, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString, - loadingElement - ) - ) { - return; - } - } - - const reader = new FileReader(); - reader.onload = async (e) => { - const imgsrc = e.target.result; - mediaPreviewDiv.innerHTML += `Preview Image`; - }; - reader.readAsDataURL(file); - } - } - } - - dragAndDropDiv.remove(); - - await Promise.all( - Array.from(uploadedFiles).map( - (file) => - new Promise((resolve) => { - const reader = new FileReader(); - reader.onloadend = resolve; - reader.readAsDataURL(file); - }) - ) - ); - - loadingElement.remove(); // files loader removed - gifControlsDiv.style.display = "flex"; - gifContainer.insertAdjacentElement("afterend", createGIFBtn); - - // get the gif interval value - gifTextInput.addEventListener("input", () => { - const updatedTextValue = getGIFText( - gifTextValue, - gifTextInput, - charCountSpan, - maxCharacterExceeded - ); - gifTextValue = updatedTextValue.textValue; - }); - - if (maxCharacterExceeded) { - return; // exit the function if the character limit was exceeded - } - - // get gif interval value - const updatedIntervalValue = getGIFInterval(gifIntervalInputs); - gifIntervalValue = updatedIntervalValue.intervalValue; - - // create gif - createGIFBtn.addEventListener("click", () => { - const dimensions = getGIFDimensions(gifWidth, gifHeight); - if (dimensions === null) { - return; // exit the function if dimensions are not provided - } - - const gifOptions = { - gifWidth: `${dimensions.width}`, - gifHeight: `${dimensions.height}`, - images: [], // push URLs of the images here - interval: `${gifIntervalValue}`, - frameDuration: 1, // duration of each frame in seconds - numFrames: 10, - text: `${gifTextValue}`, - fontWeight: "bold", - fontSize: "16px", - minFontSize: "10px", - fontFamily: "sans-serif", - fontColor: "#e77200", - textAlign: "center", - textBaseline: "bottom", - sampleInterval: 10, - numWorkers: 2, - }; - - if (isVideo) { - gifOptions.video = []; // push URLs of the videos here - for (const file of uploadedFiles) { - gifOptions.video.push(URL.createObjectURL(file)); - } - gifOptions.keepCameraOn = false; - } else { - for (const file of uploadedFiles) { - gifOptions.images.push(URL.createObjectURL(file)); - } - } - - loadingElement.classList = "content_loader text-center"; - loadingElement.innerHTML = `

GIF Loading...

`; // reusing the loader - gifPreviewDiv.insertAdjacentElement("afterbegin", loadingElement); - - gifshot.createGIF(gifOptions, function (obj) { - if (!obj.error) { - gifImage.src = obj.image; - gifResultContainer.appendChild(gifImage); - gifPreviewDiv.appendChild(gifResultContainer); - } - loadingElement.remove(); // gif loader removed - gifContainer.insertAdjacentElement("afterend", downloadBtn); - }); - - mediaPreviewDiv.remove(); - createGIFBtn.remove(); - gifControlsDiv.remove(); - gifPreviewDiv.style.display = "block"; - }); - - // download gif - if (downloadBtn) { - downloadGIF(gifImage); - } - - gifContainer.insertAdjacentElement("afterend", createGIFBtn); - } - - // imported from reusable.js for upload or drag and drop - handleDragDropAndUploadEvents(fileInput, handleUploadedFiles); -} - -// gif from images -selectGIFBtns[0].addEventListener("click", () => { - createGIFFromFiles(labels[0], false); -}); - -// gif from videos -selectGIFBtns[1].addEventListener("click", () => { - createGIFFromFiles(labels[1], true); -}); - -// ----------------------------------------------------------------------- -// function to download GIF -function downloadGIF(gif) { - downloadBtn.addEventListener("click", async () => { - const imgBlob = await fetch(gif.src).then((response) => response.blob()); - const zip = new JSZip(); - zip.file(`MediaCraft PRO GIF.gif`, imgBlob); - - const zipBlob = await zip.generateAsync({ type: "blob" }); - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = "MediaCraft PRO GIF.zip"; - downloadLink.click(); - }); -} - -// function to get gif text input -function getGIFText(textValue, textInput, countSpan, maxCharacterExceeded) { - const maxCharLength = 50; - const userTextLength = textInput.value.length; - const remainingCharLength = maxCharLength - userTextLength; - countSpan.textContent = Math.max(remainingCharLength, 0); - if (textInput.value.trim() !== "") { - textValue = textInput.value.trim(); - } - - if (userTextLength >= 50) { - alert("Max character limit reached! Please use 50 characters or less."); - maxCharacterExceeded = true; - return; - } - return { textValue }; -} - -// function to get gif interval input -function getGIFInterval(intervalInputs, intervalValue) { - intervalInputs.forEach((option) => { - if (option.value === "slow") { - intervalValue = 0.75; - } else if (option.value === "medium") { - intervalValue = 0.5; - } else if (option.value === "fast") { - intervalValue = 0.25; - } - }); - return { intervalValue }; -} - -// get gif width and height value -function getGIFDimensions(widthInput, heightInput) { - const width = widthInput.value.trim(); - const height = heightInput.value.trim(); - - if (width === "" || height === "") { - if (!confirm("Do you want to leave width or height blank?")) { - return null; // Return null if the user doesn't want to leave them blank - } - return { width: 500, height: 500 }; - } - - // check if dimensions are too small or too large - if (width < 100 || height < 100) { - gifWidth.value = ""; - gifHeight.value = ""; - alert( - "GIF dimensions are too small. Please use dimensions greater than 100x100." - ); - return null; - } - if (width > 1000 || height > 1000) { - gifWidth.value = ""; - gifHeight.value = ""; - alert( - "GIF dimensions are too large. Please use dimensions smaller than 1000x1000." - ); - return null; - } - - return { width, height }; -} diff --git a/js/imageConverter.js b/js/imageConverter.js deleted file mode 100644 index 1836ad2..0000000 --- a/js/imageConverter.js +++ /dev/null @@ -1,167 +0,0 @@ -import { validateFile, handleDragDropAndUploadEvents } from "./reusable.js"; - -const fileInput = document.getElementById("fileInput"); -const fileListDiv = document.querySelector(".file_list_div"); -const loadingElement = document.createElement("p"); -loadingElement.classList = "text-center"; -const fileList = document.createElement("ol"); -fileList.classList = "file_list"; -let downloadAllButton = null; - -// display files loading element -function displayLoadingElement(files) { - loadingElement.innerHTML = `${files.length} ${ - files.length > 1 ? "files" : "file" - } - Loading...`; - fileListDiv.appendChild(loadingElement); -} - -// remove the existing downloadAllButton -function removeDownloadAllButton() { - if (downloadAllButton) { - downloadAllButton.remove(); - downloadAllButton = null; - } -} - -// add the downloadAllButton -function addDownloadAllButton() { - if (!downloadAllButton) { - downloadAllButton = document.createElement("button"); - downloadAllButton.setAttribute( - "class", - "drop_shadow medium_text download py-1 px-2 bg-success text-light border-dark border border-2" - ); - downloadAllButton.innerHTML = "Download All"; - - // ZIP multiple files and download when clicked downloadAllButton... - downloadAllButton.addEventListener("click", async () => { - const formatSelects = fileList.querySelectorAll(".select_img_format"); - const imgTags = fileList.querySelectorAll(".preview_image"); - const zip = new JSZip(); - - formatSelects.forEach((formatSelect, index) => { - const imgTag = imgTags[index]; - const imgUrl = imgTag.getAttribute("src"); - const fileName = - imgTag.previousElementSibling.textContent.split(".")[0]; - const selectedFormat = formatSelect.value; - const imgBlob = fetch(imgUrl).then((response) => response.blob()); - - zip.file(`${fileName}.${selectedFormat}`, imgBlob); - }); - - const zipBlob = await zip.generateAsync({ type: "blob" }); - - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = "MediaCraft PRO Converted Images.zip"; - downloadLink.click(); - }); - - fileListDiv.insertAdjacentElement("afterend", downloadAllButton); - } -} - -// function to handle uploaded files -async function handleUploadedFiles(uploadedFiles) { - removeDownloadAllButton(); // Removed existing downloadAllButton - - if (uploadedFiles.length > 0) { - fileList.innerHTML = ""; - fileListDiv.innerHTML = ""; // Clear existing content - displayLoadingElement(uploadedFiles); - - const maxImageFileSize = 10 * 1024 * 1024; // 10MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (const file of uploadedFiles) { - console.log(file.type); - const fileName = file.name.split(".")[0]; - - // validate image size and type - if ( - !validateFile( - file, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString, - loadingElement - ) - ) { - return; - } - - const reader = new FileReader(); - reader.onload = async (e) => { - const imgSrc = e.target.result; - fileList.innerHTML += `
  • -

    ${file.name}

    - Preview - - -
    • `; - }; - - reader.readAsDataURL(file); - } - - // Wait for all files to be loaded - await Promise.all( - Array.from(uploadedFiles).map( - (file) => - new Promise((resolve) => { - const reader = new FileReader(); - reader.onloadend = resolve; - reader.readAsDataURL(file); - }) - ) - ); - - fileListDiv.removeChild(loadingElement); - fileListDiv.appendChild(fileList); - - // Attached click event listeners to download buttons - const downloadButtons = fileList.querySelectorAll(".download_btn"); - downloadButtons.forEach((btn) => { - btn.addEventListener("click", async () => { - const formatSelect = btn.previousElementSibling; - const imgTag = btn.previousElementSibling.previousElementSibling; - const imgUrl = imgTag.getAttribute("src"); - const fileName = btn.getAttribute("data-filename"); - const selectedFormat = formatSelect.value; - const imgBlob = await fetch(imgUrl).then((response) => response.blob()); - - const zip = new JSZip(); - zip.file(`${fileName}.${selectedFormat}`, imgBlob); - - const zipBlob = await zip.generateAsync({ type: "blob" }); - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = `MediaCraft PRO ${selectedFormat.toUpperCase()} Images.zip`; - downloadLink.click(); - }); - }); - - if (uploadedFiles.length > 1) { - addDownloadAllButton(); - } - } -} - -// imported from reusable.js for upload or drag and drop -handleDragDropAndUploadEvents(fileInput, handleUploadedFiles); diff --git a/js/imageEditor.js b/js/imageEditor.js deleted file mode 100644 index 29f0a30..0000000 --- a/js/imageEditor.js +++ /dev/null @@ -1,433 +0,0 @@ -import { validateFile } from "./reusable.js"; - -const fileInput = document.getElementById("fileInput"); -const dragAndDropDiv = document.querySelector(".drag_and_drop_div"); -const imageConversionDiv = document.querySelector(".image_conversion_div"); -const loadingElement = document.createElement("p"); -loadingElement.classList = "text-center"; -loadingElement.setAttribute("style", "align-self: center"); -const imagePreviewDiv = document.createElement("div"); -imagePreviewDiv.classList = "image_preview_div"; -imagePreviewDiv.innerHTML = ` -
    -
    - -
    - -
    -

    Preset Filters

    - -
    - Vintage - - Lomo - - Clarity - - Sin City - - Sunrise - - Cross Process - - Orange Peel - - Love - - Grungy - - Jarques - - Pinhole - - Old Boot - - Glowing Sun - - Hazy Days - - Her Majesty - - Nostalgia - - Hemingway - - Concentrate -
    - -
    - -
    - Crop - Rotate Left - Rotate Right -
    -
    - -
    -

    Filter Controls

    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    - -
    - - - 0 -
    -
    -
    -`; - -const buttonContainer = document.createElement("div"); -buttonContainer.classList = - "button_container d-flex justify-content-between align-items-center mt-2 mx-auto"; -buttonContainer.innerHTML = ` - - - -`; - -const filteredImageDiv = imagePreviewDiv.querySelector(".filtered_image_div"); -const downloadBtn = buttonContainer.querySelector(".download"); -const resetBtn = buttonContainer.querySelector(".reset"); -const restartBtn = buttonContainer.querySelector(".restart"); - -const canvas = document.createElement("canvas"); -canvas.id = "canvas"; -const ctx = canvas.getContext("2d"); -let img = new Image(); -let fileName; - -// display image loading element -function displayLoadingElement() { - loadingElement.innerHTML = `Loading Image...`; - imagePreviewDiv.appendChild(loadingElement); -} - -async function handleUploadedFiles(uploadedFile) { - displayLoadingElement(); - - const maxImageFileSize = 5 * 1024 * 1024; // 5MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - // check for file - const reader = new FileReader(); - if (uploadedFile) { - fileName = uploadedFile.name; - reader.readAsDataURL(uploadedFile); - } - - // validate image size and type - if ( - !validateFile( - uploadedFile, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString, - loadingElement - ) - ) { - return; - } - - // add image to canvas - reader.addEventListener( - "load", - () => { - img = new Image(); - img.src = reader.result; - img.onload = function () { - canvas.width = img.width; - canvas.height = img.height; - ctx.drawImage(img, 0, 0, img.width, img.height); - }; - }, - false - ); - - await new Promise((resolve) => { - const reader = new FileReader(); - reader.onload = resolve; - reader.readAsDataURL(uploadedFile); - }); - - imagePreviewDiv.removeChild(loadingElement); - dragAndDropDiv.remove(); - filteredImageDiv.insertAdjacentElement("afterbegin", canvas); - imageConversionDiv.insertAdjacentElement("beforeend", imagePreviewDiv); - imagePreviewDiv.insertAdjacentElement("afterend", buttonContainer); -} - -fileInput.addEventListener("change", async (e) => { - const uploadedFile = e.target.files[0]; - await handleUploadedFiles(uploadedFile); -}); - -// prevent the default drag-and-drop behavior -document.body.addEventListener("dragenter", (e) => { - e.preventDefault(); - e.stopPropagation(); -}); - -document.body.addEventListener("dragover", (e) => { - e.preventDefault(); - e.stopPropagation(); -}); - -document.body.addEventListener("drop", async (event) => { - event.preventDefault(); - event.stopPropagation(); - - const uploadedFiles = event.dataTransfer.files; - for (const uploadedFile of uploadedFiles) { - await handleUploadedFiles(uploadedFile); - } -}); - -const filterControls = imagePreviewDiv.querySelectorAll( - '.filter_controls_div input[type="range"]' -); -filterControls.forEach((control) => { - control.addEventListener("input", (e) => { - let filterId = e.target.id; - let filterValue = e.target.value; - const sliderValueSpan = e.target.nextElementSibling; - sliderValueSpan.innerHTML = `${filterValue}`; - - Caman("#canvas", img, function () { - this.revert(false); // reset previous filter adjustments - - this[filterId](filterValue); // apply the selected filter - this.render(); - }); - }); -}); - -const presetFilters = imagePreviewDiv.querySelectorAll( - ".preset_filter_container a[data-preset]" -); -let lastClickedPresetButton = null; -presetFilters.forEach((preset) => { - preset.addEventListener("click", async (e) => { - let presetName = e.target.dataset.preset; - - if (lastClickedPresetButton) { - lastClickedPresetButton.style.backgroundColor = ""; - } - - // set the background color for the current clicked button - e.target.style.backgroundColor = "#FFC107"; - lastClickedPresetButton = e.target; - - // remove any existing filter loader - const existingFilterLoader = - filteredImageDiv.querySelector(".content_loader"); - if (existingFilterLoader) { - existingFilterLoader.remove(); - } - - // create and add the filter loader for the current filter - const filterLoader = document.createElement("div"); - filterLoader.classList = "content_loader"; - filterLoader.innerHTML = ` -

    Applying ${e.target.innerText}...

    `; - filteredImageDiv.insertAdjacentElement("beforeend", filterLoader); - - await Caman("#canvas", img, function () { - this.revert(false); // reset previous filter adjustments - this[presetName](); - this.render(async () => { - // this callback function will be called after rendering is complete - if (filterLoader) { - filterLoader.remove(); - } - }); - }); - }); -}); - -const imageAdjustmentTools = imagePreviewDiv.querySelectorAll( - ".image_adjustment_tools a" -); - -const finalizeCropButton = document.createElement("button"); -finalizeCropButton.classList = - "medium_text download py-1 px-2 m-2 bg-success text-light"; -finalizeCropButton.innerText = "Finalize Crop"; -finalizeCropButton.style.display = "none"; // hidden initially -filteredImageDiv.insertAdjacentElement("beforeend", finalizeCropButton); - -finalizeCropButton.addEventListener("click", () => { - if (cropper) { - const cropperContainer = document.querySelector(".cropper-container"); - cropperContainer.remove(); - - // get the cropped canvas from the CropperJS instance - const croppedCanvas = cropper.getCroppedCanvas(); - croppedCanvas.id = "canvas"; - filteredImageDiv.replaceChild(croppedCanvas, canvas); - finalizeCropButton.style.display = "none"; - } -}); - -let cropper = null; -let rotationDegrees = 0; -if (imagePreviewDiv) { - imageAdjustmentTools.forEach((tool) => { - tool.addEventListener("click", (e) => { - if (e.target.id === "crop") { - cropper = new Cropper(canvas, { - aspectRatio: 0, - viewMode: 0, - }); - finalizeCropButton.style.display = "block"; // show when crop selected - } else if (e.target.id === "rotate_left") { - if (cropper) { - cropper.rotate(-90); // Rotate counterclockwise by 90 degrees - } else { - // Rotate the canvas directly if no crop is selected - rotateCanvas(-90); - } - } else if (e.target.id === "rotate_right") { - if (cropper) { - cropper.rotate(90); // Rotate clockwise by 90 degrees - } else { - // Rotate the canvas directly if no crop is selected - rotateCanvas(90); - } - } - }); - }); -} - -function rotateCanvas(degrees) { - rotationDegrees += degrees; - rotationDegrees %= 360; // Keep rotation within 0 to 359 degrees - - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.save(); - ctx.translate(canvas.width / 2, canvas.height / 2); - ctx.rotate((rotationDegrees * Math.PI) / 180); - ctx.drawImage(img, -img.width / 2, -img.height / 2); - ctx.restore(); -} - -downloadBtn.addEventListener("click", () => { - const slicedFileName = fileName.split(".")[0]; - const zip = new JSZip(); - - const canvasBlob = document.querySelector("#canvas").toBlob(async (blob) => { - zip.file(`${slicedFileName}.png`, blob); - - // generate the ZIP file asynchronously - const zipBlob = await zip.generateAsync({ type: "blob" }); - - // create a download link - const link = document.createElement("a"); - link.href = URL.createObjectURL(zipBlob); - link.download = "MediaCraft PRO Filtered Image.zip"; - link.click(); - }, "image/png"); -}); - -resetBtn.addEventListener("click", () => { - Caman("#canvas", img, function () { - this.revert(); - filterControls.forEach((control) => { - control.value = 0; - const sliderValueSpan = control.nextElementSibling; - sliderValueSpan.innerHTML = "0"; - }); - }); - alert("Filter reset. Photo back to normal!"); -}); - -restartBtn.addEventListener("click", () => { - const confirmRestart = confirm( - "Are you sure you want to restart? You may lose your progress!" - ); - if (confirmRestart) { - location.reload(); - } else { - return; - } -}); diff --git a/js/main.js b/js/main.js deleted file mode 100644 index 6cf93f3..0000000 --- a/js/main.js +++ /dev/null @@ -1,151 +0,0 @@ -const menu = document.querySelector(".menu"); -const nav = document.querySelector(".nav"); -const anchorLinks = document.querySelectorAll(".nav ul li ul a"); -const overlay = document.getElementById("overlay"); - -// loader -const loader = document.querySelector(".loader"); -document.onreadystatechange = function () { - if (document.readyState === "complete") { - if (loader) { - loader.remove(); - } - } -}; - -// mobile navigation -function openNav() { - menu.innerHTML = `

    CLOSE

    `; - nav.classList.add("active"); - overlay.style.display = "block"; - document.body.style.overflow = "hidden"; -} - -function closeNav() { - menu.textContent = "MENU"; - nav.classList.remove("active"); - overlay.style.display = "none"; - document.body.style.overflow = "auto"; -} - -menu.addEventListener("click", () => { - if (nav.classList.contains("active")) { - closeNav(); - } else { - openNav(); - } -}); - -anchorLinks.forEach((link) => { - link.addEventListener("click", () => { - closeNav(); - }); -}); - -document.body.addEventListener("click", (e) => { - if ( - nav.classList.contains("active") && - e.target !== menu && - !nav.contains(e.target) - ) { - closeNav(); - } -}); - -window.addEventListener("resize", () => { - if (window.innerWidth >= 1024 && nav.classList.contains("active")) { - closeNav(); - } -}); - -// toggle accordion answers -const accordionQuestions = document.querySelectorAll(".accordion_question"); - -accordionQuestions.forEach((question) => { - question.addEventListener("click", () => { - const answer = question.nextElementSibling; - answer.classList.toggle("active_question"); - const chevronIcon = question.querySelector(".fa-chevron-down"); - chevronIcon.classList.toggle("fa-chevron-up"); - }); -}); - -// useless_links -document.querySelectorAll(".useless_link").forEach((link) => { - link.addEventListener("click", function (event) { - event.preventDefault(); - }); -}); - -// add footer to all pages -const footer = document.createElement("footer"); -footer.classList = - "d-flex justify-content-center align-items-center flex-column mt-4 p-2 small_text faded_bg"; -footer.innerHTML = ` -

    © 2023 MediaCraft Pro. All rights reserved.

    -

    For Users

    - - For Developers - For Developers - -

    - For any issues - Contact - Sachin Samal -

    -`; - -document.body.insertAdjacentElement("beforeend", footer); - -const documentationDiv = document.createElement("div"); -documentationDiv.classList = "documentation_div small_text faded_bg"; -documentationDiv.innerHTML = ` -

    MediaCraft Pro Documentation

    -

    Technical Insights and Considerations

    -

    CLOSE

    - - - -

    Developer's Note:

    -

    Implementation of client-side video conversion is not feasible due to the complexity and resource-intensive nature of video transcoding. Most modern video formats involve encoding, decoding, and compression techniques that require significant computational power and are typically done on server-side platforms. -

    - Processing speed and quality depend on the user's device specifications, which might lead to varying outcomes.

    -`; - -footer.insertAdjacentElement("afterend", documentationDiv); - -// show developer's note onclick from footer -if (footer) { - const userNoteElement = footer.querySelector(".user_note"); - - const hideDocumentationElement = documentationDiv.querySelector( - ".hide_documentation_btn" - ); - userNoteElement.addEventListener("click", () => { - documentationDiv.classList.add("slide_up_documentation"); - }); - - hideDocumentationElement.addEventListener("click", () => { - documentationDiv.classList.remove("slide_up_documentation"); - }); -} diff --git a/js/reusable.js b/js/reusable.js deleted file mode 100644 index dfdbf57..0000000 --- a/js/reusable.js +++ /dev/null @@ -1,377 +0,0 @@ -// export function for image conversion to different formats -export async function convertImageToDifferentFormat(uploadedFiles, format) { - const fileListDiv = document.querySelector(".file_list_div"); - const fileList = document.createElement("ol"); - fileList.className = "file_list"; - - const loadingElement = document.createElement("p"); - loadingElement.innerHTML = `

    ${uploadedFiles.length} ${ - uploadedFiles.length > 1 ? "files" : "file" - } - Converting...

    `; - - if (uploadedFiles.length > 0) { - fileList.innerHTML = ""; - fileListDiv.innerHTML = ""; - fileListDiv.appendChild(loadingElement); - - const maxImageFileSize = 10 * 1024 * 1024; // 10MB in bytes - const supportedImageTypes = [ - "image/jpeg", - "image/jpg", - "image/png", - "image/webp", - "image/avif", - ]; - const supportedImageTypesString = supportedImageTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (const file of uploadedFiles) { - console.log(file.type); - const fileName = file.name.split(".")[0]; - - // validate image size and type - if ( - !validateFile( - file, - maxImageFileSize, - supportedImageTypes, - supportedImageTypesString, - loadingElement - ) - ) { - return; - } - - const reader = new FileReader(); - reader.onload = async (e) => { - const imgSrc = e.target.result; - const imgTag = document.createElement("img"); - imgTag.className = "preview_image"; - imgTag.src = imgSrc; - imgTag.alt = "Preview"; - - const selectTag = document.createElement("select"); - selectTag.className = "select_img_format selectDisabled"; - const optionTag = document.createElement("option"); - optionTag.value = format.toUpperCase(); - optionTag.setAttribute("data-filename", fileName); - optionTag.setAttribute("selected", "selected"); - optionTag.setAttribute("disabled", "disabled"); - optionTag.textContent = `Converting to ${format.toUpperCase()}...`; - selectTag.appendChild(optionTag); - - fileList.appendChild(createFileListItem(file.name, imgTag, selectTag)); - - const convertedBlob = await convertImageFormat(imgSrc, format); - const convertedImgUrl = URL.createObjectURL(convertedBlob); - imgTag.src = convertedImgUrl; - optionTag.textContent = `${format.toUpperCase()} (Converted)`; - optionTag.removeAttribute("disabled"); - }; - reader.readAsDataURL(file); - } - } - - // wait for all files to be loaded and converted - await Promise.all( - Array.from(uploadedFiles).map((file) => { - return new Promise((resolve) => { - const reader = new FileReader(); - reader.onload = resolve; - reader.readAsDataURL(file); - }); - }) - ); - - fileListDiv.removeChild(loadingElement); - fileListDiv.appendChild(fileList); - - addDownloadAllButton(fileListDiv, fileList, format); -} - -// create a list item for each file -function createFileListItem(name, imgTag, selectTag) { - const liTag = document.createElement("li"); - const pTag = document.createElement("p"); - pTag.textContent = name; - - liTag.appendChild(pTag); - liTag.appendChild(imgTag); - liTag.appendChild(selectTag); - - return liTag; -} - -// function to convert image format -async function convertImageFormat(imgSrc, format) { - const img = new Image(); - img.src = imgSrc; - await img.decode(); - - const canvas = document.createElement("canvas"); - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - - return new Promise((resolve) => { - canvas.toBlob((blob) => { - resolve(blob); - }, `image/${format}`); - }); -} - -// add the downloadAllButton with zip functionality -function addDownloadAllButton(fileListDiv, fileList, format) { - const downloadAllButton = document.createElement("button"); - downloadAllButton.setAttribute( - "class", - "download drop_shadow medium_text py-1 px-2 bg-success text-light border-dark border border-2" - ); - downloadAllButton.innerHTML = "Download All"; - - downloadAllButton.addEventListener("click", async () => { - const imgTags = fileList.querySelectorAll(".preview_image"); - const imgUrls = Array.from(imgTags).map((img) => img.getAttribute("src")); - const fileNames = Array.from(imgTags).map( - (img) => img.previousElementSibling.textContent.split(".")[0] - ); - - const zip = new JSZip(); - - for (let i = 0; i < imgUrls.length; i++) { - const imgUrl = imgUrls[i]; - const fileName = fileNames[i]; - const response = await fetch(imgUrl); - const blob = await response.blob(); - zip.file(`${fileName}.${format}`, blob); - } - - const zipBlob = await zip.generateAsync({ type: "blob" }); - - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = `MediaCraft PRO ${format.toUpperCase()} Images.zip`; - downloadLink.click(); - }); - - fileListDiv.insertAdjacentElement("afterend", downloadAllButton); -} - -// ----------------------------------------------------------------------- - -// export function for video conversion to different formats -export async function convertVideoToDifferentFormat(uploadedFiles, format) { - const fileListDiv = document.querySelector(".file_list_div"); - const fileList = document.createElement("ol"); - fileList.className = "file_list"; - - const loadingElement = document.createElement("p"); - loadingElement.innerHTML = `

    ${uploadedFiles.length} ${ - uploadedFiles.length > 1 ? "files" : "file" - } - Loading...

    `; - - function removeDownloadAllButton() { - const downloadAllButton = document.querySelector(".download"); - if (downloadAllButton) { - downloadAllButton.remove(); - } - } - - function addDownloadAllButton() { - const downloadAllButton = document.createElement("button"); - downloadAllButton.setAttribute( - "class", - "download drop_shadow medium_text py-1 px-2 bg-success text-light border-dark border border-2" - ); - downloadAllButton.innerHTML = "Download All"; - - downloadAllButton.addEventListener("click", async () => { - const confirmDownload = confirm("Download process will start. Proceed?"); - if (!confirmDownload) { - return; - } - - const videoTags = fileList.querySelectorAll(".preview_video"); - const zip = new JSZip(); - - for (const videoTag of videoTags) { - const videoUrl = videoTag.querySelector("source").getAttribute("src"); - const fileName = - videoTag.previousElementSibling.textContent.split(".")[0]; - - const response = await fetch(videoUrl); - const blob = await response.blob(); - zip.file(`${fileName}.${format}`, blob); - } - - const zipBlob = await zip.generateAsync({ type: "blob" }); - - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = `MediaCraft PRO ${format.toUpperCase()} Videos.zip`; - downloadLink.click(); - }); - - fileListDiv.insertAdjacentElement("afterend", downloadAllButton); - } - - if (uploadedFiles.length > 0) { - removeDownloadAllButton(); - fileList.innerHTML = ""; - fileListDiv.innerHTML = ""; - fileListDiv.appendChild(loadingElement); - - const maxVideoFileSize = 100 * 1024 * 1024; // 100MB in bytes - const supportedVideoTypes = [ - "video/mp4", - "video/mkv", - "video/mov", - "video/avi", - "video/webm", - "video/wmv", - "video/x-ms-wmv", - "video/vnd.dlna.mpeg-tts", - "video/quicktime", - ]; - const supportedVideoTypesString = supportedVideoTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (const file of uploadedFiles) { - console.log(file.type); - const fileName = file.name.split(".")[0]; - - // validate video size and type - if ( - !validateFile( - file, - maxVideoFileSize, - supportedVideoTypes, - supportedVideoTypesString, - loadingElement - ) - ) { - return; - } - - const reader = new FileReader(); - reader.onload = async (e) => { - const videoSrc = e.target.result; - fileList.innerHTML += `
  • -

    ${file.name}

    - - -
    • `; - - const selectFormat = fileList.querySelector(".selectDisabled"); - await convertVideoToFormat(file, format, selectFormat, fileName); - }; - - reader.readAsDataURL(file); - } - } - - // wait for all files to be loaded - await Promise.all( - Array.from(uploadedFiles).map((file) => { - return new Promise((resolve) => { - const reader = new FileReader(); - reader.onload = resolve; - reader.readAsDataURL(file); - }); - }) - ); - - fileListDiv.removeChild(loadingElement); - fileListDiv.appendChild(fileList); - - addDownloadAllButton(); -} - -async function convertVideoToFormat(file, format, selectElement, fileName) { - const video = document.createElement("video"); - video.preload = "metadata"; - video.src = URL.createObjectURL(file); - - video.onloadedmetadata = async () => { - selectElement.innerHTML = ``; - }; -} - -// ---------------------------------- - -export function handleDragDropAndUploadEvents( - fileInput, - convertMedia, - format = null -) { - fileInput.addEventListener("change", async (event) => { - const files = event.target.files; - await convertMedia(files, format); - }); - - // prevent the default drag-and-drop behavior - document.body.addEventListener("dragenter", (e) => { - e.preventDefault(); - e.stopPropagation(); - }); - - document.body.addEventListener("dragover", (e) => { - e.preventDefault(); - e.stopPropagation(); - }); - - document.body.addEventListener("drop", async (event) => { - event.preventDefault(); - event.stopPropagation(); - - const files = event.dataTransfer.files; - await convertMedia(files, format); - }); -} - -// export function to validate file size and type on upload -export function validateFile( - file, - maxFileSize, - supportedTypes, - supportedTypesString, - loadingElement -) { - const fileSize = file.size; - - if (fileSize > maxFileSize) { - showError( - `File size exceeds the maximum limit of ${ - maxFileSize / (1024 * 1024) - }MB: ${file.name} is ${Math.round(file.size / (1024 * 1024))}MB`, - loadingElement - ); - return false; - } - - if (!supportedTypes.includes(file.type)) { - showError( - `Unsupported file type: ${file.name}\nSupported types: ${supportedTypesString}`, - loadingElement - ); - return false; - } - - return true; -} - -function showError(message, loadingElement = null) { - if (loadingElement) { - loadingElement.remove(); - } - alert(message); -} diff --git a/js/videoConverter.js b/js/videoConverter.js deleted file mode 100644 index b45f51c..0000000 --- a/js/videoConverter.js +++ /dev/null @@ -1,193 +0,0 @@ -import { validateFile, handleDragDropAndUploadEvents } from "./reusable.js"; - -const fileInput = document.getElementById("fileInput"); -const fileListDiv = document.querySelector(".file_list_div"); -const loadingElement = document.createElement("p"); -loadingElement.classList = "text-center"; -const fileList = document.createElement("ol"); -fileList.className = "file_list"; -const supportedVideoFormats = ["mp4", "webm", "mov", "avi", "mkv", "wmv"]; -let downloadAllButton = null; - -// display files loading element -function displayLoadingElement(files) { - loadingElement.innerHTML = `${files.length} ${ - files.length > 1 ? "files" : "file" - } - Loading...`; - fileListDiv.appendChild(loadingElement); -} - -// remove the existing downloadAllButton -function removeDownloadAllButton() { - if (downloadAllButton) { - downloadAllButton.remove(); - downloadAllButton = null; - } -} - -// add the downloadAllButton -function addDownloadAllButton() { - if (!downloadAllButton) { - downloadAllButton = document.createElement("button"); - downloadAllButton.setAttribute( - "class", - "drop_shadow medium_text download py-1 px-2 mx-1 bg-success text-light border-dark border border-2" - ); - downloadAllButton.innerHTML = "Download All"; - - // ZIP multiple files and download when clicked downloadAllButton... - downloadAllButton.addEventListener("click", async () => { - const formatSelects = fileList.querySelectorAll(".select_video_format"); - const videoTags = fileList.querySelectorAll(".preview_video"); - - const zip = new JSZip(); - const downloadPromises = []; - - videoTags.forEach((videoTag, index) => { - const formatSelect = formatSelects[index]; - const videoUrl = videoTag.querySelector("source").getAttribute("src"); - const fileName = - videoTag.previousElementSibling.textContent.split(".")[0]; - const selectedFormat = formatSelect.value; - - const downloadPromise = fetch(videoUrl) - .then((response) => response.blob()) - .then((videoBlob) => { - zip.file(`${fileName}.${selectedFormat}`, videoBlob); - }) - .catch((error) => { - console.error(`Error fetching video ${fileName}:`, error); - }); - - downloadPromises.push(downloadPromise); - }); - - await Promise.all(downloadPromises); - - const zipBlob = await zip.generateAsync({ type: "blob" }); - - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = "MediaCraft PRO Converted Videos.zip"; - downloadLink.click(); - }); - - fileListDiv.insertAdjacentElement("afterend", downloadAllButton); - } -} - -// function to handle uploaded files -async function handleUploadedFiles(uploadedFiles) { - removeDownloadAllButton(); // remove existing downloadAllButton - - if (uploadedFiles.length > 0) { - fileList.innerHTML = ""; - fileListDiv.innerHTML = ""; - displayLoadingElement(uploadedFiles); - - const maxVideoFileSize = 100 * 1024 * 1024; // 100MB in bytes - const supportedVideoTypes = [ - "video/mp4", - "video/mkv", - "video/mov", - "video/avi", - "video/webm", - "video/wmv", - "video/x-ms-wmv", - "video/vnd.dlna.mpeg-tts", - "video/quicktime", - ]; - const supportedVideoTypesString = supportedVideoTypes - .map((type) => type.split("/")[1].toUpperCase()) - .join(", "); - - for (const file of uploadedFiles) { - console.log(file.type); - const fileName = file.name.split(".")[0]; - - // validate video size and type - if ( - !validateFile( - file, - maxVideoFileSize, - supportedVideoTypes, - supportedVideoTypesString, - loadingElement - ) - ) { - return; - } - - const reader = new FileReader(); - reader.onload = async (e) => { - const videoSrc = e.target.result; - fileList.innerHTML += `
  • -

    ${file.name}

    - - - -
    • `; - }; - - reader.readAsDataURL(file); - } - - // wait for all files to be loaded - await Promise.all( - Array.from(uploadedFiles).map( - (file) => - new Promise((resolve) => { - const reader = new FileReader(); - reader.onloadend = resolve; - reader.readAsDataURL(file); - }) - ) - ); - - fileListDiv.removeChild(loadingElement); - fileListDiv.appendChild(fileList); - - // Attach click event listeners to download buttons - const downloadButtons = fileList.querySelectorAll(".download_btn"); - downloadButtons.forEach((btn) => { - btn.addEventListener("click", async () => { - const formatSelect = btn.previousElementSibling; - const videoTag = btn.previousElementSibling.previousElementSibling; - const videoUrl = videoTag.querySelector("source").getAttribute("src"); - const fileName = btn.getAttribute("data-filename"); - const selectedFormat = formatSelect.value; - - const videoBlob = await fetch(videoUrl).then((response) => - response.blob() - ); - - const zip = new JSZip(); - zip.file(`${fileName}.${selectedFormat}`, videoBlob); - - const zipBlob = await zip.generateAsync({ type: "blob" }); - - const downloadLink = document.createElement("a"); - downloadLink.href = URL.createObjectURL(zipBlob); - downloadLink.download = `MediaCraft PRO ${selectedFormat.toUpperCase()} Videos.zip`; - downloadLink.click(); - }); - }); - - if (uploadedFiles.length > 1) { - addDownloadAllButton(); - } - } -} - -// imported from reusable.js for upload or drag and drop -handleDragDropAndUploadEvents(fileInput, handleUploadedFiles); diff --git a/style.css b/style.css deleted file mode 100644 index 7f4e38e..0000000 --- a/style.css +++ /dev/null @@ -1,565 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Archivo&family=Poppins:wght@400;500;600;700;900&family=Work+Sans:wght@400;500;600;700;900&display=swap"); - -/* General Styling */ -* { - font-family: "Work Sans", sans-serif; - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - overflow-x: hidden; -} - -html, -body { - width: 100%; -} - -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - background: #e2e2e2; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; - height: 39px; - z-index: 1000; -} - -input:not(.filter_control input) { - font-size: 1rem; - max-width: 100%; - border-radius: 0; - border: 1px solid #222; -} - -label { - cursor: pointer; -} - -select { - padding: 0.35rem; - border-radius: 0; -} - -select:not(input[type="range"]), -option { - border: 1px solid #222; -} - -strong { - font-family: "Poppins", sans-serif; - font-weight: 900; - text-transform: uppercase; - color: #fff; - -webkit-text-stroke: 1px #000; - text-shadow: #000 1px 0px 0px, #000 1px 2px 0px, #000 1px 3px 0px; -} - -a { - text-decoration: none; - color: inherit; -} - -ul:not(.nav) { - list-style-type: square; -} - -.overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - overflow-y: hidden; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; - display: none; -} - -.selectDisabled { - -webkit-appearance: none; - appearance: none; - margin: 0 1rem; - padding: 0 0.5rem; - text-indent: 1px; - text-overflow: ""; - pointer-events: none; -} - -.small_text { - font-size: 18px; -} - -.medium_text { - font-size: 22px; -} - -.large_text { - font-size: 26px; -} - -.gradient_text { - display: block; - -webkit-text-stroke: 1.25px transparent; - background-image: linear-gradient(to right, #fa709a 0%, #d8a941 100%); - -webkit-background-clip: text; - background-clip: text; - letter-spacing: 1.5px; - -webkit-text-fill-color: transparent; -} - -.download { - display: grid; - margin: 1rem auto; - border: none; - border-radius: 0; -} - -.faded_bg { - background: #e2e2e2; - border-top-left-radius: 2rem; - border-top-right-radius: 2rem; - box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; -} - -.drop_shadow { - filter: drop-shadow(5px 5px 0 rgb(0 0 0 / 1)); -} - -.conversion_option { - display: inline-block; - white-space: nowrap; - background: #fff; -} - -/* End of General Styling */ - -/* Loader */ -.loader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #fff; - display: flex; - justify-content: center; - align-items: center; - z-index: 9999; -} - -.loader::before, -.content_loader::before { - content: ""; - position: absolute; - width: 40px; - height: 40px; - border-radius: 50%; - border: 3px solid #ccc; - border-top-color: #13a8ff; - animation: spin 0.8s ease-in-out infinite; -} - -.loader p, -.content_loader p { - margin-top: 6rem; - font-weight: 700; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.content_loader { - display: flex; - justify-content: center; - align-items: center; - z-index: 99; - margin-top: 0; -} - -.content_loader::before { - width: 20px; - height: 20px; -} - -/* END of Loader */ - -/* Navigation */ -.menu, -.expand_icon { - display: none; - font-weight: 700; -} - -.nav ul { - zoom: 1; - list-style: none; - margin: 0; - padding: 0; - background: #e2e2e2; -} - -.nav ul:before, -.nav ul:after { - content: ""; - display: table; -} - -.nav ul:after { - clear: both; -} - -.nav ul > li { - float: left; - position: relative; -} - -.nav a { - display: block; - padding: 10px 20px; - line-height: 1.2em; - color: #222; - border-left: 1px solid #595959; -} - -.nav a:hover, -.nav li ul a:hover { - text-decoration: none; - background: rgba(0, 0, 0, 0.2); -} - -.nav li ul li { - width: 270px; - max-width: 100%; -} - -.nav ul > li:hover ul li { - height: 45px; -} - -.nav ul > li:hover .useless_link { - opacity: 0.5; -} - -.nav li ul { - position: absolute; - left: 0; - top: 45px; - z-index: 1; - box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, - rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; -} - -.nav li ul a { - border: none; -} - -.nav li:last-child ul { - width: 270px; - left: -40%; -} - -.nav li ul li { - overflow: hidden; - height: 0; - -webkit-transition: height 200ms ease-in; - -moz-transition: height 200ms ease-in; - -o-transition: height 200ms ease-in; - transition: height 200ms ease-in; -} - -/* End of Navigation */ - -/* Popup Modal */ -.popup_caution_modal { - position: fixed; - top: 0; - width: 100%; - height: 100%; - font-size: 3rem; - padding: 1rem; - overflow-y: scroll; - color: #472166; - background-color: #ffa500; -} - -.popup_caution_modal.hidden { - display: none; - visibility: hidden; - opacity: 0; -} - -.popup_caution_modal.visible { - display: block; - visibility: visible; - opacity: 1; - z-index: 1002; -} - -.close_btn { - position: absolute; - top: 0; - right: 0; - color: #efefef; - background: red; - font-weight: 700; - cursor: pointer; -} -/* End of Popup Modal */ - -/* Drag & Drop Container */ -.drag_and_drop_div { - width: 100%; - max-width: 400px; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; - margin: 0.5rem; -} - -.file_list_div { - display: flex; - justify-content: center; -} - -.file_list li { - margin: 0.5rem 0.75rem; - /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */ - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; - padding: 0.75rem; -} - -.file_list img, -.preview_video { - width: 10%; -} - -/* End of Drag & Drop Container */ - -/* Hero Section */ -.hero_section, -.collage_section { - display: grid; - grid-template-columns: 1.5fr 2.5fr; - padding: 0.5rem; - grid-gap: 1rem; -} - -.user_instruction_div { - padding: 0.5rem 0.75rem; - border-top-right-radius: 2rem; - border-bottom-right-radius: 2rem; - height: max-content; - background: #efefef; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; -} - -.image_conversion_div { - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; - background: #efefef; - width: 100%; - border-bottom-left-radius: 2rem; - border-top-left-radius: 2rem; - padding: 1rem; -} - -/* End of Hero Section */ - -/* Footer */ -.user_note, -.hide_documentation_btn { - cursor: pointer; -} - -.user_note:hover, -.dev_note:hover { - color: inherit; - text-decoration: none !important; -} - -.documentation_div { - position: fixed; - top: 0; - left: 0; - overflow-y: auto; - background: #e2e2e2; - margin-top: 3.5rem; - padding: 1rem; - width: 100%; - height: 95vh; - z-index: 100; - transform: translateY(200%); - transition: transform 0.5s ease-in-out; -} - -.documentation_div.slide_up_documentation { - transform: translateY(0%); -} - -.documentation_div h4 { - font-size: 24px; - margin: 1rem 0; -} - -.documentation_div .hide_documentation_btn { - position: absolute; - top: 0; - right: 0%; - font-weight: 700; - margin-top: 0.1rem; - cursor: pointer; -} - -/* End of Footer */ - -/* Media queries */ -@media screen and (min-width: 1300px) { - input { - max-width: 75% !important; - } -} - -@media screen and (max-width: 1024px) { - nav { - width: 75%; - display: flex; - justify-content: center; - align-items: left; - flex-direction: column; - position: fixed; - top: 0; - left: -100%; - transition: 0.5s; - margin: 0 auto; - } - - .nav li:last-child ul { - width: 100%; - left: 0; - } - - .nav ul { - z-index: 999; - width: 100%; - display: flex; - flex-direction: column; - } - - .primary_ul { - padding: 1rem !important; - } - - .nav ul li ul { - margin-left: 0.5rem; - position: relative; - top: 0; - opacity: 1; - transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 1px, rgb(51, 51, 51) 0px 0px 0px 1px; - } - - .nav ul > li:hover ul li { - height: auto; - } - - .nav ul li { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - } - - .menu, - .expand_icon { - display: block; - } - - .expand_icon { - position: absolute; - top: 2; - right: 0; - } - - .expand_icon:hover .nav li ul li { - height: auto; - transition: 1s; - box-shadow: none; - } - - .active { - left: 0; - z-index: 999; - transition: 0.2s ease; - border: 1px solid #ccc; - /* box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, - rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; */ - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; - } - - .documentation_div h2 { - margin-top: 2rem !important; - } -} - -@media screen and (max-width: 768px) { - .hero_section, - .collage_section { - display: grid; - grid-template-columns: 1fr; - } - - .user_instruction_div { - border-top-left-radius: 2rem; - border-top-right-radius: 2rem; - border-bottom-right-radius: 0; - display: grid; - place-items: center; - } - - .user_instruction_div h4 { - margin: 0 auto; - } - - .image_conversion_div { - box-shadow: none; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - padding: 1rem; - } - - .conversion_options_div { - flex-direction: row; - justify-content: space-between; - align-items: baseline; - text-align: left; - } - - .conversion_option { - padding: 0.25rem !important; - } - - .popup_caution_modal { - font-size: 2rem; - } -} - -@media screen and (max-width: 450px) { - .drag_and_drop_div { - width: 97%; - margin: 0 auto; - } - - .conversion_option { - font-size: 13px; - } - - .popup_caution_modal { - font-size: 1.75rem; - } -}