From 83049d11977250e40391a95241bea46814a5eee7 Mon Sep 17 00:00:00 2001
From: sameemul-haque <samhaqk@gmail.com>
Date: Thu, 25 Apr 2024 21:07:07 +0530
Subject: [PATCH] feat: update instructions

---
 README.md         | 26 +++++++++++++-------------
 public/index.html | 14 ++++++++++++++
 public/index.js   |  2 +-
 public/style.css  | 13 ++++++++++++-
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 04eb9b5..203dad0 100644
--- a/README.md
+++ b/README.md
@@ -19,22 +19,22 @@
 > [!IMPORTANT]  
 > If you're reading this, it means you like this project :). Feel free to give it a star ⭐.
 
-## Features
-
-- Easily create Git commits to modify the contribution graph on GitHub.
-- Customize the contribution graph for artistic, personal, or branding purposes.
 
 ## Usage
 
-- Select the year you want to customize (Choosing the year before your GitHub joining year would be better, can use GitHub api for checking the joined date).
-- Select the desired rectangle(s) on the GitHub contribution graph that you want to customize and click `Generate` button.
-- Copy the generated Git commit command.
-- Run the copied command in your local Git repository to make the desired changes (better to create a new empty repo).
-- Push the changes to your GitHub repository to update the contribution graph.
+- Select a year (choosing a year before joining GitHub is better).
+- Left click on the squares to activate and right click to deactivate them.
+- Click on the `Generate` button to get the code.
+- Create a [new]("https://github.com/new") GitHub repository.
+- Clone the repository into your local machine.
+- Ensure your git username and email are [configured correctly]("https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile#your-local-git-commit-email-isnt-connected-to-your-account").
+- Copy the generated code into your terminal.
+- Push the changes to the remote repository.
+
 
-To create an empty commit with a specific date:
-```bash
-git commit --allow-empty --date="31 Oct 2022" --allow-empty-message -m ""
-```
+## Features
+
+- Easily create Git commits to modify the contribution graph on GitHub.
+- Customize the contribution graph for artistic, personal, or branding purposes.
 
 ![preview](/public/banner.png "preview")
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 652396f..7d43d39 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,6 +50,20 @@ <h2>GitHub Contribution Graph Customizer</h2>
     users can customize their contribution graph to display their name,
     messages, symbols, logos, or any other desired patterns.
   </p>
+
+  <div id="instructions-gitart">
+    <h3>Instructions</h3>
+    <ul> 
+      <li>Select a year (choosing a year before <span id="github-join-date">joining GitHub</span> is better).</li>
+      <li>Left click on the squares to activate and right click to deactivate them. </li>
+      <li>Click on the <b>Generate</b> button to get the code.</li>
+      <li>Create a <a href="https://github.com/new">new</a> GitHub repository.</li>
+      <li>Clone the repository into your local machine.</li>
+      <li>Ensure your git username and email are <a href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile#your-local-git-commit-email-isnt-connected-to-your-account">configured correctly</a>.</li>
+      <li>Copy the generated code into your terminal.</li>
+      <li>Push the changes to the remote repository.</li>
+    </ul>
+    </div>
   <div class="graph-container">
     <div class="graph">
       <select size="3" id="year-select"></select>
diff --git a/public/index.js b/public/index.js
index 0eb2627..024282f 100644
--- a/public/index.js
+++ b/public/index.js
@@ -107,7 +107,7 @@ document.addEventListener("DOMContentLoaded", function () {
 function generateCode() {
   const dateList = dateforgitlist;
   if (dateList.length === 0) {
-    alert("Don't try to play a fool with me Nikesh!");
+    alert("empty");
     return;
   }
   const codeContainer = document.querySelector(".code");
diff --git a/public/style.css b/public/style.css
index 4afd988..7ba3b2d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -46,6 +46,17 @@ h2 {
   margin-right: auto;
 }
 
+#instructions-gitart {
+  font-size: 0.9rem;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#instructions-gitart a {
+  color: #39d353;
+}
+
 .months {
   grid-area: months;
 }
@@ -114,7 +125,7 @@ h2 {
   grid-auto-columns: var(--square-size);
 }
 
-li {
+.graph-container li {
   list-style-type: none;
 }