From dfa7143c03795333a4ae0bffe918a1a10b8428c3 Mon Sep 17 00:00:00 2001
From: souvikpramanikgit <souvikpramanik874@gmail.com>
Date: Fri, 4 Oct 2024 02:13:41 +0530
Subject: [PATCH] Add some style in docs

---
 README.md | 88 +++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 4a54d28..b3fe6cd 100755
--- a/README.md
+++ b/README.md
@@ -1,29 +1,53 @@
-# PassOP
+<!-- A simple and secure password manager application -->
 
-A simple and secure password manager application built with React that allows users to save, view, edit, and delete their passwords with ease. PassOP helps you manage your passwords efficiently while keeping them safe.
+# <p align="center" id="top">🔑 PassOP: Your Password Manager 🚀</p>
+<p align="center">
+   
+<div align="center"> 
+<img  src="https://readme-typing-svg.herokuapp.com?color=45ffaa&center=true&vCenter=true&size=40&width=900&height=80&lines=Manage+Your+Passwords+with+Ease!"/>
+</div>
 
-This project is a part of the **Girl Script Summer of Code (GSSOC)** and **Hacktoberfest**.
+<h2 align="center">Hi there,<img src="https://raw.githubusercontent.com/nixin72/nixin72/master/wave.gif" height="40" width="40" /> Secure your online life with PassOP!</h2>
 
-## Features
+<p align="center"> 
+  <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="700">
+</p>
 
-- **Add Password**: Save a new password with a website URL, username, and password.
-- **Edit Password**: Update an existing password.
-- **Delete Password**: Remove a saved password.
-- **Copy to Clipboard**: Easily copy website URLs, usernames, and passwords to the clipboard.
-- **Show/Hide Password**: Toggle visibility of the password field.
+## Overview 📌
+<ul>
+  <li>🔒 **<b>PassOP</b>** is a simple and secure password manager built with React that allows users to save, view, edit, and delete their passwords.</li>
+  <li>💡 It helps you manage your passwords efficiently and securely using modern encryption techniques.</li>
+</ul>
 
-## Getting Started
+<h2><img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 30px height="38"> Features</h2>
+<ul>
+  <li>💾 <b>Add Password</b>: Save a new password with a website URL, username, and password.</li>
+  <li>📝 <b>Edit Password</b>: Update an existing password easily.</li>
+  <li>❌ <b>Delete Password</b>: Remove any saved password you no longer need.</li>
+  <li>📋 <b>Copy to Clipboard</b>: Quickly copy website URLs, usernames, and passwords to your clipboard.</li>
+  <li>👁️ <b>Show/Hide Password</b>: Toggle visibility of passwords for added convenience.</li>
+</ul>
 
-Follow these instructions to run the PassOP project on your local machine.
+## Open-Source-Programmes 🤝
 
-### Prerequisites
+### This project is now OFFICIALLY accepted for
+<div align="center"> <img src="https://github.com/apu52/METAVERSE/assets/114172928/e79eb6de-81b1-4ffb-b6ed-f018bb977e88" alt="GSSOC" width="80%"> </div>
+<div align="center"> <img src="https://hacktoberfest.com/_next/static/media/opengraph.9dc60c9d.png" alt="HACTOBERFEST" height="20%" width="80%"> </div>
 
-Ensure you have the following installed:
+<p align="center"> 
+  <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="700">
+</p>
+
+<p align="right"><a href="#top"><img src="https://img.shields.io/badge/Move%20to%20top-Blue?style=plastic" alt="Back To Top"></a></p>
 
-- Node.js (version 14.x or higher)
-- npm (Node package manager)
-- Vite (for running the React front-end)
-- MongoDB (you'll need a MongoDB instance, either locally or on the cloud)
+## Getting Started 🚀 
+
+### Prerequisites
+Ensure you have the following installed:
+- [Node.js](https://nodejs.org/) (version 14.x or higher)
+- [npm](https://www.npmjs.com/) (Node package manager)
+- [Vite](https://vitejs.dev/) (for running the React front-end)
+- [MongoDB](https://www.mongodb.com/) (local or cloud instance)
 
 ### Installation
 
@@ -86,7 +110,7 @@ npm run dev
 
 Now your password manager should be running locally!
 
-## Folder Structure
+## Folder Structure 📂
 
 ```
 PassOP/
@@ -104,10 +128,30 @@ PassOP/
 └── ...
 ```
 
-## Contributing
+## Contributing ⭐ 
+
+We welcome all contributions! Read our [CONTRIBUTING.md](./CONTRIBUTING.md) to get started building! 🛠️ 
+
+## Code of Conduct 📜
+
+Please make sure to review and follow the project's [Code of Conduct](./CODE_OF_CONDUCT.md) when contributing. 
+
+<br> 
+
+## Project Admin ⚡
+<table> 
+    <tr> 
+        <td align="center">
+            <a href="https://github.com/jinx-vi-0"><img src="https://avatars.githubusercontent.com/u/120160355?v=4" width=150px height=150px /></a>
+            <h4>Adarsh</h4>
+        </td> 
+    </tr> 
+</table> 
+
+<div><h2><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" width="35" height="35"> Contributors</h2></div>
 
-For contribution guidelines and instructions, please see the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+Big thanks to all the contributors who have helped make Passop a better platform! 🎉
 
-## Code of Conduct
+<a href="https://github.com/jinx-vi-0/passop/graphs/contributors"> <img align="center" src="https://contrib.rocks/image?max=100&repo=jinx-vi-0/passop"/> </a> 
 
-Please make sure to review and follow the project's [Code of Conduct](./CODE_OF_CONDUCT.md) when contributing.
+<p align="right"><a href="#top"><img src="https://img.shields.io/badge/Move%20to%20top-Blue?style=plastic" alt="Back To Top"></a></p>
\ No newline at end of file