← Back to gallery
Guarding Tess poster

Project walkthrough

Guarding Tess

Explore the concept, hints, and starter code for this Nic Cage inspired build.

Project Title: “Secrets Shared: Secure Messaging for VIPs”

Description:

“Guarding Tess” features Nicolas Cage as Doug Chesnic, a Secret Service agent assigned to protect a former First Lady, showcasing themes of protection and confidentiality. Leveraging these themes, “Secrets Shared: Secure Messaging for VIPs” is a web application that uses the Web Share API to allow users to share important information securely and discreetly. This app is especially useful for individuals who need to maintain a high level of privacy in their communications, much like the security details surrounding VIPs.

This application enhances user privacy by facilitating the secure sharing of messages and files directly through their device’s native sharing capabilities, minimizing exposure to third-party services and maximizing operational security.

Starting Code:

Beginner Hints:

  • Create a single index.html file.
  • Copy the full HTML code block into that file.
  • Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
  • Open DevTools Console to spot errors and typos quickly.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secrets Shared: Secure Messaging for VIPs</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    button {
        background-color: #4CAF50;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border: none;
        border-radius: 8px;
    }
</style>
</head>
<body>
    <h1>Securely Share Your Secrets</h1>
    <button id="shareButton">Share a Secret</button>
<script>
    document.getElementById('shareButton').addEventListener('click', async () => {
        if (navigator.share) {
            try {
                await navigator.share({
                    title: 'Secret Message',
                    text: 'This is a highly confidential message.',
                    url: 'https://example.com'
                });
                console.log('Thanks for sharing!');
            } catch (err) {
                console.error('Error sharing:', err);
            }
        } else {
            console.log('Web Share API not supported on your browser.');
        }
    });
</script>
</body>
</html>

References:

“Secrets Shared: Secure Messaging for VIPs” captures the essence of confidentiality and protection seen in “Guarding Tess,” applying it to modern needs for private communication. This project not only encourages safer information sharing practices but also introduces users to more secure ways of using technology in their daily communications.