https://sprydosystems.com/employee-portal.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta name="description" content="Sprydo Systems Employee Portal for browser-fillable weekly reports, timesheets, and the employee referral program.">
7  <title>Employee Portal | Sprydo Systems</title>
8  <link rel="stylesheet" href="css/style.css">
9  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230057FF' d='M13 2L3 14h9l-1 8 10-12h-9z'/></svg>">
10  <style>
11    .portal-hero { min-height: 78vh; padding: 150px 5% 80px; background: radial-gradient(circle at 20% 20%, rgba(0,87,255,.25), transparent 35%), radial-gradient(circle at 80% 10%, rgba(0,212,255,.18), transparent 30%), linear-gradient(135deg, #03142f 0%, #061d43 45%, #020617 100%); color: #fff; position: relative; overflow: hidden; }
12    .portal-hero:before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent); }
13    .portal-hero .container { position:relative; z-index:1; }
14    .portal-hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center; }
15    .portal-title { font-family:var(--ff-display); font-size:clamp(2.6rem,6vw,5.2rem); line-height:.95; letter-spacing:-.05em; margin:20px 0; }
16    .portal-lead { color:rgba(255,255,255,.72); font-size:1.08rem; line-height:1.8; max-width:650px; }
17    .portal-panel { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:28px; backdrop-filter: blur(16px); box-shadow:0 30px 80px rgba(0,0,0,.35); }
18    .portal-panel-row { display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1); }
19    .portal-panel-row:last-child { border-bottom:0; }
20    .portal-panel strong { display:block; color:#fff; font-family:var(--ff-display); font-size:1rem; margin-bottom:4px; }
21    .portal-panel span { color:rgba(255,255,255,.55); font-size:.85rem; line-height:1.5; }
22    .portal-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(0,212,255,.12); color:#7dd3fc; border:1px solid rgba(125,211,252,.25); font-weight:700; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
23    .portal-tools { margin-top:-54px; position:relative; z-index:2; }
24    .portal-tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
25    .portal-tool { background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:26px; padding:30px; box-shadow:0 24px 70px rgba(15,23,42,.12); transition:.25s ease; }
26    .portal-tool:hover { transform:translateY(-6px); box-shadow:0 32px 90px rgba(15,23,42,.16); }
27    .portal-tool-icon { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(0,87,255,.12),rgba(0,212,255,.12)); color:var(--electric); margin-bottom:18px; }
28    .portal-tool h3 { font-family:var(--ff-display); font-size:1.35rem; color:var(--navy); margin-bottom:10px; }
29    .portal-tool p { color:var(--gray-500); line-height:1.7; margin-bottom:22px; min-height:76px; }
30    .portal-process { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gray-100); border:1px solid var(--gray-100); border-radius:24px; overflow:hidden; }
31    .portal-process-card { background:#fff; padding:28px; }
32    .portal-process-card .num { font-family:var(--ff-display); font-size:2rem; color:rgba(0,87,255,.2); font-weight:800; margin-bottom:10px; }
33    .portal-process-card h4 { font-family:var(--ff-display); color:var(--navy); margin-bottom:8px; }
34    .portal-process-card p { color:var(--gray-500); font-size:.9rem; line-height:1.65; }
35    @media(max-width:900px){ .portal-hero-grid,.portal-tool-grid,.portal-process { grid-template-columns:1fr; } .portal-tools { margin-top:0; } }
36  </style>
37</head>
38<body>

39<script src="js/components.js"></script>

39

40<script>injectNav('portal');</script>

40
41
42<section class="portal-hero">
43  <div class="container">
44    <div class="portal-hero-grid">
45      <div>
46        <div class="breadcrumb" style="color:rgba(255,255,255,.6)"><a href="index.html" style="color:#fff">Home</a><span class="breadcrumb-sep">›</span><span>Employee Portal</span></div>
47        <span class="portal-badge">Internal Forms</span>
48        <h1 class="portal-title">Employee reports. Clean copies. No login.</h1>
49        <p class="portal-lead">Complete weekly reports and timesheets in the browser, print the completed form, and send the final copy to HR or the assigned supervisor/client contact. Employees can also submit qualified candidate referrals through the Employee Referral Program.</p>
50        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:28px">
51          <a href="weekly-report.html" class="btn btn-primary btn-lg">Open Weekly Report</a>
52          <a href="timesheet.html" class="btn btn-white btn-lg">Open Timesheet</a>
53          <a href="referral.html" class="btn btn-outline btn-lg">Employee Referral Program</a>
54        </div>
55      </div>
56      <div class="portal-panel">
57        <div class="portal-panel-row"><div><strong>Due date</strong><span>Every Friday before 6:00 PM EST unless otherwise directed.</span></div></div>
58        <div class="portal-panel-row"><div><strong>Submission</strong><span>Email completed copies to HR or the required manager/client approver.</span></div></div>
59        <div class="portal-panel-row"><div><strong>HR contact</strong><span>[email protected] · 980-246-8661</span></div></div>
60        <div class="portal-panel-row"><div><strong>Office</strong><span>1905 J N Pease Pl, Ste 104, Charlotte, NC 28262</span></div></div>
61      </div>
62    </div>
63  </div>
64</section>
65
66<section class="section portal-tools">
67  <div class="container">
68    <div class="portal-tool-grid">
69      <article class="portal-tool">
70        <div class="portal-tool-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
71        <h3>Weekly Report</h3>
72        <p>Use this for client/project details, weekly hours, accomplishments, blockers, and signatures.</p>
73        <a href="weekly-report.html" class="btn btn-primary">Fill Weekly Report</a>
74      </article>
75      <article class="portal-tool">
76        <div class="portal-tool-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
77        <h3>Timesheet</h3>
78        <p>Use this for daily time entry, regular hours, overtime, weekly totals, location, and certification.</p>
79        <a href="timesheet.html" class="btn btn-primary">Fill Timesheet</a>
80      </article>
81      <article class="portal-tool">
82        <div class="portal-tool-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg></div>
83        <h3>Employee Referral</h3>
84        <p>Refer qualified candidates for open positions. Eligible referrals may qualify for the employee referral bonus.</p>
85        <a href="referral.html" class="btn btn-primary">Submit Referral</a>
86      </article>
87      <article class="portal-tool">
88        <div class="portal-tool-icon"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
89        <h3>Blank PDF</h3>
90        <p>Download the original weekly report template when a blank offline copy is required.</p>
91        <a href="Sprydo_Systems_Employee_Weekly_Reports.pdf" download class="btn btn-outline-dark">Download Blank PDF</a>
92      </article>
93    </div>
94  </div>
95</section>
96
97<section class="section light-section">
98  <div class="container">
99    <div class="section-header text-center">
100      <p class="section-eyebrow">Process</p>
101      <h2 class="section-title">Use the same process every week.</h2>
102    </div>
103    <div class="portal-process">
104      <div class="portal-process-card"><div class="num">01</div><h4>Open form</h4><p>Select Weekly Report or Timesheet from the Employee Portal.</p></div>
105      <div class="portal-process-card"><div class="num">02</div><h4>Complete fields</h4><p>Enter employee, client, project, hours, notes, and signature details.</p></div>
106      <div class="portal-process-card"><div class="num">03</div><h4>Print copy</h4><p>Use the print button at the bottom of the form to generate the final copy.</p></div>
107      <div class="portal-process-card"><div class="num">04</div><h4>Email HR</h4><p>Send the completed document to HR or the assigned approval contact.</p></div>
108    </div>
109  </div>
110</section>
111

112<script src="js/components.js"></script>

112

113<script>injectFooter();</script>

113

114<script src="js/main.js"></script>

114
115</body>
116</html>