sceneslot/index.dev.html at master · Android-Tipster/sceneslot · 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
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SceneSlot — rehearsal schedules that solve themselves</title>
<meta name="description" content="Drop in your scene breakdown and conflict sheet. SceneSlot builds the rehearsal calendar: full casts, no wasted calls, and it tells you on day one which scenes can never meet.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header>
  <div class="brand">Scene<span class="slot">Slot</span></div>
  <p class="tagline">Paste your scene breakdown and conflict sheet. Get a rehearsal calendar with full casts, tight calls, and a day-one warning for every scene that can never meet.</p>
  <div class="marquee-rule"></div>
</header>

<main>
  <nav class="tabs" id="tabs">
    <button data-view="show" class="active">Show</button>
    <button data-view="cast">Cast <span class="count" id="countCast">0</span></button>
    <button data-view="scenes">Scenes <span class="count" id="countScenes">0</span></button>
    <button data-view="conflicts">Conflicts <span class="count" id="countConflicts">0</span></button>
    <button data-view="schedule">Schedule</button>
  </nav>

  <!-- ============ SHOW ============ -->
  <section class="view active" id="view-show">
    <div class="view-head">
      <h2>The show</h2>
      <div class="hint">Name it, then list every rehearsal slot you have between now and opening.</div>
      <div class="spacer"></div>
      <button class="btn" id="btnDemo">Load demo show</button>
      <button class="btn" id="btnSaveProj">Save project</button>
      <button class="btn" id="btnLoadProj">Open project</button>
      <input type="file" id="fileProj" accept=".json,.sceneslot" style="display:none">
    </div>
    <div class="card">
      <table class="grid" style="max-width:560px">
        <tr><td style="width:120px">Show title</td><td><input type="text" id="showName" placeholder="e.g. The Music Man"></td></tr>
        <tr><td>Company</td><td><input type="text" id="orgName" placeholder="e.g. Riverside Community Players"></td></tr>
      </table>
    </div>
    <div class="card">
      <div class="view-head"><h2 style="font-size:19px">Rehearsal slots</h2>
        <div class="spacer"></div>
        <button class="btn" id="btnAddSlot">Add slot</button>
        <button class="btn" id="btnPasteSlots">Paste from spreadsheet</button>
      </div>
      <table class="grid" id="tblSlots">
        <thead><tr><th>Date</th><th>Start</th><th>End</th><th>Location</th><th></th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
  </section>

  <!-- ============ CAST ============ -->
  <section class="view" id="view-cast">
    <div class="view-head">
      <h2>Cast list</h2>
      <div class="hint">One row per role. Double-cast an actor by giving them several roles.</div>
      <div class="spacer"></div>
      <button class="btn" id="btnAddRole">Add role</button>
      <button class="btn" id="btnPasteCast">Paste from spreadsheet</button>
    </div>
    <div class="card">
      <table class="grid" id="tblRoles">
        <thead><tr><th>Role</th><th>Actor</th><th></th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
  </section>

  <!-- ============ SCENES ============ -->
  <section class="view" id="view-scenes">
    <div class="view-head">
      <h2>Scene breakdown</h2>
      <div class="hint">Characters are comma-separated role names. Reps = how many times it needs rehearsal.</div>
      <div class="spacer"></div>
      <button class="btn" id="btnAddScene">Add scene</button>
      <button class="btn" id="btnPasteScenes">Paste from spreadsheet</button>
    </div>
    <div class="card">
      <table class="grid" id="tblScenes">
        <thead><tr><th style="width:24%">Scene / song</th><th>Characters</th><th>Min</th><th>Reps</th><th>Priority</th><th></th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
  </section>

  <!-- ============ CONFLICTS ============ -->
  <section class="view" id="view-conflicts">
    <div class="view-head">
      <h2>Conflict sheet</h2>
      <div class="hint">Click a cell to mark an actor out for that slot. Or paste your whole conflict grid.</div>
      <div class="spacer"></div>
      <button class="btn" id="btnPasteConflicts">Paste conflict grid</button>
    </div>
    <div class="card conflict-wrap" id="conflictGrid"></div>
  </section>

  <!-- ============ SCHEDULE ============ -->
  <section class="view" id="view-schedule">
    <div class="view-head">
      <h2>The schedule</h2>
      <div class="spacer"></div>
      <button class="btn primary big" id="btnSolve">Build my schedule</button>
    </div>
    <div id="feasibility"></div>
    <div id="results"></div>
  </section>
</main>

<!-- paste modal -->
<dialog id="dlgPaste">
  <h3 id="pasteTitle">Paste from spreadsheet</h3>
  <p class="sub" id="pasteHint"></p>
  <textarea id="pasteBox" placeholder="Paste here (straight from Google Sheets or Excel)"></textarea>
  <div class="msg" id="pasteMsg"></div>
  <div class="toolbar">
    <button class="btn primary" id="pasteGo">Import</button>
    <button class="btn ghost" id="pasteCancel">Cancel</button>
  </div>
</dialog>

<!-- pro modal -->
<dialog id="dlgPro">
  <h3>SceneSlot Pro</h3>
  <p class="sub">One-time purchase. Unlimited show size, printable call sheets, and a personal calendar file for every actor. The key works offline, forever, on this and every production after it.</p>
  <input type="text" id="proKey" placeholder="SCENESLOT-XXXX-XXXX-XXXX">
  <div class="msg" id="proMsg"></div>
  <div class="toolbar">
    <button class="btn primary" id="proActivate">Activate</button>
    <a class="btn" id="proBuy" href="#" target="_blank" rel="noopener">Get a key, $29</a>
    <button class="btn ghost" id="proCancel">Close</button>
  </div>
</dialog>

<footer>
  SceneSlot runs entirely in your browser. Your cast, conflicts, and schedule never leave this machine.<br>
  <span id="proState"></span>
</footer>

<script type="module" src="js/app.js"></script>
</body>
</html>