planner/og.html at gh-pages · solid-apps/planner · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    width: 1200px; height: 630px;
    font-family: -apple-system, 'Segoe UI', Roboto, 'DejaVu Sans', sans-serif;
    background: linear-gradient(180deg, #f2f4fa 0%, #e9ecf6 100%);
    color: #171a2b;
    overflow: hidden;
    position: relative;
  }
  body::before, body::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(110px); pointer-events: none;
  }
  body::before { width: 620px; height: 620px; top: -220px; left: -120px; background: rgba(129, 140, 248, 0.22); }
  body::after { width: 560px; height: 560px; bottom: -240px; right: -160px; background: rgba(79, 70, 229, 0.12); }

  .card { position: relative; height: 100%; padding: 64px 72px; display: flex; flex-direction: column; justify-content: space-between; }

  .brand { display: flex; align-items: center; gap: 16px; font-weight: 650; font-size: 30px; letter-spacing: -0.01em; }
  .brand-dot {
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(135deg, #818cf8, #4f46e5);
    display: grid; place-items: center;
  }
  .brand-dot svg { width: 32px; height: 32px; }

  .mid { display: flex; align-items: center; gap: 64px; }
  .words h1 { font-size: 58px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #1b2140; }
  .words h1 .dim { color: #6a74a8; font-weight: 500; }
  .words p { margin-top: 18px; font-size: 26px; color: #5a6480; max-width: 520px; line-height: 1.35; }

  /* Mini board: plan vs did */
  .mini {
    flex-shrink: 0;
    width: 380px; height: 300px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(30, 34, 90, 0.16);
    padding: 18px 16px 16px 46px;
    position: relative;
  }
  .mini .rail { position: absolute; left: 10px; top: 48px; font-size: 11px; font-weight: 600; color: #5b6472; display: grid; gap: 51px; }
  .mini .heads { display: flex; gap: 10px; margin-bottom: 10px; }
  .mini .heads span { flex: 1; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: #64748b; text-align: center; }
  .mini .cols { display: flex; gap: 10px; height: 218px; position: relative; }
  .mini .col { flex: 1; position: relative; border-left: 1px solid rgba(15, 23, 42, 0.05); }
  .mini .blk { position: absolute; left: 2px; right: 2px; border-radius: 7px; padding: 5px 7px; font-size: 10px; font-weight: 650; }
  .mini .plan { background: oklch(96.5% 0.03 275); border: 1px solid oklch(80% 0.09 275); border-left: 3px solid oklch(55% 0.16 275); color: #312e81; }
  .mini .did { background: oklch(96.5% 0.03 160); border: 1px solid oklch(80% 0.09 160); border-left: 3px solid oklch(55% 0.16 160); color: #064e3b; }
  .mini .tick {
    position: absolute; top: 4px; right: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #059669; color: #fff;
    font-size: 8px; display: grid; place-items: center;
  }
  .mini .now { position: absolute; left: -8px; right: 0; top: 148px; border-top: 2px solid #ef4444; }
  .mini .now::before { content: ''; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }

  .chips { display: flex; align-items: center; gap: 14px; }
  .chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.25);
    color: #4338ca; font-size: 21px; font-weight: 550;
  }
  .chip.plain { background: #fff; border-color: rgba(15, 23, 42, 0.08); color: #5a6480; }
</style>
</head>
<body>
  <div class="card">
    <div class="brand">
      <span class="brand-dot">
        <svg viewBox="0 0 32 32" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">
          <line x1="9" y1="7" x2="9" y2="25"/><line x1="16" y1="7" x2="16" y2="25"/><line x1="23" y1="7" x2="23" y2="25"/>
          <rect x="7" y="12" width="4" height="6" rx="1.4" fill="#fff" stroke="none"/>
          <rect x="14" y="10" width="4" height="5" rx="1.4" fill="#fff" stroke="none"/>
          <rect x="21" y="16" width="4" height="7" rx="1.4" fill="#fff" stroke="none"/>
        </svg>
      </span>
      Planner
    </div>

    <div class="mid">
      <div class="words">
        <h1>Plan your day.<br><span class="dim">See what you did.</span></h1>
        <p>A 24-hour board with plan and did columns, zoomable from the whole day to a focused 90 minutes.</p>
      </div>
      <div class="mini">
        <div class="heads"><span>PLAN</span><span>DID</span></div>
        <div class="rail"><span>9 AM</span><span>11 AM</span><span>1 PM</span><span>3 PM</span></div>
        <div class="cols">
          <div class="col">
            <div class="blk plan" style="top:6px;height:44px">Deep work</div>
            <div class="blk plan" style="top:78px;height:30px">Lunch</div>
            <div class="blk plan" style="top:128px;height:44px">Estate sync</div>
          </div>
          <div class="col">
            <div class="blk did" style="top:14px;height:44px">Deep work<span class="tick">✓</span></div>
            <div class="blk did" style="top:92px;height:30px">Email triage<span class="tick">✓</span></div>
          </div>
          <div class="now"></div>
        </div>
      </div>
    </div>

    <div class="chips">
      <span class="chip">Stored in your Solid pod</span>
      <span class="chip plain">Installable · Open source</span>
    </div>
  </div>
</body>
</html>