<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family:Arial;
background:#f5f5f5;
padding:20px;
}
.container{
max-width:1000px;
margin:auto;
background:white;
padding:20px;
border-radius:10px;
}
input,select,textarea{
width:100%;
padding:8px;
margin-bottom:10px;
}
button{
padding:8px 15px;
background:#4CAF50;
color:white;
border:none;
cursor:pointer;
}
table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}
th,td{
border:1px solid #ddd;
padding:8px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<h1>🎓 School Prompt Marketplace</h1>
<div id="loginSection">
<h2>🔐 Student Login</h2>
<input id="studentName" placeholder="Student Name">
<input id="studentID" placeholder="Student ID">
<button onclick="login()">Login</button>
</div>
<div id="mainSystem" style="display:none">
<h2>📚 Create Prompt</h2>
<select id="subject">
<option>Science</option>
<option>Math</option>
<option>English</option>
<option>History</option>
<option>Computer</option>
</select>
<input id="promptTitle" placeholder="Prompt Title">
<textarea id="promptContent" placeholder="Write your prompt"></textarea>
<button onclick="addPrompt()">Submit Prompt</button>
<hr>
<h2>🏆 Prompt Marketplace</h2>
<table>
<thead>
<tr>
<th>Subject</th>
<th>Title</th>
<th>Student</th>
<th>Votes</th>
<th>Action</th>
</tr>
</thead>
<tbody id="promptTable"></tbody>
</table>
<hr>
<h2>🤖 AI Prompt Improver</h2>
<textarea id="improveInput" placeholder="Write simple prompt"></textarea>
<button onclick="improvePrompt()">Improve Prompt</button>
<textarea id="improveOutput"></textarea>
<hr>
<h2>🏫 School Dashboard</h2>
<div id="dashboard"></div>
<hr>
<h2>🧠 Prompt Engineering Course</h2>
<ul>
<li>Lesson 1: What is Prompt Engineering</li>
<li>Lesson 2: Role + Task + Context</li>
<li>Lesson 3: Writing Better Prompts</li>
<li>Lesson 4: Examples</li>
<li>Lesson 5: Practice</li>
</ul>
</div>
</div>
<script>
let prompts=[]
let currentUser=""
function login(){
const name=document.getElementById("studentName").value
if(name==""){
alert("Enter name")
return
}
currentUser=name
localStorage.setItem("student",name)
document.getElementById("loginSection").style.display="none"
document.getElementById("mainSystem").style.display="block"
}
function addPrompt(){
const subject=document.getElementById("subject").value
const title=document.getElementById("promptTitle").value
const content=document.getElementById("promptContent").value
prompts.push({
subject:subject,
title:title,
content:content,
student:currentUser,
votes:0
})
renderPrompts()
}
function renderPrompts(){
const table=document.getElementById("promptTable")
table.innerHTML=""
prompts.forEach((p,i)=>{
table.innerHTML+=`
<tr>
<td>${p.subject}</td>
<td>${p.title}</td>
<td>${p.student}</td>
<td>${p.votes}</td>
<td>
<button onclick="vote(${i})">👍</button>
<button onclick="copyPrompt(\`${p.content}\`)">Copy</button>
</td>
</tr>
`
})
renderDashboard()
}
function vote(i){
prompts[i].votes++
renderPrompts()
}
function copyPrompt(text){
navigator.clipboard.writeText(text)
alert("Prompt copied")
}
function improvePrompt(){
const input=document.getElementById("improveInput").value
const improved=
`You are an expert teacher.
Explain the topic clearly.
Topic: ${input}
Use examples and simple language.`
document.getElementById("improveOutput").value=improved
}
function renderDashboard(){
let totalPrompts=prompts.length
let totalVotes=prompts.reduce((s,p)=>s+p.votes,0)
document.getElementById("dashboard").innerHTML=
`Total Prompts: ${totalPrompts} <br>
Total Votes: ${totalVotes}`
}
</script>
</body>
</html>
