preview feature

<!DOCTYPE html>
<html>
<head>
    <title>Editing - updates/preview-feature.html</title>
  	<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* edit css */
/*
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}*/
.edit-form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.edit-form h1 {
    text-align: center;
    margin-bottom: 20px;
}
.edit-form input[type="text"],
.edit-form input[type="radio"] {
    margin-right: 5px;
}
.edit-form textarea {
    width: 100%;
    height: 90vh;
    padding: 10px;
    margin-top: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}
.edit-form input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
    padding: 10px 15px;
}
.edit-form a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #007BFF;
    padding: 10px 15px;
    border: 1px solid #007BFF;
    border-radius: 5px;
}
.edit-form a:hover {
    background-color: #007BFF;
    color: #fff;
}

.github-fetch-form input[type="text"]{
	//display: flex;
	//width: 30px;
	border: none;
	border-bottom: 2px solid #ddd;
	text-decoration: underline;
}

/* login page style */
/*
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}*/
.login-form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}
.login-form h1 {
    text-align: center;
    margin-bottom: 20px;
}
.login-form input {
    display: block;
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.login-form input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}
.login-form input[type="submit"]:hover {
    background-color: #0056b3;
}



/* file upload css */

/*
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}*/
.upload-form {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.upload-form label {
    display: block;
    margin-bottom: 10px;
}
.upload-form input[type="text"],
.upload-form input[type="file"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
}
.upload-form input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}


/* search result page style */
/*
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}
/*
.search-form {
    margin: 20px;
    text-align: center;
}

</style>
<!-- Extras file, containts of this file will be available in all templates just above </head> -->
  	<link rel="stylesheet" src="/pygments.css" />
    <style>
    
    </style>
</head>
<body>
    <div class="edit-form">
        <h1>Editing - updates/priew-feature.html</h1>
        <form action="/action/edit" method="POST">
            <input type="text" name="path" value="updates/preview-feature.html" placeholder="File path" />
            
            Title:
            <input type="text" name="title" value="updates/preview-feature.html" placeholder="File title" /><br>
            
            <br>
            Mode:
            <select name="mode">
                
                <option value="p" selected>Parse</option>
                
                <option value="r" >Raw</option>
                <option value="s" >Show</option>
            </select>
            | Visibility:
            <select name="visibility">
            <option value="p" selected/> Public
            <option value="h" /> Hide
            <option value="o" /> Once
            </select><br><br>
            Password: <input type="text" name="password" value=""><br>
			<input type="submit" value="Save" />
			<a href="/abh/hehe.html">View</a>
			
            <a href="#preview" onclick="preview()">Preview</a>
            
			<a href="/dashboard">Back</a>
            <textarea name="filecontent" placeholder="file content" rows="10">&lt;h1&gt;New Update&lt;/h2&gt;
&lt;p&gt;Now you can Preview you HTMLs on same page &ltbr;&gt;
It will also help to prevent unwanted view counts&ltbr;&gt;
Just click on "Preview" button to see preview of this HTML Document&lt;/p&gt;

</textarea><br>
        </form>
        <details class="more-edit-menu"><summary>More</summary>
        <form action="/edit" method="POST">
        Fetch from PasteBin:
        PasteId: <input type="text" name="pasteid" />
        <input type="submit" name="pastebin" value="Fetch" />
        </form>
        </details>
        
        <iframe id="preview" src="" style="width:100%;height:90vh;border:none;"></iframe>
        
    </div>
<script>
var preview = function (){
    let filecontent = document.querySelector("textarea");
    filecontent = encodeURIComponent(filecontent.value);
    document.getElementById("preview").setAttribute("src", "/api/render?html=" + filecontent);
}
</script>
</body>
</html>
HTMLify

Share this file:

Comments
