Text-Censor-Simple/index.html at main · JoeMighty/Text-Censor-Simple · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Live Typing Censor Tool — Real-Time Text Moderation</title>
    <meta name="title" content="Live Typing Censor Tool — Real-Time Text Moderation">
    <meta name="description" content="A premium, Apple-inspired real-time text censoring tool. Features include custom characters, hover-to-reveal, and persistent storage.">
    <meta name="keywords" content="text censor, privacy tool, real-time moderation, content filter, apple design, web utility">
    <meta name="author" content="Jobin Bennykutty">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://joemighty.github.io/Text-Censor-Simple/">
    <meta property="og:title" content="Live Typing Censor Tool — Real-Time Text Moderation">
    <meta property="og:description" content="Type freely and moderate content in real-time with this sleek, glassmorphic web utility.">
    <meta property="og:image" content="https://joemighty.github.io/Text-Censor-Simple/og-image.png">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://joemighty.github.io/Text-Censor-Simple/">
    <meta property="twitter:title" content="Live Typing Censor Tool — Real-Time Text Moderation">
    <meta property="twitter:description" content="A premium, Apple-inspired real-time text censoring tool with haptic interactions and custom styling.">
    <meta property="twitter:image" content="https://joemighty.github.io/Text-Censor-Simple/og-image.png">

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <div class="canvas-bg"></div>

    <nav class="top-nav">
        <button id="themeToggle" class="apple-btn-secondary" onclick="toggleTheme()">🌙 Dark Mode</button>
    </nav>

    <main class="apple-shell">
        <header class="hero-section">
            <span class="app-icon">🔒</span>
            <h1>Live Typing Censor Tool</h1>
            <p>Type freely. Censored words are replaced in real-time.</p>
        </header>

        <section class="main-surface glass">
            <div class="surface-content">
                <div class="toolbar">
                    <div class="toolbar-group">
                        <select id="censorStyle" class="apple-select" onchange="updateCensorStyle()">
                            <option value="█">Block (█)</option>
                            <option value="*">Asterisks (*)</option>
                            <option value="x">Crosses (x)</option>
                            <option value="custom">Custom Character</option>
                        </select>
                        <input type="text" id="customCharInput" maxlength="1" class="apple-input small" value="$" style="display: none;">
                    </div>
                    <div class="toolbar-group">
                        <input type="text" id="newWordInput" class="apple-input" placeholder="Add word...">
                        <button class="apple-btn-primary" onclick="addNewWord()">Add</button>
                    </div>
                </div>

                <div class="word-list-container">
                    <div id="wordListDisplay" class="apple-tags"></div>
                    <button class="text-btn" onclick="resetWordList()">Reset Default</button>
                </div>

                <div class="separator"></div>

                <div id="textInput" class="apple-editor" contenteditable="true" placeholder="Start typing here..."></div>
            </div>

            <div class="info-bar">
                <div class="stat-row">
                    <div class="apple-stat">
                        <span class="stat-label">Words</span>
                        <span id="wordCount" class="stat-val">0</span>
                    </div>
                    <div class="apple-stat">
                        <span class="stat-label">Chars</span>
                        <span id="charCount" class="stat-val">0</span>
                    </div>
                    <div class="apple-stat">
                        <span class="stat-label">Censored</span>
                        <span id="censorCount" class="stat-val red">0</span>
                    </div>
                </div>

                <div class="action-row">
                    <button class="apple-btn-danger" onclick="clearText()">Clear Canvas</button>
                    <button class="apple-btn-primary" onclick="copyText()">Copy Text</button>
                    <button class="apple-btn-secondary" onclick="downloadText()">Save File</button>
                </div>
            </div>
        </section>

        <footer class="apple-footer-bar glass">
            <p>Created by <a href="https://github.com/JoeMighty" target="_blank">Jobin Bennykutty</a></p>
        </footer>
    </main>

    <div class="apple-toast" id="notification">Copied to clipboard</div>

    <script src="script.js"></script>
</body>
</html>