-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
179 lines (170 loc) · 9.02 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComicMachine</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://api.varnamproject.com/embed.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-3">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="30" height="30" class="d-inline-block align-top" alt="Logo">
ComicMachine
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fonts.html">Fonts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-2" id="library">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Library</span>
</div>
<div class="card-body">
<select id="collectionSelect" class="form-select form-select-sm mb-2">
<option value="">Select Collection</option>
<!-- Options will be populated by JavaScript -->
</select>
<div id="galleryDisplay" class="row row-cols-3 g-2 mb-2">
<!-- Images will be displayed here -->
</div>
<div id="paginationControls" class="d-flex justify-content-between align-items-center">
<button id="prevPage" class="btn btn-sm btn-primary" disabled>Prev</button>
<span id="currentPage" class="small"></span>
<button id="nextPage" class="btn btn-sm btn-primary">Next</button>
</div>
</div>
</div>
</div>
<div class="col-md-7" id="artboard">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span>Artboard</span>
<div class="btn-group" role="group">
<button type="button" id="deleteBtn" class="btn btn-outline-secondary btn-sm" title="Delete selected item" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="bi bi-trash"></i></button>
<button type="button" class="btn btn-outline-secondary btn-sm" title="Move selected item up" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="bi bi-arrow-up"></i></button>
<button type="button" class="btn btn-outline-secondary btn-sm" title="Move selected item down" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="bi bi-arrow-down"></i></button>
<button type="button" id="clearCanvasBtn" class="btn btn-outline-secondary btn-sm" title="Clear all items from canvas" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="bi bi-x-lg"></i></button>
<button type="button" id="downloadBtn" class="btn btn-outline-primary btn-sm" title="Download canvas as image" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="bi bi-download"></i></button>
<label class="btn btn-outline-success btn-sm" title="Upload image to canvas" data-bs-toggle="tooltip" data-bs-placement="bottom">
<i class="bi bi-image"></i>
<input type="file" id="imageUpload" accept="image/png, image/jpeg" style="display: none;">
</label>
</div>
</div>
<div class="card-body">
<div class="artboard-area">
<canvas id="comic-artboard" width="800" height="600" class="border"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-3" id="tools">
<div class="card">
<div class="card-header">Tools</div>
<div class="card-body">
<h6 class="card-subtitle mb-2">Add Text</h6>
<div class="form-group mb-2">
<div class="row align-items-center">
<div class="col-4">
<label for="languageSelect" class="col-form-label">
<i class="bi bi-translate me-1"></i>Language
</label>
</div>
<div class="col-8">
<select class="form-select" id="languageSelect">
<!-- Options will be dynamically populated via JavaScript -->
</select>
</div>
</div>
</div>
<div class="form-group mb-2">
<textarea id="input" rows="5" class="form-control"></textarea>
</div>
<div class="row g-2 mb-3">
<div class="col-6">
<select class="form-select form-select-sm" id="fontSelector">
<option>Font</option>
</select>
</div>
<div class="col-3">
<input type="number" class="form-control form-control-sm" value="20">
</div>
<div class="col-3">
<button id="addTextButton" class="btn btn-primary btn-sm w-100">Add text</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Varnam JS -->
<script src="https://api.varnamproject.com/embed.js"></script>
<script type="text/javascript">
const input = document.getElementById("input");
const languageSelect = document.getElementById("languageSelect");
// Define an array of language options
const languages = [
{ code: "as", name: "অসমীয়া" },
{ code: "bn", name: "বাংলা" },
{ code: "en", name: "English" },
{ code: "gu", name: "ગુજરાતી" },
{ code: "hi", name: "हिन्दी" },
{ code: "kn", name: "ಕನ್ನಡ" },
{ code: "ml", name: "മലയാളം" },
{ code: "ml-inscript", name: "മലയാളം (Inscript)" },
{ code: "mr", name: "मराठी" },
{ code: "ne", name: "नेपाली" },
{ code: "or", name: "ଓଡ଼ିଆ" },
{ code: "pa", name: "ਪੰਜਾਬੀ" },
{ code: "sa", name: "संस्कृतम्" },
{ code: "ta", name: "தமிழ்" },
{ code: "te", name: "తెలుగు" }
];
// Populate the language dropdown dynamically
languages.forEach(function(lang) {
let option = document.createElement("option");
option.value = lang.code;
option.text = lang.name;
if(lang.code === "ml") { // Set Malayalam as default
option.selected = true;
}
languageSelect.appendChild(option);
});
// Initialize Varnam with default scheme (Malayalam)
plugVarnam(input, {
schemeID: "ml", // Default to Malayalam
});
// Update Varnam scheme when language changes
languageSelect.addEventListener("change", function() {
plugVarnam(input, {
schemeID: languageSelect.value,
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<script defer src="index.js" type="module"></script>
</body>
</html>