Skip to content

Commit cf43014

Browse files
ThalesmarThalesmar
committed
Methodical first commit
1 parent dc9a52f commit cf43014

10 files changed

Lines changed: 3611 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
backup.css
2+
backup.html

‎assets/pexels-jakubzerdzicki-33266834.jpg‎

54.5 KB
Loading

‎assets/pexels-zen-chung-5745174.jpg‎

706 KB
Loading

‎assets/unnamed (1).png‎

295 KB
Loading

‎assets/unnamed.png‎

290 KB
Loading

‎index.html‎

Lines changed: 2153 additions & 0 deletions
Large diffs are not rendered by default.

‎index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
function initLogoSlider() {
2+
const tracks = document.querySelectorAll(".logo-track");
3+
4+
tracks.forEach((track) => {
5+
if (track.dataset.sliderReady === "true") {
6+
return;
7+
}
8+
9+
const logos = Array.from(track.children);
10+
11+
logos.forEach((logo) => {
12+
const clone = logo.cloneNode(true);
13+
clone.setAttribute("aria-hidden", "true");
14+
track.appendChild(clone);
15+
});
16+
17+
track.dataset.sliderReady = "true";
18+
track.classList.add("is-ready");
19+
});
20+
}
21+
22+
if (document.readyState === "loading") {
23+
document.addEventListener("DOMContentLoaded", initLogoSlider, { once: true });
24+
} else {
25+
initLogoSlider();
26+
}

