KODEGAKURE

Your hidden vault of projects, open-source codes, and digital footprints.

Live Drawing Canvas

Collaborative Drawing Board

A real-time collaborative drawing canvas where you can create art with others. Draw, sketch, and express your creativity with various tools and colors.

Open in New Tab

Note: The drawing app may take a moment to load. For best experience, use the "Open in New Tab" button.

www.mail.live-session.org

Toast-Empire

toast-empire.com

KODEGAKURE Tools & Extensions

KG Colorpicker Extension

Advanced color picking tool for designers and developers. Identify, extract, and save colors from any webpage with ninja precision.

Shadow Guard VPN VPN Service

Simple Open source VPN free to open and modify and use. Completely free with 1 server in France.

Kage Translator Extension

Instantly translate any selected text or marked area on a webpage to English using advanced AI algorithms.

TE Network Explorer Software

Specialized browser designed to navigate the TE Network and access .TE domains securely and efficiently.

Ninja Crypt Software

Robust encryption software for files and programs. Protect your data with military-grade encryption algorithms.

Code Sensei Extension

Real-time code analysis and improvement suggestions. Learn better coding practices as you write code.

Project Forge Software

Integrated development environment (IDE) tailored for ninja developers. Built-in tools for rapid project creation and deployment.

Stealth Ad-Block Extension

Advanced ad-blocking technology that removes all advertisements without a trace. Browse the web without distractions.

Server Kunai Software

Lightweight server management tool for deploying and monitoring applications. Throw your apps onto servers with precision.

Element Tracker Extension

Track and inspect DOM elements in real-time. Perfect for debugging complex web applications.

Database Scroll Software

Visual database management system that allows you to create, read, update, and delete records with ease.

Performance Sense Extension

Analyze and optimize website performance. Get actionable insights to make your applications faster.

Website Code Guide

Learn how this website was built and how you can create similar projects

Website Structure Overview

This website is built with modern HTML5, CSS3, and JavaScript. It features a responsive design that works on all devices, with a ninja-themed aesthetic.

The structure follows this pattern:

1. HTML: Defines the structure and content
   - Header with logo and navigation
   - Tabbed content sections
   - Footer

2. CSS: Provides styling and animations
   - Variables for consistent theming
   - Responsive grid layouts
   - Ninja-inspired animations and effects

3. JavaScript: Adds interactivity
   - Tab switching functionality
   - Hover effects and animations
   - Coding challenge execution

Key Design Principles

The website follows these design principles:

- Modular Design: Each section is self-contained
- Consistent Theming: Using CSS variables for colors
- Responsive First: Mobile-friendly from the start
- Performance Focused: Minimal dependencies
- Accessibility: Proper contrast and semantic HTML

Getting Started

To create a similar website:

1. Start with the HTML structure
2. Add global CSS styles
3. Implement tab functionality with JavaScript
4. Add your content sections
5. Customize colors and styling

The following sections break down each part of the code in detail.

HTML Structure

The HTML provides the foundation of the website. It uses semantic tags where possible and follows a logical structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KODEGAKURE | Developer Hub</title>
    <!-- Favicon and meta tags -->
    <link rel="icon" type="image/png" href="preview-image.png">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap">
    <!-- CSS Styles -->
    <style>
        /* CSS goes here */
    </style>
</head>
<body>
    <!-- Background shapes -->
    <div class="background-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
    </div>
    
    <!-- Floating shurikens -->
    <div class="shuriken shuriken-1">✧</div>
    <!-- ...other shurikens... -->
    
    <div class="container">
        <!-- Header with logo -->
        <header>
            <div class="ninja-mask"></div>
            <div class="avatar">
                <i class="fas fa-user-ninja"></i>
            </div>
            <h1>KODEGAKURE</h1>
            <p class="subtitle">Your hidden vault of projects...</p>
        </header>
        
        <!-- Navigation tabs -->
        <div class="ninja-nav">
            <button class="nav-btn active" data-target="projects">
                <i class="fas fa-code"></i> Websites
            </button>
            <!-- ...other tabs... -->
        </div>
        
        <!-- Content sections -->
        <section id="projects" class="section-container active">
            <!-- Project cards -->
        </section>
        
        <!-- ...other sections... -->
        
        <footer>
            <!-- Footer content -->
        </footer>
    </div>
    
    <!-- JavaScript -->
    <script>
        // JavaScript code goes here
    </script>
</body>
</html>

Key HTML Features

Important aspects of the HTML structure:

- Semantic Elements: Use of <header>, <section>, <footer>
- Responsive Meta Tag: <meta name="viewport" ...> for mobile
- External Resources: Font Awesome and Google Fonts
- Modular Sections: Each content area is self-contained
- Data Attributes: Used for tab navigation (data-target)

CSS Architecture

The CSS uses a modern approach with CSS variables for consistent theming and a mobile-first responsive design.

/* CSS Variables for theming */
:root {
    --primary: #0a0a0a;
    --secondary: #1a1a1a;
    --accent: #3b82f6;
    --accent-light: #93c5fd;
    /* ...other variables... */
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
}

body {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--text);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

/* Header styles */
header {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeIn 1s ease-out;
    position: relative;
    padding-top: 40px;
}

.ninja-mask {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    background: var(--ninja-dark);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    z-index: -1;
    opacity: 0.8;
    box-shadow: 0 0 40px var(--accent-glow);
}

/* Tab navigation */
.ninja-nav {
    display: flex;
    justify-content: center;
    margin: 40px 0 30px;
    gap: 15px;
    flex-wrap: wrap;
}

