Tutorial: P2p fixes (#60)

* code-editor init

* Refactor assembleCode and parseAndDisplayData functions

- Separate agregore's basic CSS and user's CSS in assembleCode
- Update CSS extraction logic to exclude the display of agregore theme CSS in the code-editor

* make spinner round

* Refactor fetchButton event listener into fetchFromDWeb function

- Refactor button event listener to its own fetchFromDWeb function
- Add protocol detection so that users paste their CID with the protocol prefix
- Removes the dependency on a separate protocol selector.

- Improves the code's modularity and user input handling by directly
- Detects whether the URL starts with 'ipfs://' or 'hyper://', and alerts the user for invalid protocols.

* Enhance URL Display with Inline Copy-to-Clipboard Feature

- Refactoring of the addURL function to improve UX
- Adds a 20x20 copy to clipboard icon that loads `var(--ag-theme-primary)` as fill color
- Implements a copy-to-clipboard functionality for quick sharing of the code's  URL
- The Function temporarily replaces the SVG with a "Copied!" message upon successful copy, reverting back to the original SVG after 3 seconds.

These enhancements contribute to a more interactive and user-friendly interface.
Streamlines the process of copying URLs directly from the displayed list.

* Refactor HTML for dweb fetch and upload containers

* Switch to secondary colour for bigger visual impact

* Improve alignment for dweb container's children elements

* Add media query for mobile devices

* Split script script.js into modules; dweb, code editor and common functions

* Load new js files in index

* Update code editor layout

* Update protocol labels and button text

* Add responsive layout for mobile devices on uploadand fetch buttons

* Update code editor layout by moving list at the bottom

* Refactor code editor styles and improve responsiveness

* Remove script.js

* Update script imports in index.html

* Remove console.log statements in parseAndDisplayData function

* Refactor code editor event listeners and remove unused code

* Add Tutorial (v1) for code editor app

* Update code editor styles, replace bottom margin with gap

* Improve comments for clarity

* Code Editor Retrospective v0.0.1

* Fix typo, explain jsfiddle and codepen

* Consolidate achievements and reduce repetition

* Rename code editor tutorial, move to docs/tutorials/

* Fix broken link

* Add link to p2pad's final working version

* Remove duplicates

docs/tutorials/p2pad-code-editor.md

@@ -503,7 +503,7 @@ This script is the core of the code editor's functionality, handling user inputs
 
 ### Step 4: DWeb Integration with `dweb.js`
 
-In `dweb.js`, we extend the functionality of our code editor to integrate with the decentralized web (DWeb), specifically IPFS and Hypercore. This script shares some functionalities with the previous tutorial on Drag and Drop to IPFS and Hypercore, which can be revisited for a more in-depth understanding. [Drag and Drop Tutorial](https://agregore.mauve.moe/docs/tutorials/drag-and-drop/)
+In `dweb.js`, we extend the functionality of our code editor to integrate with the decentralized web (DWeb), specifically IPFS and Hypercore. This script shares some functionalities with the previous tutorial on Drag and Drop to IPFS and Hypercore, which can be revisited for a more in-depth understanding. [Drag and Drop Tutorial](https://agregore.mauve.moe/docs/tutorials/drag-and-drop)
 
 Here is the content of `dweb.js`:
 ```javascript
@@ -770,4 +770,6 @@ Including `common.js` in your application is a best practice in web development.
 
 Congratulations! You've built a versatile code editor in your browser that interacts with the decentralized web. This project not only enhances your web development skills but also introduces you to the realm of DWeb technologies.
 
-Feel free to expand upon this application by adding more features or refining the UI. Explore the possibilities with Agregore and the decentralized web!
+Feel free to expand upon this application by adding more features or refining the UI. Explore the possibilities with Agregore and the decentralized web!
+
+You can find the finished result of this tutorial [here](https://agregore.mauve.moe/docs/examples/p2pad/)