AI-Ripper/index.html at Hugston · Mainframework/AI-Ripper · 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
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AI Ripper – Text Cleaner</title>
  <link rel="stylesheet" href="style.css">
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
  >
</head>
<body>
  <header>
    <h1>AI Ripper – Text Cleaner</h1>
    <p>Advanced text processing with intelligent cleaning and analysis</p>
  </header>

  <section class="features">
    <h2>Features</h2>
    <ul>
      <li><i class="fas fa-broom"></i> Remove hidden characters and whitespace</li>
      <li><i class="fas fa-code"></i> Refactor code for better readability</li>
      <li><i class="fas fa-highlighter"></i> Highlight problematic characters</li>
      <li><i class="fas fa-copy"></i> Copy cleaned text to clipboard</li>
      <li><i class="fas fa-info-circle"></i> Detailed analysis of hidden characters</li>
      <li><i class="fas fa-eraser"></i> One-click remove *all* hidden chars</li>
    </ul>
  </section>

  <div class="container">
    <div class="app-wrapper">

      <!-- Input -->
      <div class="input-section">
        <h2 class="section-title"><i class="fas fa-paste"></i> Input Text</h2>
        <div class="input-controls">
          <!-- contenteditable div so we can inject <span> highlights -->
          <div
            id="inputText"
            class="content-editable-textarea"
            contenteditable="true"
            data-placeholder="Paste your text here…"
          ></div>

          <!-- single toggle button (JS will switch icon & label) -->
          <button id="showHiddenCharsButton" class="hidden-chars-toggle">
            <i class="fas fa-search"></i> Detect Hidden Characters
          </button>
        </div>
        <div class="buttons">
          <button id="cleanButton"><i class="fas fa-broom"></i> Clean Text</button>
          <button id="cleanAllHiddenButton" class="secondary">
            <i class="fas fa-eraser"></i> Clean All Hidden Chars
          </button>
          <button id="refactorTextButton" class="secondary">
            <i class="fas fa-text-height"></i> Refactor Text
          </button>
          <button id="refactorCodeButton" class="success">
            <i class="fas fa-code"></i> Refactor Code
          </button>
          <button id="clearTextButton" class="danger">
            <i class="fas fa-trash-alt"></i> Clear All
          </button>
        </div>
      </div>

      <!-- Output -->
      <div class="output-section">
        <h2 class="section-title"><i class="fas fa-text-height"></i> Output Text</h2>
        <textarea id="outputText" readonly></textarea>
        <button id="copyButton" class="copy-button">
          <i class="fas fa-copy"></i> Copy Clean Text
        </button>
      </div>

      <!-- Hidden-char list & details -->
      <div class="hidden-chars-info">
        <h3>Detected Hidden Characters</h3>
        <div id="hiddenInfo">
          <div class="char-list">
            <div class="char-item">No hidden characters detected</div>
          </div>
          <div class="hidden-char-detail">
            <p>Click on a character to view details</p>
          </div>
        </div>
      </div>

      <!-- Stats -->
      <div class="clean-stats">
        <h3>Cleaning Statistics</h3>
        <div id="cleanStats">
          <p>Total hidden characters: <span id="totalHiddenChars">0</span></p>
          <p>By category:</p>
          <ul id="categoryStats">
            <!-- Populated dynamically -->
          </ul>
        </div>
      </div>

    </div>
  </div>

  <footer>
    <div class="footer-links">
      <a href="https://hugston.com" target="_blank">
        <i class="fas fa-globe"></i> Visit hugston.com
      </a>
      <a href="mailto:info@hugston.com" target="_blank">
        <i class="fas fa-envelope"></i> Contact info@hugston.com
      </a>
      <a href="https://github.com/Mainframework" target="_blank">
        <i class="fab fa-github"></i> GitHub Repository
      </a>
    </div>
    <div class="version-info">AI Ripper v1.0</div>
  </footer>

  <!-- “Copied!” notification -->
  <div class="copy-notification" id="copyNotification">
    Text copied to clipboard!
  </div>

  <!-- Renderer logic -->
  <script src="renderer.js"></script>
</body>
</html>