Update README.md

Merge pull request #38 from andydixon/development
Beta 2 Candidate
2024-12-02 19:40:22 +00:00 · 2024-11-18 20:36:04 +00:00 · 2024-11-18 20:29:46 +00:00 · 2024-11-13 12:34:54 +00:00 · 2024-11-13 12:34:27 +00:00
8 changed files with 134 additions and 142 deletions
@@ -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.
+* Testing: The system is functional, but it hasn’t been fully tested in all scenarios. Uploading and embedding youtube videos works perfectly!

 ## License

@@ -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
 */
@@ -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;
+
+}
@@ -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,12 +36,20 @@ 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><a href="#" id="newPage" class="blueButton">New Page</a></li>
-                <li><a href="#" id="savePage" class="greenButton">Save Changes</a></li>
+                <li>
+                    <button class="headerButton" id="newPage" role="button">New Page</button>
+                </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">
@@ -62,7 +61,8 @@ if (!$authentication->isLoggedIn()) {
            ?>
        </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">
@@ -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');
@@ -47,70 +47,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Login</title>
-    <style>
-        /* 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>
+    <title>NeoCMS Login</title>
+    <link rel="stylesheet" href="/cms/css/login.css"/>
 </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>
Author	SHA1	Message	Date
Andy Dixon	0795eaf3a5	Update README.md	2024-12-02 19:40:22 +00:00
Andy Dixon	d5f8c3487b	Merge pull request #38 from andydixon/development Beta 2 Candidate	2024-11-18 20:36:04 +00:00
Andy Dixon	38563714dd	Fixed regression of the 'Edit website' button on the welcome page. Major design tweaks to login and header bar	2024-11-18 20:29:46 +00:00
Andy Dixon	012a688160	Merge pull request #37 from andydixon/development Fix hiding clone buttons. Fixes #18	2024-11-13 12:34:54 +00:00
Andy Dixon	ab54b1415b	Fix hiding clone buttons. Fixes #18	2024-11-13 12:34:27 +00:00