+ ';
+
+ return $modal;
+}
diff --git a/css/base.css b/css/base.css
index 5a7ed45..c019022 100644
--- a/css/base.css
+++ b/css/base.css
@@ -33,6 +33,8 @@ a,
th,
td,
li,
+select,
+option,
span {
font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
padding: 0;
@@ -352,6 +354,8 @@ textarea:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
input:-webkit-autofill:focus,
+select,
+option,
textarea {
/* Try this first */
border-radius: 12px;
@@ -361,6 +365,11 @@ textarea {
box-sizing: border-box;
transition-duration: 500ms;
resize: none;
+ background-color: transparent;
+}
+
+input[type="datetime_local"] {
+ color: white;
}
input:focus,
@@ -746,63 +755,8 @@ hr {
margin-bottom: 5px;
}
-.todo_display {
- margin: 0 auto;
- margin-top: 25px;
- width: 80%;
- height: 80vh;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-.todo_actions {
- padding: 15px;
- border: 2px solid white;
- border-radius: 8px;
- width: 100%;
- box-sizing: border-box;
- margin-bottom: 25px;
-}
-.todo_actions form {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
-}
-
-.todo_category_window {
- display: flex;
- flex-direction: row;
- width: 100%;
- height: 100%;
- overflow-x: scroll;
- overflow-y: none;
-}
-
-.todo_category {
- display: block;
- min-width: 400px;
- margin-right: 50px;
- overflow-y: scroll;
- overflow-x: none;
-}
-
-.todo_category h4 {
- text-align: center;
- position: relative;
-}
-
-.todo_list {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.todo_item {
- width: 100%;
-}
@media screen and (max-width: 992px) {
body {
diff --git a/css/rewrite.css b/css/rewrite.css
index 16fff8f..d342297 100644
--- a/css/rewrite.css
+++ b/css/rewrite.css
@@ -1,3 +1,8 @@
+/********** Width & Sizing **********/
+.full_width {
+ width: 100%;
+}
+
/********** Borders & Outlines **********/
.std_border,
.med_border,
@@ -62,6 +67,10 @@
margin-right: 15px;
}
+.over_right_margin {
+ margin-right: 50px;
+}
+
.bottom_margin {
margin-bottom: 15px;
}
@@ -93,3 +102,73 @@
.left_padding {
padding-left: 15px;
}
+
+/********** FORMS **********/
+
+
+/********** TODO ITEMS **********/
+.todo_display {
+ margin: 0 auto;
+ margin-top: 25px;
+ width: 80%;
+ height: 80vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#todo_actions {
+ padding: 15px;
+ border: 2px solid white;
+ border-radius: 8px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 25px;
+
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+.todo_category_window {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: 100%;
+ overflow-x: scroll;
+ overflow-y: none;
+}
+
+.todo_category {
+ display: block;
+ min-width: 400px;
+ margin-right: 50px;
+ overflow-y: scroll;
+ overflow-x: none;
+}
+
+.todo_category h4 {
+ text-align: center;
+ position: relative;
+}
+
+.todo_list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.todo_item {
+ width: 100%;
+}
+
+.todo_item_details {
+ display: none;
+}
+
+.modal_activation_area {}
+
+.modal_activation_area:hover {
+ cursor: pointer;
+}
diff --git a/data/data/articles/1/article.md b/data/data/articles/1/article.md
deleted file mode 100644
index 5f655d6..0000000
--- a/data/data/articles/1/article.md
+++ /dev/null
@@ -1,54 +0,0 @@
-#### Overview:
-This site is built in PHP with MariaDB and a Golang HTTP server. Composer is being used to supply the following PHP packages:
-
-- `vlucas/phpdotenv`
-- `erusev/parsedown`
-- `wildbit/postmark-php`
-
----
-#### 19/03/2025 - Foundations:
-Tonight, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/5af0547864f730091c98d64cc18014bc69d0a041) the first major feature implementation. The database is designed, and a component has been created for article cards, and markdown parsing into HTML for the articles themselves.
-
----
-#### 20/03/2025 - Refining UX:
-Just now, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/c0fc9e9d0053975837ae48fa1db93b5095d33146) the second major feature implementation. I've narrowed in on the database design with small tweaks, setup some dynamic page loading on articles.php, created a navigation bar, a dark/light mode button, and styled everything up. It's shaping up pretty well!
-
-There's a lot more work to be done. The entire login system needs to be implemented, user homepages, account management, admin panels, the article composer...the list goes on.
-
----
-#### 25/03/2025 - Account Management:
-Just now, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/9a45075010434a4dedd0c5d48a78ff6be3bcfddc) the third major feature implementation: account management! Not the most exciting thing ever, but it is important for the long term success of this project. With that completed, v0.0.9 is completed! Though I prematurely labeled the commit v0.1.0...But in any case there's a lot to go before release.
-
-There is now a sign up and login user flow, a user page with basic settings, and authorization for accessing things like the article composer. Oh yeah, I got a basic version of that running in [this commit](https://github.com/quaxlyqueen/vintagecoding.net/tree/0a27cd1f5cd02735d06a64090a05937a5d6bcf3a) a few hours ago.
-
-Two major tasks remain prior to v0.1.0. First, I still need to finish implementing the image upload on new sign ups (and for changing a profile picture), but that should be relatively minor. Second, I need to use author information to flesh out article pages.
-
-I'm now setting my sights on v0.2.0, and the myriad of features I'm planning on implementing for that. It'll be the account and customization overhaul. Tools for the owner and administrator(s), enabling users to request their role to be changed to contributor or administrator, user home pages with their own custom CSS, the ability to theme the site however they please, and mobile support! I'm excited just thinking about it. It'll require a MAJOR overhaul of the CSS, but thanks to the minimalist aesthetic, the CSS file is only a few hundred disorganized lines.
-
-I've put maybe 30 hours into this project so far. I'm not sure if that's good or bad, but not getting crazy with the CSS has saved a **ton** of time. And, I really like how it's looking. I'm really excited about this project and I am giddy to see how much I can get implemented by the release on 25/05/2025 -- two months! I'm starting an *unpaid* internship tomorrow, so I probably won't have the time to put 30 hours a week into this. For now, I'm just excited to see what the future holds.
-
----
-#### 01/04/2025 - Basic Security & Administration:
-Earlier today, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/cec9091ee01839b133ecbbc5616463a759837dda) a major security fix along with getting CI/CD setup, and last night I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/b9bb620ae01134431ff1941e7577ba58eee84e42) a secure overhaul of the 'Remember Me' functionality. I didn't write about it then, but a few days ago I also [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/ff7e799b7fd2822cf27e0afe47274de222b2b508) the image upload along with a image cropper. Still buggy as hell, but its a start. And a couple days ago I [committed](https://github.com/quaxlyqueen/vintagecoding.net/tree/e6735a9a206a207b6fab704785451a6309944ddd) admin functionality to manage users and articles. I would've thought I'd slow down, but I'm just trucking along.
-
-Specifically, the 'Remember Me' functionality is now using a token system, a randomly generated 1024 bit string, associated with the user ID and hashed values of both the remote address and (if used) forwarded for headers. If these don't match what is stored in the database, this should mean that the client browser/device is not the original browser/device used to create the token.
-
-For the other security fix, I converted all of the `mysqli` statements to prepared statements. This is to mitigate the risk of SQL Injection attacks. Particularly since this site is live (though I'm not promoting it so it is still 'unreleased'), it is important to ensure that despite the lack of sensitive information, would-be attackers are unable to access user information, gain admin access, or compromise the server in any way.
-
-Onto the user home pages! Here's a general breakdown of what I have in mind. Every user has a homepage that they can customize the CSS for. Effectively, give the users a place to make their own. Eventually even change the layout and structure of their page. For now, the page is going to have some pretty simple information: a list of articles written by the user, the number of articles they have read, and the number their articles have been read. More is to come in the future, but that's a long way out.
-
----
-#### 08/04/2025 - Image Cropping & Editing Articles:
-Yesterday, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/e5b3e048b8dc6731fa383778c26eba47186e5310) an update to the image cropper. In other words, it *actually* works now lol. I was driving home from class and I just realized that I needed to both offset the position from the window to the image, and scale the coordinates based on the size of the image. And just a moment ago, I [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/e829e2e56695af5b77074f926c8d0c270e501f4b) editing articles. And here and there, I've worked on some basic Cross Site Scripting preventative measures, honeypots on signup to help prevent bots, and basic mobile responsiveness.
-
-With some work being done with security now, I'm having second thoughts about allowing users to have custom CSS on their homepages. I'll punt that off till later.
-
-All in all, things are going smoothly! I'm pretty proud of what I've built so far, and it has been quite educational. From prepared SQL statements, to XSS, form processing, and secure 'remember me' functionality. I'm not sure how much this site will be used by anyone else, and if that is the case I'll eventually just use this as a personal blog.
-
----
-#### 12/04/2025 - Enhanced Markdown Editing Experience:
-This was my first foray into the world of AJAX. I just [pushed](https://github.com/quaxlyqueen/vintagecoding.net/tree/fb35e9322647878386bcc3be572cd404b38fd91b) the implementation of a markdown preview while composing or editing articles. The possibilities are **very** exciting, I'm already thinking of other places that the AJAX would be useful for.
-
-Next, I'm looking to introduce Vim motions to the site, for general navigation and also for article composition and editing. It'll be an interesting challenge I think, and I could use the JavaScript practice.
-
-I haven't said this previously, but I am *loving* PHP. Such a joy to work with, and pair that with AJAX for a very interactive experience? Phenomenal DX. I've been looking at an interesting project, [NativePHP](https://nativephp.com), that I'd like to eventually use for another project.
\ No newline at end of file
diff --git a/data/data/profile_pictures/2025.jpg b/data/data/profile_pictures/2025.jpg
deleted file mode 100644
index c556493..0000000
Binary files a/data/data/profile_pictures/2025.jpg and /dev/null differ
diff --git a/data/data/profile_pictures/5723948.jpeg b/data/data/profile_pictures/5723948.jpeg
deleted file mode 100644
index e245996..0000000
Binary files a/data/data/profile_pictures/5723948.jpeg and /dev/null differ
diff --git a/data/data/profile_pictures/default-profile.png b/data/data/profile_pictures/default-profile.png
deleted file mode 100644
index 91d232b..0000000
Binary files a/data/data/profile_pictures/default-profile.png and /dev/null differ
diff --git a/data/data/resources/HackNerdFontMono-Regular.woff b/data/data/resources/HackNerdFontMono-Regular.woff
deleted file mode 100644
index 399594c..0000000
Binary files a/data/data/resources/HackNerdFontMono-Regular.woff and /dev/null differ
diff --git a/data/data/tmp/profile.jpg b/data/data/tmp/profile.jpg
deleted file mode 100644
index 8dc6d4f..0000000
Binary files a/data/data/tmp/profile.jpg and /dev/null differ
diff --git a/data/data/vintagecoding-favicon.png b/data/data/vintagecoding-favicon.png
deleted file mode 100644
index e13098f..0000000
Binary files a/data/data/vintagecoding-favicon.png and /dev/null differ
diff --git a/director.php b/director.php
index f7a0168..85214ab 100644
--- a/director.php
+++ b/director.php
@@ -7,21 +7,34 @@ if (isset($_POST['ajax_id'])) {
handle_todo();
break;
}
-} else
- echo 'Received malformed request.';
+} else {
+ $response = [
+ 'error' => 'Malformed URI request.',
+ ];
+
+ echo json_encode($response);
+}
function handle_todo()
{
- $response = [];
-
include 'functions/todo_functions.php';
-
- if (isset($_POST['todo_id']) && isset($_POST['action_id']) && isset($_POST['status'])) {
+ $response = ['log' => []];
+ if (isset($_POST['todo_id']) && isset($_POST['action_id'])) {
+ $response['log'][] = 'Required parameters met.';
switch ($_POST['action_id']) {
case 'status':
- $response['todo_status'] = $_POST['status'];
+ $response['log'][] = 'Changing status on ' . $_POST['todo_id'] . ' to ' . $_POST['status'] . '.';
change_status($_POST['todo_id'], $_POST['status']);
break;
+ case 'create_update_todo':
+ if ($_POST['todo_id'] != -1) {
+ $response['log'][] = 'Updating todo information on ' . $_POST['todo_id'] . '.';
+ update_todo($_POST['todo_id'], urldecode($_POST['todo']));
+ } else {
+ $response['log'][] = 'Creating todo information on ' . $_POST['todo_id'] . '.';
+ create_todo(urldecode($_POST['todo']));
+ }
+ break;
}
}
diff --git a/functions/functions.php b/functions/functions.php
index 70424c4..e0c703d 100644
--- a/functions/functions.php
+++ b/functions/functions.php
@@ -178,3 +178,8 @@ function pretty_dump($arr)
echo '';
return ob_get_clean();
}
+
+function format_date($date)
+{
+ return (explode(' ', $date))[0];
+}
diff --git a/functions/todo_functions.php b/functions/todo_functions.php
index ab97d8f..feba1b3 100644
--- a/functions/todo_functions.php
+++ b/functions/todo_functions.php
@@ -53,3 +53,17 @@ function change_status($todo_id, $status)
{
exec_stmt('UPDATE todos SET status = ? WHERE todo_id = ?', 'si', $status, $todo_id);
}
+
+function create_todo($todo)
+{
+ exec_stmt('INSERT INTO todos (title, description, priority, due_date, category, status) VALUES (?,?,?,?,?,?)', 'ssssss', $todo['title'], $todo['description'], $todo['priority'], $todo['due_date'], $todo['category'], 'open');
+}
+function update_todo($todo_id, $todo)
+{
+ exec_stmt('UPDATE todos SET title = ? WHERE todo_id = ?', 'si', $todo['title'], $todo_id);
+ exec_stmt('UPDATE todos SET description = ? WHERE todo_id = ?', 'si', $todo['description'], $todo_id);
+ exec_stmt('UPDATE todos SET priority = ? WHERE todo_id = ?', 'si', $todo['priority'], $todo_id);
+ exec_stmt('UPDATE todos SET due_date = ? WHERE todo_id = ?', 'si', $todo['due_date'], $todo_id);
+ exec_stmt('UPDATE todos SET category = ? WHERE todo_id = ?', 'si', $todo['category'], $todo_id);
+ exec_stmt('UPDATE todos SET status = ? WHERE todo_id = ?', 'si', $todo['status'], $todo_id);
+}
diff --git a/js/todo.js b/js/todo.js
index 97de8c6..4374e7e 100644
--- a/js/todo.js
+++ b/js/todo.js
@@ -15,10 +15,72 @@
document.addEventListener('DOMContentLoaded', function() {
var todos = document.getElementsByClassName('todo_item');
- //var todos = document.querySelectorAll('todo_item');
+ var action_items = (document.getElementById('todo_actions')).querySelectorAll('button');
+
+ // General Modal handling
+ function handle_modal(modal) {
+ console.log('handling modal');
+ let modal_close = modal.querySelector('.modal_close');
+ let submit_button = modal.querySelector('input[type="submit"]');
+ modal.style.display = 'block';
+
+ modal_close.addEventListener('click', function() {
+ modal.style.display = "none";
+ });
+
+ submit_button.addEventListener('click', function(e) {
+ e.preventDefault();
+ let todo = {
+ 'title': modal.querySelector('#title').value,
+ 'description': modal.querySelector('#description'),
+ 'priority': modal.querySelector('#priority'),
+ 'due_date': modal.querySelector('#due_date'),
+ };
+
+ fetch('director.php', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ body: 'ajax_id=todo&action_id=create_update_todo&todo_id=' + this.todo_id + '&todo=' + encodeURIComponent(JSON.stringify(todo)),
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ return response.json(); // Or handle other response formats
+ })
+ .then(responseData => {
+ console.log('Response received:', responseData);
+ // Handle the server's response
+ });
+ });
+ }
+
+ for (let i = 0; i < action_items.length; i++) {
+ let action = action_items[i];
+
+ action.addEventListener('click', function(e) {
+ e.preventDefault();
+
+ switch (action.value) {
+ case 'new':
+ let new_todo_item = document.querySelector('#new_todo_item');
+ handle_modal(new_todo_item);
+ break;
+ }
+ });
+ }
for (let i = 0; i < todos.length; i++) {
- var item = todos[i];
+ let item = todos[i];
+
+ // Detailed todo item view via a modal
+ let modal_button = item.querySelector('.modal_activation_area');
+ let modal = item.querySelector('.modal');
+ modal_button.addEventListener('click', () => handle_modal(modal));
+
+ // Checkboxes & AJAX for updating the DB
var checkbox = item.querySelector('input[type="checkbox"]');
checkbox.todo_id = item.querySelector('input[name="todo_id"]').value;
checkbox.is_checked = checkbox.checked;