├── .eslintrc.json
├── public
    ├── mail.png
    ├── arrow.png
    ├── delete.png
    ├── copyicon.png
    ├── loadingarrowicon.png
    └── loadinganimation.svg
├── src
    └── app
    │   ├── favicon.ico
    │   ├── components
    │       ├── Title.tsx
    │       ├── RandomEmailBox.tsx
    │       ├── Button.tsx
    │       ├── MailBox.tsx
    │       ├── MessagePageBox.tsx
    │       └── About.tsx
    │   ├── layout.tsx
    │   ├── api
    │       └── route.ts
    │   ├── globals.css
    │   └── page.tsx
├── next.config.js
├── postcss.config.js
├── .gitignore
├── tailwind.config.js
├── package.json
├── tsconfig.json
├── LICENSE
├── CONTRIBUTING.md
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/mail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/public/mail.png


--------------------------------------------------------------------------------
/public/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/public/arrow.png


--------------------------------------------------------------------------------
/public/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/public/delete.png


--------------------------------------------------------------------------------
/public/copyicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/public/copyicon.png


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/loadingarrowicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikashkhati007/FakeMailGenerator/HEAD/public/loadingarrowicon.png


--------------------------------------------------------------------------------
/src/app/components/Title.tsx:
--------------------------------------------------------------------------------
 1 | const Title = () => {
 2 |   return (
 3 |     <>
 4 |       <h1 className="title text-white font-bold text-4xl">Temp Mail Generator</h1>
 5 |     </>
 6 |   );
 7 | };
 8 | 
 9 | export default Title;
10 | 


--------------------------------------------------------------------------------
/src/app/components/RandomEmailBox.tsx:
--------------------------------------------------------------------------------
 1 | const RandomEmailBox = ({value}: any) => {
 2 |   return (
 3 |     <>
 4 |       <input className="mailtitle xl:w-[1/3] lg:w-[1/5] md:w-[1/4] sm:w-[1/2] w-[65%] h-12 p-5 rounded-full overflow-hidden outline-none border border-blue-900 shadow-md" value={!value?"loading..":value} readOnly>
 5 | 
 6 |       </input>
 7 |     </>
 8 |   )
 9 | }
10 | 
11 | export default RandomEmailBox
12 | 


--------------------------------------------------------------------------------
/src/app/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | const Button = ({label, imgsrc, onClick, className}:any) => {
 3 |   return (
 4 |     <>
 5 |       <button onClick={onClick} className={`${className} button w-40 h-10 rounded-md bg-white flex justify-around items-center`}>
 6 |        {label}
 7 |         <Image src={imgsrc} width={25} height={2} alt=""/>
 8 |       </button>
 9 |     </>
10 |   )
11 | }
12 | 
13 | export default Button
14 | 


