NewSense/index.html at main · devinshende/NewSense · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>What the Text?</title>
    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-image: url('landing_page_background.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <div class="w-full max-w-lg p-8 bg-white rounded-xl shadow-2xl">
        <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">New Sense</h1>
        <p class="text-gray-600 mb-8 text-center">The Best Dumb-A-Thon project (Duh!)</p>

        <!-- The file upload is included here as requested in the previous context,
             but we won't process the file in this example for simplicity. -->
        <form id="animationForm">
            <div class="mb-6">
                <label for="file_upload" class="block text-sm font-medium text-gray-700 mb-2">Optional: Upload File (for
                    context)</label>
                <input type="file" id="file_upload" class="block w-full text-sm text-gray-500
                    file:mr-4 file:py-2 file:px-4
                    file:rounded-full file:border-0
                    file:text-sm file:font-semibold
                    file:bg-blue-50 file:text-blue-700
                    hover:file:bg-blue-100" />
            </div>

            <div class="mb-6">
                <label for="text_input" class="block text-sm font-medium text-gray-700 mb-2">Text to Read</label>
                <textarea id="text_input" rows="5" placeholder="Type your dynamic text here..."
                    class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150 resize-y text-gray-800"></textarea>
            </div>

            <!-- This is now a simple button that triggers the JS function -->
            <button type="button" onclick="startAnimation()"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 shadow-xl transform hover:scale-[1.01] active:scale-[0.99] focus:outline-none focus:ring-4 focus:ring-blue-300">
                Submit
            </button>
        </form>
    </div>

    <script>
        const error_messages = [
            "Oops! You forgot to enter some text.",
            "Hold on! The text field is empty.",
            "Please provide some text to animate.",
            "Text input cannot be empty. Try again!",
            "Don't leave me hanging! Enter some text.",
            "Come on, type something in the text box!",
            "The text field is lonely without your input.",
        ];
    </script>

    <script>
        function startAnimation() {
            const textInput = document.getElementById('text_input').value;

            if (textInput.trim() === "") {
                // Instead of alert(), we show a simple UI message
                const form = document.getElementById('animationForm');
                let errorMessage = document.getElementById('error-message');

                if (!errorMessage) {
                    errorMessage = document.createElement('p');
                    errorMessage.id = 'error-message';
                    errorMessage.className = 'text-red-500 text-sm mt-3 text-center';
                    form.appendChild(errorMessage);
                }
                errorMessage.textContent = error_messages[Math.floor(Math.random() * error_messages.length)];
                return;
            }

            // 1. Save the text to localStorage for the next page to read
            localStorage.setItem('animationText', textInput);

            // 2. Redirect to the canvas page
            window.location.href = 'canvas.html'; // <<< CHANGED HERE
        }
    </script>
</body>

</html>