Cascade/projects_C.html at main · acm-projects/Cascade · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >

  <title>Cascade | Projects</title>

  <link rel="stylesheet" href="styles_C.css">

  <style>
    .projects-page {
      min-height: calc(100vh - 75px);
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .project-panel {
      width: 100%;
      max-width: 480px;
    }

    .project-panel h1 {
      margin-bottom: 12px;
      font-size: 30px;
    }

    .continue-button {
      width: 100%;
      margin-top: 24px;
    }

    .account-name {
      color: var(--muted);
      font-size: 13px;
    }

    .account-id {
      margin-top: 24px;
      color: var(--muted);
      font-size: 11px;
      overflow-wrap: anywhere;
    }

    #status {
      padding: 16px 24px;
      color: var(--muted);
      text-align: center;
      overflow-wrap: anywhere;
    }

    #status:empty {
      display: none;
    }
  </style>
</head>

<body data-page="projects">
  <header class="topbar">
    <a class="brand" href="index_C.html">
      <span>≋</span>
      Cascade
    </a>

    <div id="account" class="row" hidden>
      <span
        id="account-name"
        class="account-name"
      ></span>

      <button id="sign-out" type="button">
        Sign out
      </button>
    </div>
  </header>

  <p
    id="status"
    role="status"
    aria-live="polite"
  >
    Checking sign-in…
  </p>

  <!-- Shown after app1.py verifies the Clerk session. -->
  <main
    id="protected-page"
    class="projects-page"
    hidden
  >
    <section class="card project-panel">
      <h1>Your projects</h1>
      <div id="project-tiles" class="project-tiles"></div>
      <details><summary>Previous generated clips</summary><div id="clip-library" class="project-tiles"></div></details>

      <p class="muted">
        Name your project, then open the canvas.
      </p>

      <form id="project-form">
        <label for="project-name">
          Project name
        </label>

        <input
          id="project-name"
          type="text"
          placeholder="Untitled project"
          maxlength="100"
          required
        >

        <button
          class="primary continue-button"
          type="submit"
        >
          Create project →
        </button>
      </form>

      <p
        id="account-id"
        class="account-id"
      ></p>
    </section>
  </main>

  <noscript>
    <p>Please enable JavaScript to open your projects.</p>
  </noscript>

  <script src="flow_C.js"></script>
</body>
</html>