Skip to content

Commit d5845d3

Browse files
aurafarmeroneaurafarmerone
committed
Pushing Project
1 parent 5500e0b commit d5845d3

File tree

4 files changed

+361
-0
lines changed

4 files changed

+361
-0
lines changed

‎assets/logo.jpg‎

210 KB
Loading

‎index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>GitHub Pattern Generator</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9+
</head>
10+
11+
<body>
12+
13+
<!-- ================= HEADER ================= -->
14+
<header class="topbar">
15+
<div class="logo">
16+
<img src="assets/logo.jpg" class="header-logo" alt="Logo">
17+
<span class="logo-text">aurafarmerone</span>
18+
</div>
19+
20+
<nav class="nav">
21+
<a href="index.html" class="active">🎨 Draw first. Commit later.</a>
22+
</nav>
23+
</header>
24+
25+
<!-- ================= PAGE (GRID BACKGROUND) ================= -->
26+
<main class="page-wrapper">
27+
28+
<!-- ================= DRAW CARD ================= -->
29+
<div class="card">
30+
31+
<div class="card-header">
32+
<h2>💠 GitHub Pattern → pattern.json</h2>
33+
34+
<a class="star-btn" href="https://github.com/aurafarmerone" target="_blank">
35+
⭐ Star on GitHub
36+
</a>
37+
</div>
38+
39+
<p class="hint">
40+
<strong>✍🏻 How to Draw:</strong><br>
41+
<b> → 🖱️ Left Click → Add</b><br>
42+
<b> → 🖱️ Right Click → Remove</b>
43+
</p>
44+
45+
<!-- Month labels -->
46+
<div class="months">
47+
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span>
48+
<span>May</span><span>Jun</span><span>Jul</span><span>Aug</span>
49+
<span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span>
50+
</div>
51+
52+
<div class="grid-wrapper">
53+
<div class="days">
54+
<span>Mon</span><span>Tue</span><span>Wed</span>
55+
<span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
56+
</div>
57+
58+
<div id="grid"></div>
59+
</div>
60+
61+
<!-- Buttons -->
62+
<div class="actions">
63+
<button id="download">Download pattern.json</button>
64+
<button id="reset" class="reset">Reset</button>
65+
</div>
66+
67+
</div>
68+
69+
</main>
70+
71+
<!-- ================= FOOTER ================= -->
72+
<footer class="footer">
73+
<p style="margin-bottom: 10px; font-weight: bold;">
74+
</p>
75+
<div class="socials">
76+
<a href="https://github.com/aurafarmerone" target="_blank"><i class="fab fa-github"></i></a>
77+
<a href="https://linkedin.com/in/aurafarmerone" target="_blank"><i class="fab fa-linkedin"></i></a>
78+
<a href="https://leetcode.com/u/aurafarmerone" target="_blank"><i class="fas fa-code"></i></a>
79+
</div>
80+
<p style="margin-top: 20px;">Made with ❤️ by <strong>Aura Farmer</strong></p>
81+
</footer>
82+
83+
<script src="script.js"></script>
84+
</body>
85+
86+
</html>

‎script.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const ROWS = 7;
2+
const COLS = 53;
3+
const grid = document.getElementById("grid");
4+
5+
let data = Array.from({ length: ROWS }, () =>
6+
Array(COLS).fill(" ")
7+
);
8+
9+
let cells = [];
10+
11+
// Build grid
12+
for (let r = 0; r < ROWS; r++) {
13+
cells[r] = [];
14+
for (let c = 0; c < COLS; c++) {
15+
const cell = document.createElement("div");
16+
cell.className = "cell";
17+
18+
cell.onclick = () => toggleCell(r, c);
19+
cell.oncontextmenu = e => {
20+
e.preventDefault();
21+
setCell(r, c, false);
22+
};
23+
24+
grid.appendChild(cell);
25+
cells[r][c] = cell;
26+
}
27+
}
28+
29+
function setCell(r, c, active) {
30+
cells[r][c].classList.toggle("active", active);
31+
data[r][c] = active ? "3" : " ";
32+
}
33+
34+
function toggleCell(r, c) {
35+
setCell(r, c, data[r][c] === " ");
36+
}
37+
38+
/* RESET */
39+
document.getElementById("reset").onclick = () => {
40+
for (let r = 0; r < ROWS; r++)
41+
for (let c = 0; c < COLS; c++)
42+
setCell(r, c, false);
43+
};
44+
45+
/* DOWNLOAD */
46+
document.getElementById("download").onclick = () => {
47+
const rows = data.map(row => row.join(""));
48+
const blob = new Blob(
49+
[JSON.stringify(rows, null, 2)],
50+
{ type: "application/json" }
51+
);
52+
53+
const a = document.createElement("a");
54+
a.href = URL.createObjectURL(blob);
55+
a.download = "pattern.json";
56+
a.click();
57+
};

