This website allows users to upload an XML sitemap file. It then parses the file to extract all <loc> URLs, and displays them in a neuomorphic, muted grey/white styled layout. A search bar is provided to filter the URLs based on the path (i.e., the portion after .com or any other top-level domain).
If you enjoy this application, please consider hiring or connecting with me on LinkedIn as I am #OpenToWork as of 2/1/2025!
-
XML Upload:
Users can upload a sitemap XML file (generated by tools such as mysitemapgenerator). -
XML Parsing:
The webpage parses the uploaded XML file and extracts all<loc>URL elements. -
Neuomorphic Design:
The webpage features a soft, modern design using neuomorphic styling for the search bar and URL list items. -
Search Functionality:
A search bar filters the list of URLs by matching the search query against the path (the portion after.com). This helps to quickly find specific sections of the sitemap without being overwhelmed by common elements.
Below is an example of what your XML sitemap file should look like. (Note: the URLs have been made up for this example.)
<?xml version="1.0" encoding="UTF-8"?>
<!-- created with www.mysitemapgenerator.com -->
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.exampleco.com/</loc>
<lastmod>2025-01-31T21:35:46+01:00</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.exampleco.com/about/</loc>
<lastmod>2025-01-31T21:35:46+01:00</lastmod>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.exampleco.com/contact/</loc>
<lastmod>2025-01-31T21:35:46+01:00</lastmod>
<priority>0.8</priority>
</url>
<url>
<loc>https://www.exampleco.com/products/</loc>
<lastmod>2025-01-31T21:35:46+01:00</lastmod>
<priority>0.8</priority>
</url>
</urlset>Special thanks to Justinmind for this article about neumorphic design.
OpenAI continues to be the performance enhancer I need.
Neumorphic Toggle Inspiration on Codepen
Neumorphic Elements Motivation on Codepen
- I would love to make my own design system in the future.