├── images
    ├── bugatti.jpg
    ├── joker-clap.gif
    └── loading.svg
├── .github
    └── workflows
    │   └── jekyll-gh-pages.yml
├── index.js
├── index.html
├── README.md
└── style.css


/images/bugatti.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanugurajesh/Cookie-Webpage/HEAD/images/bugatti.jpg


--------------------------------------------------------------------------------
/images/joker-clap.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kanugurajesh/Cookie-Webpage/HEAD/images/joker-clap.gif


--------------------------------------------------------------------------------
/images/loading.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg xmlns:svg="http://www.w3.org/2000/svg"
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="160px" height="20px" viewBox="0 0 128 16" xml:space="preserve">
 5 |     <path fill="#ff94ff" d="M6.4,4.8A3.2,3.2,0,1,1,3.2,8,3.2,3.2,0,0,1,6.4,4.8Zm12.8,0A3.2,3.2,0,1,1,16,8,3.2,3.2,0,0,1,19.2,4.8ZM32,4.8A3.2,3.2,0,1,1,28.8,8,3.2,3.2,0,0,1,32,4.8Zm12.8,0A3.2,3.2,0,1,1,41.6,8,3.2,3.2,0,0,1,44.8,4.8Zm12.8,0A3.2,3.2,0,1,1,54.4,8,3.2,3.2,0,0,1,57.6,4.8Zm12.8,0A3.2,3.2,0,1,1,67.2,8,3.2,3.2,0,0,1,70.4,4.8Zm12.8,0A3.2,3.2,0,1,1,80,8,3.2,3.2,0,0,1,83.2,4.8ZM96,4.8A3.2,3.2,0,1,1,92.8,8,3.2,3.2,0,0,1,96,4.8Zm12.8,0A3.2,3.2,0,1,1,105.6,8,3.2,3.2,0,0,1,108.8,4.8Zm12.8,0A3.2,3.2,0,1,1,118.4,8,3.2,3.2,0,0,1,121.6,4.8Z"/>
 6 |     <g>
 7 |         <path fill="#ff00ff" d="M-42.7,3.84A4.16,4.16,0,0,1-38.54,8a4.16,4.16,0,0,1-4.16,4.16A4.16,4.16,0,0,1-46.86,8,4.16,4.16,0,0,1-42.7,3.84Zm12.8-.64A4.8,4.8,0,0,1-25.1,8a4.8,4.8,0,0,1-4.8,4.8A4.8,4.8,0,0,1-34.7,8,4.8,4.8,0,0,1-29.9,3.2Zm12.8-.64A5.44,5.44,0,0,1-11.66,8a5.44,5.44,0,0,1-5.44,5.44A5.44,5.44,0,0,1-22.54,8,5.44,5.44,0,0,1-17.1,2.56Z"/>
 8 |         <animateTransform attributeName="transform" type="translate" values="23 0;36 0;49 0;62 0;74.5 0;87.5 0;100 0;113 0;125.5 0;138.5 0;151.5 0;164.5 0;178 0" calcMode="discrete" dur="1170ms" repeatCount="indefinite"/>
 9 |     </g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/.github/workflows/jekyll-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Build job
