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

    <link rel="icon" href="global/images/logo.png" type="image/png">
    <title>SimpleTools | Home</title>

    <meta name="description" content="SimpleTools - A collection of simple tools by Quntem.">
    <meta name="keywords" content="SimpleTools, tools, developer tools, web development, programming tools">
    <meta name="author" content="SimpleTools">
    <meta name="robots" content="index, follow">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jersey+25&display=swap" rel="stylesheet">

    <script src="https://unpkg.com/lucide@latest"></script>

    <link rel="stylesheet" href="global/css/index.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="headContainer">
        <img src="global/images/logo.png" alt="SimpleTools Logo" height="88" width="auto">
        <div class="headContainer-title">
            <h1>SimpleTools</h1>
            <h2>Use a collection of simple tools by Quntem.</h2>
        </div>
    </div>
    <div class="toolsContainer">
        <div class="toolsContainer-iconContainer-PAS">
            <img src="pixel-art-scaler/pixel scaler icon.png" alt="Pixel Art Scaler Icon" class="toolsContainer-icon" height="48" width="48">
            <h2 class="pas-font pas-title">Pixel Art Scaler</h2>
        </div>

        <div class="toolCard">
            <img src="global/images/pixel art scaler preview.png" alt="Screenshot of the Pixel Art Scaler tool." width="100%" height="auto" class="toolCard-image">
            <p class="toolCard-description">
                Easily scale your pixel art to ensure it looks sharp and vibrant on social media platforms!
            </p>
            <a href="pixel-art-scaler/index.html">
                <button class="toolCard-button">Try it out</button>
            </a>
        </div>
    </div>

    <script>
        function matchLogoToTitleHeight() {
            const logo = document.querySelector('.headContainer img');
            const title = document.querySelector('.headContainer-title');

            if (logo && title) {
                const titleHeight = title.offsetHeight;

                if (titleHeight > 0) {
                    logo.style.height = titleHeight + 'px';
                } else if (window.innerWidth <= 310) {
                    logo.style.height = '4rem';
                } else {
                    logo.style.height = '88px'; // default height
                }
            }
        }

        function shorternPAS() {
            const pasTitle = document.querySelector('.pas-title');
            if (window.innerWidth <= 310) {
                if (pasTitle) {
                    pasTitle.textContent = 'PAS';
                }
            } else {
                if (pasTitle) {
                    pasTitle.textContent = 'Pixel Art Scaler';
                }
            }
        }

        function truncateDescription() {
            const description = document.querySelector('.toolCard-description');
            if (description) {
                const fullText = 'Easily scale your pixel art to ensure it looks sharp and vibrant on social media platforms!';

                let maxLength = fullText.length; // Default to full length

                if (window.innerWidth <= 480) {
                    // Dynamic scaling between 0px and 480px
                    // At 480px -> 86 chars, at 0px -> smaller number (~30 chars)
                    const minChars = 0;
                    const maxChars = 64;
                    const width = Math.max(window.innerWidth, 1); // Prevent divide by zero
                    maxLength = Math.floor((width / 480) * (maxChars - minChars) + minChars);
                }

                if (fullText.length > maxLength) {
                    description.textContent = fullText.slice(0, maxLength).trim() + '...';
                } else {
                    description.textContent = fullText;
                }
            }
        }

        window.addEventListener('load', () => {
            matchLogoToTitleHeight();
            shorternPAS();
            truncateDescription();
        });
        window.addEventListener('resize', () => {
            matchLogoToTitleHeight();
            shorternPAS();
            truncateDescription();
        });
    </script>
</body>