Addminiproject/contribute.html at main · JiyaBatra/Addminiproject · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: https:; font-src 'self' data: https://cdnjs.cloudflare.com; media-src 'self' data:; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'; upgrade-insecure-requests">
    <title>How to Contribute</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="contribute.css">
    <link rel="stylesheet" href="3d-effects.css">
</head>

<body>
    <div id="navbar"></div>

    <main class="contribute-page">
        <section class="contribute-hero card-shell">
            <h1>How to Contribute</h1>
            <p>
                You can contribute in two ways: add a mini project, or improve the main website with feature and
                enhancement work.
                Mini project submissions follow additional submission restrictions.
            </p>
        </section>

        <section class="contribute-grid">
            <article class="panel card-shell">
                <h2>Mini Project Rules</h2>
                <p>
                    Before starting a mini project, review the official rules. Mini project issues and PRs are validated
                    for ownership, active submission limit, and 7-day restriction.
                </p>
                <a href="mini-project-guidelines/index.html" class="guideline-link">Open Mini Project Guidelines</a>
            </article>

            <article class="panel card-shell">
                <h2>Choose Contribution Type</h2>
                <p>
                    Mini project contributions require rules confirmation. Feature and enhancement issues for the main
                    website
                    can be created directly.
                </p>
                <div class="submission-actions">
                    <button type="button" class="open-submit-modal" id="openSubmitModal">Create Mini Project
                        Issue</button>
                    <a class="feature-issue-link" target="_blank" rel="noopener noreferrer"
                        href="https://github.com/JiyaBatra/Addminiproject/issues/new?title=Feature%20or%20Enhancement%3A%20&body=%3C!--%20contribution-type%3A%20feature-enhancement%20--%3E%0A%0AFeature%20summary%3A%0A%0AExpected%20impact%3A%0A&labels=enhancement">Create
                        Feature/Enhancement Issue</a>
                </div>
            </article>
        </section>

        <section class="steps-panel card-shell">
            <h2>Contribution Steps</h2>
            <ol class="steps-list">
                <li>
                    <h3 class="step-title">Fork the Repository</h3>
                    <p class="step-text">Click the <strong>Fork</strong> button on GitHub.</p>
                </li>
                <li>
                    <h3 class="step-title">Clone Your Fork</h3>
                    <pre class="step-code"><code>git clone https://github.com/your-username/Addminiproject.git
cd Addminiproject</code></pre>
                </li>
                <li>
                    <h3 class="step-title">Create a New Branch</h3>
                    <pre class="step-code"><code>git checkout -b your-branch-name</code></pre>
                </li>
                <li>
                    <h3 class="step-title">Make Your Changes</h3>
                    <p class="step-text">
                        Add your mini project inside <code>projectforcontributor</code> or work on approved website
                        improvements.
                    </p>
                </li>
                <li>
                    <h3 class="step-title">Stage and Commit</h3>
                    <pre class="step-code"><code>git add .
git commit -m "Add: brief description of contribution"</code></pre>
                </li>
                <li>
                    <h3 class="step-title">Push to GitHub</h3>
                    <pre class="step-code"><code>git push origin your-branch-name</code></pre>
                </li>
                <li>
                    <h3 class="step-title">Create Pull Request</h3>
                    <p class="step-text">
                        Open your fork on GitHub and click <strong>Compare &amp; Pull Request</strong>.
                    </p>
                </li>
            </ol>
        </section>
    </main>

    <div id="footer"></div>

    <div class="rules-modal" id="rulesModal" hidden>
        <div class="rules-modal-backdrop" id="closeRulesBackdrop"></div>
        <div class="rules-modal-card" role="dialog" aria-modal="true" aria-labelledby="rulesModalTitle">
            <h2 id="rulesModalTitle">Mini Project Rules Confirmation</h2>
            <p>Please confirm the required rules before opening a mini project issue.</p>
            <ul class="rules-list">
                <li>Only one active project submission is allowed at a time.</li>
                <li>A minimum 7-day gap is required after your previous submission.</li>
                <li>You can work only on issues raised by yourself.</li>
            </ul>
            <label class="rules-confirm">
                <input type="checkbox" id="agreeRules">
                <span>I have read and understood the rules.</span>
            </label>
            <div class="modal-actions">
                <button type="button" class="modal-btn secondary" id="closeRulesModal">Cancel</button>
                <button type="button" class="modal-btn primary" id="continueSubmit" disabled>Continue to Mini Project
                    Issue</button>
            </div>
            <p class="modal-note">
                Backend checks enforce one active mini project, issue ownership, and 7-day restriction.
            </p>
        </div>
    </div>

    <div class="cursor">
        <video src="Assets/butterfly.mp4" autoplay muted loop playsinline aria-hidden="true"></video>
    </div>
    <div class="sparkle-container"></div>

    <script>
      fetch("components/navbar.html")
        .then((res) => res.text())
        .then((data) => {
          document.getElementById("navbar").innerHTML = data;
        });
    </script>

    <script>
      fetch("components/footer.html")
        .then((res) => res.text())
        .then((data) => {
          document.getElementById("footer").innerHTML = data;
        });
    </script>

    <script src="auth.js"></script>
    <script>
        checkAuth();
        showLoggedInUser();
    </script>
    <script src="script.js"></script>
    <script>
        const openSubmitModalBtn = document.getElementById("openSubmitModal");
        const rulesModal = document.getElementById("rulesModal");
        const closeRulesModalBtn = document.getElementById("closeRulesModal");
        const closeRulesBackdrop = document.getElementById("closeRulesBackdrop");
        const agreeRulesInput = document.getElementById("agreeRules");
        const continueSubmitBtn = document.getElementById("continueSubmit");
        const issueCreateUrl =
            "https://github.com/JiyaBatra/Addminiproject/issues/new?title=Mini%20Project%3A%20&body=%3C!--%20contribution-type%3A%20mini-project%20--%3E%0A%0AProject%20name%3A%0A%0AProject%20description%3A%0A%0ATech%20stack%3A%0A&labels=mini-project";

        const openRulesModal = () => {
            rulesModal.hidden = false;
            continueSubmitBtn.disabled = !agreeRulesInput.checked;
        };

        const closeRulesModal = () => {
            rulesModal.hidden = true;
        };

        if (
            openSubmitModalBtn &&
            rulesModal &&
            closeRulesModalBtn &&
            closeRulesBackdrop &&
            agreeRulesInput &&
            continueSubmitBtn
        ) {
            openSubmitModalBtn.addEventListener("click", openRulesModal);
            closeRulesModalBtn.addEventListener("click", closeRulesModal);
            closeRulesBackdrop.addEventListener("click", closeRulesModal);

            agreeRulesInput.addEventListener("change", () => {
                continueSubmitBtn.disabled = !agreeRulesInput.checked;
            });

            continueSubmitBtn.addEventListener("click", () => {
                if (continueSubmitBtn.disabled) {
                    return;
                }
                window.open(issueCreateUrl, "_blank", "noopener,noreferrer");
                closeRulesModal();
            });

            document.addEventListener("keydown", (event) => {
                if (event.key === "Escape" && !rulesModal.hidden) {
                    closeRulesModal();
                }
            });
        }
    </script>
</body>

</html>