26 |   build:
27 |     runs-on: ubuntu-latest
28 |     steps:
29 |       - name: Checkout
30 |         uses: actions/checkout@v3
31 |       - name: Setup Pages
32 |         uses: actions/configure-pages@v3
33 |       - name: Build with Jekyll
34 |         uses: actions/jekyll-build-pages@v1
35 |         with:
36 |           source: ./
37 |           destination: ./_site
38 |       - name: Upload artifact
39 |         uses: actions/upload-pages-artifact@v1
40 | 
41 |   # Deployment job
42 |   deploy:
43 |     environment:
44 |       name: github-pages
45 |       url: ${{ steps.deployment.outputs.page_url }}
46 |     runs-on: ubuntu-latest
47 |     needs: build
48 |     steps:
49 |       - name: Deploy to GitHub Pages
50 |         id: deployment
51 |         uses: actions/deploy-pages@v2
52 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const modal = document.getElementById('modal')
 2 | const modalCloseBtn = document.getElementById('modal-close-btn')
 3 | const consentForm = document.getElementById('consent-form')
 4 | const modalText = document.getElementById('modal-text')
 5 | const declineBtn = document.getElementById('decline-btn')
 6 | const modalChoiceBtns = document.getElementById('modal-choice-btns')
 7 | 
 8 | setTimeout(function () {
 9 |     modal.style.display = 'inline'
10 | }, 1500)
11 | 
12 | modalCloseBtn.addEventListener('click', function () {
13 |     modal.style.display = 'none'
14 | })
15 | 
16 | declineBtn.addEventListener('mouseenter', function () {
17 |     modalChoiceBtns.classList.toggle('modal-btns-reverse')
18 | })
19 | 
20 | consentForm.addEventListener('submit', function (e) {
21 |     e.preventDefault()
22 | 
23 |     const consentFormData = new FormData(consentForm)
24 |     const fullName = consentFormData.get('fullName')
25 | 
26 |     modalText.innerHTML = `
27 |     <div class="modal-inner-loading">
28 |         <img src="images/loading.svg" class="loading">
29 |         <p id="upload-text">Uploading your data to the dark web...</p>
30 |     </div>`
31 | 
32 |     setTimeout(function () {
33 |         document.getElementById('upload-text').innerText = `
34 |         Making the sale...`
35 |     }, 1500)
36 | 
37 | 
38 |     setTimeout(function () {
39 |         document.getElementById('modal-inner').innerHTML = `
40 |         <h2>Thanks <span class="modal-display-name">${fullName}</span>, you sucker! </h2>
41 |         <p>We just sold the rights to your eternal soul.</p>
42 |         <div class="idiot-gif">
43 |             <img src="./images/joker-clap.gif">
44 |         </div>
45 |     `
46 |         modalCloseBtn.disabled = false
47 |     }, 3000)
48 | 
49 | }) 
50 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
 9 | </head>
10 | 
11 | <body>
12 |     <main>
13 |         <section class="section-container">
14 |             <h1>Learning to code? This is the most important thing you will ever read!</h1>
15 | 
16 |             <ul>
17 |                 <li class="li-green">💰 Land a job with a 6 figure salary</li>
18 |                 <li class="li-yellow">💻 Master JavaScript in 3 hours</li>
19 |                 <li class="li-blue">⚛️ Learn React in 10 minutes</li>
20 |                 <li class="li-pink">☕ Be a NodeJS Dev by lunchtime</li>
21 |             </ul>
22 | 
23 |             <h3>My subliminal learning technique worked for Mark Zuckerberg and Albert Einstein, and it can work for
24 |                 you!</h3>
25 |             <img src="images/bugatti.jpg">
26 |             <p>Want a great job in tech? Want a six-figure salary? Then you have come to the right place. I am going to
27 |                 tell you all
28 |                 you need to know to get all of that and much more, without you lifting a finger. You can learn
29 |                 passively. Just sit back,
30 |                 close your eyes, and let the sound of my voice make the code sink deep into your brain. </p>
31 |         </section>
32 |     </main>
33 |     <div class="modal" id="modal">
34 |         <div class="close-modal-btn-container">
35 |             <button class="modal-close-btn" id="modal-close-btn" disabled>X</button>
36 |         </div>
37 |         <div class="modal-inner" id="modal-inner">
38 |             <h2>We ❤️ Your Data!</h2>
39 |             <p class="modal-text" id="modal-text">We have a strict policy on tracking and spamming: we'll definitely
40 |                 track you, and we'll definitely spam you. To use this
41 |                 site, enter your name and email address and accept our ridiculous terms and conditions.</p>
42 |             <form id="consent-form">
43 |                 <input type="text" name="fullName" placeholder="Enter your full name" required />
44 |                 <input type="email" name="email" placeholder="Enter your email" required />
45 | 
46 |                 <div class="modal-choice-btns" id="modal-choice-btns">
47 |                     <button type="submit" class="modal-btn">Accept</button>
48 |                     <button class="modal-btn" id="decline-btn">Decline</button>
49 |                 </div>
50 | 
51 |             </form>
52 |         </div>
53 |     </div>
54 |     <script src="index.js"></script>
55 | </body>
56 | 
57 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cookie Webpage
 2 | 
 3 | <div align="center">
 4 |   <img src="https://github.com/kanugurajesh/Cookie-Webpage/assets/120458029/c6cca9cb-8b75-400d-b099-aa94d27a8bba" alt="Cookie Webpage Logo" width=150 height=150>
 5 | </div>
 6 | 
 7 | #### ⭐ Star this repo if you like it
 8 | 
 9 | A webpage developed to spread awareness on websites where third-party services ask users for information. If a user enters the information, they may fall victim to scams. This model simulates such attacks and demonstrates how these types of scams can happen.
