Edit SiloCalendar

Source Code Viewer 6893 bytes loaded

<?php
$pageTitle = "SiloCalendar";
$logo = "/silocloud/assets/images/silodrive-logo.png";

$events = [
  ["day"=>"30", "date"=>"MAY, SAT", "time"=>"Today", "title"=>"SiloCloud Calendar Installed", "type"=>"system"],
  ["day"=>"1", "date"=>"JUN, MON", "time"=>"1 – 1:30pm", "title"=>"Urban Edge / SUV TV / Weekly Meeting", "type"=>"meeting"],
  ["day"=>"8", "date"=>"JUN, MON", "time"=>"1 – 1:30pm", "title"=>"Urban Edge / SUV TV / Weekly Meeting", "type"=>"meeting"],
  ["day"=>"14", "date"=>"JUN, SUN", "time"=>"All day", "title"=>"Flag Day", "type"=>"holiday"],
  ["day"=>"19", "date"=>"JUN, FRI", "time"=>"All day", "title"=>"Juneteenth", "type"=>"holiday"],
  ["day"=>"21", "date"=>"JUN, SUN", "time"=>"All day", "title"=>"Father's Day", "type"=>"holiday"],
  ["day"=>"29", "date"=>"JUN, MON", "time"=>"1 – 1:30pm", "title"=>"Urban Edge / SUV TV / Weekly Meeting", "type"=>"meeting"],
  ["day"=>"4", "date"=>"JUL, SAT", "time"=>"All day", "title"=>"Independence Day", "type"=>"holiday"]
];
?>
<!doctype html>
<html lang="en">
<head><link rel="icon" type="image/png" href="/silocloud/assets/images/cloud.png">
<meta charset="utf-8">
<title><?= htmlspecialchars($pageTitle) ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root{--bg:#f5f7fb;--panel:#fff;--line:#dfe5ee;--text:#101828;--muted:#667085;--blue:#2563eb;--green:#16a34a;--red:#ef4444;--r:8px}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
.app{height:100vh;display:grid;grid-template-columns:245px minmax(0,1fr);overflow:hidden}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:16px;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;height:52px;margin-bottom:20px}
.brand img{width:42px;height:42px;object-fit:contain}
.brand b{font-size:24px}.brand small{color:var(--muted)}
.create{width:132px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:900;margin-bottom:22px}
.mini h3,.cal-list h3{font-size:15px;margin:18px 0 10px}
.month{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fbfcff}
.month-head{display:flex;justify-content:space-between;font-weight:900;margin-bottom:10px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center;font-size:11px}
.day.active{background:var(--blue);color:#fff;border-radius:50%;font-weight:900}
.side-item{height:32px;display:flex;align-items:center;gap:8px;font-size:14px}
.box{width:16px;height:16px;border-radius:3px;background:var(--blue)}
.box.green{background:#16a34a}.box.purple{background:#7c3aed}.box.orange{background:#f59e0b}

.main{height:100vh;display:grid;grid-template-rows:70px minmax(0,1fr);overflow:hidden}
.top{background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:18px;padding:0 24px}
.top h1{margin:0;font-size:26px}
.top-actions{display:flex;align-items:center;gap:10px}
.btn{height:38px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 16px;font-weight:900}
.btn.primary{background:#eaf2ff;color:#1f5eff;border-color:#bcd3ff}
.timeline{height:100%;overflow:auto;background:#fff}
.today-line{height:46px;display:grid;grid-template-columns:110px 1fr;align-items:center;border-bottom:1px solid var(--line);padding:0 24px}
.today-dot{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.redline{height:2px;background:var(--red)}
.event{min-height:58px;display:grid;grid-template-columns:110px 160px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line);padding:0 24px}
.datecell{display:flex;align-items:center;gap:10px}
.daynum{font-size:22px;font-weight:900}
.datecell small{color:var(--muted);font-size:11px;font-weight:900}
.time{display:flex;align-items:center;gap:12px}
.marker{width:12px;height:12px;border-radius:50%;border:2px solid var(--blue)}
.marker.holiday{background:#67ad45;border-color:#67ad45}
.marker.system{background:var(--green);border-color:var(--green)}
.title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title small{font-weight:400;color:#475467;margin-left:8px}
</style>
</head>
<body>
<div class="app">
  <aside class="sidebar">
    <div class="brand">
      <img src="<?= htmlspecialchars($logo) ?>">
      <div><b>SiloCalendar</b><br><small>User Dashboard Calendar</small></div>
    </div>

    <button class="create">+ Create</button>

    <section class="mini">
      <h3>May 2026</h3>
      <div class="month">
        <div class="month-head"><span>May</span><span>‹ ›</span></div>
        <div class="days">
          <?php foreach(["S","M","T","W","T","F","S",26,27,28,29,30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30] as $d): ?>
          <div class="day <?= $d==30 ? 'active' : '' ?>"><?= htmlspecialchars((string)$d) ?></div>
          <?php endforeach; ?>
        </div>
      </div>
    </section>

    <section class="cal-list">
      <h3>My Calendars</h3>
      <div class="side-item"><span class="box"></span> Lael Alexander</div>
      <div class="side-item"><span class="box green"></span> Birthdays</div>
      <div class="side-item"><span class="box purple"></span> Family</div>
      <div class="side-item"><span class="box orange"></span> Noitavonne</div>

      <h3>Other Calendars</h3>
      <div class="side-item"><span class="box green"></span> Holidays in United States</div>
    </section>
  </aside>

  <main class="main">
    <header class="top">
      <h1>May – Nov 2026</h1>
      <div></div>
      <div class="top-actions">
        <button class="btn">Today</button>
        <button class="btn">‹</button>
        <button class="btn">›</button>
        <button class="btn primary">Schedule</button>
      </div>
    </header>

    <section class="timeline">
      <div class="today-line">
        <div class="today-dot">30</div>
        <div><small style="color:#2563eb;font-weight:900">MAY, SAT</small><div class="redline"></div></div>
      </div>

      <?php foreach($events as $e): ?>
      <div class="event">
        <div class="datecell">
          <span class="daynum"><?= htmlspecialchars($e["day"]) ?></span>
          <small><?= htmlspecialchars($e["date"]) ?></small>
        </div>
        <div class="time">
          <span class="marker <?= htmlspecialchars($e["type"]) ?>"></span>
          <?= htmlspecialchars($e["time"]) ?>
        </div>
        <div class="title">
          <?= htmlspecialchars($e["title"]) ?>
          <?php if($e["type"] === "meeting"): ?><small>https://silo.meet/session/weekly</small><?php endif; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </section>
  </main>
</div>
</body>
</html>