Digital Privacy Museum

[[Back|Home]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <header class="section-header"> <i class="fas fa-balance-scale"></i> <h2>Privacy Laws Simulation</h2> </header> <div class="scenario-box"> You recently received an email from a popular online store, stating that your personal data (including your name, email address, and credit card information) may have been compromised in a recent data breach. What will you do? </div> <div class="button-container"> <button class="start-button">[[Contact the company to inquire about the breach]]</button> <button class="start-button">[[Change all your passwords, including those for the online store]]</button> <button class="start-button">[[File a complaint with a privacy authority]]</button> </div>

[[Back|Home]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <header class="section-header"> <i class="fas fa-user-shield"></i> <h2>Account Creation Simulation</h2> </header> <div class="scenario-box"> <p>You're creating a new social media account. The signup page asks for your:</p> <ul class="key-steps-list"> <li>Full Name</li> <li>Email Address</li> <li>Phone Number</li> <li>Date of Birth</li> <li>Optional: Connect to other social accounts?</li> </ul> </div> <div class="button-container"> <button class="start-button">[[Continue without connecting other accounts]]</button> <button class="start-button">[[Continue with Facebook]]</button> <button class="start-button">[[Continue with Google account]]</button> </div>

<header id="header">Minimal Data Provided</header> <div> <div class="scenario-box"> <p>You choose not to link other social media accounts, reducing data collection for privacy. However, the platform still collects:</p> <ul class="key-steps-list"> <li>Name (for personalization)</li> <li>Email (for login and marketing)</li> <li>Phone number (shared with advertisers)</li> <li>Date of birth (for age verification and profiling)</li> </ul> </div> <p class="text"><strong class="risk">Your data may be sold to advertisers or used for profiling.</strong></p> <section class="btn-group"> <p class="back-btn">[[Go Back|Account]]</p> </section> </div>

<header id="header">Google Login: Data and Privacy Risks</header> <div> <div class="scenario-box"> <p>If you continue with Google login, the platform collects the following data:</p> <ul class="key-steps-list"> <li>Google Account Name (for personalization)</li> <li>Email Address (for login and marketing)</li> <li>Profile Picture (for display purposes)</li> <li>Google Contacts (if granted permission)</li> <li>Google Calendar/Events (if granted permission)</li> <li>Photos (if granted permission)</li> </ul> </div> <p class="text"><strong class="risk">Your data may be shared with third-party advertisers, used for profiling, or sold for targeted advertising.</strong> </p> <section class="btn-group"> <button class="nav-btn"><a target="_blank" href="https://support.google.com/accounts/answer/14012355?hl=en#zippy=%2Chow-do-i-know-which-third-party-apps-have-access-to-my-google-account-data">Learn how to restrict or even remove third-party access</a></button> <p class="back-btn">[[Go Back|Account]]</p> </section> </div>

<header id="header">Facebook Login: Data and Privacy Risks</header> <div> <div class="scenario-box"> <p>If you continue with Facebook login, the platform collects the following data:</p> <ul class="key-steps-list"> <li>Facebook Name (for personalization)</li> <li>Email Address (for login and marketing)</li> <li>Profile Picture (for display purposes)</li> <li>Friends List (if granted permission)</li> <li>Birthday (if granted permission)</li> <li>Location (if linked to your Facebook account)</li> </ul> </div> <p class="text"><strong class="risk"> Your data may be shared with advertisers, used for profiling, or sold for targeted advertising.</strong></p> <section class="btn-group"> <button class="nav-btn"><a target="_blank" href="https://www.facebook.com/about/privacy/update/printable">Learn more about your data</a></button> <p class="back-btn">[[Go Back|Account]]</p> </section> </div>

[[Back|Home]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <section class="fingerprint-section"> <div class="content-wrapper"> <header class="section-header"> <i class="fas fa-fingerprint"></i> <h2>Digital Fingerprint Simulation</h2> </header> <div class="info-box"> <p>Every device and online activity contributes to a unique identifier called a "digital fingerprint." Click the button below to generate yours.</p> <div class="fingerprint-container"> <button class="generate-btn" type="button" onclick="generateFingerprint()"> <i class="fas fa-magic"></i> Generate My Digital Fingerprint </button> <div class="fingerprint-result" id="fingerprintDisplay"> </div> </div> </div> </div> </section> <div class="button-container"> <button class="start-button">[[More about Fingerprint]]</button> <button class="start-button"><a target="_blank" href="https://fingerprintjs.github.io/fingerprintjs">FingerprintJS Docs</a></button> </div> <script> function generateFingerprint() { const resultDisplay = document.getElementById('fingerprintDisplay'); resultDisplay.innerHTML = ''; const fpPromise = import('https://openfpcdn.io/fingerprintjs/v4') .then(FingerprintJS => FingerprintJS.load()) fpPromise .then(fp => fp.get()) .then(result => { const visitorId = result.visitorId; console.log(result) resultDisplay.innerHTML = ` <div> <div style="margin-bottom: 0.5rem;">Your Digital Fingerprint:</div> <div style="color: #2196F3; font-weight: bold;">${visitorId}</div> <div style="margin-top: 1rem; font-size: 0.9rem; color: #888;"> Confidence Score: ${result.confidence.score} </div> </div> `; }) .catch(error => { resultDisplay.innerHTML = ` <div style="color: #ff4444;"> Error generating fingerprint. Please try again. </div> `; }); } </script>

[[Go Back|Laws]] <section class="breach-info"> <h2>Data Breach Response</h2> <div class="scenario-box"> <h3>Your Action:</h3> <p>Contact the company to inquire about the breach</p> <h3>Company Response:</h3> <p>You contact the company's support team and ask about the breach. They inform you that they are investigating the matter, but they cannot provide specific details yet. The company assures you that they are taking steps to protect your data.</p> </div> <div class="real-life-info"> <h3>In real life:</h3> <p>Under laws like the <span class="highlight">GDPR</span> and <span class="highlight">CCPA</span>, companies must notify affected users in a timely manner if their data is compromised. However, simply reaching out for more information may not guarantee immediate actions or compensation.</p> </div> </section> <div class="button-container"> <button class="start-button">[[What will you do next?]]</button> </div>

[[Go Back|Laws]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <section class="security-action"> <h2>Security Response Actions</h2> <div class="action-box"> <div class="action-header"> <i class="fas fa-key"></i> <h3>Recommended Action:</h3> </div> <div class="action-content"> <p class="action-title">Change all your passwords, including those for the online store</p> <p class="action-description">You change all your passwords, including the one for the online store where the breach occurred. You also enable two-factor authentication for added security on all your accounts.</p> </div> </div> <div class="real-world-box"> <div class="real-world-header"> <i class="fas fa-info-circle"></i> <h3>In real life:</h3> </div> <p>Changing your passwords and using <span class="highlight">two-factor authentication (2FA)</span> is an essential step after a data breach. This helps protect your accounts from unauthorized access. You should also monitor your accounts for any suspicious activity.</p> </div> </section> <div class="button-container"> <button class="start-button">[[What will you do next?]](Next)</button> </div>

[[Go Back|Laws]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <section class="security-action"> <h2>Legal Response Options</h2> <div class="action-box"> <div class="action-header"> <i class="fas fa-gavel"></i> <h3>Recommended Action:</h3> </div> <div class="action-content"> <p class="action-title">File a complaint with a privacy authority</p> <p class="action-description">You file a complaint with the <span class="highlight">Data Protection Authority</span> in your country, explaining the breach and your concerns about the company's handling of your data.</p> </div> </div> <div class="real-world-box"> <div class="real-world-header"> <i class="fas fa-info-circle"></i> <h3>In real life:</h3> </div> <p>Filing a complaint with a regulatory body like the <span class="highlight">Information Commissioner's Office (ICO)</span> in the UK or the <span class="highlight">Federal Trade Commission (FTC)</span> in the U.S. can trigger an investigation into how the company managed the breach. If the company is found to have violated privacy laws, they may face significant fines and legal consequences.</p> </div> </section> <div class="button-container"> <button class="start-button">[[What will you do next?]](Next)</button> </div>

[[Go Back|Laws]] <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <section class="security-action"> <h2>Company Response & Compensation</h2> <i class="fas fa-shield-alt"></i> <div class="action-box"> <div class="action-header"> <h3>Company Update:</h3> </div> <div class="action-content"> <p class="action-title">Credit Card Information Compromise Confirmed</p> <p class="action-description">Now that you've taken action, the company notifies you that your credit card information was indeed compromised. They are offering:</p> <ul class="compensation-list"> <li><i class="fas fa-check"></i> Free year of credit monitoring</li> <li><i class="fas fa-check"></i> Reimbursement of any fraudulent charges</li> </ul> </div> </div> <div class="real-world-box"> <div class="real-world-header"> <i class="fas fa-info-circle"></i> <h3>In real life:</h3> </div> <p>Under laws like the <span class="highlight">GDPR</span>, consumers have the right to compensation if their data is breached. Companies are required to offer support and take immediate steps to mitigate the impact on their customers, including providing free credit monitoring or reimbursing fraudulent charges.</p> </div> </section> <div class="button-container"> <button class="nav-btn"><a target="_blank" href="https://gdpr-info.eu/">Learn more about data protection laws</a></button> <button class="nav-btn"><a target="_blank" href="https://oag.ca.gov/privacy/ccpa">Learn more about California data protection laws</a></button> <button class="start-button">[[End]]</button> </div>

[[Back|What will you do next?]] <section class="security-action conclusion"> <h2>Simulation Complete!</h2> <div class="action-box"> <div class="action-header"> <i class="fas fa-flag-checkered"></i> <h3>Key Takeaways</h3> </div> <div class="action-content"> <p class="action-description">You've completed the simulation! In real life, there are several key steps to take after a data breach:</p> <ul class="key-steps-list"> <li> <i class="fas fa-comments"></i> <span><strong>Contact the company</strong> to understand what data was compromised and whether they are offering compensation.</span> </li> <li> <i class="fas fa-key"></i> <span><strong>Change all your passwords</strong> and enable <strong>two-factor authentication</strong> to secure your accounts.</span> </li> <li> <i class="fas fa-gavel"></i> <span><strong>File a complaint</strong> with a privacy authority to hold the company accountable and ensure proper investigation and legal action.</span> </li> </ul> </div> </div> <div class="real-world-box thank-you"> <div class="real-world-header"> <i class="fas fa-award"></i> <h3>Congratulations!</h3> </div> <p>Thank you for participating in the <span class="highlight">Real-Life Data Breach Simulation</span>. Stay vigilant with your digital privacy and always be aware of your rights!</p> </div> </section> <div class="button-container"> <button class="start-button">[[Home|Home]]</button> </div>