10 | 
11 | ## Table of Contents
12 | 
13 | - [Introduction](#introduction)
14 | - [Features](#features)
15 | - [Demo](#demo)
16 | - [Installation](#installation)
17 | - [Usage](#usage)
18 | - [Contributing](#contributing)
19 | - [License](#license)
20 | 
21 | ## Introduction
22 | 
23 | In the era of increasing online activities, it's crucial to be aware of potential scams and phishing attempts. Cookie Webpage is a project designed to raise awareness about the risks associated with third-party services that request user information. The model demonstrates how users can be tricked into providing sensitive information, leading to potential scams and security breaches.
24 | 
25 | ## Features
26 | 
27 | - Simulates third-party service interactions
28 | - Raises awareness about online scams
29 | - Educational tool for understanding phishing attempts
30 | - Responsive design for seamless user experience
31 | 
32 | ## Demo
33 | 
34 | ![kanugurajesh github io_Cookie-Webpage_ - Google Chrome 2023-12-03 15-10-41](https://github.com/kanugurajesh/Cookie-Webpage/assets/120458029/919170d2-dc54-4adb-b490-34052f885dba)
35 | 
36 | ## Installation
37 | 
38 | To run Cookie Webpage locally, follow these steps:
39 | 
40 | 1. Clone the repository:
41 | 
42 | ```bash
43 | git clone https://github.com/kanugurajesh/Cookie-Webpage.git
44 | cd Cookie-Webpage
45 | ```
46 | 
47 | ## Usage
48 | 
49 | 🌐 Launch the index.html file in your browser for an immersive experience.
50 | 
51 | ⏳ After a short wait, a popup will prompt you for information.
52 | 
53 | 🔒 Relax! This is just a demo, not a real data transfer to the dark web.
54 | 
55 | Your information remains secure and protected. Enjoy exploring without any worries! 😊
56 | 
57 | ## Contributing
58 | 
59 | This project loves to accept contributions from everyone
60 | 
61 | ## Technologies Used
62 | 
63 | - HTML
64 | - CSS
65 | - JavaScript
66 | 
67 | ## 🔗 Links
68 | [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://rajeshportfolio.me/)
69 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/rajesh-kanugu-aba8a3254/)
70 | [![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/exploringengin1)
71 | 
72 | ## Authors
73 | 
74 | - [@kanugurajesh](https://github.com/kanugurajesh)
75 | 
76 | ## Support
77 | 
78 | For support, you can buy me a coffee
79 | 
80 | <a href="https://www.buymeacoffee.com/kanugurajen" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
81 | 
82 | ## License
83 | 
84 | This project license is MIT LICENSE
85 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     font-family: 'Roboto';
 10 |     color: #222;
 11 | }
 12 | 
 13 | /* typography */
 14 | 
 15 | h1 {
 16 |     font-size: 48px;
 17 |     line-height: 60px;
 18 |     font-weight: 900;
 19 | }
 20 | 
 21 | h2 {
 22 |     margin-top: 0;
 23 | }
 24 | 
 25 | h3 {
 26 |     font-size: 20px;
 27 |     font-weight: 700;
 28 |     line-height: 30px;
 29 | }
 30 | 
 31 | p {
 32 |     font-size: 18px;
 33 |     line-height: 28px;
 34 | 
 35 | }
 36 | 
 37 | ul {
 38 |     list-style: none;
 39 |     padding: 5px 0 0 0;
 40 | }
 41 | 
 42 | li {
 43 |     padding: 15px;
 44 |     border-radius: 5px;
 45 |     margin-bottom: 12px;
 46 |     font-weight: 500;
 47 |     font-size: 22px;
 48 | }
 49 | 
 50 | .li-green {
 51 |     background-color: #E5FDEA
 52 | }
 53 | 
 54 | .li-yellow {
 55 |     background-color: #FCFDD6
 56 | }
 57 | 
 58 | .li-blue {
 59 |     background-color: #E5F9FE
 60 | }
 61 | 
 62 | .li-pink {
 63 |     background-color: #FCF1FE
 64 | }
 65 | 
 66 | /* layout */
 67 | 
 68 | img {
 69 |     width: 100%;
 70 | }
 71 | 
 72 | main {
 73 |     width: 400px;
 74 |     margin: 0 auto;
 75 | }
 76 | 
 77 | /* modal */
 78 | 
 79 | .modal {
 80 |     display: none;
 81 |     position: fixed;
 82 |     right: 0;
 83 |     left: 0;
 84 |     top: 0;
 85 |     bottom: 0;
 86 |     margin: auto;
 87 |     height: 420px;
 88 |     width: 350px;
 89 |     border-radius: 5px;
 90 |     box-shadow: 0px 0px 6px 2px #666;
 91 |     background-color: #212529;
 92 |     color: whitesmoke;
 93 | }
 94 | 
 95 | .modal-inner {
 96 |     width: 290px;
 97 |     margin: 0 auto;
 98 | }
 99 | 
100 | .modal-inner-loading {
101 |     text-align: center;
102 | }
103 | 
104 | /* modal buttons */
105 | 
106 | .close-modal-btn-container {
107 |     text-align: right;
108 |     margin: 9px;
109 | }
110 | 
111 | .modal-close-btn {
112 |     font-size: 22px;
113 |     font-weight: bold;
114 |     background-color: transparent;
115 |     border: 1px solid transparent;
116 |     color: whitesmoke;
117 | }
118 | 
119 | .modal-close-btn:hover,
120 | .modal-close-btn:active {
121 |     color: red;
122 |     cursor: pointer;
123 | }
124 | 
125 | .modal-close-btn:disabled {
126 |     color: whitesmoke;
127 |     opacity: 0.2;
128 |     cursor: not-allowed;
129 | }
130 | 
131 | .modal-choice-btns {
132 |     margin-top: 10px;
133 |     padding: 8px 16px;
134 |     display: flex;
135 |     justify-content: center;
136 | }
137 | 
138 | .modal-btn {
139 |     padding: 10px 24px;
140 |     cursor: pointer;
141 | }
142 | 
143 | .modal-btns-reverse {
144 |     flex-direction: row-reverse;
145 | }
146 | 
147 | /* modal input */
148 | 
149 | input {
150 |     margin-top: 10px;
151 |     border: 1px solid #212529;
152 |     padding: 10px;
153 |     width: 100%;
154 |     border-radius: 3px;
155 | }
156 | 
157 | /* modal after submit */
158 | 
159 | .loading {
160 |     width: 100%;
161 |     margin-top: 10px;
162 | }
163 | 
164 | .modal-display-name {
165 |     color: fuchsia;
166 | }
167 | 
168 | .modal-text {
169 |     height: 140px;
170 |     line-height: 23px;
171 |     margin-bottom: 0;
172 | }
173 | 
174 | .idiot-gif {
175 |     width: 95%;
176 |     margin: 0 auto;
177 | }
178 | 
179 | .idiot-gif img {
180 |     box-shadow: 1px 1px 3px #999;
181 |     border-radius: 5px;
182 | }


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