Merge pull request #18 from Henrisen:github-pages

Updated for GitHub Pages
Henrisen · Nov 18, 2024 · 7e21c02 · 7e21c02
2 parents fa1fef0 + 058d6a8
commit 7e21c02
Show file tree

Hide file tree

Showing 4 changed files with 317 additions and 0 deletions.
diff --git a/.github/resources/2.png b/.github/resources/2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>See - Scan, Explore, Examine</title>
+    <link rel="stylesheet" href="static/style.css">
+</head>
+<body>
+    <header id="header">
+        <canvas id="background"></canvas>
+        <div class="header-content">
+            <h1>See</h1>
+            <p>Scan • Explore • Examine</p>
+        </div>
+    </header>
+
+    <nav>
+        <ul>
+            <li><a href="#summary">Summary</a></li>
+            <li><a href="#installing">Installing</a></li>
+            <li><a href="#usage">Usage</a></li>
+            <li><a href="#license">License</a></li>
+            <li><a href="#contributing">Contributing</a></li>
+        </ul>
+    </nav>
+
+    <main>
+        <section id="summary">
+            <img src="https://github.com/Henrisen/see/blob/main/.github/resources/1.png?raw=true" alt="Screenshot of See">
+            <h2>Summary</h2>
+            <p>A simple file viewer with syntax highlighting for Linux and macOS.</p>
+        </section>
+
+        <section id="installing">
+            <h2>Installing</h2>
+            <p>The <strong>see</strong> tool is a command-line utility for viewing files in a user-friendly manner. Follow the steps below to install <strong>see</strong> on your supported operating systems. Ensure you have <code>curl</code> installed.</p>
+
+            <h3>For Linux and macOS</h3>
+            <h4>1. Check if <code>curl</code> is installed</h4>
+            <pre><code>command -v curl >/dev/null 2>&1 && echo "YES" || echo "NO"</code></pre>
+
+            <h4>2. Download the Installer from my Official GitHub</h4>
+            <pre><code>curl -O https://raw.githubusercontent.com/Henrisen/see/refs/heads/main/install</code></pre>
+
+            <h4>3. Run the Installer</h4>
+            <pre><code>chmod +x ./install && sudo ./install</code></pre>
+
+            <h3>For Windows</h3>
+            <h4>1. Check if <code>curl</code> is installed</h4>
+            <pre><code>where curl >nul 2>&1 && echo YES || echo NO</code></pre>
+
+            <h4>2. Download the Installer from my Official GitHub</h4>
+            <pre><code>curl -O https://raw.githubusercontent.com/Henrisen/see/refs/heads/main/install.bat</code></pre>
+
+            <h4>3. Run the Installer</h4>
+            <pre><code>.\install.bat</code></pre>
+        </section>
+
+        <section id="usage">
+            <h2>Usage</h2>
+            <p>To use <strong>see</strong>, run it with the name of the file you want to open:</p>
+            <pre><code>see example.sh</code></pre>
+
+            <p>For real-time file updates, use the <code>-f</code> / <code>--follow</code> flag:</p>
+            <pre><code>see -f example.sh</code></pre>
+
+            <p>For custom update intervals, use the <code>-u</code> / <code>--update-interval</code> flag (default is 125 ms):</p>
+            <pre><code>see -fu125 example.sh</code></pre>
+        </section>
+
+        <section id="license">
+            <h2>License</h2>
+            <p>This project is licensed under the <strong>BSD 3-Clause License</strong>. See the <a href="https://github.com/Henrisen/see/blob/main/LICENSE" target="_blank">LICENSE</a> file for more details.</p>
+        </section>
+
+        <section id="contributing">
+            <h2>Contributing</h2>
+            <p>Contributions to this project are welcome. Please fork the repository, make your changes, and submit a pull request. Ensure your code adheres to the project’s coding standards and includes relevant tests.</p>
+            <ol>
+                <li>Fork the repository</li>
+                <li>Create a new branch for your feature</li>
+                <li>Commit your changes</li>
+                <li>Push your branch to your fork</li>
+                <li>Open a pull request</li>
+            </ol>
+        </section>
+    </main>
+
+    <footer>
+        <p>© 2024 See Tool by Henrisen. All Rights Reserved.</p>
+    </footer>
+
+    <script src="static/script.js"></script>
+</body>
+</html>
diff --git a/static/script.js b/static/script.js
@@ -0,0 +1,104 @@
+Array.from(document.querySelectorAll("pre")).forEach((e) => {
+    e.addEventListener("click", (i) => {
+        let elm = i.target;
+        if (i.target.nodeName == "CODE") elm = elm.parentNode;
+        if (elm.ariaBusy) return;
+        navigator.clipboard.writeText(elm.firstChild.textContent);
+        let old = elm.firstChild.textContent;
+        elm.firstChild.textContent = "Command Copied";
+        elm.ariaBusy = "yes";
+        setTimeout(() => {
+            elm.firstChild.textContent = old;
+            elm.ariaBusy = "";
+        }, 1000);
+    });
+})
+
+// Get canvas and context
+const header = document.getElementById('header');
+const canvas = document.getElementById('background');
+const ctx = canvas.getContext('2d');
+
+// Make sure the canvas is responsive
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// Particle array
+let particles = [];
+let r=0.5329815303430079;
+// Image for the background
+const backgroundImage = new Image();
+backgroundImage.src = './.github/resources/2.png'; // Random image from Lorem Picsum
+
+// Function to create new particle
+function createParticle(x, y) {
+    const speed = Math.random() * 5 + 2;  // Speed of the particle
+    const angle = Math.random() * Math.PI * 2;  // Random direction
+    const velocityX = Math.cos(angle) * speed;
+    const velocityY = Math.sin(angle) * speed;
+
+    particles.push({
+        x: x,
+        y: y,
+        radius: Math.random() * 3 + 5, // Random radius for each particle
+        color: 'rgba(255, 255, 255, 0.8)', // Particle color
+        velocityX: velocityX,
+        velocityY: velocityY
+    });
+}
+
+// Update particles
+function updateParticles() {
+    // Loop through each particle
+    for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+
+        // Update particle position
+        p.x += p.velocityX;
+        p.y += p.velocityY;
+
+        // Fade out and shrink the particle
+        p.radius -= 0.05;
+        if (p.radius <= 0) {
+            particles.splice(i, 1); // Remove the particle if its radius is too small
+            i--;
+        }
+    }
+}
+
+// Draw particles
+function drawParticles() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
+    ctx.drawImage(backgroundImage, 0, 0, canvas.width *r, canvas.height); // Draw the image as background
+
+    for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); // Draw particle as circle
+        ctx.fillStyle = p.color;
+        ctx.fill();
+    }
+}
+
+// Mousemove event to generate particles at cursor location
+header.addEventListener('mousemove', (event) => {
+    // console.log(scrollX, scrollY);
+    // console.log(event.x, event.y);
+    createParticle(event.x + scrollX, event.y + scrollY);
+});
+
+// Animation loop to update and draw particles
+function animate() {
+    updateParticles();
+    drawParticles();
+    requestAnimationFrame(animate); // Continue the animation
+}
+
+// Start the animation
+animate();
+
+// Resize canvas on window resize
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,117 @@
+/* style.css */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    background-color: #222222;
+    color: #eeeeee;
+    overflow-x: hidden;
+}
+
+header {
+    background-color: #0E1011;
+    position: relative;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    color: white;
+    text-align: center;
+}
+
+header canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.header-content {
+    z-index: 1;
+}
+
+header h1 {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+header p {
+    font-size: 1.5rem;
+}
+
+nav {
+    background: #333;
+    padding: 1rem;
+    text-align: center;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+}
+
+nav ul li {
+    margin: 0 1rem;
+}
+
+nav ul li a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+nav ul li a:hover {
+    color: #007bff;
+}
+
+main {
+    background-color: #222222;
+    padding: 2rem;
+}
+
+section {
+    padding: 2rem 0;
+}
+
+section h2 {
+    color: #007bff;
+    margin-bottom: 1rem;
+}
+
+pre {
+    background: #555555;
+    padding: 1rem;
+    border-left: 5px solid #007bff;
+    color: #e0e0e0;
+    overflow-x: auto;
+}
+
+pre:hover {
+    color: #ffffff;
+}
+
+footer {
+    background: #333;
+    color: white;
+    text-align: center;
+    padding: 1rem;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+img {
+    width: 50%;
+    float: right;
+}