<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<title>SMPS Calculator – Social-Moral Positioning System</title>
<style>
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to bottom, #f0f4f8, #d9e2ec);
color: #333;
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
h1 {
text-align: center;
color: #2c5282;
margin-bottom: 10px;
}
.subtitle {
text-align: center;
color: #4a5568;
margin-bottom: 30px;
}
.axis {
margin: 25px 0;
padding: 15px;
background: #f7fafc;
border-radius: 8px;
}
.axis-label {
font-weight: bold;
margin-bottom: 8px;
color: #2d3748;
}
.slider-container {
display: flex;
align-items: center;
gap: 15px;
}
input[type=”range”] {
flex: 1;
height: 8px;
border-radius: 5px;
background: #cbd5e0;
outline: none;
opacity: 0.9;
-webkit-appearance: none;
}
input[type=”range”]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3182ce;
cursor: pointer;
}
input[type=”number”] {
width: 70px;
padding: 8px;
text-align: center;
border: 1px solid #cbd5e0;
border-radius: 6px;
font-size: 1.1em;
}
button {
background: #3182ce;
color: white;
border: none;
padding: 14px 28px;
font-size: 1.1em;
border-radius: 8px;
cursor: pointer;
margin: 10px 8px 0 0;
transition: background 0.2s;
}
button:hover {
background: #2b6cb0;
}
button#print {
background: #38a169;
}
button#print:hover {
background: #2f855a;
}
#result {
margin-top: 30px;
padding: 20px;
background: #ebf8ff;
border-radius: 10px;
border: 1px solid #bee3f8;
display: none;
}
#coordinates {
font-size: 1.4em;
font-weight: bold;
color: #2c5282;
text-align: center;
margin: 15px 0;
}
#interpretation {
font-style: italic;
color: #4a5568;
}
footer {
text-align: center;
margin-top: 40px;
color: #718096;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class=”container”>
<h1>SMPS Calculator</h1>
<p class=”subtitle”>Social-Moral Positioning System<br>(โ5 to +5 per axis)</p>
<div class=”axis”>
<div class=”axis-label”>P โ Personal integrity, discipline, honesty</div>
<div class=”slider-container”>
<input type=”range” id=”p” min=”-5″ max=”5″ value=”0″ step=”1″ oninput=”updateValue(‘p-val’, this.value)”>
<input type=”number” id=”p-val” value=”0″ min=”-5″ max=”5″ onchange=”updateSlider(‘p’, this.value)”>
</div>
</div>
<div class=”axis”>
<div class=”axis-label”>F โ Familial harmony, loyalty, nurturing</div>
<div class=”slider-container”>
<input type=”range” id=”f” min=”-5″ max=”5″ value=”0″ step=”1″ oninput=”updateValue(‘f-val’, this.value)”>
<input type=”number” id=”f-val” value=”0″ min=”-5″ max=”5″ onchange=”updateSlider(‘f’, this.value)”>
</div>
</div>
<div class=”axis”>
<div class=”axis-label”>C โ Career / Contribution ethics & value</div>
<div class=”slider-container”>
<input type=”range” id=”c” min=”-5″ max=”5″ value=”0″ step=”1″ oninput=”updateValue(‘c-val’, this.value)”>
<input type=”number” id=”c-val” value=”0″ min=”-5″ max=”5″ onchange=”updateSlider(‘c’, this.value)”>
</div>
</div>
<div class=”axis”>
<div class=”axis-label”>S โ Social impact (unity vs division/harm)</div>
<div class=”slider-container”>
<input type=”range” id=”s” min=”-5″ max=”5″ value=”0″ step=”1″ oninput=”updateValue(‘s-val’, this.value)”>
<input type=”number” id=”s-val” value=”0″ min=”-5″ max=”5″ onchange=”updateSlider(‘s’, this.value)”>
</div>
</div>
<div class=”axis”>
<div class=”axis-label”>I โ Ideological (truth/justice vs fanaticism)</div>
<div class=”slider-container”>
<input type=”range” id=”i” min=”-5″ max=”5″ value=”0″ step=”1″ oninput=”updateValue(‘i-val’, this.value)”>
<input type=”number” id=”i-val” value=”0″ min=”-5″ max=”5″ onchange=”updateSlider(‘i’, this.value)”>
</div>
</div>
<div style=”text-align: center; margin: 30px 0;”>
<button onclick=”calculateSMPS()”>Calculate SMPS</button>
<button id=”print” onclick=”printResult()” style=”display:none;”>Print / Save Result</button>
</div>
<div id=”result”>
<h2 style=”margin-top:0; text-align:center;”>Your SMPS Result</h2>
<div id=”coordinates”></div>
<p><strong>Total:</strong> <span id=”total”></span> / 25</p>
<p id=”interpretation”></p>
<p style=”font-size:0.95em; color:#4a5568; margin-top:20px;”>
<strong>Note:</strong> This is a subjective self-assessment tool based on patterns of behavior and impact.
</p>
</div>
<footer>
SMPS โ Social-Moral Positioning System | Created for reflection & discussion
</footer>
</div>
<script>
function updateValue(inputId, value) {
document.getElementById(inputId).value = value;
}
function updateSlider(sliderId, value) {
const slider = document.getElementById(sliderId);
const num = parseInt(value);
if (!isNaN(num) && num >= -5 && num <= 5) {
slider.value = num;
}
}
function calculateSMPS() {
const axes = [‘p’, ‘f’, ‘c’, ‘s’, ‘i’];
let total = 0;
let coords = [];
axes.forEach(axis => {
const val = parseInt(document.getElementById(axis).value) || 0;
total += val;
coords.push(val);
});
const coordStr = `(${coords.join(‘, ‘)})`;
let level = “”;
if (total >= 20) level = “Exemplary / near-saint-like (very rare)”;
else if (total >= 12) level = “Strong positive role model”;
else if (total >= 4) level = “Good / above average character”;
else if (total >= -3) level = “Average / mixed human”;
else if (total >= -12) level = “Problematic / net harmful”;
else level = “Severely destructive / dangerous”;
document.getElementById(“coordinates”).textContent = coordStr;
document.getElementById(“total”).textContent = total;
document.getElementById(“interpretation”).textContent = `Interpretation: ${level}`;
document.getElementById(“result”).style.display = “block”;
document.getElementById(“print”).style.display = “inline-block”;
}
function printResult() {
const resultDiv = document.getElementById(“result”);
const originalContent = document.body.innerHTML;
document.body.innerHTML = `
<div style=”padding:30px; font-family:Arial, sans-serif;”>
<h1>SMPS Result</h1>
${resultDiv.innerHTML}
<p style=”margin-top:40px; font-size:0.9em; color:#666;”>
Generated on ${new Date().toLocaleString()} using SMPS Calculator
</p>
</div>
`;
window.print();
// Restore original page after printing
setTimeout(() => {
document.body.innerHTML = originalContent;
// Re-attach event listeners if needed (simple page reload works too)
window.location.reload();
}, 100);
}
</script>
</body>
</html>
GRP_VCare2Dare 