‎style.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
/* ================= GRID BACKGROUND ================= */
6+
body {
7+
margin: 0;
8+
font-family: Arial, sans-serif;
9+
10+
background-color: #f9fafb;
11+
background-image:
12+
linear-gradient(to right, #e5e7eb 1px, transparent 1px),
13+
linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
14+
background-size: 40px 40px;
15+
}
16+
17+
/* ================= HEADER ================= */
18+
.topbar {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
padding: 14px 40px;
23+
background: #fff;
24+
border-bottom: 1px solid #d0d7de;
25+
}
26+
27+
.logo {
28+
display: flex;
29+
align-items: center;
30+
font-weight: bold;
31+
}
32+
33+
.logo-icon {
34+
display: none;
35+
/* Hide old icon if present or remove */
36+
}
37+
38+
.header-logo {
39+
width: 32px;
40+
height: 32px;
41+
border-radius: 50%;
42+
object-fit: cover;
43+
margin-right: 10px;
44+
}
45+
46+
.nav a {
47+
margin-left: 20px;
48+
text-decoration: none;
49+
color: #24292f;
50+
position: relative;
51+
transition: color 0.2s ease;
52+
}
53+
54+
.nav a:hover {
55+
color: #FA2A55;
56+
text-decoration: underline;
57+
text-underline-offset: 4px;
58+
}
59+
60+
/* ================= PAGE ================= */
61+
.page-wrapper {
62+
display: flex;
63+
justify-content: center;
64+
padding: 50px 0;
65+
}
66+
67+
/* ================= CARD ================= */
68+
.card {
69+
background: #fff;
70+
border: 1px solid #d0d7de;
71+
border-radius: 16px;
72+
padding: 24px;
73+
width: fit-content;
74+
}
75+
76+
/* ================= CARD HEADER ================= */
77+
.card-header {
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
}
82+
83+
.star-btn {
84+
background: #000;
85+
color: #fff;
86+
padding: 6px 12px;
87+
border-radius: 8px;
88+
font-size: 13px;
89+
text-decoration: none;
90+
transition: transform 0.2s ease;
91+
display: inline-block;
92+
/* Ensure transform works */
93+
}
94+
95+
.star-btn:hover {
96+
transform: scale(1.1);
97+
}
98+
99+
/* ================= GRID ================= */
100+
.hint {
101+
font-size: 13px;
102+
color: #000000;
103+
margin-bottom: 12px;
104+
}
105+
106+
.months {
107+
display: grid;
108+
grid-template-columns: repeat(12, 1fr);
109+
font-size: 12px;
110+
color: #57606a;
111+
margin-left: 48px;
112+
margin-bottom: 6px;
113+
}
114+
115+
.grid-wrapper {
116+
display: flex;
117+
}
118+
119+
.days {
120+
display: grid;
121+
grid-template-rows: repeat(7, 16px);
122+
gap: 5px;
123+
font-size: 11px;
124+
color: #57606a;
125+
margin-right: 8px;
126+
}
127+
128+
#grid {
129+
display: grid;
130+
grid-template-columns: repeat(53, 14px);
131+
gap: 5px;
132+
}
133+
134+
.cell {
135+
width: 14px;
136+
height: 14px;
137+
background: #ebedf0;
138+
border-radius: 3px;
139+
cursor: pointer;
140+
}
141+
142+
.cell.active {
143+
background: #2da44e;
144+
}
145+
146+
/* ================= BUTTONS ================= */
147+
.actions {
148+
margin-top: 20px;
149+
}
150+
151+
#download {
152+
background: #fff;
153+
border: 1px solid #d0d7de;
154+
color: #24292f;
155+
padding: 10px 16px;
156+
border-radius: 10px;
157+
cursor: pointer;
158+
transition: all 0.2s ease;
159+
}
160+
161+
#download:hover {
162+
background: #FA2A55;
163+
color: #fff;
164+
border-color: #FA2A55;
165+
transform: scale(1.1);
166+
}
167+
168+
#download:active {
169+
transform: scale(1);
170+
}
171+
172+
.reset {
173+
margin-left: 10px;
174+
background: #fff;
175+
border: 1px solid #d0d7de;
176+
padding: 10px 16px;
177+
border-radius: 10px;
178+
cursor: pointer;
179+
transition: all 0.2s ease;
180+
}
181+
182+
.reset:hover {
183+
transform: scale(1.1);
184+
background-color: #007bff;
185+
color: #fff;
186+
border-color: #007bff;
187+
}
188+
189+
.reset:active {
190+
transform: scale(1);
191+
background-color: #fff;
192+
color: #24292f;
193+
border-color: #d0d7de;
194+
}
195+
196+
/* ================= FOOTER ================= */
197+
.footer {
198+
text-align: center;
199+
margin: 30px 0;
200+
color: #57606a;
201+
}
202+
203+
.socials a {
204+
margin: 0 10px;
205+
color: #000;
206+
font-size: 24px;
207+
display: inline-block;
208+
transition: transform 0.2s ease, text-shadow 0.2s ease;
209+
}
210+
211+
.socials a:hover {
212+
transform: scale(1.2);
213+
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
214+
}
215+
216+
* {
217+
caret-color: transparent;
218+
}

0 commit comments

Comments
 (0)