Scriptor/index.html at main · magpe-stack/Scriptor · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="pt-BR" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scriptor</title>

  <!-- SEO & PWA Meta -->
  <meta name="description" content="Scriptor - Planejamento e Escrita de Livros Literários">
  <meta name="theme-color" content="#257d0d">

  <!-- Favicon & Icons -->
  <link rel="icon" type="image/svg+xml" href="logo.svg">
  <link rel="apple-touch-icon" href="icon-192.png">
  <link rel="manifest" href="manifest.json">

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Header Superior -->
  <header class="app-header">
    <div class="brand">
      <img src="logo.svg" alt="Logotipo Scriptor" class="app-logo">
      <h1 class="app-title">Scriptor</h1>
    </div>
  </header>

  <!-- Container Principal -->
  <div class="app-container">

    <!-- Barra de Menu Lateral -->
    <nav class="sidebar" aria-label="Menu Principal">
      <ul class="menu-list main-menu">

        <!-- 1. Novo -->
        <li class="menu-item">
          <button class="icon-btn" title="Novo" aria-label="Novo" data-action="new">
            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
          </button>
        </li>

        <!-- 2. Exportar -->
        <li class="menu-item has-submenu">
          <button class="icon-btn toggle-submenu" title="Exportar" aria-label="Exportar">
            <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
          </button>
          <ul class="submenu">
            <li>
              <button class="icon-btn sub-btn" title="JSON" aria-label="Exportar JSON" data-export="json">
                <span class="badge">JSON</span>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn" title="MD" aria-label="Exportar MD" data-export="md">
                <span class="badge">MD</span>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn" title="TXT" aria-label="Exportar TXT" data-export="txt">
                <span class="badge">TXT</span>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn" title="DOCX" aria-label="Exportar DOCX" data-export="docx">
                <span class="badge">DOCX</span>
              </button>
            </li>
          </ul>
        </li>

        <!-- 3. Carregar -->
        <li class="menu-item has-submenu">
          <button class="icon-btn toggle-submenu" title="Carregar" aria-label="Carregar">
            <svg viewBox="0 0 24 24"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
          </button>
          <ul class="submenu">
            <li>
              <button class="icon-btn sub-btn" title="JSON" aria-label="Carregar JSON" data-import="json">
                <span class="badge">JSON</span>
              </button>
            </li>
          </ul>
        </li>

        <!-- 4. Teoria (Com sub-btn / theory-sub-btn) -->
        <li class="menu-item has-submenu">
          <button class="icon-btn toggle-submenu" title="Teoria" aria-label="Teoria">
            <svg viewBox="0 0 24 24"><path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zM3.97 12L12 16.39 20.03 12 12 7.61 3.97 12zM12 18l-7-3.82v3.32l7 3.82 7-3.82v-3.32L12 18z"/></svg>
          </button>
          <ul class="submenu">
            <li>
              <button class="icon-btn sub-btn theory-sub-btn" title="Língua Portuguesa" aria-label="Língua Portuguesa" data-route="theory-pt">
                <svg viewBox="0 0 24 24"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2.1l1.1-3h4.6l1.1 3H23l-4.5-12zm-2.62 7l1.62-4.41L19.12 17h-3.24z"/></svg>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn theory-sub-btn" title="Método Story Genius" aria-label="Método Story Genius" data-route="theory-storygenius">
                <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn theory-sub-btn" title="Passo a passo" aria-label="Passo a passo" data-route="theory-steps">
                <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z"/></svg>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn theory-sub-btn" title="Exemplo" aria-label="Exemplo" data-route="theory-example">
                <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
              </button>
            </li>
            <li>
              <button class="icon-btn sub-btn theory-sub-btn" title="Dicas" aria-label="Dicas" data-route="theory-tips">
                <svg viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg>
              </button>
            </li>
          </ul>
        </li>

        <!-- 5. Painel -->
        <li class="menu-item">
          <button class="icon-btn" title="Painel" aria-label="Painel" data-route="dashboard">
            <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8v-10h-8v10zm0-18v6h8V3h-8z"/></svg>
          </button>
        </li>

        <!-- 6. Fase 1 - Fundação -->
        <li class="menu-item">
          <button class="icon-btn" title="Fase 1 - Fundação" aria-label="Fase 1 - Fundação" data-route="phase1">
            <svg viewBox="0 0 24 24"><path d="M12 3L2 12h3v8h14v-8h3L12 3zm0 14.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
          </button>
        </li>

        <!-- 7. Fase 2 - Psique do Protagonista -->
        <li class="menu-item">
          <button class="icon-btn" title="Fase 2 - Psique do Protagonista" aria-label="Fase 2 - Psique do Protagonista" data-route="phase2">
            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
          </button>
        </li>

        <!-- 8. Fase 3 - Enredo Causal e Terceiro Trilho -->
        <li class="menu-item">
          <button class="icon-btn" title="Fase 3 - Enredo Causal e Terceiro Trilho" aria-label="Fase 3 - Enredo Causal e Terceiro Trilho" data-route="phase3">
            <svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
          </button>
        </li>

        <!-- 9. Fase 4 - Cartões de Cena -->
        <li class="menu-item">
          <button class="icon-btn" title="Fase 4 - Cartões de Cena" aria-label="Fase 4 - Cartões de Cena" data-route="phase4">
            <svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12z"/></svg>
          </button>
        </li>

        <!-- 10. Fase 5 - Roteiro (Roadmap) -->
        <li class="menu-item">
          <button class="icon-btn" title="Fase 5 - Roteiro (Roadmap)" aria-label="Fase 5 - Roteiro (Roadmap)" data-route="phase5">
            <svg viewBox="0 0 24 24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
          </button>
        </li>

        <!-- 11. Editor de Rascunho -->
        <li class="menu-item">
          <button class="icon-btn" title="Editor de Rascunho" aria-label="Editor de Rascunho" data-route="editor">
            <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
          </button>
        </li>
      </ul>

      <!-- Botão Modo Claro/Escuro -->
      <div class="sidebar-footer">
        <button class="icon-btn" id="theme-toggle" title="Alternar Modo Claro/Escuro" aria-label="Alternar Modo Claro/Escuro">
          <svg class="sun-icon" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
          <svg class="moon-icon" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
        </button>
      </div>
    </nav>

    <!-- Área de Conteúdo Principal -->
    <main class="main-content">
      <section id="app-view" class="welcome-container">
        <div class="welcome-overlay">
          <h2>Bem-vindo ao Scriptor</h2>
          <p>Selecione uma opção no menu lateral para começar.</p>

          <!-- Alternador de Ilustração -->
          <div class="avatar-toggle-container" style="margin-top: 14px; display: flex; gap: 8px; justify-content: center;">
            <button id="avatar-m-btn" class="card-ctrl-btn" title="Ilustração Escritor" onclick="setScriptorAvatar('m')">
              👨‍💻 Escritor
            </button>
            <button id="avatar-f-btn" class="card-ctrl-btn" title="Ilustração Escritora" onclick="setScriptorAvatar('f')">
              👩‍💻 Escritora
            </button>
          </div>
        </div>
        <img id="welcome-illustration" src="ilustra-scriptor.svg" alt="Ilustração de boas-vindas do Scriptor" class="welcome-illustration">
      </section>
    </main>

  </div>

  <!-- Scripts dos Módulos Teóricos, Formulários das Fases e Editor -->
  <script src="theory-pt.js"></script>
  <script src="theory-storygenius.js"></script>
  <script src="theory-steps.js"></script>
  <script src="theory-example.js"></script>
  <script src="theory-tips.js"></script>
  <script src="form-phase1.js"></script>
  <script src="form-phase2.js"></script>
  <script src="form-phase3.js"></script>
  <script src="form-phase4.js"></script>
  <script src="form-phase5.js"></script>
  <script src="editor.js"></script>
  <script src="dashboard.js"></script>
  <script src="export.js"></script>
  <script src="app.js"></script>
</body>
</html>