Atlaskor/mediakor2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add index.php

Browse Source
This commit is contained in:
Atlaskor
2025-11-25 22:11:47 +00:00
commit 312f194da7
1 changed files with 551 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
index.php Normal file
View File

@@ -0,0 +1,551 @@
<?php
// Simple example post data — you can swap this out for a database later.
$posts = [
[
'title' => 'Welcome to Mediakor',
'meta' => 'System Log • Today',
'body' => 'Mediakor is your central hub for projects, servers, and experiments. Use the nav on the left to explore each sector of the network.'
],
[
'title' => 'Status: Core Services Online',
'meta' => 'Monitoring • Uptime',
'body' => 'Web stack, game servers, and media nodes are all reporting nominal. Check the “Status Panel” section for real-time dashboards.'
],
[
'title' => 'Latest Deployment',
'meta' => 'Deploy • v1.0',
'body' => 'A new build has been pushed to the cluster. Patch notes, changelogs, and rollback instructions are available in the Documentation dock.'
],
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mediakor — Command Hub</title>
<style>
:root{
--bg:#050608;
--bg-alt:#0b0c10;
--panel:#101218;
--panel-soft:#161923;
--accent:#ff8c32;
--accent-soft:rgba(255,140,50,0.18);
--accent-border:rgba(255,140,50,0.5);
--text:#f3f4f6;
--muted:#a1a1aa;
--divider:#23232e;
--shadow:0 0 40px rgba(0,0,0,0.65);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
min-height:100vh;
background:
radial-gradient(800px 600px at 75% 0%, #17141f 0, transparent 60%),
radial-gradient(900px 700px at 0% 100%, #141019 0, transparent 60%),
linear-gradient(160deg,#050608,#050608 40%,#080910 100%);
color:var(--text);
font:500 15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
display:flex;
flex-direction:column;
overflow-x:hidden;
}
/* subtle stars */
body::before{
content:"";
position:fixed;
inset:-200px;
background-image:
radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.25) 0,transparent 60%),
radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.2) 0,transparent 60%),
radial-gradient(1px 1px at 80% 30%,rgba(255,255,255,.2) 0,transparent 60%),
radial-gradient(1px 1px at 20% 60%,rgba(255,255,255,.18) 0,transparent 60%);
opacity:0.35;
z-index:-1;
}
/* Header */
.mk-header{
padding:14px 22px 10px;
border-bottom:1px solid var(--divider);
background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(5,5,10,.4));
backdrop-filter:blur(18px);
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:20;
}
.mk-logo{
display:flex;
align-items:baseline;
gap:8px;
}
.mk-logo-main{
font-size:26px;
letter-spacing:0.16em;
text-transform:uppercase;
font-weight:700;
color:var(--accent);
}
.mk-logo-sub{
font-size:12px;
text-transform:uppercase;
letter-spacing:0.24em;
color:var(--muted);
}
.mk-header-pill{
padding:4px 10px;
border-radius:999px;
border:1px solid var(--accent-border);
background:radial-gradient(circle at 0 0,rgba(255,140,50,.25),transparent 55%);
font-size:11px;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--muted);
display:flex;
align-items:center;
gap:8px;
}
.mk-pulse{
width:7px;
height:7px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px rgba(255,140,50,.9);
animation:mk-pulse 1.4s infinite;
}
@keyframes mk-pulse{
0%{transform:scale(1);opacity:1}
50%{transform:scale(1.6);opacity:.25}
100%{transform:scale(1);opacity:1}
}
/* Layout */
.mk-shell{
flex:1;
display:flex;
max-width:1400px;
width:100%;
margin:16px auto 24px;
padding:0 16px;
gap:18px;
}
/* Sidebar */
.mk-sidebar{
width:240px;
min-width:220px;
max-height:calc(100vh - 96px);
background:linear-gradient(150deg,var(--panel),#080910);
border-radius:18px;
border:1px solid var(--divider);
box-shadow:var(--shadow);
padding:14px 12px 12px;
display:flex;
flex-direction:column;
gap:10px;
position:sticky;
top:80px;
}
.mk-sidebar-title{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.14em;
color:var(--muted);
padding:0 8px;
}
.mk-nav{
list-style:none;
margin-top:4px;
}
.mk-nav-item{
margin-bottom:4px;
}
.mk-nav-link{
display:flex;
align-items:center;
gap:10px;
padding:7px 9px;
border-radius:12px;
color:var(--muted);
text-decoration:none;
font-size:13px;
border:1px solid transparent;
background:transparent;
transition:.16s ease;
cursor:pointer;
}
.mk-nav-link span.mk-dot{
width:7px;
height:7px;
border-radius:50%;
background:var(--accent-soft);
border:1px solid var(--accent-border);
}
.mk-nav-link small{
text-transform:uppercase;
letter-spacing:0.16em;
font-size:10px;
color:#71717a;
}
.mk-nav-link strong{
font-weight:600;
color:var(--text);
}
.mk-nav-link:hover{
background:radial-gradient(circle at 0 0,var(--accent-soft),transparent 55%);
border-color:var(--accent-border);
color:var(--text);
transform:translateX(2px);
}
.mk-nav-link.active{
background:linear-gradient(120deg,rgba(255,140,50,.25),rgba(0,0,0,.1));
border-color:var(--accent-border);
color:var(--text);
}
.mk-sidebar-footer{
margin-top:auto;
padding-top:8px;
border-top:1px dashed var(--divider);
font-size:11px;
color:var(--muted);
display:flex;
flex-direction:column;
gap:4px;
padding-inline:8px;
}
.mk-tag{
display:inline-flex;
align-items:center;
gap:6px;
padding:3px 8px;
border-radius:999px;
border:1px solid var(--accent-border);
background:rgba(0,0,0,.6);
font-size:10px;
text-transform:uppercase;
letter-spacing:0.16em;
}
/* Main content */
.mk-main{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:12px;
}
.mk-main-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
padding:6px 4px 4px;
}
.mk-main-title{
display:flex;
flex-direction:column;
gap:2px;
}
.mk-main-title h2{
font-size:18px;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--text);
}
.mk-main-title span{
font-size:12px;
color:var(--muted);
}
.mk-main-meta{
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.14em;
}
/* Posts */
.mk-post-list{
display:flex;
flex-direction:column;
gap:12px;
}
.mk-post{
background:linear-gradient(145deg,var(--panel),var(--panel-soft));
border-radius:18px;
border:1px solid var(--divider);
box-shadow:var(--shadow);
padding:14px 16px 13px;
position:relative;
overflow:hidden;
}
.mk-post::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(600px 220px at 105% -10%,rgba(255,140,50,.18),transparent 60%);
opacity:0.85;
pointer-events:none;
}
.mk-post-inner{
position:relative;
z-index:1;
}
.mk-post-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
margin-bottom:6px;
}
.mk-post-title{
font-size:17px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
}
.mk-post-meta{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--muted);
white-space:nowrap;
}
.mk-post-body{
font-size:14px;
color:#e4e4ea;
margin-top:2px;
}
.mk-post-footer{
margin-top:10px;
font-size:11px;
display:flex;
justify-content:space-between;
align-items:center;
color:var(--muted);
}
.mk-pill{
padding:3px 8px;
border-radius:999px;
border:1px solid var(--accent-border);
background:rgba(0,0,0,.5);
font-size:10px;
text-transform:uppercase;
letter-spacing:0.16em;
}
.mk-post-actions{
display:flex;
gap:8px;
font-size:11px;
}
.mk-post-actions button{
border:none;
outline:none;
background:transparent;
color:var(--muted);
cursor:pointer;
padding:0;
font:inherit;
opacity:.8;
}
.mk-post-actions button:hover{
opacity:1;
color:var(--accent);
}
/* Responsive */
@media (max-width:960px){
.mk-shell{
flex-direction:column;
max-width:100%;
}
.mk-sidebar{
position:static;
width:auto;
flex-direction:row;
align-items:flex-start;
max-height:none;
overflow-x:auto;
padding:10px;
}
.mk-sidebar-title,
.mk-sidebar-footer{
display:none;
}
.mk-nav{
display:flex;
gap:4px;
margin-top:0;
}
.mk-nav-item{
margin:0;
}
}
@media (max-width:640px){
.mk-header{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.mk-main-header{
flex-direction:column;
align-items:flex-start;
gap:6px;
}
}
</style>
</head>
<body>
<header class="mk-header">
<div class="mk-logo">
<div class="mk-logo-main">Mediakor</div>
<div class="mk-logo-sub">Central Command</div>
</div>
<div class="mk-header-pill">
<span class="mk-pulse"></span>
<span>Network Status: Online</span>
</div>
</header>
<main class="mk-shell">
<!-- LEFT SIDEBAR NAV -->
<aside class="mk-sidebar">
<div class="mk-sidebar-title">Navigation</div>
<ul class="mk-nav">
<li class="mk-nav-item">
<a href="#" class="mk-nav-link active">
<span class="mk-dot"></span>
<div>
<strong>Dashboard</strong><br>
<small>Core Hub</small>
</div>
</a>
</li>
<li class="mk-nav-item">
<a href="#services" class="mk-nav-link">
<span class="mk-dot"></span>
<div>
<strong>Services</strong><br>
<small>Game & Web</small>
</div>
</a>
</li>
<li class="mk-nav-item">
<a href="#status" class="mk-nav-link">
<span class="mk-dot"></span>
<div>
<strong>Status Panel</strong><br>
<small>Monitoring</small>
</div>
</a>
</li>
<li class="mk-nav-item">
<a href="#docs" class="mk-nav-link">
<span class="mk-dot"></span>
<div>
<strong>Documentation</strong><br>
<small>Wiki & Guides</small>
</div>
</a>
</li>
<li class="mk-nav-item">
<a href="#contact" class="mk-nav-link">
<span class="mk-dot"></span>
<div>
<strong>Contact</strong><br>
<small>Reach Ops</small>
</div>
</a>
</li>
</ul>
<div class="mk-sidebar-footer">
<div class="mk-tag">
<span></span>
<span>Sector: Outer Net</span>
</div>
<span>All traffic through Mediakor is monitored for anomalies and uptime.</span>
</div>
</aside>
<!-- MAIN CONTENT -->
<section class="mk-main">
<div class="mk-main-header">
<div class="mk-main-title">
<h2>Command Feed</h2>
<span>Latest entries from the Mediakor network</span>
</div>
<div class="mk-main-meta">
Feed Mode: <strong style="color:var(--accent); margin-left:4px;">Chronological</strong>
</div>
</div>
<div class="mk-post-list">
<?php foreach ($posts as $post): ?>
<article class="mk-post">
<div class="mk-post-inner">
<header class="mk-post-header">
<h3 class="mk-post-title"><?php echo htmlspecialchars($post['title']); ?></h3>
<div class="mk-post-meta"><?php echo htmlspecialchars($post['meta']); ?></div>
</header>
<div class="mk-post-body">
<?php echo nl2br(htmlspecialchars($post['body'])); ?>
</div>
<footer class="mk-post-footer">
<span class="mk-pill">Log Entry</span>
<div class="mk-post-actions">
<button type="button">View Details</button>
<button type="button">Pin</button>
</div>
</footer>
</div>
</article>
<?php endforeach; ?>
</div>
</section>
</main>
</body>
</html>