Skip to content

Commit 2eea42e

Browse files
Kshitij978Kshitij978
committed
update: color inpute style, fix: input & form container width
1 parent 65d4b65 commit 2eea42e

File tree

2 files changed

+572
-599
lines changed

2 files changed

+572
-599
lines changed

‎index.html‎

Lines changed: 127 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,135 @@
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-
<scriptsrc="https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous"></script>
14-
<linkhref="./styles.css" rel="stylesheet" />
15-
<linkrel="icon" href="asset/logo.png" />
16-
</head>
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+
<linkhref="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet" />
10+
<scriptsrc="https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous"></script>
11+
<linkhref="./styles.css" rel="stylesheet" />
12+
<linkrel="icon" href="asset/logo.png" />
13+
</head>
1714

18-
<bodyclass="bg-color">
19-
<!-- Dark Theme Mode -->
20-
<buttonclass="toggle-btn">
21-
<svg
22-
xmlns="http://www.w3.org/2000/svg"
23-
x="0px"
24-
y="0px"
25-
width="24"
26-
height="24"
27-
viewBox="0 0 24 24"
28-
class="svg-sun"
29-
>
30-
<path
31-
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"
32-
></path>
33-
</svg>
34-
<svg
35-
xmlns="http://www.w3.org/2000/svg"
36-
x="0px"
37-
y="0px"
38-
width="30"
39-
height="30"
40-
viewBox="0 0 172 172"
41-
class="svg-moon"
42-
>
43-
<path
44-
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"
45-
></path>
46-
</svg>
47-
</button>
15+
<bodyclass="bg-color">
16+
<!-- Dark Theme Mode -->
17+
<buttonclass="toggle-btn">
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
x="0px"
21+
y="0px"
22+
width="24"
23+
height="24"
24+
viewBox="0 0 24 24"
25+
class="svg-sun"
26+
>
27+
<path
28+
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"
29+
></path>
30+
</svg>
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
x="0px"
34+
y="0px"
35+
width="30"
36+
height="30"
37+
viewBox="0 0 172 172"
38+
class="svg-moon"
39+
>
40+
<path
41+
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"
42+
></path>
43+
</svg>
44+
</button>
4845

