Update README.md

Beta 2 Candidate

README.md

@@ -37,8 +37,7 @@ That’s it! You’re up and running.
 
 ## Known Bugs & Issues
 
-* File Uploads (non-image): Currently, file uploads are not fully implemented. We're working on it!
+* Testing: The system is functional, but it hasn’t been fully tested in all scenarios. Uploading and embedding youtube videos works perfectly!
-* Testing: The system is functional, but it hasn’t been fully tested in all scenarios.
 
 ## License
 

cms/css/editor.css

@@ -13,7 +13,7 @@ body {
 .pageContainer .controls {
     flex: 0 1 auto;
     height: 60px;
-    background-color: #666666;
+    background-color: #1a1d20;
     border-bottom: 1px solid #1a1a1a;
     -webkit-box-shadow: 0 10px 13px -7px #000000, -1px -1px 15px 5px rgba(0, 0, 0, 0);
     box-shadow: 0 10px 13px -7px #000000, -1px -1px 15px 5px rgba(0, 0, 0, 0);
@@ -26,7 +26,7 @@ body {
 
 .controls .logo {
     background-image: url("/cms/img/logo.png");
-    width: 128px;
+    width: 60px;
     height: 60px;
     display: block;
     position: absolute;
@@ -39,12 +39,40 @@ body {
     right: 110px;
 }
 
+
+/* CSS */
+.headerButton {
+    /*display: flex;*/
+    flex-direction: column;
+    align-items: center;
+    padding: 6px 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
+    border-radius: 6px;
+    border: none;
+
+    background: #6E6D70;
+    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
+    color: #DFDEDF;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+}
+
+.headerButton:focus {
+    box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
+    outline: 0;
+}
+
+.headerButton.dangerButton {
+    background-color: #6E4D50;
+}
+
 .controls #urlbox {
-    margin: 15px 150px;
+    margin: 15px 70px;
     text-align: center;
     font-size: 1.5em;
-    color: black;
     position: absolute;
+    color: #dee2e6;
 }
 
 .controls #urlbox div {
@@ -56,6 +84,7 @@ body {
     position: absolute;
     top: 20px;
     right: 10px;
+    color: #dee2e6;
 }
 
 .controls .buttonContainer ul {
@@ -69,61 +98,6 @@ body {
     margin-right: 10px;
 }
 
-.blueButton {
-    box-shadow: inset 0 0 15px 3px #23395e;
-    background: #2e466e linear-gradient(to bottom, #2e466e 5%, #415989 100%);
-    border-radius: 17px;
-    border: 1px solid #1f2f47;
-    display: inline-block;
-    cursor: pointer;
-    color: #ffffff !important;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 15px;
-    padding: 6px 13px;
-    text-decoration: none !important;
-    text-shadow: 0 1px 0 #263666;
-}
-
-.blueButton:hover {
-    background: #415989 linear-gradient(to bottom, #415989 5%, #2e466e 100%);
-    color: #ffffff;
-    text-decoration: none;
-}
-
-.blueButton:active {
-    text-decoration: none;
-}
-
-.greenButton {
-    box-shadow: inset 0 0 15px 3px #3e7327;
-    background: #77b55a linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
-    border-radius: 17px;
-    border: 1px solid #4b8f29;
-    display: inline-block;
-    cursor: pointer;
-    color: #ffffff;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 15px;
-    padding: 6px 13px;
-    text-decoration: none;
-    text-shadow: 0 1px 0 #5b8a3c;
-}
-
-.greenButton:hover {
-    background: #72b352 linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
-    color: #ffffff;
-    text-decoration: none;
-
-}
-
-.greenButton:active {
-    position: relative;
-    top: 1px;
-    text-decoration: none;
-
-}
-
-
 /**
 New Page Modal
  */

cms/css/login.css

@@ -0,0 +1,73 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #111519;
+}
+
+.login-container {
+    width: 350px;
+    margin: 100px auto;
+    padding: 40px;
+    background-color: #212529;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgb(0, 0, 0);
+}
+
+.login-container h2 {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #dee2e6;
+}
+
+.login-container label {
+    display: block;
+    margin-bottom: 8px;
+    color: #dee2e6;
+}
+
+.login-container input[type="text"],
+.login-container input[type="password"] {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 20px;
+    border: 1px solid #1a1a1a;
+    border-radius: 4px;
+    box-sizing: border-box;
+    background: #2b3035;
+    color: #dee2e6;
+}
+
+.login-container button {
+    width: 100%;
+    padding: 12px;
+    background-color: #0066cc;
+    border: none;
+    border-radius: 4px;
+    color: #ffffff;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.login-container button:hover {
+    background-color: #005bb5;
+}
+
+.error-message {
+    color: #ff4d4d;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.logo {
+    display: block;
+    margin: auto;
+}
+
+.shamelessPlug {
+    margin: 12px 0 -30px 0;
+    padding: 0;
+    display: block;
+    text-align: center;
+    color: #111519;
+    font-size: 0.8em;
+
+}

cms/index.php

@@ -9,7 +9,7 @@ spl_autoload_register(function ($class) {
 use NeoCMS\Authentication;
 
 // Instantiate the Authentication class
-$authentication = new Authentication($config['authentication']??[]);
+$authentication = new Authentication($config['authentication'] ?? []);
 
 // Check if the user is logged in
 if (!$authentication->isLoggedIn()) {
@@ -23,21 +23,12 @@ if (!$authentication->isLoggedIn()) {
 <html lang="en-gb">
 <head>
     <title>NeoCMS</title>
-    <!-- Include jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" crossorigin="anonymous"></script>
-    <!-- Include TinyMCE -->
     <script src="/cms/tinymce/tinymce.min.js"></script>
-    <!-- Include Bootstrap for modal -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
-
-    <!-- Include JqueryUI CSS -->
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
-
-    <!-- Include editor styles -->
     <link rel="stylesheet" href="/cms/css/editor.css">
-
-    <!-- Include Bootstrap JS -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>
 <body>
@@ -45,24 +36,33 @@ if (!$authentication->isLoggedIn()) {
 <div class="pageContainer">
     <div class="controls">
         <div class="logo"></div>
-       <?php if($config['showFullUrl']) echo '<div id="urlbox"></div>';?>
+        <?php if ($config['showFullUrl']) {?>
+        <div id="urlbox"></div>
+        <?php } ?>
         <div class="buttonContainer">
             <ul>
-                <li><a href="#" id="selectPage" class="blueButton">Select Page</a></li>
+                <li>
-                <li><a href="#" id="newPage" class="blueButton">New Page</a></li>
+                    <button class="headerButton" id="newPage" role="button">New Page</button>
-                <li><a href="#" id="savePage" class="greenButton">Save Changes</a></li>
+                </li>
+                <li>
+                    <button class="headerButton" id="selectPage" role="button">Select Page</button>
+                </li>
+                <li>
+                    <button class="headerButton dangerButton" id="savePage" role="button">Publish Changes</button>
+                </li>
             </ul>
         </div>
         <div class="loggedInDetails">
-            Logged in as: <?php echo $authentication->getLoggedinUser(); ?><br />
+            Logged in as: <?php echo $authentication->getLoggedinUser(); ?><br/>
             <?php
-            if ( ! is_writable("logs/")) {
+            if (!is_writable("logs/")) {
                 echo "<span class='redText'>Make /cms/logs/ writeable!</span>";
             }
             ?>
         </div>
     </div>
-    <iframe id="frameContainer" src="<?php echo $config['skipWelcomePage'] ? "/" : "welcome.html"; ?>" class="frame"></iframe>
+    <iframe id="frameContainer" src="<?php echo $config['skipWelcomePage'] ? "/" : "welcome.html"; ?>"
+            class="frame"></iframe>
 </div>
 <!-- Modal -->
 <div id="editModal" class="modal fade" role="dialog">

cms/js/cms.js

@@ -266,7 +266,7 @@ $(document).ready(function () {
             $(this).find('.buttonContainer').remove();
             addButtonsToNeoDupe(this);
         });
-        $('#urlbox').html("<strong>Editing:</strong> <div>"+$(iframeDoc)[0].URL+"</div>");
+        $('#urlbox').html("<strong>Editing:</strong> <div>" + $(iframeDoc)[0].URL + "</div>");
     }
 
     // Function to add buttons to a neo-dupe element inside the iframe
@@ -274,7 +274,7 @@ $(document).ready(function () {
 
         /**
          * DANGER WILL ROBINSON: This may break stuff, but is needed for the buttons to be positioned properly
-         * Since this is alpha, lets see how we go.
+         * Lets see how we go.
          */
         if ($(element).css('position') === 'static') {
             $(element).css('position', 'relative');
@@ -285,6 +285,8 @@ $(document).ready(function () {
         $buttonContainer.css("position", "absolute");
         $buttonContainer.css("top", "5px");
         $buttonContainer.css("right", "5px");
+        $buttonContainer.css("z-index", "9999");
+
 
         var $duplicateBeforeButton = $(iframeDoc.createElement('button'));
         $duplicateBeforeButton.addClass('duplicate-btn-before').text('◀️').prop('title', 'Clone before');

cms/login/index.php

@@ -16,8 +16,8 @@ use NeoCMS\Logger;
 $error = '';
 
 // Instantiate the Authentication and Logger classes
-$authentication = new Authentication($config['authentication']??[]);
+$authentication = new Authentication($config['authentication'] ?? []);
-$logger = new Logger($config['audit']??true);
+$logger = new Logger($config['audit'] ?? true);
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $username = $_POST['username'] ?? '';
@@ -47,70 +47,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Login</title>
+    <title>NeoCMS Login</title>
-    <style>
+    <link rel="stylesheet" href="/cms/css/login.css"/>
-        /* Basic styling for the login form */
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #eef1f5;
-        }
-
-        .login-container {
-            width: 350px;
-            margin: 100px auto;
-            padding: 40px;
-            background-color: #ffffff;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .login-container h2 {
-            text-align: center;
-            margin-bottom: 30px;
-            color: #333333;
-        }
-
-        .login-container label {
-            display: block;
-            margin-bottom: 8px;
-            color: #555555;
-        }
-
-        .login-container input[type="text"],
-        .login-container input[type="password"] {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 20px;
-            border: 1px solid #cccccc;
-            border-radius: 4px;
-            box-sizing: border-box;
-        }
-
-        .login-container button {
-            width: 100%;
-            padding: 12px;
-            background-color: #0066cc;
-            border: none;
-            border-radius: 4px;
-            color: #ffffff;
-            font-size: 16px;
-            cursor: pointer;
-        }
-
-        .login-container button:hover {
-            background-color: #005bb5;
-        }
-
-        .error-message {
-            color: #ff4d4d;
-            margin-bottom: 20px;
-            text-align: center;
-        }
-    </style>
 </head>
 <body>
 
 <div class="login-container">
+    <img class="logo" src="/cms/img/loginlogo.png" alt="NeoCMS logo"/>
     <h2>NeoCMS Login</h2>
     <?php if (!empty($error)): ?>
         <div class="error-message"><?php echo htmlspecialchars($error); ?></div>
@@ -123,6 +66,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         <input type="password" id="password" name="password" required>
 
         <button type="submit">Log In</button>
+        <p class="shamelessPlug">NeoCMS &copy;<?php echo date('Y'); ?> Andy Dixon</p>
     </form>
 </div>