Technology Plan
Technology Plan Generator
Technology Plan Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technology Plan Generator</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1 {
color: #2c3e50;
margin-bottom: 20px;
text-align: center;
}
h2, h3 {
color: #2c3e50;
margin-bottom: 15px;
}
#inputForm {
margin: 0 auto;
max-width: 900px;
}
#planOutput {
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1.2em;
max-width: 900px;
}
input, textarea {
width: calc(100% - 24px);
padding: 14px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1.2em;
}
button {
padding: 14px 28px;
margin: 5px;
border: none;
border-radius: 4px;
background-color: #3498db;
color: white;
cursor: pointer;
font-size: 1.2em;
}
button:hover {
background-color: #2980b9;
}
textarea {
resize: vertical;
}
.help-text {
font-size: 1.1em;
color: #666;
margin-bottom: 15px;
}
.goal-item, .priority-item, .challenge-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.goal-item input, .priority-item input, .challenge-item input {
flex: 1;
}
.remove-btn {
cursor: pointer;
color: transparent;
border: none;
background: none;
font-size: 1.4em;
margin-left: 10px;
display: none;
transition: color 0.3s, transform 0.3s;
}
.remove-btn.added {
color: #e74c3c;
}
.remove-btn:hover {
color: #c0392b;
text-decoration: underline;
transform: scale(1.1);
}
.priority-item .budget-allocation input {
width: calc(100% - 48px);
max-width: 200px;
margin-right: 20px;
}
.goal-item .remove-btn, .priority-item .remove-btn, .challenge-item .remove-btn {
display: inline;
}
@media print {
body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#inputForm {
display: none;
}
#planOutput {
display: block;
border: none;
padding: 0;
}
}
</style>
</head>
<body>
<h1>Technology Plan Generator</h1>
<div id="inputForm">
<h2>Input Information</h2>
<h3>School Information</h3>
<input type="text" id="schoolName" placeholder="School/District Name" title="Enter the official name of your school or district." required>
<h3>Mission Statement</h3>
<textarea id="missionStatement" rows="4" placeholder="Technology Mission Statement" title="Provide a brief statement of your technology mission and vision for the school." required></textarea>
<h3>Total Annual Budget</h3>
<input type="number" id="totalBudget" placeholder="Total Annual Technology Budget ($)" title="Specify the total amount of budget allocated for technology per year." required>
<h3>Number of Students</h3>
<input type="number" id="studentCount" placeholder="Number of Students" title="Enter the total number of students at the school." required>
<h3>Plan Start Date</h3>
<input type="date" id="planStartDate" title="Select the start date of the technology plan." required>
<h3>Technology Goals</h3>
<div id="goalsContainer">
<div class="goal-item">
<input type="text" placeholder="Enter a technology goal" title="List all the goals you aim to achieve with the technology plan.">
<button type="button" class="remove-btn" onclick="removeField(this)">✖</button>
</div>
</div>
<button type="button" onclick="addGoal()">Add Another Goal</button>
<h3>Technology Priorities</h3>
<div id="prioritiesContainer">
<div class="priority-item">
<input type="text" placeholder="Enter a technology priority" title="Define the main priorities for your technology plan.">
<div class="budget-allocation">
<input type="number" placeholder="% of Total Budget" min="0" max="100" title="Budget allocation in percentage for this priority." required>
</div>
<div class="timeline-input">
<input type="number" placeholder="Months" min="6" step="6" title="Number of months needed for implementation." required>
</div>
<button type="button" class="remove-btn" onclick="removeField(this)">✖</button>
</div>
</div>
<button type="button" onclick="addPriority()">Add Another Priority</button>
<h3>Challenges and Obstacles</h3>
<div id="challengesContainer">
<div class="challenge-item">
<input type="text" placeholder="Enter a challenge or obstacle" title="Identify any potential challenges or obstacles that might affect the implementation of the plan.">
<button type="button" class="remove-btn" onclick="removeField(this)">✖</button>
</div>
</div>
<button type="button" onclick="addChallenge()">Add Another Challenge</button>
<br><br>
<button type="button" onclick="generatePlan()">Generate Comprehensive Technology Plan</button>
<button type="button" onclick="printPlan()">Print Plan</button>
</div>
<div id="planOutput"></div>
<script>
function addGoal() {
const goalsContainer = document.getElementById('goalsContainer');
const newGoal = document.createElement('div');
newGoal.className = 'goal-item';
newGoal.innerHTML = `
<input type="text" placeholder="Enter a technology goal" title="List all the goals you aim to achieve with the technology plan.">
<button type="button" class="remove-btn added" onclick="removeField(this)">✖</button>
`;
goalsContainer.appendChild(newGoal);
newGoal.querySelector('input').focus();
}
function addPriority() {
const prioritiesContainer = document.getElementById('prioritiesContainer');
const newPriority = document.createElement('div');
newPriority.className = 'priority-item';
newPriority.innerHTML = `
<input type="text" placeholder="Enter a technology priority" title="Define the main priorities for your technology plan.">
<div class="budget-allocation">
<input type="number" placeholder="% of Total Budget" min="0" max="100" title="Budget allocation in percentage for this priority." required>
</div>
<div class="timeline-input">
<input type="number" placeholder="Months" min="6" step="6" title="Number of months needed for implementation." required>
</div>
<button type="button" class="remove-btn added" onclick="removeField(this)">✖</button>
`;
prioritiesContainer.appendChild(newPriority);
newPriority.querySelector('input[type="text"]').focus();
}
function addChallenge() {
const challengesContainer = document.getElementById('challengesContainer');
const newChallenge = document.createElement('div');
newChallenge.className = 'challenge-item';
newChallenge.innerHTML = `
<input type="text" placeholder="Enter a challenge or obstacle" title="Identify any potential challenges or obstacles that might affect the implementation of the plan.">
<button type="button" class="remove-btn added" onclick="removeField(this)">✖</button>
`;
challengesContainer.appendChild(newChallenge);
newChallenge.querySelector('input').focus();
}
function removeField(button) {
button.parentElement.remove();
}
function generatePlan() {
const schoolName = document.getElementById('schoolName').value;
const missionStatement = document.getElementById('missionStatement').value;
const studentCount = document.getElementById('studentCount').value;
const totalBudget = document.getElementById('totalBudget').value;
const planStartDate = document.getElementById('planStartDate').value;
const goals = Array.from(document.querySelectorAll('#goalsContainer .goal-item input')).map(input => input.value).filter(value => value);
const priorities = Array.from(document.querySelectorAll('#prioritiesContainer .priority-item')).map(item => ({
priority: item.querySelector('input[type="text"]').value,
budget: item.querySelector('.budget-allocation input').value,
timeline: item.querySelector('.timeline-input input').value
})).filter(item => item.priority);
const challenges = Array.from(document.querySelectorAll('#challengesContainer .challenge-item input')).map(input => input.value).filter(value => value);
let planHTML = `<h2>Technology Plan for ${schoolName}</h2>`;
planHTML += `<h3>Mission Statement</h3><p>${missionStatement}</p>`;
planHTML += `<h3>Financial Overview</h3>`;
planHTML += `<p><strong>Total Annual Budget:</strong> $${totalBudget}</p>`;
planHTML += `<p><strong>Number of Students:</strong> ${studentCount}</p>`;
planHTML += `<p><strong>Plan Start Date:</strong> ${planStartDate}</p>`;
planHTML += `<h3>Goals</h3>`;
if (goals.length > 0) {
planHTML += `<ul>${goals.map(goal => `<li>${goal}</li>`).join('')}</ul>`;
} else {
planHTML += `<p>No goals provided.</p>`;
}
planHTML += `<h3>Priorities</h3>`;
if (priorities.length > 0) {
priorities.forEach(priority => {
planHTML += `<p><strong>Priority:</strong> ${priority.priority}</p>`;
planHTML += `<p><strong>Budget Allocation:</strong> ${priority.budget}%</p>`;
planHTML += `<p><strong>Timeline:</strong> ${priority.timeline} months</p>`;
});
} else {
planHTML += `<p>No priorities provided.</p>`;
}
planHTML += `<h3>Challenges and Obstacles</h3>`;
if (challenges.length > 0) {
planHTML += `<ul>${challenges.map(challenge => `<li>${challenge}</li>`).join('')}</ul>`;
} else {
planHTML += `<p>No challenges provided.</p>`;
}
document.getElementById('planOutput').innerHTML = planHTML;
}
function printPlan() {
window.print();
}
</script>
</body>
</html>
