-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aa0ece9
commit 7175e3c
Showing
1 changed file
with
116 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,224 +1,133 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Add a New Blog</title> | ||
| <style> | ||
| /* Base styles */ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: "Arial", sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| background-color: #f7f7f7; | ||
| display: flex; | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Add a New Blog</title> | ||
| <style> | ||
| .container { | ||
| max-width: 1300px; | ||
| margin: 0 auto; | ||
| padding: 0 10px; | ||
| } | ||
| button { | ||
| width: 100%; | ||
| padding: 14px; | ||
| background-color: #ff5f6d; | ||
| color: #fff; | ||
| border: none; | ||
| font-size: 1.2rem; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| margin-top: 20px; | ||
| } | ||
| button:hover { | ||
| background-color: #ff4e50; | ||
| } | ||
| /* New classes for styling */ | ||
| .blog-form { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
| .main-container { | ||
| flex-grow: 1; | ||
| border-radius: 5px; | ||
| } | ||
| .message { | ||
| background-color: #f0a2a8; | ||
| color: #000000; | ||
| } | ||
| .prop-container { | ||
| border-radius: 5px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .image-placeholder { | ||
| background-color: #ffffff; | ||
| width: 100%; | ||
| height: 100px; | ||
| border: 0.5px dashed #ddd; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 14px; | ||
| color: #999; | ||
| outline: 1px dashed #000; | ||
| } | ||
| /* Responsive styles */ | ||
| @media (max-width: 768px) { | ||
| .blog-form { | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| color: #333; | ||
| /* Stack elements vertically */ | ||
| } | ||
| /* Navbar */ | ||
| .navbar { | ||
| .main-container, | ||
| .prop-container { | ||
| width: 100%; | ||
| background-color: #fff; | ||
| padding: 20px 40px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .navbar h2 { | ||
| font-size: 24px; | ||
| font-weight: bold; | ||
| color: #333; | ||
| } | ||
| .navbar a { | ||
| text-decoration: none; | ||
| margin-left: 20px; | ||
| font-size: 16px; | ||
| color: #333; | ||
| font-weight: bold; | ||
| transition: color 0.3s ease; | ||
| } | ||
| .navbar a:hover { | ||
| color: #ff5f6d; | ||
| } | ||
| /* Content Wrapper */ | ||
| .content-wrapper { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 50px; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| /* Left Side */ | ||
| .content-left { | ||
| width: 50%; | ||
| } | ||
| .content-left h1 { | ||
| font-size: 3rem; | ||
| font-weight: bold; | ||
| color: #ff5f6d; | ||
| } | ||
| .content-left p { | ||
| font-size: 1.5rem; | ||
| color: #555; | ||
| margin-top: 20px; | ||
| } | ||
| /* Right Side (Form) */ | ||
| .content-right { | ||
| width: 45%; | ||
| background-color: #fff; | ||
| padding: 40px; | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | ||
| border-radius: 8px; | ||
| animation: fadeInUp 1s ease-out; | ||
| } | ||
| .blog-form-container h2 { | ||
| font-size: 2rem; | ||
| margin-bottom: 20px; | ||
| color: #333; | ||
| text-align: center; | ||
| } | ||
| .blog-form .form-group { | ||
| margin-bottom: 20px; | ||
| } | ||
| label { | ||
| display: block; | ||
| font-size: 1.2rem; | ||
| color: #333; | ||
| /* Full width on small screens */ | ||
| margin-bottom: 10px; | ||
| } | ||
| input[type="text"], | ||
| textarea { | ||
| width: 100%; | ||
| padding: 12px; | ||
| border: 2px solid #ddd; | ||
| border-radius: 8px; | ||
| font-size: 1rem; | ||
| color: #555; | ||
| transition: border-color 0.3s; | ||
| } | ||
| input[type="text"]:focus, | ||
| textarea:focus { | ||
| border-color: #ff5f6d; | ||
| outline: none; | ||
| } | ||
| textarea { | ||
| resize: none; | ||
| /* Space between elements */ | ||
| } | ||
| button { | ||
| width: 100%; | ||
| padding: 14px; | ||
| background-color: #ff5f6d; | ||
| color: #fff; | ||
| border: none; | ||
| border-radius: 8px; | ||
| font-size: 1.2rem; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
| font-size: 1rem; | ||
| /* Smaller button text */ | ||
| } | ||
| .image-placeholder { | ||
| height: 80px; | ||
| /* Adjust height for smaller screens */ | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <a href="/dashboard">← Back</a> | ||
| <h1 style="margin: 0px">Add New Post</h1> | ||
| <hr> | ||
|
|
||
| <form class="blog-form" method="post" action="/add-post"> | ||
| <div class="main-container"> | ||
| <% if (typeof message !=='undefined' && message.errors && message.errors.length) { %> | ||
| <div class="message"> | ||
| <% message.errors.forEach(err=> { %> | ||
| <p> | ||
| <%= err.msg %> | ||
| </p> | ||
| <% }); %> | ||
| </div> | ||
| <% } %> | ||
|
|
||
| button:hover { | ||
| background-color: #ff4e50; | ||
| } | ||
| <label for="blog-title"><b>Blog Title</b></label> | ||
| <input name="title" type="text" id="blog-title" placeholder="Enter your blog title..." /> | ||
|
|
||
| /* Animations */ | ||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(30px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
| <label for="blog-content"><b>Blog Content</b></label> | ||
| <textarea id="blog-content" rows="10" name="body" placeholder="Write your blog content here..."></textarea> | ||
| </div> | ||
|
|
||
| /* Responsive */ | ||
| @media screen and (max-width: 768px) { | ||
| .content-wrapper { | ||
| flex-direction: column; | ||
| padding: 20px; | ||
| } | ||
| .content-left, | ||
| .content-right { | ||
| width: 100%; | ||
| } | ||
| .content-left { | ||
| margin-bottom: 30px; | ||
| text-align: center; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="content-wrapper"> | ||
| <div class="content-left"> | ||
| <h1>Create Your Masterpiece</h1> | ||
| <p>Share your thoughts and experiences with the world!</p> | ||
| </div> | ||
| <div class="prop-container"> | ||
| <div> | ||
| <label for="author-name"><b>Author Name</b></label> | ||
| <input type="text" id="author-name" placeholder="Your name..." name="author" /> | ||
| </div> | ||
|
|
||
| <div class="content-right"> | ||
| <div class="blog-form-container"> | ||
| <% if (typeof message !== 'undefined' && message.errors && message.errors.length) { %> | ||
| <div class="message" style="background-color: #f0a2a8; color: #000000;"> | ||
| <% message.errors.forEach(err => { %> | ||
| <p><%= err.msg %></p> | ||
| <% }); %> | ||
| </div> | ||
| <% } %> | ||
| <h2>Add a New Blog</h2> | ||
| <form class="blog-form" method="post" action="/add-post"> | ||
| <div class="form-group"> | ||
| <label for="blog-title">Blog Title</label> | ||
| <input | ||
| name ="title" | ||
| type="text" | ||
| id="blog-title" | ||
| placeholder="Enter your blog title..." | ||
| /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="author-name">Author Name</label> | ||
| <input type="text" id="author-name" placeholder="Your name..." name="author"/> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="blog-content">Blog Content</label> | ||
| <textarea | ||
| id="blog-content" | ||
| rows="10" | ||
| name="body" | ||
| placeholder="Write your blog content here..." | ||
| ></textarea> | ||
| </div> | ||
| <button type="submit">Publish Blog</button> | ||
| </form> | ||
| </div> | ||
| <div> | ||
| <label for="author-name"><b>Blog Poster</b></label> | ||
| <div class="image-placeholder"> | ||
| <p>Image Placeholder</p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
| <button type="submit">Publish Blog</button> | ||
| </div> | ||
| </form> | ||
|
|
||
| </html> |