Thaughtify/index.html at main · VatsalDC/Thaughtify · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
        <meta name="theme-color" content="#f5f5f5">
        <meta name="description" content="Share your thoughts with the world on Thaughtify">
        <title>Thaughtify - Share Your Thoughts</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <meta name="google-site-verification" content="9jDNRAsUIxjiGKIwZjg0rgiR756zwpsOOwHvAjZSpns" />
    </head>
    <body>
        <nav class="nav">
            <a href="index.html" style="text-decoration: none;"><h1 id="title">Thaughtify</h1></a>
            <button class="nav-toggle" aria-label="Toggle navigation">
                <span class="hamburger"></span>
            </button>
        </nav>

        <main class="main-content">
            <div class="container">
            <section class="quote-section">
                <div class="quote-card">
                    <p class="quote-text">"Your thoughts shape your reality. Share them with the world on Thaughtify."</p>
                    <p class="quote-author">~Thaughtify</p>
                </div>
            </section>

            <div class="filter-container">
                <input type="text" id="search-thoughts" placeholder="Search thoughts...">
                <div class="custom-select">
                    <div class="selected-option">All Categories</div>
                    <div class="options-container">
                        <div class="option" data-value="all">All Categories</div>
                        <div class="option" data-value="Business">Business</div>
                        <div class="option" data-value="Inspiration">Inspiration</div>
                        <div class="option" data-value="Perseverance">Perseverance</div>
                        <div class="option" data-value="Communication">Communication</div>
                        <div class="option" data-value="Time Management">Time Management</div>
                        <div class="option" data-value="Balance">Balance</div>
                        <div class="option" data-value="Motivational">Motivational</div>
                        <div class="option" data-value="Decision-Making">Decision-Making</div>
                    </div>
                    <select id="category-filter" style="display: none;">
                        <option value="all" selected>All Categories</option>
                        <option value="Business">Business</option>
                        <option value="Inspiration">Inspiration</option>
                        <option value="Perseverance">Perseverance</option>
                        <option value="Communication">Communication</option>
                        <option value="Time Management">Time Management</option>
                        <option value="Balance">Balance</option>
                        <option value="Motivational">Motivational</option>
                        <option value="Decision-Making">Decision-Making</option>
                    </select>
                </div>
                <div class="custom-select">
                    <div class="selected-option">Newest First</div>
                    <div class="options-container">
                        <div class="option" data-value="date-desc">Newest First</div>
                        <div class="option" data-value="date-asc">Oldest First</div>
                        <div class="option" data-value="likes">Most Liked</div>
                    </div>
                    <select id="sort-thoughts" style="display: none;">
                        <option value="date-desc" selected>Newest First</option>
                        <option value="date-asc">Oldest First</option>
                        <option value="likes">Most Liked</option>
                    </select>
                </div>
            </div>
                <div class="thoughts-container" id="thoughts-container">
                    <!-- Thoughts and loading spinner will be dynamically added here by JS -->
                </div>
            </div>
        </main>

        <footer class="site-footer">
            <div class="container">
                <div class="last-updated">
                    Last updated on: <span id="last-updated-time"></span>
                </div>
                <p>&copy; 2025 Thaughtify - made by <b><i id="gitlink" onclick="window.open('https://github.com/VatsalDC', 'VATSAL')">Vatsal</i></b></p>
            </div>
        </footer>
        <!-- Load scripts -->
        <script>
            // Make sure shared-thoughts.js is loaded first
            function loadScripts() {
                const scripts = [
                    'shared-thoughts.js',
                    'script.js'
                ];

                function loadScript(index) {
                    if (index >= scripts.length) {
                        // All scripts loaded, initialize the app
                        if (window.initializeApp) {
                            window.initializeApp();
                        }
                        return;
                    }

                    const script = document.createElement('script');
                    script.src = scripts[index];
                    script.onload = () => loadScript(index + 1);
                    script.onerror = () => {
                        console.error('Failed to load script:', scripts[index]);
                        loadScript(index + 1); // Continue with next script even if one fails
                    };
                    document.body.appendChild(script);
                }

                loadScript(0);
            }

            // Start loading scripts when DOM is ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', loadScripts);
            } else {
                loadScripts();
            }
        </script>
</body>
</html>