‎pages/today.html‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Methodical</title>
8+
9+
<!-- Font Awesome -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
11+
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap"
16+
rel="stylesheet">
17+
<!-- CSS -->
18+
<link rel="stylesheet" href="../styles/today.css">
19+
</head>
20+
21+
<body>
22+
23+
<!-- HEADER -->
24+
<header class="site-header">
25+
<div class="header-left-side">
26+
<a href="../"><h1 class="logo-box">Methodical</h1></a>
27+
<nav class="nav">
28+
<ul class="nav-list">
29+
<li><a href="../">Today</a></li>
30+
<li><a href="#">Upcoming</a></li>
31+
<li><a href="#">settings</a></li>
32+
</ul>
33+
</nav>
34+
</div>
35+
<div class="header-right-side">
36+
<div class="search-bar">
37+
<span class="search-icon"><i class="fa-solid fa-magnifying-glass"></i></span>
38+
<input type="text" id="search-bar-input" placeholder="Search tasks...">
39+
</div>
40+
<button class="user-profile">YH</button>
41+
</div>
42+
</header>
43+
44+
<!-- PAGE LAYOUT -->
45+
<div class="dashboard-layout">
46+
<!-- side bar-->
47+
<aside class="side-bar">
48+
<div class="side-bar-top">
49+
<h2 class="side-bar-title">Workspace</h2>
50+
<p class="side-bar-para">Productivity Flow</p>
51+
</div>
52+
<nav class="primary-nav">
53+
<a href="../index.html" class="side-bar-text">
54+
<i class="fa-solid fa-house"></i>
55+
Home
56+
</a>
57+
<a href="#" class="side-bar-text">
58+
<i class="fa-solid fa-calendar-week side-bar-icons"></i>
59+
Today
60+
</a>
61+
<a href="#" class="side-bar-text">
62+
<i class="fa-regular fa-calendar side-bar-icons"></i>
63+
Upcoming
64+
</a>
65+
</nav>
66+
67+
<hr class="sidebar-divider">
68+
69+
<div class="categories">
70+
<p class="category-title">Categories</p>
71+
72+
<div class="category-list">
73+
<a href="#" class="side-bar-text">
74+
<i class="fa-solid fa-user side-bar-icons"></i>
75+
Personal
76+
</a>
77+
<a href="#" class="side-bar-text">
78+
<i class="fa-solid fa-briefcase side-bar-icons"></i>
79+
Work
80+
</a>
81+
</div>
82+
</div>
83+
84+
85+
<div class="side-bar-bottom">
86+
<a class="trash-btn"><i class="fa-solid fa-trash-can"></i>Trash</a>
87+
</div>
88+
</aside>
89+
<!-- MAIN CONTENT -->
90+
<main class="main-element-body">
91+
<!-- TITLE -->
92+
<section class="main-element-header-parent">
93+
<time class="main-element-header-date" datetime="2025-10-24">Tuesday, October 24</time>
94+
<h2 class="main-element-heading">Today's Flow</h2>
95+
<div class="main-element-underline"></div>
96+
</section>
97+
98+
<!-- TOP AREA -->
99+
<section class="new-task-container">
100+
101+
<!-- NEW TASK CARD -->
102+
<div class="new-task-area">
103+
<div class="new-task-parent">
104+
<span class="add-icon"><i class="fa-solid fa-plus"></i></span>
105+
<input type="text" id="newTaskInput" placeholder="What needs to be done today?">
106+
</div>
107+
<hr class="input-line">
108+
109+
<div class="task-tags-btn">
110+
<div class="tags-area">
111+
112+
<span class="task-tags"><i class="fa-solid fa-inbox"></i>Today</span>
113+
<span class="task-tags"><i class="fa-solid fa-flag"></i>Priority</span>
114+
</div>
115+
<button class="new-task-btn">Add Task</button>
116+
</div>
117+
</div>
118+
119+
<!-- PROGRESS CARD -->
120+
<div class="progress-container">
121+
<h3 class="progress-heading">Flow Progress</h3>
122+
<p class="progress-para">4 of 12 tasks completed</p>
123+
124+
<div class="progress-stat">
125+
<span class="progress-percent">33%</span>
126+
<span class="progress-para">Ahead of schedule</span>
127+
</div>
128+
129+
<div class="progress-bar">
130+
<div class="progress-bar-line"></div>
131+
</div>
132+
</div>
133+
134+
<div class="task-list-container">
135+
<div class="task-list-item">
136+
<button class="task-list-btn"><span class="checked"><i class="fa-solid fa-check"></i></span></button>
137+
<div class="task-list-text">
138+
<h4 class="task-list-heading">Finalize Design System Documentation</h4>
139+
<p class="task-list-para">Focus on the tonal architecture section</p>
140+
</div>
141+
<div class="task-list-tags-parent">
142+
<span class="task-list-tags">high</span>
143+
</div>
144+
</div>
145+
146+
<div class="task-list-item">
147+
<button class="task-list-btn"><span class="checked"><i class="fa-solid fa-check"></i></span></button>
148+
<div class="task-list-text">
149+
<h4 class="task-list-heading">Quick Catchup with Marketing Team</h4>
150+
<p class="task-list-para">Discuss the upcoming launch campaign</p>
151+
</div>
152+
153+
<div class="task-list-tags-parent">
154+
<span class="task-list-tags">Work</span>
155+
</div>
156+
</div>
157+
158+
<div class="task-list-item">
159+
<button class="task-list-btn"><span class="checked"><i class="fa-solid fa-check"></i></span></button>
160+
<div class="task-list-text">
161+
<h4 class="task-list-heading">Gym Session - Upper Body</h4>
162+
<p class="task-list-para">Don't forget to track progress in app</p>
163+
</div>
164+
<div class="task-list-tags-parent">
165+
<span class="task-list-tags">Personal</span>
166+
</div>
167+
</div>
168+
<div class="task-list-item">
169+
<button class="task-list-btn"><span class="checked"><i class="fa-solid fa-check"></i></span></button>
170+
<div class="task-list-text">
171+
<h4 class="task-list-heading">Review Weekly Analytics</h4>
172+
<p class="task-list-para">Completed at 9:30 AM</p>
173+
</div>
174+
<div class="task-list-tags-parent">
175+
<span class="task-list-tags"></span>
176+
</div>
177+
</div>
178+
</div>
179+
180+
<div class="coming-up-container">
181+
<h3 class="coming-up-title">Coming Up Next</h3>
182+
<div class="coming-up-body">
183+
<div class="coming-up-line"></div>
184+
<div>
185+
<p class="coming-up-para">Tomorrow, 10:00 AM</p>
186+
<h4 class="coming-up-heading">Client Presentation</h4>
187+
</div>
188+
</div>
189+
<div class="coming-up-body">
190+
<div class="coming-up-line secnd"></div>
191+
<div class="">
192+
<p class="coming-up-para">Thursday, 02:00 PM</p>
193+
<h4 class="coming-up-heading">Grocery Shopping</h4>
194+
</div>
195+
</div>
196+
<button class="coming-up-btn">View Calender</button>
197+
</div>
198+
</section>
199+
</main>
200+
</div>
201+
</body>
202+
203+
</html>

0 commit comments

Comments
 (0)