Chalkboard/app.html at main · QwertyIsCoding/Chalkboard · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chalk</title>
    <link rel="stylesheet" href="styles.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Open+Sans:wght@400;600&family=Montserrat:wght@400;500&family=Playfair+Display:wght@400;500&display=swap"
        rel="stylesheet">
</head>

<body>
    <div id="app">
        <header>
            <div class="logo-container">
                <img src="Media/chalkboardBanner.png" style="width: 350px; height: 100000;">
            </div>
            <nav>
                <button id="createNoteBtn">Create Note</button>
                <button id="settingsBtn">Settings</button>
                <button id="logoutBtn">Logout</button>
            </nav>
        </header>
        <main>
            <aside id="noteList">
                <!-- Note list will be populated here -->
            </aside>
            <section id="noteContent">
                <div id="noteMetadata">
                    <!-- Metadata will be displayed here -->
                </div>
                <div class="bulk-actions">
                    <button id="deleteSelectedBtn">Delete Selected</button>
                    <button id="deleteAllBtn">Delete All</button>
                    <button id="readSelectedBtn">Read Selected</button>
                    <span id="selectedCount"></span>
                </div>
                <div id="noteEditor">
                    <input type="text" id="noteTitle" placeholder="Note Title">
                    <textarea id="noteBody" placeholder="Start typing your note..."></textarea>
                </div>
                <div id="noteActions">
                    <button id="saveNoteBtn">Save</button>
                    <button id="deleteNoteBtn">Delete</button>
                    <button id="exportNoteBtn">Export</button>

                    <button id="syncNoteBtn" style="display: none;">Sync</button>
                    <button id="textToSpeechBtn" style="display: none;">Read Aloud</button>
                </div>
            </section>
        </main>
    </div>
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <h2>Login / Sign Up</h2>
            <input type="text" id="username" placeholder="Email">
            <input type="password" id="password" placeholder="Password">
            <button id="loginBtn">Login</button>
            <button id="signupBtn">Sign Up</button>
        </div>
    </div>
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <h2>Settings</h2>

            <button class="close-modal" id="closeSettingsBtn">&times;</button>
            <!--
            <label for="bgColor" style="color: white;">Background Color:</label>
            <input type="color" id="bgColor">
            <label for="fontColor" style="color: white;">Font Color:</label>
            <input type="color" id="fontColor">
            -->
            <label for="fontStyle" style="color: white;">Font Style:</label>
            <select id="fontStyle">
                <option value="Arial, sans-serif" stye="fontStyle:Arial">Arial</option>
                <option value="Times New Roman, serif" stye="fontStyle:Arial">Times New Roman</option>
                <option value="Courier New, monospace" stye="fontStyle:Courier">Courier New</option>
                <option value="Georgia, serif" stye="fontStyle:Georgia">Georgia</option>
                <option value="Verdana, sans-serif" stye="fontStyle:Verdana">Verdana</option>
                <option value="Roboto, sans-serif" stye="fontStyle:Roboto">Roboto</option>
                <option value="Open Sans, sans-serif" stye="fontStyle:Arial">Open Sans</option>
                <option value="Montserrat, sans-serif" stye="fontStyle:Arial">Montserrat</option>
                <option value="Playfair Display, serif" stye="fontStyle:Arial">Playfair Display</option>
                <option type="checkbox" id="textToSpeech" style="color: white"> Enable TTS</option>
            </select>
            <button id="saveSettingsBtn">Save Settings</button>
            <button id="deleteAccountBtn">Delete Account</button>
        </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore-compat.js"></script>


    <script src="script.js"></script>

    <!--
    <script src="Backend/authentication.js"></script>
    <script src="Events/buttonHandling.js"></script>
    <script src="Events/noteManagement.js"></script>
    <script src="Events/settings.js"></script>
    <script src="Featureset/readText.js"></script>
    <script src="Featureset/exportAs.js"></script>
    <script src="Backend/acountManagement.js"></script>
    -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

</body>

</html>