Skip to content

Commit 65d4b65

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

File tree

2 files changed

+614
-596
lines changed

2 files changed

+614
-596
lines changed

‎index.html‎

Lines changed: 154 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,162 @@
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">
14-
</script>
15-
<linkhref="./styles.css" rel="stylesheet" />
16-
<linkrel="icon" href="asset/logo.png" />
17-
</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+
<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>
1817

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

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

132-
<divclass="copy_container">
133-
<divclass="copy_text">
134-
<input
135-
type="text"
136-
class="text"
137-
placeholder="Build your graph to generate the link."
138-
value=""
139-
disabled
140-
/>
141-
<button>
142-
<img
143-
height="20px"
144-
width="20px"
145-
src="https://clipboardjs.com/assets/images/clippy.svg"
146-
alt="copy-text"
147-
/>
148-
</button>
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>
149145
</div>
150-
</div>
151-
</section>
152-
</div>
153-
<!-- Footer - Text & Link -->
154-
<footerclass="footer">
155-
<p><b>More Info : </b></p>
156-
<aclass="link github" href="https://github.com/Ashutosh00710/github-readme-activity-graph">
157-
<iclass="fab fa-2x fa-github"></i>
158-
</a>
159-
</footer>
160-
</main>
161-
</body>
162-
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
163-
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
164-
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
165-
<scriptsrc="./script.js"></script>
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>
166162
</html>

0 commit comments

Comments
(0)