Repo_Man/script.js at main · Eonflexx/Repo_Man · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142

        // Theme toggle functionality
        function toggleTheme() {
            const body = document.body;
            const currentTheme = body.getAttribute('data-theme');

            if (currentTheme === 'light') {
                body.removeAttribute('data-theme');
            } else {
                body.setAttribute('data-theme', 'light');
            }
        }

        // Modal functionality
        function openModal() {
            document.getElementById('shortlistModal').classList.add('active');
        }

        function closeModal() {
            document.getElementById('shortlistModal').classList.remove('active');
        }

        function openStepModal(stepId) {
            const stepContent = document.getElementById('stepContent');
            const modal = document.getElementById('stepModal');

            const stepData = {
                'setup1': {
                    title: 'Create Project Warehouse Folder',
                    content: `
                        <h3 style="color: var(--accent-color); margin-bottom: var(--spacing-md);">Step 1: Create Root Folder</h3>
                        <p>This creates your main project container folder:</p>
                        <div class="step">
                            <div class="step-title">Windows Command:</div>
                            <input type="text" class="step-input" placeholder="mkdir project-warehouse">
                            <input type="text" class="step-input" placeholder="cd project-warehouse" style="margin-top: var(--spacing-xs);">
                        </div>
                        <div class="step">
                            <div class="step-title">What this does:</div>
                            <p>Creates a new directory called 'project-warehouse' and navigates into it. This will be your central hub for all development projects.</p>
                        </div>
                    `
                },
                'setup2': {
                    title: 'Create README.md File',
                    content: `
                        <h3 style="color: var(--accent-color); margin-bottom: var(--spacing-md);">Step 2: Create Documentation</h3>
                        <p>Every good project needs documentation:</p>
                        <div class="step">
                            <div class="step-title">Windows PowerShell:</div>
                            <input type="text" class="step-input" placeholder="New-Item README.md -ItemType File">
                        </div>
                        <div class="step">
                            <div class="step-title">Mac/Linux/Git Bash:</div>
                            <input type="text" class="step-input" placeholder="touch README.md">
                        </div>
                        <div class="step">
                            <div class="step-title">Purpose:</div>
                            <p>README.md serves as the main documentation for your project warehouse, explaining what it contains and how to use it.</p>
                        </div>
                    `
                },
                'setup3': {
                    title: 'Initialize Git Repository',
                    content: `
                        <h3 style="color: var(--accent-color); margin-bottom: var(--spacing-md);">Step 3: Initialize Version Control</h3>
                        <div class="step">
                            <div class="step-title">Command:</div>
                            <input type="text" class="step-input" placeholder="git init">
                        </div>
                        <div class="step">
                            <div class="step-title">What happens:</div>
                            <p>Creates a new Git repository in your current folder. This enables version control, allowing you to track changes, create commits, and sync with GitHub.</p>
                        </div>
                        <div class="step">
                            <div class="step-title">Verify:</div>
                            <input type="text" class="step-input" placeholder="git status">
                            <p style="margin-top: var(--spacing-xs); opacity: 0.8;">This should show your README.md as an untracked file.</p>
                        </div>
                    `
                },
                'setup4': {
                    title: 'Connect to GitHub',
                    content: `
                        <h3 style="color: var(--accent-color); margin-bottom: var(--spacing-md);">Step 4: Link to Remote Repository</h3>
                        <div class="step">
                            <div class="step-title">First, create repository on GitHub.com:</div>
                            <p>1. Go to github.com and click "New repository"</p>
                            <p>2. Name it "project-warehouse"</p>
                            <p>3. Don't initialize with README (you already have one)</p>
                            <p>4. Click "Create repository"</p>
                        </div>
                        <div class="step">
                            <div class="step-title">Then connect locally:</div>
                            <input type="text" class="step-input" placeholder="git remote add origin https://github.com/YOUR_USERNAME/project-warehouse.git">
                        </div>
                        <div class="step">
                            <div class="step-title">Replace YOUR_USERNAME with your actual GitHub username</div>
                        </div>
                    `
                }
            };

            if (stepData[stepId]) {
                stepContent.innerHTML = stepData[stepId].content;
                modal.classList.add('active');
            }
        }

        function closeStepModal() {
            document.getElementById('stepModal').classList.remove('active');
        }

        // Close modals when clicking outside
        window.onclick = function(event) {
            const shortlistModal = document.getElementById('shortlistModal');
            const stepModal = document.getElementById('stepModal');

            if (event.target === shortlistModal) {
                closeModal();
            }
            if (event.target === stepModal) {
                closeStepModal();
            }
        }

        // Add interactive input functionality
        document.addEventListener('DOMContentLoaded', function() {
            // Add event listeners to all step inputs
            document.querySelectorAll('.step-input').forEach(input => {
                input.addEventListener('input', function() {
                    if (this.value.trim() !== '') {
                        this.style.borderColor = 'var(--accent-color)';
                        this.style.boxShadow = '0 0 10px rgba(203, 255, 250, 0.3)';
                    } else {
                        this.style.borderColor = 'var(--border-color)';
                        this.style.boxShadow = 'none';
                    }
                });
            });
        });