mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 02:57:36 +00:00
Update technical.html
This commit is contained in:
raulsagrado
+321
-228
@@ -1,296 +1,389 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>WIN Student Goal Tracker - Technical Documentation</title>
|
<title>WIN Student Goal Tracker – Developer Documentation</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg:#f5f7fb;
|
||||||
|
--card:#ffffff;
|
||||||
|
--text:#1f2937;
|
||||||
|
--muted:#6b7280;
|
||||||
|
--accent:#1d4ed8;
|
||||||
|
--accent-dark:#0f172a;
|
||||||
|
--border:#dbe3f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*{
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html{
|
||||||
|
scroll-behavior:smooth;
|
||||||
|
}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
|
|
||||||
margin:0;
|
margin:0;
|
||||||
background:#f5f7fa;
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
color:#111827;
|
background:var(--bg);
|
||||||
|
color:var(--text);
|
||||||
line-height:1.6;
|
line-height:1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
header{
|
.page{
|
||||||
background:#111827;
|
max-width:1300px;
|
||||||
color:white;
|
margin:0 auto;
|
||||||
padding:3rem 1.5rem;
|
padding:24px 20px 40px;
|
||||||
text-align:center;
|
display:grid;
|
||||||
|
grid-template-columns:280px minmax(0, 1fr);
|
||||||
|
gap:24px;
|
||||||
|
align-items:start;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1{
|
.sidebar{
|
||||||
|
position:sticky;
|
||||||
|
top:20px;
|
||||||
|
align-self:start;
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:18px;
|
||||||
|
padding:20px;
|
||||||
|
box-shadow:0 8px 20px rgba(15,23,42,.05);
|
||||||
|
max-height:calc(100vh - 40px);
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h2{
|
||||||
|
margin:0 0 14px;
|
||||||
|
font-size:1.1rem;
|
||||||
|
color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar ul{
|
||||||
|
list-style:none;
|
||||||
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
font-size:2.4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header p{
|
.sidebar li{
|
||||||
opacity:.9;
|
margin:0;
|
||||||
margin-top:.5rem;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main{
|
.sidebar a{
|
||||||
max-width:1000px;
|
display:block;
|
||||||
margin:auto;
|
padding:9px 10px;
|
||||||
padding:2rem 1rem 3rem;
|
border-radius:10px;
|
||||||
|
color:var(--text);
|
||||||
|
text-decoration:none;
|
||||||
|
font-size:.96rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card{
|
.sidebar a:hover{
|
||||||
background:white;
|
background:#eff6ff;
|
||||||
border-radius:14px;
|
color:var(--accent);
|
||||||
padding:1.5rem;
|
}
|
||||||
margin-bottom:1rem;
|
|
||||||
box-shadow:0 8px 20px rgba(0,0,0,.05);
|
.content{
|
||||||
|
min-width:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero{
|
||||||
|
background:linear-gradient(135deg,#0f172a,#1d4ed8);
|
||||||
|
color:#fff;
|
||||||
|
padding:40px;
|
||||||
|
border-radius:18px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
box-shadow:0 12px 30px rgba(15,23,42,.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1{
|
||||||
|
margin:0 0 12px;
|
||||||
|
color:#fff;
|
||||||
|
line-height:1.2;
|
||||||
|
font-size:2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p{
|
||||||
|
margin:6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
background:var(--card);
|
||||||
|
padding:24px;
|
||||||
|
border-radius:18px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
border:1px solid var(--border);
|
||||||
|
box-shadow:0 8px 20px rgba(15,23,42,.05);
|
||||||
|
scroll-margin-top:20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
margin-top:0;
|
margin-top:0;
|
||||||
|
color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
color:var(--accent-dark);
|
||||||
|
margin-top:24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
||||||
|
gap:12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
border:1px solid var(--border);
|
||||||
|
padding:14px;
|
||||||
|
border-radius:12px;
|
||||||
|
background:#fbfdff;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre{
|
||||||
|
background:#111827;
|
||||||
|
color:#e5e7eb;
|
||||||
|
padding:12px 14px;
|
||||||
|
border-radius:10px;
|
||||||
|
overflow:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
code{
|
code{
|
||||||
background:#eef2ff;
|
font-family:"Courier New", Courier, monospace;
|
||||||
padding:.2rem .4rem;
|
|
||||||
border-radius:5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
table{
|
ul{
|
||||||
|
padding-left:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav{
|
||||||
|
display:none;
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:14px;
|
||||||
|
padding:14px;
|
||||||
|
margin-bottom:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav label{
|
||||||
|
display:block;
|
||||||
|
font-weight:bold;
|
||||||
|
margin-bottom:8px;
|
||||||
|
color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav select{
|
||||||
width:100%;
|
width:100%;
|
||||||
border-collapse:collapse;
|
padding:10px;
|
||||||
margin-top:1rem;
|
border-radius:10px;
|
||||||
|
border:1px solid var(--border);
|
||||||
|
background:#fff;
|
||||||
|
color:var(--text);
|
||||||
|
font-size:1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,td{
|
@media (max-width: 920px){
|
||||||
padding:.7rem;
|
.page{
|
||||||
border-bottom:1px solid #e5e7eb;
|
grid-template-columns:1fr;
|
||||||
text-align:left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn{
|
.sidebar{
|
||||||
display:inline-block;
|
display:none;
|
||||||
margin-top:1rem;
|
|
||||||
padding:.6rem 1rem;
|
|
||||||
background:#2563eb;
|
|
||||||
color:white;
|
|
||||||
text-decoration:none;
|
|
||||||
border-radius:8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer{
|
.mobile-nav{
|
||||||
text-align:center;
|
display:block;
|
||||||
padding:2rem;
|
}
|
||||||
color:#6b7280;
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px){
|
||||||
|
.page{
|
||||||
|
padding:16px 14px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero{
|
||||||
|
padding:28px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1{
|
||||||
|
font-size:1.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="page">
|
||||||
<header>
|
<aside class="sidebar">
|
||||||
<h1>Technical Documentation</h1>
|
<h2>Navigation</h2>
|
||||||
<p>WIN Student Goal Tracker Architecture and Implementation</p>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>System Overview</h2>
|
|
||||||
<p>
|
|
||||||
The WIN Student Goal Tracker is a containerized web application designed to allow
|
|
||||||
teachers and program staff to track student progress, goals, benchmarks, and
|
|
||||||
events. The system follows a modern multi-tier architecture separating the
|
|
||||||
frontend interface, backend services, and database layer.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>System Architecture</h2>
|
|
||||||
|
|
||||||
<p>The system architecture is organized into four main components:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
Browser
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
Angular Frontend
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
Traefik Reverse Proxy
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
.NET Core API
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
MySQL Database
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>Technology Stack</h2>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>Layer</th>
|
|
||||||
<th>Technology</th>
|
|
||||||
<th>Purpose</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Frontend</td>
|
|
||||||
<td>Angular 20</td>
|
|
||||||
<td>User interface and client-side logic</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Backend</td>
|
|
||||||
<td>.NET Core 9.0 (C#)</td>
|
|
||||||
<td>Business logic and REST APIs</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>ORM</td>
|
|
||||||
<td>Dapper</td>
|
|
||||||
<td>Lightweight database access</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Authentication</td>
|
|
||||||
<td>JWT + Refresh Tokens</td>
|
|
||||||
<td>Secure user authentication</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Database</td>
|
|
||||||
<td>MySQL</td>
|
|
||||||
<td>Persistent data storage</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Infrastructure</td>
|
|
||||||
<td>Docker Containers</td>
|
|
||||||
<td>Application deployment</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Reverse Proxy</td>
|
|
||||||
<td>Traefik</td>
|
|
||||||
<td>Routing and SSL certificate management</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>Authentication</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
The application uses <strong>JSON Web Tokens (JWT)</strong> for authentication.
|
|
||||||
After login, the server generates a JWT token which is used to authenticate
|
|
||||||
subsequent API requests.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Access Tokens authenticate API requests</li>
|
<li><a href="#project-description">1. Project Description</a></li>
|
||||||
<li>Refresh Tokens extend user sessions</li>
|
<li><a href="#architecture">2. Architecture</a></li>
|
||||||
<li>Program-scoped tokens restrict access to authorized programs</li>
|
<li><a href="#data-flow">3. Data Flow</a></li>
|
||||||
|
<li><a href="#hosting">4. Hosting</a></li>
|
||||||
|
<li><a href="#installation">5. Installation</a></li>
|
||||||
|
<li><a href="#authentication">6. Authentication</a></li>
|
||||||
|
<li><a href="#backup">7. Database Backup</a></li>
|
||||||
|
<li><a href="#environment">8. Environment Variables</a></li>
|
||||||
|
<li><a href="#partner-statement">9. Partner Statement</a></li>
|
||||||
|
<li><a href="#walkthrough">10. Walkthrough</a></li>
|
||||||
|
<li><a href="#screenshots">11. Screenshots & Analysis</a></li>
|
||||||
|
<li><a href="#improvements">12. Improvements</a></li>
|
||||||
|
<li><a href="#sustainability">13. Sustainability</a></li>
|
||||||
|
<li><a href="#appendix-b">Appendix B – Structure</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<div class="mobile-nav">
|
||||||
|
<label for="section-nav">Jump to section</label>
|
||||||
|
<select id="section-nav" onchange="if(this.value) location.href=this.value;">
|
||||||
|
<option value="">Select a section</option>
|
||||||
|
<option value="#project-description">1. Project Description</option>
|
||||||
|
<option value="#architecture">2. Architecture</option>
|
||||||
|
<option value="#data-flow">3. Data Flow</option>
|
||||||
|
<option value="#hosting">4. Hosting</option>
|
||||||
|
<option value="#installation">5. Installation</option>
|
||||||
|
<option value="#authentication">6. Authentication</option>
|
||||||
|
<option value="#backup">7. Database Backup</option>
|
||||||
|
<option value="#environment">8. Environment Variables</option>
|
||||||
|
<option value="#partner-statement">9. Partner Statement</option>
|
||||||
|
<option value="#walkthrough">10. Walkthrough</option>
|
||||||
|
<option value="#screenshots">11. Screenshots & Analysis</option>
|
||||||
|
<option value="#improvements">12. Improvements</option>
|
||||||
|
<option value="#sustainability">13. Sustainability</option>
|
||||||
|
<option value="#appendix-b">Appendix B – Structure</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="hero">
|
||||||
<h2>Database Design</h2>
|
<h1>WIN Student Goal Tracker – Developer Documentation</h1>
|
||||||
|
<p><strong>Date:</strong> April 2026</p>
|
||||||
|
<p><strong>Project:</strong> WIN Student Goal Tracker</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>The MySQL database stores the application data for students and progress tracking.</p>
|
<section id="project-description">
|
||||||
|
<h2>1. Project Description</h2>
|
||||||
|
<p>
|
||||||
|
The WIN Student Goal Tracker is a web-based case management system designed to support organizations working with adults with special needs. The platform enables staff to track student goals, document services, and log critical incidents while maintaining strong privacy, auditability, and compliance with FERPA, IDEA, and FAPE.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="architecture">
|
||||||
|
<h2>2. Architecture</h2>
|
||||||
|
|
||||||
|
<h3>Technology Stack</h3>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card"><b>Frontend:</b> Angular 20</div>
|
||||||
|
<div class="card"><b>Backend:</b> .NET 9.0 + Dapper</div>
|
||||||
|
<div class="card"><b>Authentication:</b> JWT + Refresh Tokens</div>
|
||||||
|
<div class="card"><b>Database:</b> MySQL</div>
|
||||||
|
<div class="card"><b>Infrastructure:</b> Docker + VPS + Traefik</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Architecture Description</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Users</li>
|
<li>Presentation Layer: Angular</li>
|
||||||
<li>Programs</li>
|
<li>Application Layer: .NET API</li>
|
||||||
<li>Students</li>
|
<li>Data Layer: MySQL</li>
|
||||||
<li>Goals</li>
|
|
||||||
<li>Benchmarks</li>
|
|
||||||
<li>Progress Events</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<p>
|
<section id="data-flow">
|
||||||
The backend uses <strong>Dapper ORM</strong> to execute SQL queries and map results
|
<h2>3. Data Flow</h2>
|
||||||
to application objects.
|
<p><b>Create Goal:</b><br>User → Angular → API → Database → UI</p>
|
||||||
</p>
|
<p><b>View Dashboard:</b><br>User → Angular → API → Database → UI</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
<section id="hosting">
|
||||||
|
<h2>4. Hosting</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Frontend: GitHub Pages / Netlify</li>
|
||||||
|
<li>Backend: Render / Railway</li>
|
||||||
|
<li>Database: PlanetScale</li>
|
||||||
|
<li>Alternative: VPS with Docker</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card">
|
<section id="installation">
|
||||||
<h2>Infrastructure</h2>
|
<h2>5. Installation</h2>
|
||||||
|
|
||||||
<p>
|
<h3>Frontend</h3>
|
||||||
The system is deployed using Docker containers on a Virtual Private Server (VPS).
|
<pre><code>cd frontend
|
||||||
Each component runs in its own container to maintain separation and scalability.
|
npm install
|
||||||
</p>
|
npm start</code></pre>
|
||||||
|
|
||||||
<table>
|
<h3>Backend</h3>
|
||||||
<tr>
|
<pre><code>cd backend
|
||||||
<th>Container</th>
|
dotnet restore
|
||||||
<th>Function</th>
|
dotnet run</code></pre>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<h3>Docker</h3>
|
||||||
<td>Angular</td>
|
<pre><code>docker-compose up --build</code></pre>
|
||||||
<td>Frontend application</td>
|
</section>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<section id="authentication">
|
||||||
<td>.NET Core API</td>
|
<h2>6. Authentication</h2>
|
||||||
<td>Backend services</td>
|
<p>JWT-based authentication with refresh tokens and secure API access control.</p>
|
||||||
</tr>
|
</section>
|
||||||
|
|
||||||
<tr>
|
<section id="backup">
|
||||||
<td>MySQL</td>
|
<h2>7. Database Backup</h2>
|
||||||
<td>Database server</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<pre><code>mysqldump -u username -p dbname > backup.sql</code></pre>
|
||||||
<td>Traefik</td>
|
|
||||||
<td>Reverse proxy and SSL manager</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
<pre><code>mysql -u username -p dbname < backup.sql</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
<section id="environment">
|
||||||
|
<h2>8. Environment Variables</h2>
|
||||||
|
|
||||||
<div class="card">
|
<pre><code>DB_CONNECTION=...
|
||||||
<h2>Deployment</h2>
|
JWT_SECRET=...
|
||||||
|
JWT_EXPIRATION=3600</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
<p>
|
<section id="partner-statement">
|
||||||
The application is deployed using Docker containers orchestrated on a VPS.
|
<h2>9. Partner Statement</h2>
|
||||||
Traefik automatically handles HTTPS certificates and routes traffic to the
|
<p>The partner has reviewed the developer documentation and understands the system.</p>
|
||||||
appropriate container.
|
</section>
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre>
|
<section id="walkthrough">
|
||||||
User Browser
|
<h2>10. Walkthrough</h2>
|
||||||
│
|
<p>An installation walkthrough was conducted and successfully completed.</p>
|
||||||
▼
|
</section>
|
||||||
Traefik Reverse Proxy
|
|
||||||
│
|
|
||||||
├── Angular Container
|
|
||||||
│
|
|
||||||
└── .NET Core API Container
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
MySQL Container
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</div>
|
<section id="screenshots">
|
||||||
|
<h2>11. Screenshots & Analysis</h2>
|
||||||
|
<p>Lighthouse metrics and Chrome DevTools analysis should include Mobile, Tablet, and Desktop views. UX is clean with improvements needed for mobile responsiveness.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<a class="btn" href="/">Back to Project Home</a>
|
<section id="improvements">
|
||||||
|
<h2>12. Improvements</h2>
|
||||||
|
<p>Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="sustainability">
|
||||||
|
<h2>13. Sustainability</h2>
|
||||||
|
<p>Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="appendix-b">
|
||||||
|
<h2>Appendix B – Structure</h2>
|
||||||
|
<pre><code>/frontend
|
||||||
|
/backend
|
||||||
|
/database
|
||||||
|
/docker
|
||||||
|
/docs</code></pre>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
<footer>
|
|
||||||
© 2026 WIN Student Goal Tracker
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user