├── .github ├── ISSUE_TEMPLATE │ ├── bug.yaml │ ├── documentation.yaml │ └── features.yaml ├── pull_request_template.md └── workflows │ ├── assign.yml │ └── greetings.yml ├── Email Automation in Python ├── README.md ├── backend ├── Procfile ├── app.py ├── requirements.txt └── static │ ├── download.jpg │ ├── photo-1579353977828-2a4eab540b9a.jpg │ ├── tusharheroku@gmail.com │ ├── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com.jpg │ ├── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-29-15.jpg │ ├── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-31-04.jpg │ ├── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-08.jpg │ ├── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-59.jpg │ └── tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-37-32.jpg │ └── tva │ └── myphoto.jpg ├── footer.css ├── mail track footer.html └── mail ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── footer.css ├── footer.html ├── index.html ├── logo192.png ├── logo512.png ├── mail track footer.html ├── manifest.json ├── robots.txt └── style.css └── src ├── App.css ├── App.js ├── App.test.js ├── components ├── Dashboard.js ├── Home.js ├── Navbar.js └── SendMail.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.github/ISSUE_TEMPLATE/bug.yaml: -------------------------------------------------------------------------------- 1 | name: 🐛 Bug Report 2 | description: Report an issue to help improve the project 3 | title: "[Bug]: " 4 | labels: ["bug", "triage"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this bug report! 12 | - type: input 13 | id: contact 14 | attributes: 15 | label: Contact Details 16 | description: How can we get in touch with you if we need more info? 17 | placeholder: ex. email@example.com 18 | validations: 19 | required: true 20 | - type: textarea 21 | id: what-happened 22 | attributes: 23 | label: What happened? 24 | description: Also tell us, what did you expect to happen? 25 | placeholder: Tell us what you see! 26 | value: "A bug happened!" 27 | validations: 28 | required: true 29 | - type: textarea 30 | id: logs 31 | attributes: 32 | label: Relevant log output 33 | description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks. 34 | render: shell 35 | - type: checkboxes 36 | id: terms 37 | attributes: 38 | label: Code of Conduct 39 | description: By submitting this issue, you agree to follow our Code of Conduct. 40 | options: 41 | - label: I agree to follow this project's Code of Conduct 42 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation.yaml: -------------------------------------------------------------------------------- 1 | name: 📄 Documentation 2 | description: Report an issue related to documentation 3 | title: "Documentation: " 4 | labels: ["documentation"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to make our documentation better 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: Description 16 | description: A clear and concise description of what the issue is. 17 | placeholder: Tell us what you see! 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: no_prev_same 22 | attributes: 23 | label: 👀 Have you spent some time to check if this issue has been raised before? 24 | description: Have you Googled for a similar issue or checked our older issues for a similar bug? 25 | options: 26 | - label: I checked and didn't find similar issue 27 | required: true 28 | - type: checkboxes 29 | id: terms 30 | attributes: 31 | label: 🏢 Have you read the Code of Conduct? 32 | description: By submitting this issue, you agree to follow our Code of Conduct. 33 | options: 34 | - label: I agree to follow this project's Code of Conduct 35 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/features.yaml: -------------------------------------------------------------------------------- 1 | name: 💡 Feature 2 | description: Submit a proposal for a new feature 3 | title: "Feature: " 4 | labels: ["enhancement"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out our feature request form 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: Feature description 16 | description: A clear and concise description of what the feature is. 17 | placeholder: You should add ... 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: no_prev_same 22 | attributes: 23 | label: 👀 Have you spent some time to check if this issue has been raised before? 24 | description: Have you Googled for a similar issue or checked our older issues for a similar bug? 25 | options: 26 | - label: I checked and didn't find similar issue 27 | required: true 28 | - type: checkboxes 29 | id: terms 30 | attributes: 31 | label: 🏢 Have you read the Code of Conduct? 32 | description: By submitting this issue, you agree to follow our Code of Conduct. 33 | options: 34 | - label: I agree to follow this project's Code of Conduct 35 | required: true -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## ⚙️Related Issue 2 | 3 | - Info about the related issue 4 | 5 | Closes: #[issue number that will be closed through this PR] 6 | 7 | ### 📝Describe the changes you've made 8 | 9 | Give a clear description what modifications you have made 10 | 11 | ## Type of change 12 | 13 | What sort of change have you made: 14 | 15 | 16 | ## Mention any unusual behaviour of your code (Write NA if not) 17 | 18 | Any unusual behaviour of your code 19 | 20 | ## 📷Screenshot 21 | 22 | Add Screenshot here 23 | 24 | ## Checklist: 25 | 26 | - [ ] My code follows the guidelines of this project. 27 | - [ ] I have performed a self-review of my own code. 28 | - [ ] I have commented my code, particularly whereever it was hard to understand. 29 | - [ ] My changes generate no new warnings. 30 | - [ ] I have verified/tested my code by running it locally. 31 | 32 | ## Additional Info (optional) 33 | 34 | Any additional information you want to give 35 | -------------------------------------------------------------------------------- /.github/workflows/assign.yml: -------------------------------------------------------------------------------- 1 | name: Assign 2 | 3 | on: 4 | issue_comment: 5 | types: 6 | - created 7 | 8 | jobs: 9 | auto-assign: 10 | runs-on: ubuntu-latest 11 | if: ${{ github.event.comment.body == '/assign' }} 12 | steps: 13 | - name: 'Auto-assign issue' 14 | uses: pozil/auto-assign-issue@v1.4.0 15 | with: 16 | repo-token: ${{ secrets.GITHUB_TOKEN }} 17 | assignees: ${{ github.actor }} 18 | 19 | - name: Checkout code 20 | uses: actions/checkout@main 21 | 22 | - name: Run Action 23 | uses: Suvraneel/Issue_Watcher@main 24 | with: 25 | token: "${{ secrets.GITHUB_TOKEN }}" 26 | author: "${{ github.actor }}" 27 | repo: ${{ github.repository }} 28 | maxIssue: 2 -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | issues: write 10 | pull-requests: write 11 | steps: 12 | - uses: actions/first-interaction@v1 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | issue-message: 'Thank you for opening your first issue in our repository, one of our maintainers will get in touch with you soon.' 16 | pr-message: 'Thank you for opening your first pull request in our repository, one of our maintainers will get in touch with you soon.' -------------------------------------------------------------------------------- /Email Automation in Python: -------------------------------------------------------------------------------- 1 | import smtplib 2 | import ssl 3 | from email.message import EmailMessage 4 | 5 | subject = "Email From Python" 6 | body = "This is a test email form Python!" 7 | sender_email = "abc@gmail.com" 8 | receiver_email = "xyz@gmail.com" 9 | password = input("Enter a password: ") 10 | 11 | message = EmailMessage() 12 | message["From"] = sender_email 13 | message["To"] = receiver_email 14 | message["Subject"] = subject 15 | 16 | html = f""" 17 | 18 | 19 |

{subject}

20 |

{body}

21 | 22 | 23 | """ 24 | 25 | message.add_alternative(html, subtype="html") 26 | 27 | context = ssl.create_default_context() 28 | 29 | print("Sending Email!") 30 | 31 | with smtplib.SMTP_SSL("smtp.gmail.com", 465, context=context) as server: 32 | server.login(sender_email, password) 33 | server.sendmail(sender_email, receiver_email, message.as_string()) 34 | 35 | print("Success") 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mail Track 2 |
3 | 4 | 5 | 6 | [![GitHub forks](https://img.shields.io/github/forks/TusharAMD/Mailtrack.svg?style=flat&label=Fork&maxAge=43200)](https://gitHub.com/TusharAMD/Mailtrack/network/) 7 | [![GitHub stars](https://img.shields.io/github/stars/TusharAMD/Mailtrack.svg?style=flat&label=Star&maxAge=43200)](https://gitHub.com/TusharAMD/Mailtrack/stargazers/) 8 | 9 | 10 | [![GitHub issues](https://img.shields.io/github/issues/TusharAMD/Mailtrack.svg)](https://github.com/TusharAMD/Mailtrack/issues) 11 | [![GitHub issues closed](https://img.shields.io/github/issues-closed/TusharAMD/Mailtrack.svg)](https://github.com/TusharAMD/Mailtrack/issues?q=is%3Aissue+is%3Aclosed) 12 | [![GitHub pull requests](https://img.shields.io/github/issues-pr/TusharAMD/Mailtrack.svg)](https://github.com/TusharAMD/Mailtrack/pulls) 13 | [![GitHub pull requests](https://img.shields.io/github/issues-pr-closed/TusharAMD/Mailtrack.svg)](https://github.com/TusharAMD/Mailtrack/pulls?q=is%3Apr+is%3Aclosed) 14 | ![GitHub repo size](https://img.shields.io/github/repo-size/TusharAMD/Mailtrack?color=yellow) 15 | 16 |
17 | 18 | ## 📖 Introduction 19 | 20 | - This application tracks the email, let user know whether someone opens the mail and also how many times the email has been opened. 21 | - It works using Pixel tracking method 22 | - Most the work is carried out in the backend. A image is generated for the user and then added in backend folder. 23 | - This link is added in the email message and when user opens the mail a GET request is made. We also track IP address but its of the mail provider and not user. 24 | - Then the data is added to Mongodb and whenever GET request is made current time is appended into the database and we can know when user opens the mail 25 | [![](https://res.cloudinary.com/marcomontalbano/image/upload/v1646922310/video_to_markdown/images/youtube--EbSn3xdAwAQ-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://youtu.be/EbSn3xdAwAQ "") 26 | ## ✨ How to Contribute 27 | 28 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) 29 | [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) 30 | 31 | The frontend part is created using react and to run it we need to run npm i and npm start command 32 | This will open the react app 33 | Now to run the backend which is created using flask we need to simply run python app.py. The backend contains REST APIs which enable our react to communicate with MongoDB database. 34 | Our current goal is to redesign the whole project and remove the form input for sending email and instead enable user to login from their email id and send emails just like we do in All in one mail apps which are pre-installed on our devices. 35 | 36 | ### Steps to Contribute 37 | - 1. Fork this repo and clone it on your local machine 38 | - 2. Next create a new branch stating issue number and switch to it 39 | - 3. Make changes and commit changes 40 | - 4. Push to remote 41 | - You can follow these links for proper code and walkthrough [How to contribute](https://opensource.com/article/19/7/create-pull-request-github), [Youtube Video](https://www.youtube.com/watch?v=waEb2c9NDL8&t=273s&ab_channel=Jovo) 42 | 43 | ## Part of Girlscript Summer of Code 2022 44 | 45 | 46 | ## 💻 Languages and Frameworks 47 | - Python 48 | - Javascript 49 | - React 50 | - Flask 51 | - Auth0 52 | - MongoDB Atlas 53 | 54 | ## Licenses 55 | [MIT LICENSE](LICENSE) 56 | -------------------------------------------------------------------------------- /backend/Procfile: -------------------------------------------------------------------------------- 1 | web: gunicorn app:app -------------------------------------------------------------------------------- /backend/app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, request, send_from_directory,jsonify 2 | import socket 3 | from requests import get 4 | from flask_cors import CORS,cross_origin 5 | import smtplib, ssl 6 | from email.mime.text import MIMEText 7 | from email.mime.multipart import MIMEMultipart 8 | import os 9 | from PIL import Image 10 | import datetime 11 | import pymongo 12 | 13 | app = Flask(__name__, static_url_path='/static') 14 | cors = CORS(app) 15 | 16 | @app.route('/explorer//',methods=["GET","POST"]) 17 | @cross_origin() 18 | def explorer(username,path): 19 | myclient = pymongo.MongoClient("mongodb+srv://admin:admin@cluster0.wonbr.mongodb.net/Mailtrack?retryWrites=true&w=majority") 20 | mydb = myclient["Mailtrack"] 21 | mycol = mydb["Emailtrack"] 22 | 23 | mycol.find_one_and_update({'filename':path}, {'$push': {'opened': str(datetime.datetime.now().strftime("%Y-%m-%d %H-%M-%S"))}}, upsert = True) 24 | 25 | ip = get('https://api.ipify.org').text 26 | print ('My public IP address is:', ip) 27 | print("Path Name:", path,"\nUserName:", username) 28 | return send_from_directory('static', f"{username}/{path}") 29 | 30 | 31 | @app.route('/dashdata',methods=["GET","POST"]) 32 | @cross_origin() 33 | def dashdata(): 34 | myclient = pymongo.MongoClient("mongodb+srv://admin:admin@cluster0.wonbr.mongodb.net/Mailtrack?retryWrites=true&w=majority") 35 | mydb = myclient["Mailtrack"] 36 | mycol = mydb["Emailtrack"] 37 | 38 | if request.method=="POST": 39 | print(request.json,"Dash Board Request") 40 | x = mycol.find({"sender":request.json["email"]}) 41 | li=[] 42 | dicti = {} 43 | for ele in x: 44 | print(ele["sender"],ele["receiver"],ele["opened"]) 45 | dicti["sender"]=ele["sender"] 46 | dicti["receiver"]=ele["receiver"] 47 | dicti["opened"]=ele["opened"] 48 | li.append({"sender":ele["sender"],"receiver":ele["receiver"],"opened":ele["opened"]}) 49 | dicti={} 50 | return jsonify ({"res":li}) 51 | 52 | return jsonify({1:1}) 53 | 54 | 55 | 56 | @app.route('/sendemail',methods=["GET","POST"]) 57 | @cross_origin() 58 | def sendemail(): 59 | if request.method=="POST": 60 | sender_email = request.json["useremail"] 61 | receiver_email = request.json["recemail"] 62 | password = request.json["userpass"] 63 | 64 | message = MIMEMultipart("alternative") 65 | message["Subject"] = request.json["subject"] 66 | message["From"] = sender_email 67 | message["To"] = receiver_email 68 | 69 | if not (os.path.isdir(f"static/{request.json['useremail']}")): 70 | os.mkdir(f"static/{request.json['useremail']}") 71 | image = Image.new('RGB', (10, 10)) 72 | filename = str(sender_email)+"_"+str(receiver_email)+"_"+str(datetime.datetime.now().strftime("%Y-%m-%d+%H-%M-%S")) 73 | im1 = image.save(f"static/{request.json['useremail']}/{filename}.jpg") 74 | 75 | 76 | # Create the plain-text and HTML version of your message 77 | text = request.json["mailcontent"] 78 | html = f"""\ 79 | 80 | 81 |

82 | 83 |

84 | 85 | 86 | """ 87 | 88 | print(f"https://mailtracktva.herokuapp.com/explorer/{request.json['useremail']}/{filename}.jpg") 89 | 90 | # Turn these into plain/html MIMEText objects 91 | part1 = MIMEText(text, "plain") 92 | part2 = MIMEText(html, "html") 93 | 94 | # Add HTML/plain-text parts to MIMEMultipart message 95 | # The email client will try to render the last part first 96 | message.attach(part1) 97 | message.attach(part2) 98 | 99 | # Create secure connection with server and send email 100 | context = ssl.create_default_context() 101 | with smtplib.SMTP_SSL("smtp.gmail.com", 465, context=context) as server: 102 | server.login(sender_email, password) 103 | server.sendmail( 104 | sender_email, receiver_email, message.as_string() 105 | ) 106 | print(request.json) 107 | 108 | myclient = pymongo.MongoClient("mongodb+srv://admin:admin@cluster0.wonbr.mongodb.net/Mailtrack?retryWrites=true&w=majority") 109 | mydb = myclient["Mailtrack"] 110 | mycol = mydb["Emailtrack"] 111 | mydict={"sender":sender_email,"receiver":receiver_email,"filename":filename+".jpg","opened":[]} 112 | x = mycol.insert_one(mydict) 113 | 114 | 115 | return jsonify({1:1}) 116 | return jsonify({1:1}) 117 | if __name__ == "__main__": 118 | app.run(debug=True) -------------------------------------------------------------------------------- /backend/requirements.txt: -------------------------------------------------------------------------------- 1 | requests==2.25.0 2 | Flask==2.0.2 3 | gunicorn==20.1.0 4 | Flask-Cors==3.0.10 5 | Pillow==8.0.1 6 | pymongo[srv]==3.12.0 -------------------------------------------------------------------------------- /backend/static/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/download.jpg -------------------------------------------------------------------------------- /backend/static/photo-1579353977828-2a4eab540b9a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/photo-1579353977828-2a4eab540b9a.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-29-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-29-15.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-31-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-31-04.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-08.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-59.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-35-59.jpg -------------------------------------------------------------------------------- /backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-37-32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tusharheroku@gmail.com/tusharheroku@gmail.com_tusharvamanamdoskar@gmail.com_2022-01-09 16-37-32.jpg -------------------------------------------------------------------------------- /backend/static/tva/myphoto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/backend/static/tva/myphoto.jpg -------------------------------------------------------------------------------- /footer.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Poppins" , sans-serif; 7 | } 8 | body{ 9 | min-height: 100vh; 10 | width: 100%; 11 | background: #EEECEB; 12 | } 13 | footer{ 14 | position: fixed; 15 | background: #140B5C; 16 | width: 100%; 17 | bottom: 0; 18 | left: 0; 19 | } 20 | footer::before{ 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | top: 100px; 25 | height: 1px; 26 | width: 100%; 27 | background: #AFAFB6; 28 | } 29 | footer .content{ 30 | max-width: 1250px; 31 | margin: auto; 32 | padding: 30px 40px 40px 40px; 33 | } 34 | footer .content .top{ 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | margin-bottom: 50px; 39 | } 40 | .content .top .logo-details{ 41 | color: #fff; 42 | font-size: 30px; 43 | } 44 | .content .top .media-icons{ 45 | display: flex; 46 | } 47 | .content .top .media-icons a{ 48 | height: 40px; 49 | width: 40px; 50 | margin: 0 8px; 51 | border-radius: 50%; 52 | text-align: center; 53 | line-height: 40px; 54 | color: #fff; 55 | font-size: 17px; 56 | text-decoration: none; 57 | transition: all 0.4s ease; 58 | } 59 | .top .media-icons a:nth-child(1){ 60 | background: #4267B2; 61 | } 62 | .top .media-icons a:nth-child(1):hover{ 63 | color: #4267B2; 64 | background: #fff; 65 | } 66 | .top .media-icons a:nth-child(2){ 67 | background: #1DA1F2; 68 | } 69 | .top .media-icons a:nth-child(2):hover{ 70 | color: #1DA1F2; 71 | background: #fff; 72 | } 73 | .top .media-icons a:nth-child(3){ 74 | background: #E1306C; 75 | } 76 | .top .media-icons a:nth-child(3):hover{ 77 | color: #E1306C; 78 | background: #fff; 79 | } 80 | .top .media-icons a:nth-child(4){ 81 | background: #0077B5; 82 | } 83 | .top .media-icons a:nth-child(4):hover{ 84 | color: #0077B5; 85 | background: #fff; 86 | } 87 | .top .media-icons a:nth-child(5){ 88 | background: #FF0000; 89 | } 90 | .top .media-icons a:nth-child(5):hover{ 91 | color: #FF0000; 92 | background: #fff; 93 | } 94 | footer .content .link-boxes{ 95 | width: 100%; 96 | display: flex; 97 | justify-content: space-between; 98 | } 99 | footer .content .link-boxes .box{ 100 | width: calc(100% / 5 - 10px); 101 | } 102 | .content .link-boxes .box .link_name{ 103 | color: #fff; 104 | font-size: 18px; 105 | font-weight: 400; 106 | margin-bottom: 10px; 107 | position: relative; 108 | } 109 | .link-boxes .box .link_name::before{ 110 | content: ''; 111 | position: absolute; 112 | left: 0; 113 | bottom: -2px; 114 | height: 2px; 115 | width: 35px; 116 | background: #fff; 117 | } 118 | .content .link-boxes .box li{ 119 | margin: 6px 0; 120 | list-style: none; 121 | } 122 | .content .link-boxes .box li a{ 123 | color: #fff; 124 | font-size: 14px; 125 | font-weight: 400; 126 | text-decoration: none; 127 | opacity: 0.8; 128 | transition: all 0.4s ease 129 | } 130 | .content .link-boxes .box li a:hover{ 131 | opacity: 1; 132 | text-decoration: underline; 133 | } 134 | .content .link-boxes .input-box{ 135 | margin-right: 55px; 136 | } 137 | .link-boxes .input-box input{ 138 | height: 40px; 139 | width: calc(100% + 55px); 140 | outline: none; 141 | border: 2px solid #AFAFB6; 142 | background: #140B5C; 143 | border-radius: 4px; 144 | padding: 0 15px; 145 | font-size: 15px; 146 | color: #fff; 147 | margin-top: 5px; 148 | } 149 | .link-boxes .input-box input::placeholder{ 150 | color: #AFAFB6; 151 | font-size: 16px; 152 | } 153 | .link-boxes .input-box input[type="button"]{ 154 | background: #fff; 155 | color: #140B5C; 156 | border: none; 157 | font-size: 18px; 158 | font-weight: 500; 159 | margin: 4px 0; 160 | opacity: 0.8; 161 | cursor: pointer; 162 | transition: all 0.4s ease; 163 | } 164 | .input-box input[type="button"]:hover{ 165 | opacity: 1; 166 | } 167 | footer .bottom-details{ 168 | width: 100%; 169 | background: #0F0844; 170 | } 171 | footer .bottom-details .bottom_text{ 172 | max-width: 1250px; 173 | margin: auto; 174 | padding: 20px 40px; 175 | display: flex; 176 | justify-content: space-between; 177 | } 178 | .bottom-details .bottom_text span, 179 | .bottom-details .bottom_text a{ 180 | font-size: 14px; 181 | font-weight: 300; 182 | color: #fff; 183 | opacity: 0.8; 184 | text-decoration: none; 185 | } 186 | .bottom-details .bottom_text a:hover{ 187 | opacity: 1; 188 | text-decoration: underline; 189 | } 190 | .bottom-details .bottom_text a{ 191 | margin-right: 10px; 192 | } 193 | @media (max-width: 900px) { 194 | footer .content .link-boxes{ 195 | flex-wrap: wrap; 196 | } 197 | footer .content .link-boxes .input-box{ 198 | width: 40%; 199 | margin-top: 10px; 200 | } 201 | } 202 | @media (max-width: 700px){ 203 | footer{ 204 | position: relative; 205 | } 206 | .content .top .logo-details{ 207 | font-size: 26px; 208 | } 209 | .content .top .media-icons a{ 210 | height: 35px; 211 | width: 35px; 212 | font-size: 14px; 213 | line-height: 35px; 214 | } 215 | footer .content .link-boxes .box{ 216 | width: calc(100% / 3 - 10px); 217 | } 218 | footer .content .link-boxes .input-box{ 219 | width: 60%; 220 | } 221 | .bottom-details .bottom_text span, 222 | .bottom-details .bottom_text a{ 223 | font-size: 12px; 224 | } 225 | } 226 | @media (max-width: 520px){ 227 | footer::before{ 228 | top: 145px; 229 | } 230 | footer .content .top{ 231 | flex-direction: column; 232 | } 233 | .content .top .media-icons{ 234 | margin-top: 16px; 235 | } 236 | footer .content .link-boxes .box{ 237 | width: calc(100% / 2 - 10px); 238 | } 239 | footer .content .link-boxes .input-box{ 240 | width: 100%; 241 | } 242 | } -------------------------------------------------------------------------------- /mail track footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Footer Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /mail/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /mail/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /mail/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tvamailtrack", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@auth0/auth0-react": "^1.8.0", 7 | "@testing-library/jest-dom": "^5.16.1", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "axios": "^0.24.0", 11 | "framer-motion": "^6.2.8", 12 | "material-icons": "^1.10.5", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2", 15 | "react-router-dom": "^6.2.1", 16 | "react-scripts": "5.0.0", 17 | "web-vitals": "^2.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /mail/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/mail/public/favicon.ico -------------------------------------------------------------------------------- /mail/public/footer.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Poppins" , sans-serif; 7 | } 8 | body{ 9 | min-height: 100vh; 10 | width: 100%; 11 | background: #EEECEB; 12 | } 13 | footer{ 14 | position: fixed; 15 | background: #140B5C; 16 | width: 100%; 17 | bottom: 0; 18 | left: 0; 19 | } 20 | footer::before{ 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | top: 100px; 25 | height: 1px; 26 | width: 100%; 27 | background: #AFAFB6; 28 | } 29 | footer .content{ 30 | max-width: 1250px; 31 | margin: auto; 32 | padding: 30px 40px 40px 40px; 33 | } 34 | footer .content .top{ 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | margin-bottom: 50px; 39 | } 40 | .content .top .logo-details{ 41 | color: #fff; 42 | font-size: 30px; 43 | } 44 | .content .top .media-icons{ 45 | display: flex; 46 | } 47 | .content .top .media-icons a{ 48 | height: 40px; 49 | width: 40px; 50 | margin: 0 8px; 51 | border-radius: 50%; 52 | text-align: center; 53 | line-height: 40px; 54 | color: #fff; 55 | font-size: 17px; 56 | text-decoration: none; 57 | transition: all 0.4s ease; 58 | } 59 | .top .media-icons a:nth-child(1){ 60 | background: #4267B2; 61 | } 62 | .top .media-icons a:nth-child(1):hover{ 63 | color: #4267B2; 64 | background: #fff; 65 | } 66 | .top .media-icons a:nth-child(2){ 67 | background: #1DA1F2; 68 | } 69 | .top .media-icons a:nth-child(2):hover{ 70 | color: #1DA1F2; 71 | background: #fff; 72 | } 73 | .top .media-icons a:nth-child(3){ 74 | background: #E1306C; 75 | } 76 | .top .media-icons a:nth-child(3):hover{ 77 | color: #E1306C; 78 | background: #fff; 79 | } 80 | .top .media-icons a:nth-child(4){ 81 | background: #0077B5; 82 | } 83 | .top .media-icons a:nth-child(4):hover{ 84 | color: #0077B5; 85 | background: #fff; 86 | } 87 | .top .media-icons a:nth-child(5){ 88 | background: #FF0000; 89 | } 90 | .top .media-icons a:nth-child(5):hover{ 91 | color: #FF0000; 92 | background: #fff; 93 | } 94 | footer .content .link-boxes{ 95 | width: 100%; 96 | display: flex; 97 | justify-content: space-between; 98 | } 99 | footer .content .link-boxes .box{ 100 | width: calc(100% / 5 - 10px); 101 | } 102 | .content .link-boxes .box .link_name{ 103 | color: #fff; 104 | font-size: 18px; 105 | font-weight: 400; 106 | margin-bottom: 10px; 107 | position: relative; 108 | } 109 | .link-boxes .box .link_name::before{ 110 | content: ''; 111 | position: absolute; 112 | left: 0; 113 | bottom: -2px; 114 | height: 2px; 115 | width: 35px; 116 | background: #fff; 117 | } 118 | .content .link-boxes .box li{ 119 | margin: 6px 0; 120 | list-style: none; 121 | } 122 | .content .link-boxes .box li a{ 123 | color: #fff; 124 | font-size: 14px; 125 | font-weight: 400; 126 | text-decoration: none; 127 | opacity: 0.8; 128 | transition: all 0.4s ease 129 | } 130 | .content .link-boxes .box li a:hover{ 131 | opacity: 1; 132 | text-decoration: underline; 133 | } 134 | .content .link-boxes .input-box{ 135 | margin-right: 55px; 136 | } 137 | .link-boxes .input-box input{ 138 | height: 40px; 139 | width: calc(100% + 55px); 140 | outline: none; 141 | border: 2px solid #AFAFB6; 142 | background: #140B5C; 143 | border-radius: 4px; 144 | padding: 0 15px; 145 | font-size: 15px; 146 | color: #fff; 147 | margin-top: 5px; 148 | } 149 | .link-boxes .input-box input::placeholder{ 150 | color: #AFAFB6; 151 | font-size: 16px; 152 | } 153 | .link-boxes .input-box input[type="button"]{ 154 | background: #fff; 155 | color: #140B5C; 156 | border: none; 157 | font-size: 18px; 158 | font-weight: 500; 159 | margin: 4px 0; 160 | opacity: 0.8; 161 | cursor: pointer; 162 | transition: all 0.4s ease; 163 | } 164 | .input-box input[type="button"]:hover{ 165 | opacity: 1; 166 | } 167 | footer .bottom-details{ 168 | width: 100%; 169 | background: #0F0844; 170 | } 171 | footer .bottom-details .bottom_text{ 172 | max-width: 1250px; 173 | margin: auto; 174 | padding: 20px 40px; 175 | display: flex; 176 | justify-content: space-between; 177 | } 178 | .bottom-details .bottom_text span, 179 | .bottom-details .bottom_text a{ 180 | font-size: 14px; 181 | font-weight: 300; 182 | color: #fff; 183 | opacity: 0.8; 184 | text-decoration: none; 185 | } 186 | .bottom-details .bottom_text a:hover{ 187 | opacity: 1; 188 | text-decoration: underline; 189 | } 190 | .bottom-details .bottom_text a{ 191 | margin-right: 10px; 192 | } 193 | @media (max-width: 900px) { 194 | footer .content .link-boxes{ 195 | flex-wrap: wrap; 196 | } 197 | footer .content .link-boxes .input-box{ 198 | width: 40%; 199 | margin-top: 10px; 200 | } 201 | } 202 | @media (max-width: 700px){ 203 | footer{ 204 | position: relative; 205 | } 206 | .content .top .logo-details{ 207 | font-size: 26px; 208 | } 209 | .content .top .media-icons a{ 210 | height: 35px; 211 | width: 35px; 212 | font-size: 14px; 213 | line-height: 35px; 214 | } 215 | footer .content .link-boxes .box{ 216 | width: calc(100% / 3 - 10px); 217 | } 218 | footer .content .link-boxes .input-box{ 219 | width: 60%; 220 | } 221 | .bottom-details .bottom_text span, 222 | .bottom-details .bottom_text a{ 223 | font-size: 12px; 224 | } 225 | } 226 | @media (max-width: 520px){ 227 | footer::before{ 228 | top: 145px; 229 | } 230 | footer .content .top{ 231 | flex-direction: column; 232 | } 233 | .content .top .media-icons{ 234 | margin-top: 16px; 235 | } 236 | footer .content .link-boxes .box{ 237 | width: calc(100% / 2 - 10px); 238 | } 239 | footer .content .link-boxes .input-box{ 240 | width: 100%; 241 | } 242 | } -------------------------------------------------------------------------------- /mail/public/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animated Skill Bar 6 | 7 | 8 | 9 | 10 |
11 |

CSS Skills Bar UI Design

12 |
13 | unwanted 14 |
15 |
16 |
17 | 95% 18 |
19 |
20 | spam 21 |
22 |
23 |
24 | 90% 25 |
26 |
27 | inbox 28 |
29 |
30 |
31 | 72% 32 |
33 |
34 | email 35 |
36 |
37 |
38 | 85% 39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /mail/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 18 | 22 | 23 | 32 | 33 | 35 | 36 | 37 | MailTrack 38 | 39 | 40 | 41 |
42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /mail/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/mail/public/logo192.png -------------------------------------------------------------------------------- /mail/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TusharAMD/Mailtrack/fb94e7e22d5b253794299d434a55d196ce77eaba/mail/public/logo512.png -------------------------------------------------------------------------------- /mail/public/mail track footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Footer Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /mail/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /mail/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /mail/public/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Poppins" , sans-serif; 7 | } 8 | body{ 9 | min-height: 100vh; 10 | width: 100%; 11 | background: #EEECEB; 12 | } 13 | footer{ 14 | position: fixed; 15 | background: #140B5C; 16 | width: 100%; 17 | bottom: 0; 18 | left: 0; 19 | } 20 | footer::before{ 21 | content: ''; 22 | position: absolute; 23 | left: 0; 24 | top: 100px; 25 | height: 1px; 26 | width: 100%; 27 | background: #AFAFB6; 28 | } 29 | footer .content{ 30 | max-width: 1250px; 31 | margin: auto; 32 | padding: 30px 40px 40px 40px; 33 | } 34 | footer .content .top{ 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | margin-bottom: 50px; 39 | } 40 | .content .top .logo-details{ 41 | color: #fff; 42 | font-size: 30px; 43 | } 44 | .content .top .media-icons{ 45 | display: flex; 46 | } 47 | .content .top .media-icons a{ 48 | height: 40px; 49 | width: 40px; 50 | margin: 0 8px; 51 | border-radius: 50%; 52 | text-align: center; 53 | line-height: 40px; 54 | color: #fff; 55 | font-size: 17px; 56 | text-decoration: none; 57 | transition: all 0.4s ease; 58 | } 59 | .top .media-icons a:nth-child(1){ 60 | background: #4267B2; 61 | } 62 | .top .media-icons a:nth-child(1):hover{ 63 | color: #4267B2; 64 | background: #fff; 65 | } 66 | .top .media-icons a:nth-child(2){ 67 | background: #1DA1F2; 68 | } 69 | .top .media-icons a:nth-child(2):hover{ 70 | color: #1DA1F2; 71 | background: #fff; 72 | } 73 | .top .media-icons a:nth-child(3){ 74 | background: #E1306C; 75 | } 76 | .top .media-icons a:nth-child(3):hover{ 77 | color: #E1306C; 78 | background: #fff; 79 | } 80 | .top .media-icons a:nth-child(4){ 81 | background: #0077B5; 82 | } 83 | .top .media-icons a:nth-child(4):hover{ 84 | color: #0077B5; 85 | background: #fff; 86 | } 87 | .top .media-icons a:nth-child(5){ 88 | background: #FF0000; 89 | } 90 | .top .media-icons a:nth-child(5):hover{ 91 | color: #FF0000; 92 | background: #fff; 93 | } 94 | footer .content .link-boxes{ 95 | width: 100%; 96 | display: flex; 97 | justify-content: space-between; 98 | } 99 | footer .content .link-boxes .box{ 100 | width: calc(100% / 5 - 10px); 101 | } 102 | .content .link-boxes .box .link_name{ 103 | color: #fff; 104 | font-size: 18px; 105 | font-weight: 400; 106 | margin-bottom: 10px; 107 | position: relative; 108 | } 109 | .link-boxes .box .link_name::before{ 110 | content: ''; 111 | position: absolute; 112 | left: 0; 113 | bottom: -2px; 114 | height: 2px; 115 | width: 35px; 116 | background: #fff; 117 | } 118 | .content .link-boxes .box li{ 119 | margin: 6px 0; 120 | list-style: none; 121 | } 122 | .content .link-boxes .box li a{ 123 | color: #fff; 124 | font-size: 14px; 125 | font-weight: 400; 126 | text-decoration: none; 127 | opacity: 0.8; 128 | transition: all 0.4s ease 129 | } 130 | .content .link-boxes .box li a:hover{ 131 | opacity: 1; 132 | text-decoration: underline; 133 | } 134 | .content .link-boxes .input-box{ 135 | margin-right: 55px; 136 | } 137 | .link-boxes .input-box input{ 138 | height: 40px; 139 | width: calc(100% + 55px); 140 | outline: none; 141 | border: 2px solid #AFAFB6; 142 | background: #140B5C; 143 | border-radius: 4px; 144 | padding: 0 15px; 145 | font-size: 15px; 146 | color: #fff; 147 | margin-top: 5px; 148 | } 149 | .link-boxes .input-box input::placeholder{ 150 | color: #AFAFB6; 151 | font-size: 16px; 152 | } 153 | .link-boxes .input-box input[type="button"]{ 154 | background: #fff; 155 | color: #140B5C; 156 | border: none; 157 | font-size: 18px; 158 | font-weight: 500; 159 | margin: 4px 0; 160 | opacity: 0.8; 161 | cursor: pointer; 162 | transition: all 0.4s ease; 163 | } 164 | .input-box input[type="button"]:hover{ 165 | opacity: 1; 166 | } 167 | footer .bottom-details{ 168 | width: 100%; 169 | background: #0F0844; 170 | } 171 | footer .bottom-details .bottom_text{ 172 | max-width: 1250px; 173 | margin: auto; 174 | padding: 20px 40px; 175 | display: flex; 176 | justify-content: space-between; 177 | } 178 | .bottom-details .bottom_text span, 179 | .bottom-details .bottom_text a{ 180 | font-size: 14px; 181 | font-weight: 300; 182 | color: #fff; 183 | opacity: 0.8; 184 | text-decoration: none; 185 | } 186 | .bottom-details .bottom_text a:hover{ 187 | opacity: 1; 188 | text-decoration: underline; 189 | } 190 | .bottom-details .bottom_text a{ 191 | margin-right: 10px; 192 | } 193 | @media (max-width: 900px) { 194 | footer .content .link-boxes{ 195 | flex-wrap: wrap; 196 | } 197 | footer .content .link-boxes .input-box{ 198 | width: 40%; 199 | margin-top: 10px; 200 | } 201 | } 202 | @media (max-width: 700px){ 203 | footer{ 204 | position: relative; 205 | } 206 | .content .top .logo-details{ 207 | font-size: 26px; 208 | } 209 | .content .top .media-icons a{ 210 | height: 35px; 211 | width: 35px; 212 | font-size: 14px; 213 | line-height: 35px; 214 | } 215 | footer .content .link-boxes .box{ 216 | width: calc(100% / 3 - 10px); 217 | } 218 | footer .content .link-boxes .input-box{ 219 | width: 60%; 220 | } 221 | .bottom-details .bottom_text span, 222 | .bottom-details .bottom_text a{ 223 | font-size: 12px; 224 | } 225 | } 226 | @media (max-width: 520px){ 227 | footer::before{ 228 | top: 145px; 229 | } 230 | footer .content .top{ 231 | flex-direction: column; 232 | } 233 | .content .top .media-icons{ 234 | margin-top: 16px; 235 | } 236 | footer .content .link-boxes .box{ 237 | width: calc(100% / 2 - 10px); 238 | } 239 | footer .content .link-boxes .input-box{ 240 | width: 100%; 241 | } 242 | } -------------------------------------------------------------------------------- /mail/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | overflow-x: hidden; 4 | } 5 | 6 | .App-logo { 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | @media (prefers-reduced-motion: no-preference) { 12 | .App-logo { 13 | animation: App-logo-spin infinite 20s linear; 14 | } 15 | } 16 | 17 | .App-header { 18 | background-color: #282c34; 19 | min-height: 100vh; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | font-size: calc(10px + 2vmin); 25 | color: white; 26 | } 27 | 28 | .App-link { 29 | color: #61dafb; 30 | } 31 | 32 | @keyframes App-logo-spin { 33 | from { 34 | transform: rotate(0deg); 35 | } 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | 41 | .Navibar ul { 42 | list-style-type: none; 43 | margin: 0; 44 | padding: 0 0 10px 0; 45 | overflow: hidden; 46 | background-color: rgb(0, 0, 0, 0); 47 | } 48 | 49 | .Navibar ul li { 50 | float: left; 51 | } 52 | .Navibar ul li a div { 53 | vertical-align: middle; 54 | padding: 10px; 55 | } 56 | 57 | .Navibar ul li a { 58 | display: flex; 59 | vertical-align: middle; 60 | justify-content: space-between; 61 | gap: 10px; 62 | font-weight: bold; 63 | font-family: "Montserrat", sans-serif; 64 | color: rgb(0, 0, 0); 65 | text-align: center; 66 | padding: 14px 16px; 67 | text-decoration: none; 68 | } 69 | 70 | .Navibar ul li a:hover:not(.active) { 71 | background-color: rgb(0, 0, 0, 0); 72 | } 73 | 74 | #logo { 75 | font-size: 1.7rem; 76 | } 77 | 78 | #login { 79 | background-color: #ffff; 80 | border-radius: 3px; 81 | padding: 8px 15px 8px 15px; 82 | border: 1px solid rgba(0, 0, 0, 0.719); 83 | color: #146356; 84 | cursor: pointer; 85 | font-weight: bold; 86 | } 87 | #howtouse { 88 | background-color: rgb(2, 141, 134); 89 | padding: 8px 10px 5px 15px; 90 | color: white; 91 | border-radius: 3px; 92 | cursor: pointer; 93 | border: 1px solid rgba(0, 0, 0, 0.719); 94 | } 95 | #howtouse i { 96 | vertical-align: middle; 97 | } 98 | 99 | .Home { 100 | display: flex; 101 | flex-wrap: wrap; 102 | height: 80vh; 103 | align-items: center; 104 | } 105 | 106 | .lettr { 107 | margin-left: 50px; 108 | } 109 | 110 | .lettr h1 { 111 | font-family: "Share Tech Mono", monospace; 112 | margin: 0; 113 | font-size: 2.5rem; 114 | height: 2.5rem; 115 | font-weight: bold; 116 | } 117 | 118 | @media screen and (max-width: 1094px) { 119 | .lettr { 120 | justify-content: center; 121 | margin-right: 50px; 122 | } 123 | .lettr h1 { 124 | font-size: 2rem !important; 125 | height: 2rem !important; 126 | } 127 | .lettr .Super { 128 | font-size: 3.5rem !important; 129 | height: 5.5rem !important; 130 | } 131 | .circle { 132 | width: 150vw !important; 133 | bottom: -40vw !important; 134 | } 135 | } 136 | @media screen and (max-width: 420px) { 137 | .lettr { 138 | margin-left: 30px; 139 | margin-right: 30px; 140 | } 141 | .lettr h1 { 142 | font-size: 1.4rem !important; 143 | height: 1.4rem !important; 144 | } 145 | .lettr .Super { 146 | font-size: 3rem !important; 147 | height: 5rem !important; 148 | } 149 | .homecontent p { 150 | font-size: 1rem; 151 | padding-right: 30px; 152 | } 153 | .circle { 154 | bottom: -8vw !important; 155 | width: 153vw !important; 156 | } 157 | } 158 | @media screen and (max-width: 616px) { 159 | .Navibar ul li a { 160 | font-size: 1rem; 161 | padding: 12px; 162 | } 163 | #login { 164 | font-size: 0.7rem; 165 | padding: 6px 10px 6px 10px; 166 | } 167 | #howtouse { 168 | font-size: 0.7rem; 169 | padding: 3px 3px 1px 10px; 170 | } 171 | .homecontent p { 172 | padding-right: 30px; 173 | } 174 | } 175 | 176 | .lettr .Super { 177 | color: rgb(223, 189, 0); 178 | font-size: 4rem; 179 | height: 6rem; 180 | } 181 | .homecontent { 182 | text-align: left; 183 | font-size: 1.2em; 184 | line-height: 1.6; 185 | justify-content: flex-start; 186 | flex: 50%; 187 | flex-direction: row; 188 | } 189 | 190 | .homecontent p { 191 | padding-left: 50px; 192 | font-family: "Poppins", sans-serif; 193 | font-weight: bold; 194 | } 195 | .homecontent h1 span { 196 | font-size: 1.2em; 197 | color: rgb(254, 202, 38); 198 | } 199 | 200 | .homeimages { 201 | flex: 50%; 202 | } 203 | .homeimages div img { 204 | width: 100%; 205 | animation-name: homepageimage; 206 | animation-duration: 3s; 207 | animation-iteration-count: infinite; 208 | animation-timing-function: linear; 209 | } 210 | @keyframes homepageimage { 211 | 0% { 212 | transform: translate(0px, 0px); 213 | } 214 | 25% { 215 | transform: translate(0px, -7px); 216 | } 217 | 50% { 218 | transform: translate(0px, -10px); 219 | } 220 | 75% { 221 | transform: translate(0px, -7px); 222 | } 223 | 100% { 224 | transform: translate(0px, 0px); 225 | } 226 | } 227 | .circle { 228 | z-index: -1; 229 | position: fixed; 230 | bottom: -15vw; 231 | right: -25vw; 232 | width: 65vw; 233 | height: 65vw; 234 | background-color: rgb(21, 177, 165); 235 | border-radius: 100%; 236 | } 237 | .bottomline { 238 | font-family: "Roboto", sans-serif; 239 | bottom: 0; 240 | } 241 | #gotodash { 242 | margin-top: 20px; 243 | background-color: rgb(0, 170, 158); 244 | padding: 10px; 245 | color: white; 246 | border-radius: 3px; 247 | width: fit-content; 248 | cursor: pointer; 249 | } 250 | #gotodash i { 251 | vertical-align: middle; 252 | } 253 | #gotodash:hover { 254 | background-color: rgb(0, 160, 148); 255 | } 256 | 257 | #gotodash a { 258 | color: white; 259 | text-decoration: none; 260 | } 261 | 262 | .dashboard { 263 | display: flex; 264 | justify-content: center; 265 | flex-direction: column; 266 | } 267 | .dashboard h1 { 268 | width: 100%; 269 | padding: 15px; 270 | color: rgb(45, 45, 45); 271 | border: 2px solid; 272 | border-left: none; 273 | border-right: none; 274 | font-family: "Be Vietnam Pro", sans-serif; 275 | } 276 | .DashboardContents { 277 | display: flex; 278 | flex-direction: column; 279 | justify-content: center; 280 | align-items: center; 281 | } 282 | .Firstline { 283 | display: flex; 284 | flex-direction: row; 285 | justify-content: center; 286 | width: 100%; 287 | gap: 100px; 288 | } 289 | 290 | .sendmail { 291 | display: flex; 292 | justify-content: flex-end; 293 | } 294 | .sendmail div { 295 | font-size: 1.2em; 296 | margin-right: 30px; 297 | background-color: rgb(255, 104, 102); 298 | padding: 5px 10px 5px 10px; 299 | color: white; 300 | font-family: "Be Vietnam Pro", sans-serif; 301 | border-radius: 10px; 302 | } 303 | .sendmail div span { 304 | vertical-align: middle; 305 | padding-left: 3px; 306 | } 307 | .sendmail div a { 308 | text-decoration: none; 309 | color: inherit; 310 | } 311 | .sendmail div:hover { 312 | background-color: rgb(235, 94, 92); 313 | } 314 | .SendEmailPage { 315 | width: 100vw; 316 | height: 100vh; 317 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 318 | background-size: 400% 400%; 319 | animation: gradient 15s ease infinite; 320 | display: flex; 321 | justify-content: center; 322 | align-items: center; 323 | vertical-align: middle; 324 | } 325 | 326 | @keyframes gradient { 327 | 0% { 328 | background-position: 0% 50%; 329 | } 330 | 50% { 331 | background-position: 100% 50%; 332 | } 333 | 100% { 334 | background-position: 0% 50%; 335 | } 336 | } 337 | 338 | .EmailForm { 339 | padding: 10px; 340 | background-color: rgb(50, 50, 50, 0.6); 341 | width: 40vw; 342 | height: 80vh; 343 | } 344 | .EmailForm form { 345 | display: flex; 346 | flex-direction: column; 347 | justify-content: center; 348 | gap: 30px; 349 | padding-top: 30px; 350 | } 351 | .EmailForm form input { 352 | font-family: "Source Sans Pro", sans-serif; 353 | font-size: 1.3em; 354 | background-color: rgb(0, 0, 0, 0.3); 355 | border: none; 356 | height: 50px; 357 | margin: 0px 50px 0px 50px; 358 | color: white; 359 | } 360 | .EmailForm form input:focus { 361 | outline: none; 362 | } 363 | 364 | .EmailForm form textarea { 365 | font-family: "Source Sans Pro", sans-serif; 366 | font-size: 1.3em; 367 | height: 5em; 368 | background-color: rgb(0, 0, 0, 0.3); 369 | border: none; 370 | color: white; 371 | margin: 0px 50px 0px 50px; 372 | } 373 | .EmailForm form textarea:focus { 374 | outline: none; 375 | } 376 | .sendbutton { 377 | cursor: pointer; 378 | margin-top: 30px; 379 | margin-bottom: 10px; 380 | background-color: rgb(255, 145, 143); 381 | border: 3px solid rgb(20, 177, 165); 382 | border-radius: 5px; 383 | color: white; 384 | padding: 15px 32px; 385 | text-align: center; 386 | text-decoration: none; 387 | display: inline-block; 388 | font-size: 16px; 389 | } 390 | .EmailForm button span { 391 | margin-left: 5px; 392 | vertical-align: middle; 393 | } 394 | .mails { 395 | width: 100%; 396 | } 397 | .mails table { 398 | font-family: "Source Sans Pro", sans-serif; 399 | width: 100%; 400 | border: none; 401 | color: white; 402 | } 403 | th { 404 | background-color: rgb(42, 47, 57); 405 | } 406 | th, 407 | td { 408 | text-align: left; 409 | } 410 | tr { 411 | height: 50px; 412 | } 413 | tr:nth-child(even) { 414 | background-color: rgb(255, 124, 123); 415 | } 416 | tr:nth-child(odd) { 417 | background-color: rgb(19, 176, 165); 418 | } 419 | -------------------------------------------------------------------------------- /mail/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Navbar from './components/Navbar'; 4 | import { Auth0Provider } from "@auth0/auth0-react"; 5 | 6 | function App() { 7 | return ( 8 | 15 |
16 | 17 |
18 | 19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /mail/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /mail/src/components/Dashboard.js: -------------------------------------------------------------------------------- 1 | import {useEffect,useState} from 'react'; 2 | import axios from 'axios'; 3 | import { useAuth0 } from "@auth0/auth0-react"; 4 | import 'material-icons/iconfont/material-icons.css'; 5 | function Dashboard() { 6 | const { user, isAuthenticated, isLoading } = useAuth0(); 7 | const [response,setResponse]=useState({"data":{"res":[]}}) 8 | const [bool,setBool] = useState(false) 9 | useEffect(() => { 10 | axios.post("https://mailtracktva.herokuapp.com/dashdata", { "email": user.email }) 11 | .then(res => { 12 | console.log(res); 13 | console.log(res.data); 14 | setResponse(res.data) 15 | console.log(user) 16 | setBool(true) 17 | }) 18 | },[]); 19 | 20 | return ( 21 |
22 |
Send Mail send
23 |

Dashboard

24 |
25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {bool && response.res.map(({opened,receiver,sender})=> 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | )} 47 | 48 | 49 |
FromToNumber of Times opened
{sender}{receiver}{opened.length} times {opened}
50 | 51 | 52 |
53 |
54 | 55 |
56 | ); 57 | } 58 | 59 | export default Dashboard; 60 | -------------------------------------------------------------------------------- /mail/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import { useAuth0 } from "@auth0/auth0-react"; 2 | import { motion } from 'framer-motion' 3 | function Home() { 4 | const { user, isAuthenticated, isLoading } = useAuth0(); 5 | 6 | const text1 = "Tracking Your Emails Is Now " 7 | const text2 = "Super Easy." 8 | 9 | const effect = { 10 | hidden: { 11 | opacity: 0, 12 | }, 13 | visible: { 14 | opacity: 1, 15 | y: [-1, -1.9, -2.7, 1], 16 | scaleY: [1, 1.3, 0.8, 1] 17 | } 18 | } 19 | 20 | const list = { 21 | hidden: { 22 | opacity: 0, 23 | transition: { 24 | when: 'afterChildren' 25 | } 26 | }, 27 | visible: { 28 | opacity: 1, 29 | transition: { 30 | when: 'beforeChildren', 31 | staggerChildren: 0.15 32 | } 33 | } 34 | } 35 | 36 | const spanVariants = { 37 | visible: { y: 0, scaleY: 1 }, 38 | hover: { 39 | y: [-1, -2, -2.8, 0.9, 0], 40 | scaleY: [1, 1.3, 0.8, 1.2, 1], 41 | color: 'red' 42 | } 43 | } 44 | return ( 45 | <> 46 |
47 |
48 | 49 | {text1.split("").map((Letter, id) => ( 50 | 51 | {Letter} 52 | 53 | ))} 54 | 55 | 56 | {text2.split("").map((Letter, id) => ( 57 | 58 | {Letter} 59 | 60 | ))} 61 | 62 | Mail Tracker helps you to check who opened your emails, how many times with zero cost and with great accuracy. 63 | {isAuthenticated &&
Go to Dashboard 64 | play_arrow
} 65 | 66 |
67 |
68 | 69 | 70 | 71 |
72 |
73 |
74 |
75 |

Made with 💖

76 | 77 | ); 78 | } 79 | 80 | export default Home; 81 | -------------------------------------------------------------------------------- /mail/src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | import Home from './Home'; 3 | import Dashboard from './Dashboard'; 4 | import SendMail from './SendMail'; 5 | import { motion } from 'framer-motion' 6 | import { useAuth0 } from "@auth0/auth0-react"; 7 | import 'material-icons/iconfont/material-icons.css'; 8 | function Navbar() { 9 | const { loginWithRedirect, logout } = useAuth0(); 10 | const { user, isAuthenticated, isLoading } = useAuth0(); 11 | 12 | const buttonvariant = { 13 | hover: { 14 | scale: 1.17, 15 | backgroundColor: '#146356', 16 | color: 'white', 17 | transition: { 18 | duration: 0.1, 19 | ease: 'easeInOut' 20 | } 21 | } 22 | } 23 | 24 | const ulvariant = { 25 | hidden: { 26 | y: -60, 27 | opacity: 0, 28 | }, 29 | visible: { 30 | y: 0, 31 | opacity: 1, 32 | transition: { delay: 1, duration: 0.4, type: 'spring', stiffness: 360 } 33 | } 34 | } 35 | 36 | if (isAuthenticated) { 37 | return ( 38 |
39 | 48 | 49 | 50 | 51 | }> 52 | }> 53 | }> 54 | 55 | 56 |
57 | ); 58 | } 59 | else { 60 | return ( 61 |
62 | 67 | 68 | 69 | 70 | }> 71 | 72 | 73 |
74 | ); 75 | } 76 | } 77 | 78 | export default Navbar; 79 | -------------------------------------------------------------------------------- /mail/src/components/SendMail.js: -------------------------------------------------------------------------------- 1 | import { useAuth0 } from "@auth0/auth0-react"; 2 | import 'material-icons/iconfont/material-icons.css'; 3 | import {useState} from 'react'; 4 | import axios from 'axios'; 5 | function SendMail() { 6 | const { user, isAuthenticated, isLoading } = useAuth0(); 7 | const[useremail,setUseremail]=useState("") 8 | const[userpass,setUserpass]=useState("") 9 | const[subject,setSubject]=useState("") 10 | const[mailcontent,setMailcontent]=useState("") 11 | const[recemail,setRecemail]=useState("") 12 | 13 | function handleSubmit(){ 14 | 15 | axios.post("https://mailtracktva.herokuapp.com/sendemail", { useremail,userpass, subject, mailcontent, recemail }) 16 | .then(res => { 17 | console.log(res); 18 | console.log(res.data); 19 | 20 | }) 21 | } 22 | 23 | return ( 24 |
25 |
26 |
27 | setUseremail(e.target.value)} placeholder="Please Enter Your Mail ID"/> 28 | setUserpass(e.target.value)} placeholder="Please Enter Your Password"/> 29 | setSubject(e.target.value)} placeholder="Please Enter Subject"/> 30 |