-
-
Notifications
You must be signed in to change notification settings - Fork 685
/
index.html
135 lines (132 loc) · 5.54 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GitHub Readme Activity Graph</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous"></script>
<link href="./styles.css" rel="stylesheet" />
<link rel="icon" href="asset/logo.png" />
</head>
<body class="bg-color">
<!-- Dark Theme Mode -->
<button class="toggle-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="24"
height="24"
viewBox="0 0 24 24"
class="svg-sun"
>
<path
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"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="30"
height="30"
viewBox="0 0 172 172"
class="svg-moon"
>
<path
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"
></path>
</svg>
</button>
<main class="container">
<!-- Loader -->
<div class="loader">
<span></span>
</div>
<!-- Header - Logo & Text -->
<header class="header">
<div class="title_container">
<img src="./asset/logo.svg" alt="logo" />
<h1 class="heading">GitHub Readme Activity Graph</h1>
</div>
<p class="description">
A dynamically generated activity graph to show your GitHub activities of last 31 days.
</p>
</header>
<!-- Form - Input & Submit button for Username -->
<div class="container__item">
<form class="form">
<input
type="username"
class="form__field"
placeholder="Enter Your GitHub Username"
id="username"
/>
<button type="submit" class="btn btn--primary" id="submit-button">Build Graph</button>
</form>
</div>
<!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
<div class="split_container">
<section class="left">
<div>
<input type="color" class="picker" name="bgColor" value="#ffcfe9" id="bgColor" />
<label for="bgColor">Background Color</label>
</div>
<div>
<input type="color" class="picker" name="line" value="#9e4c98" id="line" />
<label for="line">Line Color</label>
</div>
<div>
<input type="color" class="picker" name="point" value="#403d3d" id="point" />
<label for="point">Point Color</label>
</div>
<div>
<input type="color" class="picker" name="color" value="#9e4c98" id="color" />
<label for="color">Text Color</label>
</div>
</section>
<section class="right">
<div class="rect">
<div class="chart_placeholder active">
<p class="placeholder_text">Your graph will be visible here.</p>
</div>
<div class="ct-chart"></div>
</div>
<div class="copy_container">
<div class="copy_text">
<input
type="text"
class="text"
placeholder="Build your graph to generate the link."
value=""
disabled
/>
<button>
<img
height="20px"
width="20px"
src="https://clipboardjs.com/assets/images/clippy.svg"
alt="copy-text"
/>
</button>
</div>
</div>
</section>
</div>
<!-- Footer - Text & Link -->
<footer class="footer">
<p><b>More Info : </b></p>
<a class="link github" href="https://github.com/Ashutosh00710/github-readme-activity-graph">
<i class="fab fa-2x fa-github"></i>
</a>
</footer>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartist-plugin-axistitle.min.js"></script>
<script src="./script.js"></script>
</html>