Toolboxer/index.html at main · juned7952-stack/Toolboxer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-adsense-account" content="ca-pub-3616560176462439">
    <title>Toolboxer | Free Online Web Tools</title>
    <meta name="description" content="Free online tools for developers and creators. Word counter, password generator, color picker, and more.">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="navbar">
     <div class="logo">Toolboxer<span class="dot">.</span></div>
     <ul class="nav-links">
        <li><a href="index.html">Tools</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
   </nav>
  <!--<nav class="navbar">
        <div class="logo">Toolboxer<span class="dot">.</span></div>
        <ul class="nav-links">
            <li><a href="#tools">Tools</a></li>
            <li><a href="http://127.0.0.1:5500/index.html#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>-->

    <header class="hero">
        <h1>All the tools you need,<br><span>in one place.</span></h1>
        <p>Simple, fast, and free utilities to boost your productivity.</p>
        <a href="#tools" class="btn-primary">Explore Tools</a>
    </header>

    <div class="ad-container">
        <span class="ad-label">Advertisement Space</span>
    </div>

    <section id="tools" class="tools-section">

        <div class="tool-card">
            <div class="tool-icon">📝</div>
            <h3>Word Counter</h3>
            <textarea id="wordInput" placeholder="Type or paste text here..."></textarea>
            <div class="tool-stats">
                <span>Words: <b id="wordCount">0</b></span>
                <span>Chars: <b id="charCount">0</b></span>
                <!--<span>Lines: <b id="lineCount">0</b></span>-->
            </div>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🔠</div>
            <h3>Case Converter</h3>
            <textarea id="caseInput" placeholder="Enter text to convert..."></textarea>
            <div class="btn-group">
                <button onclick="convertUpperCase()">UPPERCASE</button>
                <button onclick="convertLowerCase()">lowercase</button>
            </div>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🔒</div>
            <h3>Password Gen</h3>
            <div class="result-box" id="passwordOutput">Click Generate</div>
            <div class="controls">
                <label>Length: <input type="number" id="passLength" value="12" min="6" max="30"></label>
            </div>
            <button class="btn-action" onclick="generatePassword()">Generate Password</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🎨</div>
            <h3>Colour Picker</h3>
            <div class="color-preview" id="colorDisplay">#FFFFFF</div>
            <div class="result-text" id="colorCode">#FFFFFF</div>
            <button class="btn-action" onclick="generateColor()">Get Random Color</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">📄</div>
            <h3>Test Generator</h3>
            <p class="tool-desc">Generate placeholder text for designs.</p>
            <div class="result-box scrollable" id="loremOutput"></div>
            <button class="btn-action" onclick="generateLorem()">Generate Text</button>
        </div>

        <div class="tool-card">
            <div class="tool-icon">🖼️</div>
            <h3>Image Info</h3>
            <input type="file" id="imageInput" accept="image/*">
            <div id="imageDetails" class="hidden">
                <img id="imagePreview" src="" alt="Preview">
                <p>Size: <span id="imgSize">0</span> KB</p>
                <p>Dimensions: <span id="imgDim">0x0</span></p>
            </div>
        </div>

    </section>

    <div class="ad-container">
        <span class="ad-label">Advertisement Space</span>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section" id="about">
                <h4>About Toolboxer</h4>
                <p>Toolboxer is a collection of free developer and utility tools designed to make your daily tasks easier.</p>
            </div>
            <div class="footer-section" id="contact">
                <h4>Links</h4>
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
                <a href="mailto:contact@toolboxer.app">Contact Us</a>
            </div>
        </div>
        <div class="copyright">
            &copy; 2025 Toolboxer. All rights reserved.
        </div>
    </footer>

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