Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgtge8f33wh1jwsuntitledPlain Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SafeSpace UPHS-PDP</title>
<style>
/* =========================
GENERAL
========================= */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #fff7fa;
color: #333;
font-size: 16px;
line-height: 1.6;
}
button,
select,
textarea {
font: inherit;
}
button {
-webkit-tap-highlight-color: transparent;
}
/* =========================
HEADER
========================= */
header {
background: linear-gradient(135deg, #c96f8d, #e8aabd);
color: white;
text-align: center;
padding: 42px 20px;
}
header h1 {
margin: 0;
font-size: clamp(28px, 6vw, 40px);
line-height: 1.2;
}
header p {
margin: 12px auto 0;
font-size: clamp(14px, 3vw, 17px);
max-width: 650px;
}
/* =========================
MAIN CONTAINER
========================= */
.container {
width: 100%;
max-width: 1100px;
margin: auto;
padding: 28px 20px;
}
/* =========================
NOTICE
========================= */
.notice {
background: white;
padding: 22px;
border-radius: 16px;
border: 1px solid #efd5df;
margin-bottom: 30px;
line-height: 1.7;
box-shadow: 0 3px 12px rgba(100, 50, 70, 0.05);
}
.notice strong {
color: #914b64;
font-size: 18px;
}
/* =========================
HEADINGS
========================= */
h2 {
color: #914b64;
font-size: clamp(23px, 4vw, 30px);
line-height: 1.3;
}
h3 {
line-height: 1.3;
}
/* =========================
DEPARTMENTS
========================= */
.departments {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.department {
background: white;
padding: 24px 20px;
min-height: 145px;
border-radius: 16px;
border: 1px solid #efd5df;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.department:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(100, 50, 70, 0.12);
}
.department:active {
transform: scale(0.98);
}
.department h3 {
color: #914b64;
margin: 0 0 8px;
font-size: 19px;
}
.department p {
color: #777;
font-size: 14px;
margin: 0;
}
/* =========================
CARD
========================= */
.card {
background: white;
padding: 25px;
border-radius: 16px;
border: 1px solid #efd5df;
margin-bottom: 20px;
box-shadow: 0 3px 12px rgba(100, 50, 70, 0.05);
}
/* =========================
BACK BUTTON
========================= */
.back {
display: inline-flex;
align-items: center;
border: none;
background: white;
color: #914b64;
padding: 11px 16px;
min-height: 44px;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
margin-bottom: 18px;
}
.back:hover {
background: #f9e9ef;
}
/* =========================
TABS
========================= */
.tabs {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin: 20px 0;
}
.tab {
border: 1px solid #ddb8c5;
background: white;
color: #914b64;
padding: 11px 18px;
min-height: 44px;
border-radius: 24px;
cursor: pointer;
font-weight: 600;
transition: 0.2s;
}
.tab:hover {
background: #f9e9ef;
}
.tab.active {
background: #b96381;
color: white;
border-color: #b96381;
}
/* =========================
FORM
========================= */
label {
display: block;
font-weight: bold;
margin: 17px 0 8px;
}
select,
textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid #d8d8d8;
border-radius: 10px;
background: white;
color: #333;
font-size: 16px;
}
select {
min-height: 48px;
cursor: pointer;
}
textarea {
min-height: 150px;
resize: vertical;
line-height: 1.5;
}
textarea:focus,
select:focus {
outline: 2px solid #e4a9bb;
border-color: #b96381;
}
/* =========================
CHECKBOX
========================= */
.checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: normal;
line-height: 1.5;
margin: 18px 0;
}
.checkbox input {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
accent-color: #b96381;
}
/* =========================
PRIMARY BUTTON
========================= */
.primary {
border: none;
background: #b96381;
color: white;
padding: 13px 20px;
min-height: 48px;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
width: auto;
transition: 0.2s;
}
.primary:hover {
background: #a65370;
}
.primary:active {
transform: scale(0.98);
}
/* =========================
SUCCESS MESSAGE
========================= */
.success {
margin-top: 15px;
background: #edf8ef;
border: 1px solid #b8dbbd;
padding: 13px 15px;
border-radius: 10px;
color: #397044;
}
/* =========================
POSTS
========================= */
.post {
background: #fffafd;
border-left: 4px solid #c97894;
padding: 17px;
border-radius: 10px;
margin: 13px 0;
overflow-wrap: anywhere;
}
.post strong {
color: #914b64;
}
.post p {
margin: 8px 0;
}
.post small {
color: #888;
font-size: 12px;
}
.empty {
text-align: center;
padding: 30px 15px;
color: #777;
}
/* =========================
HELP
========================= */
.help-list {
line-height: 1.8;
padding-left: 22px;
}
/* =========================
FOOTER
========================= */
footer {
text-align: center;
color: #777;
font-size: 13px;
padding: 30px 20px;
margin-top: 20px;
}
/* =========================
HIDDEN
========================= */
.hidden {
display: none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.departments {
grid-template-columns: repeat(2, 1fr);
}
.container {
padding: 25px 18px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
body {
font-size: 15px;
}
header {
padding: 32px 16px;
}
header h1 {
font-size: 29px;
}
header p {
font-size: 14px;
}
.container {
padding: 20px 14px;
}
.notice {
padding: 18px;
margin-bottom: 22px;
border-radius: 14px;
}
.notice strong {
font-size: 17px;
}
h2 {
font-size: 23px;
}
.departments {
grid-template-columns: 1fr;
gap: 12px;
}
.department {
min-height: 115px;
padding: 20px;
}
.department h3 {
font-size: 18px;
}
.department p {
font-size: 14px;
}
.card {
padding: 18px;
border-radius: 14px;
}
.back {
width: 100%;
justify-content: center;
margin-bottom: 12px;
}
/*
Mobile tabs become a 2-column layout
for easier tapping.
*/
.tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.tab {
width: 100%;
min-height: 46px;
padding: 10px 8px;
}
select,
textarea {
font-size: 16px;
}
textarea {
min-height: 170px;
}
/*
Full-width submit button on phones
*/
.primary {
width: 100%;
min-height: 50px;
}
.post {
padding: 15px;
}
.post p {
font-size: 15px;
}
footer {
padding: 25px 15px;
}
}
/* =========================================================
VERY SMALL PHONES
========================================================= */
@media (max-width: 360px) {
header h1 {
font-size: 26px;
}
.container {
padding-left: 10px;
padding-right: 10px;
}
.card {
padding: 15px;
}
.tabs {
grid-template-columns: 1fr;
}
.tab {
min-height: 48px;
}
.department {
min-height: 105px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition: none !important;
}
}
</style>
</head>
<body>
<header>
<h1>SafeSpace UPHS-PDP</h1>
<p>
A place to feel safe, heard, and included.
</p>
</header>
<div class="container">
<!-- =========================
HOME PAGE
========================= -->
<section id="home">
<div class="notice">
<strong>Welcome to SafeSpace.</strong>
<p>
SafeSpace is an anonymous school advocacy platform where
students can share concerns, suggestions, experiences,
and positive messages.
</p>
<p>
You do not need to provide your name or student number.
Please do not share private information about yourself
or another person.
</p>
</div>
<h2>Choose Your Department</h2>
<div class="departments">
<div class="department"
onclick="openDepartment('Nursing')">
<h3>Nursing</h3>
<p>
Open Nursing SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Medical Technology')">
<h3>Medical Technology</h3>
<p>
Open Medical Technology SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Dentistry')">
<h3>Dentistry</h3>
<p>
Open Dentistry SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Physical Therapy')">
<h3>Physical Therapy</h3>
<p>
Open Physical Therapy SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Radiologic Technology')">
<h3>Radiologic Technology</h3>
<p>
Open Radiologic Technology SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Pharmacy')">
<h3>Pharmacy</h3>
<p>
Open Pharmacy SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Accountancy')">
<h3>Accountancy</h3>
<p>
Open Accountancy SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Basic Education')">
<h3>Basic Education</h3>
<p>
Open Basic Education SafeSpace →
</p>
</div>
<div class="department"
onclick="openDepartment('Tourism')">
<h3>Tourism</h3>
<p>
Open Tourism SafeSpace →
</p>
</div>
</div>
</section>
<!-- =========================
DEPARTMENT PAGE
========================= -->
<section id="departmentPage" class="hidden">
<button class="back"
onclick="goHome()">
← Back to Departments
</button>
<h2 id="departmentTitle"></h2>
<p>
A safe space for students to share respectfully and anonymously.
</p>
<div class="tabs">
<button class="tab active"
onclick="showTab('share', this)">
Share
</button>
<button class="tab"
onclick="showTab('wall', this)">
Wall
</button>
<button class="tab"
onclick="showTab('help', this)">
Help
</button>
<button class="tab"
onclick="showTab('about', this)">
About
</button>
</div>
<!-- =========================
SHARE
========================= -->
<div id="share" class="tabContent">
<div class="card">
<h3>Share Anonymously</h3>
<label for="category">
Type of message
</label>
<select id="category">
<option>Concern</option>
<option>Bullying or exclusion</option>
<option>Classroom concern</option>
<option>Suggestion</option>
<option>Positive message</option>
<option>Other</option>
</select>
<label for="message">
Your message
</label>
<textarea
id="message"
maxlength="600"
placeholder="Write your concern or message here...">
</textarea>
<small id="counter">
0 / 600
</small>
<label class="checkbox">
<input
type="checkbox"
id="agreement">
<span>
I understand that this platform is for respectful
and constructive messages. I will not post threats,
private information, or harmful content.
</span>
</label>
<button
class="primary"
onclick="submitPost()">
Submit Anonymously
</button>
<div id="successMessage"></div>
</div>
</div>
<!-- =========================
WALL
========================= -->
<div id="wall" class="tabContent hidden">
<div class="card">
<h3>Anonymous Wall</h3>
<label for="filter">
Filter messages
</label>
<select
id="filter"
onchange="displayPosts()">
<option>All</option>
<option>Concern</option>
<option>Bullying or exclusion</option>
<option>Classroom concern</option>
<option>Suggestion</option>
<option>Positive message</option>
<option>Other</option>
</select>
<div id="posts"></div>
</div>
</div>
<!-- =========================
HELP
========================= -->
<div id="help" class="tabContent hidden">
<div class="card">
<h3>Need More Help?</h3>
<p>
Some concerns may need personal support or immediate
intervention. You may approach:
</p>
<ul class="help-list">
<li>A trusted teacher</li>
<li>Your class adviser</li>
<li>Guidance personnel</li>
<li>School health personnel</li>
<li>An appropriate school authority</li>
</ul>
<p>
If you are in immediate danger, seek help from a trusted
adult or appropriate emergency service immediately.
</p>
<p>
<strong>
SafeSpace does not replace the official school
reporting and disciplinary procedures.
</strong>
</p>
</div>
</div>
<!-- =========================
ABOUT
========================= -->
<div id="about" class="tabContent hidden">
<div class="card">
<h3>About SafeSpace</h3>
<p>
SafeSpace UPHS-PDP is a school advocacy project that
promotes a safe and inclusive learning environment.
</p>
<p>
It aims to encourage students to speak up about
concerns while promoting respect, compassion,
inclusion, and equal opportunities.
</p>
<h4>Our Advocacy</h4>
<ul>
<li>Everyone deserves to feel safe.</li>
<li>Everyone deserves to be heard.</li>
<li>Everyone deserves respect.</li>
<li>No student should feel alone in facing a concern.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
SafeSpace UPHS-PDP • Creating Spaces Where Everyone Belongs
</footer>
<script>
/* =========================
VARIABLES
========================= */
let currentDepartment = "";
/* =========================
SAMPLE MESSAGES
========================= */
const sampleMessages = [
{
category: "Concern",
message: "Sometimes the workload feels overwhelming. I hope we can have enough time to rest and recover between school activities.",
date: "September 10, 2026"
},
{
category: "Classroom concern",
message: "I hope instructions for activities can be explained more clearly so students will know exactly what is expected.",
date: "September 11, 2026"
},
{
category: "Positive message",
message: "Thank you to the teachers who patiently explain lessons even when we ask questions repeatedly. It really helps us understand.",
date: "September 11, 2026"
},
{
category: "Suggestion",
message: "Maybe we can have a suggestion box or online form where students can regularly share ideas about improving our department.",
date: "September 12, 2026"
},
{
category: "Concern",
message: "I hope students who are struggling academically can be reminded that it is okay to ask for help.",
date: "September 12, 2026"
},
{
category: "Bullying or exclusion",
message: "Sometimes students feel left out during group activities. I hope everyone can be encouraged to include their classmates.",
date: "September 13, 2026"
},
{
category: "Positive message",
message: "I appreciate classmates who check on each other during stressful weeks. Small acts of kindness really make a difference.",
date: "September 14, 2026"
},
{
category: "Classroom concern",
message: "I hope schedules and announcements can be posted earlier whenever possible so students have enough time to prepare.",
date: "September 15, 2026"
},
{
category: "Suggestion",
message: "It would be nice to have more student activities that promote friendship, teamwork, and well-being.",
date: "September 16, 2026"
},
{
category: "Positive message",
message: "To every student who is struggling but still showing up every day: you are doing your best, and that is already something to be proud of.",
date: "September 17, 2026"
}
];
/* =========================
OPEN DEPARTMENT
========================= */
function openDepartment(department) {
currentDepartment = department;
document
.getElementById("home")
.classList.add("hidden");
document
.getElementById("departmentPage")
.classList.remove("hidden");
document
.getElementById("departmentTitle")
.innerText =
department + " SafeSpace";
/* Reset filter */
document
.getElementById("filter")
.value = "All";
/* Open Share tab */
showTab(
"share",
document.querySelector(".tab")
);
displayPosts();
/* Scroll to top */
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
/* =========================
BACK HOME
========================= */
function goHome() {
document
.getElementById("departmentPage")
.classList.add("hidden");
document
.getElementById("home")
.classList.remove("hidden");
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
/* =========================
CHANGE TAB
========================= */
function showTab(tabName, button) {
document
.querySelectorAll(".tabContent")
.forEach(tab => {
tab.classList.add("hidden");
});
document
.getElementById(tabName)
.classList.remove("hidden");
document
.querySelectorAll(".tab")
.forEach(tab => {
tab.classList.remove("active");
});
if (button) {
button.classList.add("active");
}
if (tabName === "wall") {
displayPosts();
}
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
/* =========================
GET POSTS
========================= */
function getPosts() {
const storageKey =
"SafeSpace_" + currentDepartment;
let savedPosts =
localStorage.getItem(storageKey);
if (!savedPosts) {
localStorage.setItem(
storageKey,
JSON.stringify(sampleMessages)
);
return sampleMessages;
}
return JSON.parse(savedPosts);
}
/* =========================
SUBMIT POST
========================= */
function submitPost() {
const message =
document
.getElementById("message")
.value
.trim();
const category =
document
.getElementById("category")
.value;
const agreement =
document
.getElementById("agreement")
.checked;
const result =
document
.getElementById("successMessage");
if (message === "") {
result.innerHTML =
'<div class="success">Please write a message first.</div>';
return;
}
if (!agreement) {
result.innerHTML =
'<div class="success">Please confirm the agreement before submitting.</div>';
return;
}
const posts = getPosts();
posts.unshift({
category: category,
message: message,
date: new Date().toLocaleString()
});
localStorage.setItem(
"SafeSpace_" + currentDepartment,
JSON.stringify(posts)
);
document
.getElementById("message")
.value = "";
document
.getElementById("agreement")
.checked = false;
document
.getElementById("counter")
.innerText = "0 / 600";
result.innerHTML =
'<div class="success">Your message has been submitted anonymously.</div>';
displayPosts();
}
/* =========================
DISPLAY POSTS
========================= */
function displayPosts() {
const container =
document.getElementById("posts");
if (!container) return;
const filter =
document.getElementById("filter").value;
let posts = getPosts();
if (filter !== "All") {
posts =
posts.filter(
post =>
post.category === filter
);
}
if (posts.length === 0) {
container.innerHTML =
'<div class="empty">No messages yet. Be the first to share.</div>';
return;
}
container.innerHTML =
posts.map(post => {
return `
<div class="post">
<strong>
${escapeHTML(post.category)}
</strong>
<p>
${escapeHTML(post.message)}
</p>
<small>
Anonymous • ${escapeHTML(post.date)}
</small>
</div>
`;
}).join("");
}
/* =========================
SECURITY
========================= */
function escapeHTML(text) {
return text.replace(
/[&<>"']/g,
function(character) {
return {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'"
}[character];
}
);
}
/* =========================
CHARACTER COUNTER
========================= */
document
.getElementById("message")
.addEventListener(
"input",
function() {
document
.getElementById("counter")
.innerText =
this.value.length +
" / 600";
}
);
</script>
</body>
</html>24,674 chars · codepastes.com