<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draft Management Tool</title>
<meta name="description" content="A tool that allows you to manage drafts in your browser, with features like copying, exporting, and adding timestamps. It saves you the hassle of naming and saving files compared to word processing software.">
<meta name="author" content="Everyone's Knowledge: Handy Notes みんなの知識 ちょっと便利帳">
<meta name="creation date" content="2024.09.01">
<meta name="robots" content="NOINDEX,NOFOLLOW">
<!-- Google Fonts CDN -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<style>
body {font-family: "Noto Sans", Arial, Helvetica, sans-serif; margin: 0 0 0 5px;}
.draft-form { margin-bottom: 5px; }
label { display: block; margin-bottom: 5px; }
input[type="text"], textarea { width: 98%; padding: 8px; margin-bottom: 10px; border: #666 1px solid ;border-radius: 4px; }
button { padding: 10px 15px; margin-right: 5px; }
.preview { padding: 10px; border: 1px solid #333; border-radius: 4px; background-color: #FAFAFA; margin-top: 10px; }
.title-highlight { font-weight: bold; color: #333; }
fieldset{margin: 0 0 20px 0; border: darkgray 2px solid; border-radius: 4px; }
.bgcolor-01{background-color: lavenderblush; }
.bgcolor-02{background-color: lightcyan; }
.bgcolor-03{background-color: #E8FBE8; }
.bgcolor-04{background-color: #FCFAFC; }
.bgcolor-05{background-color: #F5FFFA; }
/* Button Styles */
button {
background-color: #007bff; /* Blue background color */
color: #fff; /* White text color */
border: none;
border-radius: 4px;
padding: 3px 5px;
font-size: 16px; /* Font size specification */
cursor: pointer;
margin: 5px 0;
transition: background-color 0.3s ease; /* Hover animation */
}
button:hover {
background-color: #0056b3; /* Background color on hover */
}
button[type="reset"] {
background-color: #6c757d; /* Gray background color */
}
button[type="reset"]:hover {
background-color: #5a6268; /* Background color on hover for reset button */
}
/* Reset Button Styles */
.reset-btn {
background-color: #ff6b6b;
}
/* Explanation Title */
.setysumei_title{
font-weight: bold;
}
/* Explanation Body */
.setysumei_honbun{
margin: 0 0 0 20px;
}
legend{font-weight: bold}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const forms = document.querySelectorAll('.draft-form');
forms.forEach((form, index) => {
const titleField = form.querySelector(`input[name="title-${index + 1}"]`);
const contentField = form.querySelector(`textarea[name="content-${index + 1}"]`);
const previewDiv = form.querySelector('.preview');
const timestampKey = `timestamp-${index + 1}`;
// Restore field data from local storage
titleField.value = localStorage.getItem(titleField.name) || '';
contentField.value = localStorage.getItem(contentField.name) || '';
const savedTimestamp = localStorage.getItem(timestampKey) || 'Not saved yet';
// Save to local storage and update preview on each input
[titleField, contentField].forEach(field => {
field.addEventListener('input', () => {
localStorage.setItem(field.name, field.value);
const timestamp = new Date().toLocaleString();
localStorage.setItem(timestampKey, timestamp);
adjustTextareaHeight(contentField);
updatePreview(timestamp);
});
});
// Clear local storage with the reset button
form.querySelector('.reset-btn').addEventListener('click', () => {
[titleField, contentField].forEach(field => {
localStorage.removeItem(field.name);
field.value = '';
adjustTextareaHeight(contentField);
});
localStorage.removeItem(timestampKey);
updatePreview('Not saved yet');
});
// Copy function on click
form.querySelector('.copy-btn').addEventListener('click', () => {
const content = contentField;
content.select();
document.execCommand('copy');
alert('Content copied!');
});
// Export function
form.querySelector('.export-btn').addEventListener('click', () => {
const data = {
title: titleField.value,
content: contentField.value,
timestamp: localStorage.getItem(timestampKey) || new Date().toLocaleString()
};
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `draft-${index + 1}.json`;
a.click();
});
// Update the preview feature
function updatePreview(timestamp) {
const title = titleField.value ? `《${titleField.value}》` : '';
const escapedContent = contentField.value
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\n/g, '<br>');
previewDiv.innerHTML = `
<div class="title-highlight">${title}</div>
<p>${escapedContent}</p>
<small>Saved on: ${timestamp}</small>
`;
}
// Adjust the textarea height to match content
function adjustTextareaHeight(textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
// Adjust textarea height on page load
adjustTextareaHeight(contentField);
updatePreview(savedTimestamp);
});
});
</script>
</head>
<body>
<div align="center"><strong>《 Draft Management Tool  》</strong></div>
<fieldset class="bgcolor-01">
<legend>《 Draft ① 》</legend>
<div class="draft-form">
<label for="title-1">Title:</label>
<input type="text" id="title-1" name="title-1" placeholder="Enter title">
<label for="content-1">Content:</label>
<textarea id="content-1" name="content-1" placeholder="Enter content"></textarea>
<button type="button" class="copy-btn">Copy on click</button>
<button type="button" class="export-btn">Export</button>
<button type="button" class="reset-btn">Reset</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-02">
<legend>《 Draft ② 》</legend>
<div class="draft-form">
<label for="title-2">Title:</label>
<input type="text" id="title-2" name="title-2" placeholder="Enter title">
<label for="content-2">Content:</label>
<textarea id="content-2" name="content-2" placeholder="Enter content"></textarea>
<button type="button" class="copy-btn">Copy on click</button>
<button type="button" class="export-btn">Export</button>
<button type="button" class="reset-btn">Reset</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-03">
<legend>《 Draft ③ 》</legend>
<div class="draft-form">
<label for="title-3">Title:</label>
<input type="text" id="title-3" name="title-3" placeholder="Enter title">
<label for="content-3">Content:</label>
<textarea id="content-3" name="content-3" placeholder="Enter content"></textarea>
<button type="button" class="copy-btn">Copy on click</button>
<button type="button" class="export-btn">Export</button>
<button type="button" class="reset-btn">Reset</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-04">
<legend>《 Draft ④ 》</legend>
<div class="draft-form">
<label for="title-4">Title:</label>
<input type="text" id="title-4" name="title-4" placeholder="Enter title">
<label for="content-4">Content:</label>
<textarea id="content-4" name="content-4" placeholder="Enter content"></textarea>
<button type="button" class="copy-btn">Copy on click</button>
<button type="button" class="export-btn">Export</button>
<button type="button" class="reset-btn">Reset</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-05">
<legend>《 Draft ⑤ 》</legend>
<div class="draft-form">
<label for="title-5">Title:</label>
<input type="text" id="title-5" name="title-5" placeholder="Enter title">
<label for="content-5">Content:</label>
<textarea id="content-5" name="content-5" placeholder="Enter content"></textarea>
<button type="button" class="copy-btn">Copy on click</button>
<button type="button" class="export-btn">Export</button>
<button type="button" class="reset-btn">Reset</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset>
<legend><h3>《Specifications, Features, and Functions of the Draft Management Tool》</h3></legend>
<div style="margin: 0 10px 10px">
<div class="setysumei_title">① Location of Local Storage and Other Details</div>
<div class="setysumei_honbun">The entered data is stored in the user's browser's "local storage." Local storage is a browser storage function with the following characteristics:</div>
<ul>
<li><strong>Browser-Specific</strong>: Local storage exists only within the specific browser in which the data was saved. It cannot be accessed from other browsers or devices.</li>
<li><strong>Domain-Specific</strong>: The data is associated with the specific domain (site) where it was saved. It can be accessed from pages within the same domain but not from different domains.</li>
<li><strong>Persistence</strong>: Data stored in local storage remains even after closing the browser, but it may be deleted if the computer is shut down or restarted. Be sure to back up important data using a text editor or other means. Also, note that data may not be saved in private mode (incognito mode).</li>
</ul>
<div class="setysumei_title">② Behavior on a Web Server</div>
<div class="setysumei_honbun">When this HTML file is uploaded to a web server, the following behavior is expected:</div>
<ul>
<li><strong>Use by the Same User on the Same Browser:</strong></li>
<ul>
<li>When a user accesses this page, data is stored in the local storage of that user's browser.</li>
<li>If the same user accesses the page again from the same browser, the previous input will be restored.</li>
<li>Since local storage is saved on the client-side (the user's device), it cannot be accessed from other users or devices.</li>
</ul>
<li><strong>Use by Different Users or Different Browsers:</strong></li>
<ul>
<li>When a different user accesses the same web page, a new local storage is created in that user's browser, and the previous user's data cannot be accessed.</li>
</ul>
<li><strong>Data Security:</strong></li>
<ul>
<li>Since local storage is stored on the client-side, the data is not sent to the server. Therefore, the data is saved only on the user's device. Even when uploaded to a web server, the data is managed individually for each user, ensuring privacy.</li>
</ul>
</ul>
<div class="setysumei_title">③ Features</div>
<ul>
<li><strong>Data Export Function:</strong> You can export saved data in JSON format for reuse.</li>
<li><strong>Input Preview Function:</strong> You can preview the content you are entering in real-time, making it easier to confirm during editing.</li>
<li><strong>Timestamp Function:</strong> The save date and time of each draft are recorded, allowing you to check the last edit time.</li>
<li><strong>Copy Function:</strong> You can use a copy button to copy and utilize the input and saved content.</li>
</ul>
<div class="setysumei_title">《Summary》</div>
<div class="setysumei_honbun">This tool uses local storage to save data, so even when uploaded to a web server, the data is not shared with other users. Each user retains their data only within their own browser, and it remains until it is reset. This feature can be used safely even on a web server and operates independently for each user.
<br>This tool is designed to easily save and manage drafts using the browser's local storage. It eliminates the need to manually save with a name, allowing direct input and saving within the browser. Depending on how you use it, it can be more convenient and improve work efficiency compared to text editors or word processors.<br>
<strong style="color: crimson">However, the data may be lost due to computer shutdowns or restarts, so please regularly export important data or save it using a text editor or word processor. This tool is intended to provide temporary storage for drafts only.</strong>
</div>
</div>
</fieldset>
</body>
</html>