49-
<mainclass="container">
50-
<!-- Loader -->
51-
<divclass="loader">
52-
<span></span>
46+
<mainclass="container">
47+
<!-- Loader -->
48+
<divclass="loader">
49+
<span></span>
50+
</div>
51+
<!-- Header - Logo & Text -->
52+
<headerclass="header">
53+
<divclass="title_container">
54+
<imgsrc="./asset/logo.svg" alt="logo" />
55+
<h1class="heading">GitHub Readme Activity Graph</h1>
56+
</div>
57+
<pclass="description">
58+
A dynamically generated activity graph to show your GitHub activities of last 31 days.
59+
</p>
60+
</header>
61+
<!-- Form - Input & Submit button for Username -->
62+
<divclass="container__item">
63+
<formclass="form">
64+
<input
65+
type="username"
66+
class="form__field"
67+
placeholder="Enter Your GitHub Username"
68+
id="username"
69+
/>
70+
<buttontype="submit" class="btn btn--primary" id="submit-button">Build Graph</button>
71+
</form>
72+
</div>
73+
<!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
74+
<divclass="split_container">
75+
<sectionclass="left">
76+
<div>
77+
<inputtype="color" class="picker" name="bgColor" value="#ffcfe9" id="bgColor" />
78+
<labelfor="bgColor">Background Color</label>
79+
</div>
80+
<div>
81+
<inputtype="color" class="picker" name="line" value="#9e4c98" id="line" />
82+
<labelfor="line">Line Color</label>
83+
</div>
84+
<div>
85+
<inputtype="color" class="picker" name="point" value="#403d3d" id="point" />
86+
<labelfor="point">Point Color</label>
87+
</div>
88+
<div>
89+
<inputtype="color" class="picker" name="color" value="#9e4c98" id="color" />
90+
<labelfor="color">Text Color</label>
91+
</div>
92+
</section>
93+
<sectionclass="right">
94+
<divclass="rect">
95+
<divclass="chart_placeholder active">
96+
<pclass="placeholder_text">Your graph will be visible here.</p>
5397
</div>
54-
<!-- Header - Logo & Text -->
55-
<headerclass="header">
56-
<divclass="title_container">
57-
<imgsrc="./asset/logo.svg" alt="logo" />
58-
<h1class="heading">GitHub Readme Activity Graph</h1>
59-
</div>
60-
<pclass="description">
61-
A dynamically generated activity graph to show your GitHub activities of last 31
62-
days.
63-
</p>
64-
</header>
65-
<!-- Form - Input & Submit button for Username -->
66-
<divclass="container__item">
67-
<formclass="form">
68-
<input
69-
type="username"
70-
class="form__field"
71-
placeholder="Enter Your GitHub Username"
72-
id="username"
73-
/>
74-
<buttontype="submit" class="btn btn--primary" id="submit-button">
75-
Build Graph
76-
</button>
77-
</form>
78-
</div>
79-
<!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
80-
<divclass="split_container">
81-
<sectionclass="left">
82-
<div>
83-
<input
84-
type="color"
85-
class="picker"
86-
name="bgColor"
87-
value="#ffcfe9"
88-
id="bgColor"
89-
/>
90-
<labelfor="bgColor">Background Color</label>
91-
</div>
92-
<div>
93-
<inputtype="color" class="picker" name="line" value="#9e4c98" id="line" />
94-
<labelfor="line">Line Color</label>
95-
</div>
96-
<div>
97-
<input
98-
type="color"
99-
class="picker"
100-
name="point"
101-
value="#403d3d"
102-
id="point"
103-
/>
104-
<labelfor="point">Point Color</label>
105-
</div>
106-
<div>
107-
<input
108-
type="color"
109-
class="picker"
110-
name="color"
111-
value="#9e4c98"
112-
id="color"
113-
/>
114-
<labelfor="color">Text Color</label>
115-
</div>
116-
</section>
117-
<sectionclass="right">
118-
<divclass="rect">
119-
<divclass="chart_placeholder active">
120-
<pclass="placeholder_text">Your graph will be visible here.</p>
121-
</div>
122-
<divclass="ct-chart"></div>
123-
</div>
98+
<divclass="ct-chart"></div>
99+
</div>
124100

125-
<divclass="copy_container">
126-
<divclass="copy_text">
127-
<input
128-
type="text"
129-
class="text"
130-
placeholder="Build your graph to generate the link."
131-
value=""
132-
disabled
133-
/>
134-
<button>
135-
<img
136-
height="20px"
137-
width="20px"
138-
src="https://clipboardjs.com/assets/images/clippy.svg"
139-
alt="copy-text"
140-
/>
141-
</button>
142-
</div>
143-
</div>
144-
</section>
101+
<divclass="copy_container">
102+
<divclass="copy_text">
103+
<input
104+
type="text"
105+
class="text"
106+
placeholder="Build your graph to generate the link."
107+
value=""
108+
disabled
109+
/>
110+
<button>
111+
<img
112+
height="20px"
113+
width="20px"
114+
src="https://clipboardjs.com/assets/images/clippy.svg"
115+
alt="copy-text"
116+
/>
117+
</button>
145118
</div>
146-
<!-- Footer - Text & Link -->
147-
<footerclass="footer">
148-
<p><b>More Info : </b></p>
149-
<a
150-
class="link github"
151-
href="https://github.com/Ashutosh00710/github-readme-activity-graph"
152-
>
153-
<iclass="fab fa-2x fa-github"></i>
154-
</a>
155-
</footer>
156-
</main>
157-
</body>
158-
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
159-
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
160-
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
161-
<scriptsrc="./script.js"></script>
119+
</div>
120+
</section>
121+
</div>
122+
<!-- Footer - Text & Link -->
123+
<footerclass="footer">
124+
<p><b>More Info : </b></p>
125+
<aclass="link github" href="https://github.com/Ashutosh00710/github-readme-activity-graph">
126+
<iclass="fab fa-2x fa-github"></i>
127+
</a>
128+
</footer>
129+
</main>
130+
</body>
131+
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
132+
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
133+
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
134+
<scriptsrc="./script.js"></script>
162135
</html>

0 commit comments

Comments
(0)