Custom 404 Page Generator

Unknown · 24/12/24

Custom 404 Page Generator

Page Title: Message: Background Color: Text Color: Generate Page

Generated 404 Page:

create a simple custom 404 page generator

You can create a simple custom 404 page generator using HTML, CSS, and JavaScript.

Below is a code snippet for a single-page application that allows users to generate a custom 404 error page.

HTML Code

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>404 Page Generator</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="container">

        <h1>Custom 404 Page Generator</h1>

        <form id="generatorForm">

            <label for="title">Page Title:</label>

            <input type="text" id="title" name="title" required>

            <label for="message">Message:</label>

            <textarea id="message" name="message" rows="4" required></textarea>

            <label for="backgroundColor">Background Color:</label>

            <input type="color" id="backgroundColor" name="backgroundColor" value="#ffffff">

            <label for="textColor">Text Color:</label>

            <input type="color" id="textColor" name="textColor" value="#000000">

            <button type="submit">Generate Page</button>

        </form>

        <h2>Generated 404 Page:</h2>

        <iframe id="preview" srcdoc="" frameborder="0"></iframe>

    </div>

    <script src="script.js"></script>

</body>

</html>

CSS (styles.css)

CSS:

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #f4f4f4;

}



.container {

    width: 80%;

    margin: 0 auto;

    padding: 20px;

    background-color: #fff;

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

}



h1 {

    text-align: center;

}



form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



label {

    font-weight: bold;

}



input, textarea, button {

    width: 100%;

    padding: 8px;

    margin-top: 5px;

}



button {

    background-color: #007BFF;

    color: white;

    border: none;

    cursor: pointer;

}



button:hover {

    background-color: #0056b3;

}



iframe {

    width: 100%;

    height: 400px;

    border: 1px solid #ddd;

    margin-top: 20px;

}

JavaScript (script.js)

JavaScript:

document.getElementById('generatorForm').addEventListener('submit', function(event) {

    event.preventDefault();

    

    const title = document.getElementById('title').value;

    const message = document.getElementById('message').value;

    const backgroundColor = document.getElementById('backgroundColor').value;

    const textColor = document.getElementById('textColor').value;



    const htmlContent = `

        <!DOCTYPE html>

        <html lang="en">

        <head>

            <meta charset="UTF-8">

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title>${title}</title>

            <style>

                body {

                    display: flex;

                    justify-content: center;

                    align-items: center;

                    height: 100vh;

                    margin: 0;

                    background-color: ${backgroundColor};

                    color: ${textColor};

                    text-align: center;

                }

                h1 {

                    font-size: 3rem;

                }

                p {

                    font-size: 1.5rem;

                }

            </style>

        </head>

        <body>

            <h1>${title}</h1>

            <p>${message}</p>

        </body>

        </html>

    `;



    const iframe = document.getElementById('preview');

    iframe.srcdoc = htmlContent;

});

Instructions To Add Code

1. Save the HTML, CSS, and JavaScript code in separate files named index.html, styles.css, and script.js respectively.

2. Open index.html in a web browser.

3. Fill out the form and click "Generate Page" to see a preview of your custom 404 page.

This code will create a simple form for generating a custom 404 error page and display a preview of the generated page inside an iframe.

Adjust the CSS and JavaScript as needed to fit your requirements.

Custom 404 Page Generator

Page Title: Error Message: Button Text: Button Link: Generate Code

Generated HTML Code:

/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } function generateCode() { const title = document.getElementById('title').value; const message = document.getElementById('message').value; const buttonText = document.getElementById('buttonText').value; const buttonLink = document.getElementById('buttonLink').value; const code = ` DOCTYPE html>

${escapeHtml(title)}

${escapeHtml(message)}

${escapeHtml(buttonText)}
`.trim(); document.getElementById('code').value = code; }

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Custom 404 Page Generator</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

padding: 0;

}

.container {

max-width: 800px;

margin: 0 auto;

padding: 20px;

background: #f4f4f4;

border-radius: 8px;

}

h1 {

font-size: 24px;

margin-bottom: 10px;

}

input, textarea, button {

width: 100%;

margin: 10px 0;

padding: 10px;

border-radius: 5px;

border: 1px solid #ddd;

}

button {

background-color: #007bff;

color: white;

border: none;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

.result {

margin-top: 20px;

}

.result textarea {

height: 200px;

white-space: pre-wrap;

word-wrap: break-word;

}

</style>

</head>

<body>

<div class="container">

<h1>Custom 404 Page Generator</h1>

<label for="title">Page Title:</label>

<input type="text" id="title" placeholder="404 - Page Not Found">

<label for="message">Error Message:</label>

<textarea id="message" rows="4" placeholder="Sorry, the page you’re looking for doesn’t exist."></textarea>

<label for="buttonText">Button Text:</label>

<input type="text" id="buttonText" placeholder="Go to Homepage">

<label for="buttonLink">Button Link:</label>

<input type="text" id="buttonLink" placeholder="/">

<button onclick="generateCode()">Generate Code</button>

<div class="result">

<h2>Generated HTML Code:</h2>

<textarea id="code" readonly></textarea>

</div>

</div>

<script>

function escapeHtml(unsafe) {

return unsafe

.replace(/&/g, "&")

.replace(/</g, "<")

.replace(/>/g, ">")

.replace(/"/g, """)

.replace(/'/g, "'");

}

function generateCode() {

const title = document.getElementById('title').value;

const message = document.getElementById('message').value;

const buttonText = document.getElementById('buttonText').value;

const buttonLink = document.getElementById('buttonLink').value;

const code = `

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>${escapeHtml(title)}</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f4f4f4;

color: #333;

padding: 50px;

}

.container {

max-width: 600px;

margin: auto;

padding: 20px;

background: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

h1 {

font-size: 100px;

margin: 0;

}

p {

font-size: 18px;

}

.btn {

display: inline-block;

margin-top: 20px;

padding: 10px 20px;

font-size: 16px;

color: #fff;

background-color: #007bff;

text-decoration: none;

border-radius: 5px;

}

.btn:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<div class="container">

<h1>${escapeHtml(title)}</h1>

<p>${escapeHtml(message)}</p>

<a href="${escapeHtml(buttonLink)}" class="btn">${escapeHtml(buttonText)}</a>

</div>

</body>

</html>

`.trim();

document.getElementById('code').value = code;

}

</script>

</body>

</html>

متابعة القراءة...

Custom 404 Page Generator

Unknown