Libretto/index.html at main · andreysgit/Libretto · 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
<!DOCTYPE html>

<html>

<head>

    <title>Libretto - EPUB Library Manager</title>
    <link rel="stylesheet" href="index.css">
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">

</head>

<body>

    <div class="container">

        <div class="sidebar">

            <h2>Add New Book</h2>

            <div class="form-group">

                <label for="bookTitle">Title</label>
                <input type="text" id="bookTitle" placeholder="Book title">

            </div>

            <div class="form-group">

                <label for="bookAuthor">Author</label>
                <input type="text" id="bookAuthor" placeholder="Book author">

            </div>

            <div class="form-group">

                <label for="bookDate">Publication Date</label>
                <input type="date" id="bookDate" placeholder="Publication Date">

            </div>

            <div class="form-group">

                <label for="bookDescription">Description</label>
                <textarea id="bookDescription" rows="4" placeholder="Book description"></textarea>

            </div>

            <div class="form-group">

                <label for="bookTags">Tags (comma separated)</label>
                <input type="text" id="bookTags" placeholder="fiction, fantasy, etc.">
            </div>

            <div class="form-group">

                <button id="selectEpubBtn" class="button is-primary">Select EPUB File</button>
                <div id="selectedEpubFile" style="margin-top: 5px; font-size: 12px; color: #666;"></div>

            </div>

            <div class="form-group">
                <button id="selectCoverBtn">Select Cover Image</button>
                <div id="selectedCoverImageDiv" class="cover-frame"><img id="selectedCoverImage"></div>
                <div id="selectedCoverFile" style="margin-top: 5px; font-size: 12px; color: #666;">Placeholder</div>
            </div>

            <button id="addBookBtn" disabled>Add Book</button><button id="resetBtn">Reset</button>

            <div id="addBookBtnLabel" style="margin-top: 5px; font-size: 12px; color: #666;">Destination Path</div>


        </div>

        <div class="main-content" id="drop-zone">
            <h2>Your Library</h2>
            <div class="book-grid" id="bookGrid"></div>
        </div>
    </div>

    <!-- Book Details Modal -->
    <div class="modal" id="bookModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalBookTitle">Book Title</h2>
                <button class="close-modal" id="closeModal">&times;</button>
            </div>

            <div class="tabs">
                <div class="tab active" data-tab="details">Details</div>
                <div class="tab" data-tab="read">Read</div>
            </div>

            <div class="tab-content active" id="detailsTab">
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 0 0 150px;">
                        <div id="modalBookCover" style="width: 150px; height: 200px; background-color: #eee; background-size: cover; background-position: center;"></div>
                    </div>
                    <div style="flex: 1;">
                        <p><strong>Author:</strong> <span id="modalBookAuthor"></span></p>
                        <p><strong>Description:</strong></p>
                        <p id="modalBookDescription"></p>
                        <div class="book-tags" id="modalBookTags"></div>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <button id="deleteBookBtn">Delete Book</button>
                </div>
            </div>

            <div class="tab-content" id="readTab">
                <div style="text-align: center; padding: 40px 0;">
                    <p>This feature would integrate with an EPUB reader.</p>
                    <div id="reader" style="width: 100%; height: 600px;"></div>
                    <button id="openExternalBtn">Open in External Reader</button>
                </div>
            </div>

        </div>
    </div>

    <script src="./node_modules/jszip/dist/jszip.min.js"></script>
    <script src="./node_modules/epubjs/dist/epub.min.js"></script>
    <script type="module" src="render.js"></script>


</body>
</html>