--------------------------------------------------------------------------------
/.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 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tempmail",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@types/node": "20.3.0",
13 |     "@types/react": "18.2.11",
14 |     "@types/react-dom": "18.2.4",
15 |     "autoprefixer": "10.4.14",
16 |     "eslint": "8.42.0",
17 |     "eslint-config-next": "13.4.5",
18 |     "js-cookie": "^3.0.5",
19 |     "next": "13.4.5",
20 |     "postcss": "8.4.24",
21 |     "react": "18.2.0",
22 |     "react-dom": "18.2.0",
23 |     "tailwindcss": "3.3.2",
24 |     "typescript": "5.1.3"
25 |   },
26 |   "devDependencies": {
27 |     "@types/js-cookie": "^3.0.3"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./src/*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/components/MailBox.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | const MailBox = ({ email, subject, message, time }: any) => {
 3 |   return (
 4 |     <>
 5 |         <div className="mailboxcontainer hover:bg-[#0099FF] hover:bg-opacity-20 hover:cursor-pointer border border-blue-100 border-l-2 border-l-[#0099FF] h-fit m-5 p-2 ">
 6 |           <span className="text-xs opacity-70 font-medium">{email}</span>
 7 |           <p className="text-sm font-medium">{subject}</p>
 8 |           <div className="w-full flex justify-between">
 9 |             <span className="text-[12px] opacity-70 font-medium">
10 |               {message}
11 |             </span>
12 |             <p className="text-xs opacity-70 font-medium">{time}</p>
13 |           </div>
14 |         </div>
15 |     </>
16 |   );
17 | };
18 | 
19 | export default MailBox;
20 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export const metadata = {
 7 |   title: 'Temporary Mail Generator',
 8 |   description: 'Welcome to Temporary Mail Generator, the ultimate online destination for individuals who value their privacy and seek convenient email solutions. Our innovative platform allows you to generate temporary email addresses effortlessly, providing you with a secure and reliable way to communicate without compromising your personal information.',
 9 | }
10 | 
11 | export default function RootLayout({
12 |   children,
13 | }: {
14 |   children: React.ReactNode
15 | }) {
16 |   return (
17 |     <html lang="en">
18 |       <body className={inter.className}>{children}</body>
19 |     </html>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/public/loadinganimation.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M82.4 32.2a37.52 37.52 0 0 0-55 25.13L16.97 42.97.92 52.44A64.42 64.42 0 0 1 101.07 12.2l-.26 17.93z" fill="#ffffff"/><path d="M82.4 32.2a37.52 37.52 0 0 0-55 25.13L16.97 42.97.92 52.44A64.42 64.42 0 0 1 101.07 12.2l-.26 17.93z" fill="#ffffff" transform="rotate(120 64 64)"/><path d="M82.4 32.2a37.52 37.52 0 0 0-55 25.13L16.97 42.97.92 52.44A64.42 64.42 0 0 1 101.07 12.2l-.26 17.93z" fill="white" transform="rotate(240 64 64)"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="120 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform></g></svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Vikash Khati
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/components/MessagePageBox.tsx:
--------------------------------------------------------------------------------
 1 | const MessagePageBox = ({ from, subject, body }: any) => {
 2 |   return (
 3 |     <div className="w-full h-fit overflow-hidden bg-[#0099FF] flex justify-center items-center">
 4 |       <div className="w-4/5 md:w-3/4 lg:w-2/3 h-fit bg-white rounded-2xl shadow-md p-6 overflow-y-auto overflow-x-hidden m-10">
 5 |         <div className="mb-6">
 6 |           <p className="text-sm opacity-70 font-medium">
 7 |             <span className="font-bold">From:</span>{" "}
 8 |             <span className="break-words">{from}</span>
 9 |           </p>
10 |         </div>
11 |         <hr className="my-6" />
12 |         <div className="mb-6">
13 |           <p className="text-lg opacity-70 font-medium">
14 |             <span className="font-bold">Subject:</span>{" "}
15 |             <span className="break-words">{subject}</span>
16 |           </p>
17 |         </div>
18 |         <hr className="my-6" />
19 |         <div>
20 |           <p className="text-base opacity-70 font-medium">
21 |             <span className="font-bold">Body:</span>{" "}
22 |             <span className="break-words">{body}</span>
23 |           </p>
24 |         </div>
25 |       </div>
26 |     </div>
27 |   );
28 | };
29 | 
30 | export default MessagePageBox;
31 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | Thank you for considering contributing to our project! We appreciate your time and effort to make this project better.
 4 | 
 5 | ## Getting Started
 6 | 
 7 | - Fork the repository and clone it locally.
 8 | - Install dependencies using `npm install`.
 9 | - Create a new branch for your contribution: `git checkout -b feature/your-feature`.
10 | 
11 | ## Making Changes
12 | 
13 | - Follow the coding style and guidelines.
14 | - Test your changes thoroughly.
15 | - Ensure that your code is well-documented.
16 | 
17 | ## Submitting Changes
18 | 
19 | - Commit your changes with a clear and descriptive message.
20 | - Push your changes to your forked repository.
21 | - Open a pull request to the main repository's `develop` branch.
22 | 
23 | ## Code Style
24 | 
25 | We follow [our coding style guide](link-to-your-style-guide) for consistency.
26 | 
27 | ## Reporting Bugs
28 | 
29 | If you find any bugs or issues, please open an issue on our [issue tracker](link-to-issue-tracker).
30 | 
31 | ## Feature Requests
32 | 
33 | If you have ideas for new features or improvements, feel free to open an issue to discuss.
34 | 
35 | ## Thank You
36 | 
37 | Thank you for contributing to our project! Your efforts help make it better for everyone.
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📧 Fake Mail Generator
 2 | 
 3 | Welcome to Fake Mail Generator, your go-to tool for generating temporary email addresses designed for seamless testing and development experiences.
 4 | 
 5 | ## ✨ Features
 6 | 
 7 | - Generate random and disposable email addresses with a single click.
 8 | - Safely test applications without exposing your real email.
 9 | - User-friendly interface for easy navigation.
10 | 
11 | ## 🚀 Getting Started
12 | 
13 | 1. Visit [Fake Mail Generator](https://fake-mail-generator.vercel.app/).
14 | 2. Click on the "Generate" button to obtain a random email address.
15 | 3. Copy the generated email address and effortlessly use it for your testing needs.
16 | 
17 | ## 🤝 Contributing
18 | 
19 | If you're excited to contribute, check out our [CONTRIBUTE.md](CONTRIBUTING.md) for guidelines.
20 | 
21 | ## 🐛 Bug Reports and 🚀 Feature Requests
22 | 
23 | Found a bug or have an idea? Open an issue on our [GitHub repository](https://github.com/vikashkhati007/FakeMailGenerator).
24 | 
25 | ## 📜 License
26 | 
27 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
28 | 
29 | ## 🙏 Acknowledgments
30 | 
31 | Big thanks to our amazing contributors who've helped shape and enhance this project.
32 | 
33 | Happy testing! 🌐🔍
34 | 


--------------------------------------------------------------------------------
/src/app/components/About.tsx:
--------------------------------------------------------------------------------
 1 | const About = () => {
 2 |   return (
 3 |     <div className="about bg-[#0099FF] w-full h-fit text-white p-5 flex flex-col gap-4 overflow-hidden">
 4 |       <h1 className="text-3xl font-bold">ABOUT</h1>
 5 |       <hr className="w-16 h-2 bg-white"></hr>
 6 |       <p className="text-sm">
 7 |         Welcome to Temporary Mail Generator, the ultimate online destination for individuals who value their privacy and seek convenient email solutions. Our innovative platform allows you to generate temporary email addresses effortlessly, providing you with a secure and reliable way to communicate without compromising your personal information.
 8 |       </p>
 9 |       <p className="text-sm">
10 |         Using our user-friendly interface, you can quickly generate a temporary email address with just a few clicks. These email addresses are fully functional, allowing you to receive messages, attachments, and verification emails as needed. Your temporary inbox is easily accessible, enabling you to check for important communications while keeping your primary email account clutter-free and shielded from potential threats.
11 |       </p>
12 |       <p className="text-sm">
13 |         Protect your privacy and simplify your online communication with Temporary Mail Generator. Start generating temporary email addresses today and experience a secure and hassle-free way to engage in online activities while keeping your personal information secure. Stay in control of your digital presence and enjoy the peace of mind you deserve.
14 |       </p>
15 |     </div>
16 |   );
17 | };
18 | 
19 | export default About;
20 | 


--------------------------------------------------------------------------------
/src/app/api/route.ts:
--------------------------------------------------------------------------------
 1 | export async function GET() {
 2 |   const res = await fetch(
 3 |     process.env.GETROUTEAPI!,
 4 |     {
 5 |       credentials: "include",
 6 |       headers: {
 7 |         "User-Agent":
 8 |           "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0",
 9 |         Accept: "*/*",
10 |         "Accept-Language": "en-US,en;q=0.5",
11 |         "Content-Type": "application/json",
12 |         "Application-Name": "web",
13 |         "Application-Version": "4.0.0",
14 |         "X-CORS-Header": "iaWg3pchvFx48fY",
15 |         "Sec-GPC": "1",
16 |         "Sec-Fetch-Dest": "empty",
17 |         "Sec-Fetch-Mode": "cors",
18 |         "Sec-Fetch-Site": "same-site",
19 |         Priority: "u=4",
20 |       },
21 |       referrer: process.env.REFERRERURL,
22 |       body: '{"min_name_length":10,"max_name_length":10}',
23 |       method: "POST",
24 |       mode: "cors",
25 |     }
26 |   );
27 | 
28 |   const rawText = await res.text();
29 |   const data = JSON.parse(rawText);
30 |   return new Response(data.email);
31 | }
32 | 
33 | export async function POST(req: Request) {
34 |   const body = await req.json(); // grabs JSON from POST request
35 |   const res = await fetch(
36 |     `${process.env.POSTROUTEAPI}${body.email}/messages`,
37 |     {
38 |       credentials: "include",
39 |       headers: {
40 |         "User-Agent":
41 |           "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0",
42 |         Accept: "*/*",
43 |         "Accept-Language": "en-US,en;q=0.5",
44 |         "Content-Type": "application/json",
45 |         "Application-Name": "web",
46 |         "Application-Version": "4.0.0",
47 |         "X-CORS-Header": "iaWg3pchvFx48fY",
48 |         "Sec-GPC": "1",
49 |         "Sec-Fetch-Dest": "empty",
50 |         "Sec-Fetch-Mode": "cors",
51 |         "Sec-Fetch-Site": "same-site",
52 |         Priority: "u=4",
53 |       },
54 |       referrer: process.env.REFERRERURL,
55 |       method: "GET",
56 |       mode: "cors",
57 |     }
58 |   );
59 |   const data = await res.text();
60 |   return new Response(data);
61 | }
62 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500&display=swap');
  6 | @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500&display=swap');
  7 | @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
  8 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');
  9 | @import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&display=swap');
 10 |   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
 11 | 
 12 | :root {
 13 |   --foreground-rgb: 0, 0, 0;
 14 |   --background-start-rgb: 214, 219, 220;
 15 |   --background-end-rgb: 255, 255, 255;
 16 | }
 17 | 
 18 | * {
 19 |   margin: 0;
 20 |   padding: 0;
 21 |   box-sizing: border-box;
 22 | }
 23 | 
 24 | body {
 25 |   background-color: white;
 26 | 
 27 | }
 28 | 
 29 | .title {
 30 |   font-family: 'Be Vietnam Pro', sans-serif;
 31 | }
 32 | 
 33 | .button {
 34 |   font-family: 'Urbanist', sans-serif;
 35 | }
 36 | 
 37 | .inbox {
 38 |   font-family: 'Righteous', cursive;
 39 | }
 40 | 
 41 | .mailtitle {
 42 |   font-family: 'DM Sans', sans-serif;
 43 | }
 44 | 
 45 | /* CSS for the custom scrollbar */
 46 | .custom-scrollbar {
 47 |   scrollbar-width: thin;
 48 |   scrollbar-color: rgba(136, 136, 136, 0.4) rgba(241, 241, 241, 0.4);
 49 | }
 50 | 
 51 | .custom-scrollbar::-webkit-scrollbar {
 52 |   width: 8px;
 53 |   /* Decreased width for scrollbar */
 54 |   background-color: rgba(241, 241, 241, 0.4);
 55 | }
 56 | 
 57 | .custom-scrollbar::-webkit-scrollbar-thumb {
 58 |   background-color: rgba(136, 136, 136, 0.4);
 59 |   border-radius: 15px;
 60 | }
 61 | 
 62 | .custom-scrollbar::-webkit-scrollbar-thumb:hover {
 63 |   background-color: rgba(85, 85, 85, 0.6);
 64 | }
 65 | 
 66 | .custom-scrollbar::-webkit-scrollbar-track {
 67 |   background-color: rgba(241, 241, 241, 0.4);
 68 | }
 69 | 
 70 | .about h1 {
 71 |   font-family: 'Aoboshi One', serif;
 72 | }
 73 | 
 74 | .about p{
 75 |   font-family: 'Poppins', sans-serif;
 76 | }
 77 | 
 78 | .mailboxcontainer {
 79 |   /* Add necessary styles */
 80 |   overflow-y: scroll; /* Enable vertical scrolling */
 81 |   scrollbar-width: none; /* Hide the scrollbar for Firefox */
 82 |   -ms-overflow-style: none; /* Hide the scrollbar for IE 10+ */
 83 | }
 84 | 
 85 | /* Hide the scrollbar for Chrome, Safari, and Opera */
 86 | .mailboxcontainer::-webkit-scrollbar {
 87 |   width: 0;
 88 |   background: transparent;
 89 | }
 90 | 
 91 | /* Add a custom scrollbar style for Firefox */
 92 | .mailboxcontainer::-moz-scrollbar {
 93 |   width: 0;
 94 |   background: transparent;
 95 | }
 96 | 
 97 | .mailboxcontainer::-moz-scrollbar-thumb {
 98 |   background: #888;
 99 |   border-radius: 10px;
100 | }
101 | 
102 | .mailboxcontainer::-moz-scrollbar-thumb:hover {
103 |   background: #555;
104 | }
105 | 
106 | /* Add a custom scrollbar style for Webkit (Chrome, Safari, and Opera) */
107 | .mailboxcontainer::-webkit-scrollbar-thumb {
108 |   background: #888;
109 |   border-radius: 10px;
110 | }
111 | 
112 | .mailboxcontainer::-webkit-scrollbar-thumb:hover {
113 |   background: #555;
114 | }
115 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useState, useEffect } from "react";
  3 | import Image from "next/image";
  4 | import Button from "./components/Button";
  5 | import MailBox from "./components/MailBox";
  6 | import RandomEmailBox from "./components/RandomEmailBox";
  7 | import Title from "./components/Title";
  8 | import About from "./components/About";
  9 | import MessagePageBox from "./components/MessagePageBox";
 10 | const Home = () => {
 11 |   const [refresh, setRefresh] = useState(false);
 12 |   const [del, setDelete] = useState(false);
 13 |   const [email, setEmail] = useState("");
 14 |   const [message, setMessageData] = useState([]);
 15 |   const [username, setUsername] = useState("");
 16 |   const [domain, setDomain] = useState("");
 17 |   const [messageShow, setMessageShow] = useState(false);
 18 |   const [messageSubject, setMessageSubject] = useState("");
 19 |   const [messageFrom, setMessageFrom] = useState("");
 20 |   const [messageTextBody, setMessageTextBody] = useState("");
 21 | 
 22 |   useEffect(() => {
 23 |     async function getEmail() {
 24 |       const res = await fetch(
 25 |         "https://fake-mail-generator.vercel.app/api/"
 26 |       );
 27 |       const randomEmail = await res.text();
 28 |       setEmail(randomEmail);
 29 |       const email = randomEmail;
 30 |       const atIndex = email.indexOf("@");
 31 |       const username = email.substring(0, atIndex);
 32 |       setUsername(username);
 33 |       const domain = email.substring(atIndex + 1);
 34 |       setDomain(domain);
 35 | 
 36 |       //Message Retreival
 37 |           const interval = setInterval(async () => {
 38 |           const res2 = await fetch("/api", {
 39 |             method: "POST",
 40 |             headers: {
 41 |               "Content-Type": "application/json",
 42 |             },
 43 |             body: JSON.stringify({ email: email}),
 44 |           });
 45 |             const messageData = await res2.json();
 46 |             setMessageData(messageData);
 47 |           }, 1000);
 48 | 
 49 |       return () => {
 50 |         clearInterval(interval);
 51 |       };
 52 |     }
 53 | 
 54 |     getEmail();
 55 |   }, [del]);
 56 | 
 57 |   async function refreshMessage() {
 58 |     const res2 = await fetch("https://fake-mail-generator.vercel.app/api", {
 59 |   method: "POST",
 60 |   headers: {
 61 |     "Content-Type": "application/json",
 62 |   },
 63 |   body: JSON.stringify({ email: email}),
 64 | });
 65 |     const messageData = await res2.json();
 66 |     setMessageData(messageData);
 67 |   }
 68 | 
 69 |   function copyToClipboard(email: any) {
 70 |     var input = document.createElement("input");
 71 |     input.value = email;
 72 |     document.body.appendChild(input);
 73 |     input.select();
 74 |     input.setSelectionRange(0, 99999);
 75 |     document.execCommand("copy");
 76 |     document.body.removeChild(input);
 77 |   }
 78 | 
 79 |   function whichMessageClicked(d: any) {
 80 | // Set Message Refreshed Data 
 81 |      const data = message.filter((item: any) => item.id === d);
 82 |      //@ts-ignore
 83 | setMessageFrom(data[0].from);
 84 |      //@ts-ignore
 85 | setMessageTextBody(data[0].body_text);
 86 |      //@ts-ignore
 87 | setMessageSubject(data[0].subject);
 88 | setMessageShow(true);
 89 |   }
 90 | 
 91 |   return (
 92 |     <div className="w-[100%] h-screen">
 93 |       <div className="uppercontainer w-full h-[60%] bg-[#0099FF] md:rounded-b-full sm:rounded-b-3xl flex flex-col justify-center items-center gap-7">
 94 |         <Title />
 95 |         <RandomEmailBox value={email} />
 96 |         <div className="buttoncontainer flex gap-5">
 97 |           <Button
 98 |             onClick={() => {
 99 |               copyToClipboard(email);
100 |             }}
101 |             label={"Copy Email"}
102 |             imgsrc={"/copyicon.png"}
103 |           />
104 |           <Button
105 |           onClick={(()=>{window.location.reload()})}
106 |             label={"Delete Email"}
107 |             imgsrc={"/delete.png"}
108 |           />
109 |         </div>
110 |       </div>
111 |       <div className="w-full flex justify-center items-center mt-5">
112 |         {!refresh ? (
113 |           <Image
114 |             className="cursor-pointer"
115 |             src={"/loadingarrowicon.png"}
116 |             width={50}
117 |             height={50}
118 |             alt=""
119 |             onClick={() => {
120 |               setRefresh(true);
121 |               setTimeout(() => {
122 |                 setRefresh(false);
123 |                 refreshMessage();
124 |               }, 1000);
125 |             }}
126 |           />
127 |         ) : (
128 |           <div className="w-[50px] h-[50px] bg-[#0099FF] rounded-full flex justify-center items-center">
129 |             <Image
130 |               className="cursor-pointer"
131 |               src={"/loadinganimation.svg"}
132 |               width={40}
133 |               height={40}
134 |               alt=""
135 |             />
136 |           </div>
137 |         )}
138 |       </div>
139 |       <div className="bottomcontainer w-full h-[80%] flex justify-center items-center">
140 |         <div className="w-[80%] h-[90%] border rounded-md overflow-y-scroll overflow-x-hidden custom-scrollbar border-[#000000] border-opacity-20 shadow-md">
141 |           <div className="mailboxtitle flex m-2 gap-2 justify-center items-center">
142 |             <Image src={"/mail.png"} width={30} height={30} alt="mailbox" />
143 |             <span className="inbox text-lg opacity-80">{!messageShow?"Inbox": "Message Box"}</span>
144 |           </div>
145 |           {messageShow ? (
146 |             <>
147 |               <div onClick={(()=>{setMessageShow(false)})} className="w-full bg-[#0099FF] pt-5 pl-5">
148 |               <Button label="Go Back" imgsrc="/arrow.png" className="border"></Button>
149 |             </div>
150 |             <MessagePageBox
151 |               from={messageFrom}
152 |               subject={messageSubject}
153 |               body={messageTextBody}
154 |             />
155 |           
156 |             </> ) : (
157 |             message.map((d: any) => (
158 |               <div
159 |                 key={d.id}
160 |                 onClick={() => {
161 |                   whichMessageClicked(d.id);
162 |                 }}
163 |               >
164 |                 <MailBox email={d.from} subject={d.subject} time={d.date} />
165 |               </div>
166 |             ))
167 |           )}
168 |         </div>
169 |       </div>
170 |       <div className="bottomcontainer w-full h-fit flex justify-center items-center">
171 |         <About />
172 |       </div>
173 |     </div>
174 |   );
175 | };
176 | 
177 | export default Home;
178 | 


--------------------------------------------------------------------------------