Skip to content

Commit 008610d

Browse files
Kshitij978Kshitij978
committed
update: UI/UX fixes and refactored code
update: added chart placeholder, changed copy button; refactor: script.js, style.css
1 parent 012388f commit 008610d

File tree

4 files changed

+368
-326
lines changed

4 files changed

+368
-326
lines changed

‎.eslintrc.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ module.exports ={
1414
node: true,
1515
jest: true,
1616
},
17-
ignorePatterns: ['.eslintrc.js','src/createChart.ts','__test__'],
17+
ignorePatterns: [
18+
'.eslintrc.js',
19+
'src/createChart.ts',
20+
'__test__',
21+
'script.js',
22+
],
1823
rules: {
1924
'@typescript-eslint/interface-name-prefix': 'off',
2025
'@typescript-eslint/explicit-function-return-type': 'off',

‎index.html‎

Lines changed: 162 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,169 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8" />
5+
<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
6+
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>GitHub Readme Activity Graph</title>
8+
<linkrel="preconnect" href="https://fonts.gstatic.com" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<linkhref="./styles.css" rel="stylesheet" />
14+
<linkrel="icon" href="asset/logo.png" />
15+
</head>
316

4-
<head>
5-
<metacharset="UTF-8" />
6-
<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
7-
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>GitHub Readme Activity Graph</title>
9-
<linkrel="preconnect" href="https://fonts.gstatic.com" />
10-
<linkhref="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet" />
11-
<linkhref="./styles.css" rel="stylesheet" />
12-
<linkrel="icon" href="asset/logo.png">
13-
</head>
17+
<bodyclass="bg-color">
18+
<!-- Dark Theme Mode -->
19+
<buttonclass="toggle-btn">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
x="0px"
23+
y="0px"
24+
width="24"
25+
height="24"
26+
viewBox="0 0 24 24"
27+
class="svg-sun"
28+
>
29+
<path
30+
d="M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z"
31+
></path>
32+
</svg>
33+
<svg
34+
xmlns="http://www.w3.org/2000/svg"
35+
x="0px"
36+
y="0px"
37+
width="30"
38+
height="30"
39+
viewBox="0 0 172 172"
40+
class="svg-moon"
41+
>
42+
<path
43+
d="M126.13333,120.4c-37.9948,0 -68.8,-30.8052 -68.8,-68.8c0,-11.18 2.72333,-21.70067 7.45333,-31.0288c-27.606,8.944 -47.58667,34.84147 -47.58667,65.4288c0,37.9948 30.8052,68.8 68.8,68.8c26.82053,0 49.99467,-15.3768 61.34667,-37.7712c-6.68507,2.1672 -13.80587,3.3712 -21.21333,3.3712z"
44+
></path>
45+
</svg>
46+
</button>
1447

15-
<bodyclass="bg-color">
16-
17-
<!-- Dark Theme Mode -->
18-
<buttonclass="toggle-btn">
19-
<svgxmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" class="svg-sun">
20-
<path
21-
d="M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z">
22-
</path>
23-
</svg>
24-
<svgxmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172"
25-
class="svg-moon">
26-
<path
27-
d="M126.13333,120.4c-37.9948,0 -68.8,-30.8052 -68.8,-68.8c0,-11.18 2.72333,-21.70067 7.45333,-31.0288c-27.606,8.944 -47.58667,34.84147 -47.58667,65.4288c0,37.9948 30.8052,68.8 68.8,68.8c26.82053,0 49.99467,-15.3768 61.34667,-37.7712c-6.68507,2.1672 -13.80587,3.3712 -21.21333,3.3712z">
28-
</path>
29-
</svg>
30-
</button>
31-
32-
<mainclass="container">
33-
<!-- Loader -->
34-
<divclass="loader">
35-
<span></span>
36-
</div>
37-
<!-- Header - Logo & Text -->
38-
<headerclass="header">
39-
<imgsrc="./asset/logo.svg" alt="logo">
40-
<h1class="heading">GitHub Readme Activity Graph</h1>
41-
</header>
42-
<!-- Form - Input & Submit button for Username -->
43-
<divclass="container__item">
44-
<formclass="form">
45-
<inputtype="username" class="form__field" placeholder="Enter Your GitHub Username" id="username" />
46-
<buttontype="submit" class="btn btn--primary" id="submit-button">
47-
Build Graph
48-
</button>
49-
</form>
50-
</div>
51-
<!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
52-
<divclass="split_container">
53-
<sectionclass="left">
54-
<form>
55-
<inputtype="color" class="picker" name="bgColor" value="#ffcfe9" id="bgColor" />
56-
<labelfor="bgColor">Background Color</label>
57-
</form>
58-
<div>
59-
<inputtype="color" class="picker" name="line" value="#9e4c98" id="line" />
60-
<labelfor="line">Line Color</label>
61-
</div>
62-
<div>
63-
<inputtype="color" class="picker" name="point" value="#403d3d" id="point" />
64-
<labelfor="point">Point Color</label>
48+
<mainclass="container">
49+
<!-- Loader -->
50+
<divclass="loader">
51+
<span></span>
52+
</div>
53+
<!-- Header - Logo & Text -->
54+
<headerclass="header">
55+
<divclass="title_container">
56+
<imgsrc="./asset/logo.svg" alt="logo" />
57+
<h1class="heading">GitHub Readme Activity Graph</h1>
6558
</div>
66-
<div>
67-
<inputtype="color" class="picker" name="color" value="#9e4c98" id="color" />
68-
<labelfor="color">Text Color</label>
69-
</div>
70-
</section>
71-
<sectionclass="right">
72-
<divclass="rect">
73-
<divclass="ct-chart"></div>
74-
</div>
75-
<div>
76-
<divclass="wrapper">
77-
<buttontype="submit" class="copy">
78-
Copy Link ✔
79-
<span></span>
80-
<span></span>
81-
<span></span>
82-
<span></span>
83-
</button>
59+
<pclass="description">
60+
A dynamically generated activity graph to show your GitHub activities
61+
of last 31 days.
62+
</p>
63+
</header>
64+
<!-- Form - Input & Submit button for Username -->
65+
<divclass="container__item">
66+
<formclass="form">
67+
<input
68+
type="username"
69+
class="form__field"
70+
placeholder="Enter Your GitHub Username"
71+
id="username"
72+
/>
73+
<buttontype="submit" class="btn btn--primary" id="submit-button">
74+
Build Graph
75+
</button>
76+
</form>
77+
</div>
78+
<!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
79+
<divclass="split_container">
80+
<sectionclass="left">
81+
<form>
82+
<input
83+
type="color"
84+
class="picker"
85+
name="bgColor"
86+
value="#ffcfe9"
87+
id="bgColor"
88+
/>
89+
<labelfor="bgColor">Background Color</label>
90+
</form>
91+
<div>
92+
<input
93+
type="color"
94+
class="picker"
95+
name="line"
96+
value="#9e4c98"
97+
id="line"
98+
/>
99+
<labelfor="line">Line Color</label>
100+
</div>
101+
<div>
102+
<input
103+
type="color"
104+
class="picker"
105+
name="point"
106+
value="#403d3d"
107+
id="point"
108+
/>
109+
<labelfor="point">Point Color</label>
110+
</div>
111+
<div>
112+
<input
113+
type="color"
114+
class="picker"
115+
name="color"
116+
value="#9e4c98"
117+
id="color"
118+
/>
119+
<labelfor="color">Text Color</label>
120+
</div>
121+
</section>
122+
<sectionclass="right">
123+
<divclass="rect">
124+
<divclass="chart_placeholder active">
125+
<pclass="placeholder_text">Your graph will be visible here.</p>
126+
</div>
127+
<divclass="ct-chart"></div>
84128
</div>
85-
</div>
86-
</section>
87-
</div>
88-
<!-- Footer - Text & Link -->
89-
<footerclass="footer">
90-
<p>
91-
A dynamically generated activity graph to show your GitHub activities of last 31 days.
92-
</p>
93-
<span>
94-
More Info: <ahref="https://github.com/Ashutosh00710/github-readme-activity-graph">GitHub</a>
95-
</span>
96-
97-
</footer>
98-
99-
</main>
100-
</body>
101-
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
102-
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
103-
<script
104-
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
105-
<scriptsrc="./script.js"></script>
106129

107-
</html>
130+
<divclass="copy_container">
131+
<divclass="copy_text">
132+
<input
133+
type="text"
134+
class="text"
135+
placeholder="Build your graph to generate the link."
136+
value=""
137+
disabled
138+
/>
139+
<button>
140+
<img
141+
height="20px"
142+
width="20px"
143+
src="https://clipboardjs.com/assets/images/clippy.svg"
144+
alt="copy-text"
145+
/>
146+
</button>
147+
</div>
148+
</div>
149+
</section>
150+
</div>
151+
<!-- Footer - Text & Link -->
152+
<footerclass="footer">
153+
<p>More Info:</p>
154+
<ahref="https://github.com/Ashutosh00710/github-readme-activity-graph"
155+
><img
156+
style="padding-top: 2px; opacity: 0.7"
157+
height="20px"
158+
width="20px"
159+
src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
160+
alt="github icon"
161+
/></a>
162+
</footer>
163+
</main>
164+
</body>
165+
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
166+
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
167+
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
168+
<scriptsrc="./script.js"></script>
169+
</html>

0 commit comments

Comments
(0)