.nav-btn {
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--text);
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* ...other CSS sections... */

Responsive Design

The site uses responsive techniques to adapt to different screen sizes:

/* Grid layout for project cards */
.links-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .links-container {
        grid-template-columns: 1fr;
    }
    
    .link-card {
        padding: 20px;
    }
    
    h1 {
        font-size: 2.3rem;
    }
    
    /* ...other mobile styles... */
}

Animations and Effects

The site uses CSS animations for visual interest:

/* Floating background shapes */
@keyframes float {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }
    100% {
        transform: rotate(360deg) translate(30px, 30px); /* Increased movement */
    }
}

.shape-1 {
    animation: float 15s infinite linear; /* Faster animation */
}

/* Create a new animation for elements */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply to elements */
.new-element {
    animation: slide-in 0.5s ease-out;
}

Core JavaScript Functionality

The JavaScript provides interactivity for tab navigation, animations, and the coding challenges.

// Section navigation for main tabs
document.querySelectorAll('.nav-btn').forEach(button => {
    button.addEventListener('click', () => {
        // Remove active class from all buttons and sections
        document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.section-container').forEach(section => section.classList.remove('active'));
        
        // Add active class to clicked button
        button.classList.add('active');
        
        // Show corresponding section
        const target = button.getAttribute('data-target');
        document.getElementById(target).classList.add('active');
    });
});

// Code guide tabs
document.querySelectorAll('.code-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        // Remove active class from all tabs and content
        document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.code-content').forEach(c => c.classList.remove('active'));
        
        // Add active class to clicked tab
        tab.classList.add('active');
        
        // Show corresponding content
        const target = tab.getAttribute('data-target');
        document.getElementById(target).classList.add('active');
    });
});

// Enhanced hover animations
document.querySelectorAll('.link-card').forEach(card => {
    if(!card.classList.contains('disabled')) {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-8px) scale(1.03)';
            card.style.boxShadow = '0 15px 40px rgba(59, 130, 246, 0.5)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0) scale(1)';
            card.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.4)';
        });
    }
});

// ...other JS functionality...

Customizing the Design

You can easily customize this website by modifying the CSS variables:

/* Change the color scheme */
:root {
    /* Original blue theme */
    --accent: #3b82f6;
    --accent-light: #93c5fd;
    
    /* Green theme example */
    /*
    --accent: #10b981;
    --accent-light: #6ee7b7;
    --accent-glow: rgba(16, 185, 129, 0.4);
    */
    
    /* Purple theme example */
    /*
    --accent: #8b5cf6;
    --accent-light: #c4b5fd;
    --accent-glow: rgba(139, 92, 246, 0.4);
    */
}

/* Change the background gradient */
body {
    /* Original gradient */
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    
    /* Deep ocean gradient */
    /*
    background: linear-gradient(135deg, #0a0a2a, #0a1a3a);
    */
}

Adding New Sections

To add a new content section:

1. Add a new navigation button:
   <button class="nav-btn" data-target="new-section">
        <i class="fas fa-icon"></i> New Section
   </button>

2. Create the content section:
   <section id="new-section" class="section-container">
        <!-- Your content here -->
   </section>

3. The JavaScript will automatically handle showing the section
   when its button is clicked

Modifying Animations

To adjust animations, modify the CSS keyframes:

/* Make floating animation faster */
@keyframes float {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }
    100% {
        transform: rotate(360deg) translate(30px, 30px); /* Increased movement */
    }
}

.shape-1 {
    animation: float 15s infinite linear; /* Faster animation */
}

/* Create a new animation for elements */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply to elements */
.new-element {
    animation: slide-in 0.5s ease-out;
}

Java, HTML & CSS Challenges

FizzBuzz Challenge

Java Beginner

Write a Java program that prints numbers from 1 to 100. For multiples of 3, print "Fizz"; for multiples of 5, print "Buzz"; for multiples of both 3 and 5, print "FizzBuzz".

Expected Output:

1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...

FizzBuzz.java Java

Ninja Registration Form

HTML Intermediate

Create a responsive ninja registration form with fields for name, email, clan, and weapon preference. Include appropriate input types and styling.

Requirements:

- Name field (text)

- Email field (email)

- Clan selection (dropdown)

- Weapon preferences (checkboxes)

- Submit button

form.html HTML

<!DOCTYPE html>
<html>
<head>
    <title>Ninja Registration</title>
    <style>
        .ninja-form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background: #1a1a1a;
            border-radius: 10px;
            color: white;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #93c5fd;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #444;
            border-radius: 5px;
            background: #333;
            color: white;
        }
        
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form class="ninja-form">
        <div class="form-group">
            <label for="name">Ninja Name</label>
            <input type="text" id="name" required>
        </div>
        
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" required>
        </div>
        
        <div class="form-group">
            <label for="clan">Clan</label>
            <select id="clan">
                <option>Shadow Leaf</option>
                <option>Silent Water</option>
                <option>Fire Dragon</option>
                <option>Stone Mountain</option>
            </select>
        </div>
        
        <div class="form-group">
            <label>Weapon Preferences</label>
            <div>
                <input type="checkbox" id="sword"> 
                <label for="sword" style="display:inline">Sword</label>
            </div>
            <div>
                <input type="checkbox" id="shuriken"> 
                <label for="shuriken" style="display:inline">Shuriken</label>
            </div>
            <div>
                <input type="checkbox" id="bow"> 
                <label for="bow" style="display:inline">Bow</label>
            </div>
        </div>
        
        <button type="submit">Join the Clan</button>
    </form>
</body>

</html>