Skip to content

Commit

Permalink
root index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@krmanik
krmanik committed Aug 1, 2021
1 parent 6434302 commit b68210f
Show file tree
Hide file tree
Showing 3 changed files with 328 additions and 1 deletion.
Binary file added docs/favicon.ico
View file
Binary file not shown.
327 changes: 327 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,327 @@
<!DOCTYPE html>
<!--
Author: Infinyte7 (Mani)
-->
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="v3/js/svg.min.js"></script>
<script src="v3/js/svg.draggable.min.js"></script>
<script src="v3/js/svg.resize.min.js"></script>
<script src="v3/js/svg.select.min.js"></script>
<script src="v3/js/svg.draw.min.js"></script>
<script src="v3/js/normal.js"></script>
<script src="v3/js/index.js"></script>
<script src="v3/js/combine.js"></script>

<link href="v3/css/index.css" rel=stylesheet type=text/css>
<link href="v3/css/svg.select.min.css" rel=stylesheet type=text/css>

<!-- Image cropping -->
<link href="v3/css/cropper.css" rel="stylesheet">
<script src="v3/js/cropImage.js"></script>
<script src="v3/js/cropperjs.js"></script>


<!-- sqlite -->
<script src="v3/js/genanki/sql/sql.js"></script>

<!-- anki -->
<script src="v3/js/genanki/anki/anki_hash.js"></script>
<script src="v3/js/genanki/anki/genanki.js"></script>
<script src="v3/js/genanki/anki/db.js"></script>

<!-- zip .apkg -->
<script src="v3/js/genanki/jszip.min.js"></script>

<!-- File saver -->
<script src="v3/js/genanki/filesaver/FileSaver.min.js"></script>

<script src="v3/js/genanki/config.js"></script>
<script src="v3/js/genanki/index.js"></script>

<!-- older safari do not support big int so it is polyfill -->
<script src="v3/js/genanki/BigInteger.min.js"></script>

<title>
Anki Image Occlusion
</title>
</head>

<body>

<header>
<div style="width: -webkit-fill-available;">
<div class="toolbar-button" style="float: left;" onclick="sideNavMain();"><i id="menu-icon"
class="material-icons">menu</i></div>
<div id="page-title-id" class="toolbar-button" style="float: left;font-size: 24px;">Normal Cloze</div>

<div id="done-export-all" class="toolbar-button" style="float: right; display: block;" onclick="exportDeck();"><i
class="material-icons">get_app</i></div>

<div id="done-btn" class="toolbar-button" style="float: right;" onclick="createNormalCloze();"><i
class="material-icons">done</i></div>

<div id="group-done-btn" class="toolbar-button" style="float: right; display: none;"
onclick="createGroupCloze();"><i class="material-icons">done_all</i></div>

<div id="combine-done-btn" class="toolbar-button" style="float: right; display: none;"
onclick="createCombineCloze();"><i class="material-icons">check_circle</i></div>


<div id="close-add-note-btn" class="toolbar-button" style="float: right; display: none;"
onclick="closeAddNoteNav()"><i class="material-icons">close</i></div>
</div>
</header>

<header-2>
<div style="display: inline; padding-left: 10px;">
<div class="button">
<label for="uploadImage"><i class="material-icons" style="color: #43a047;">add_photo_alternate</i></label>
<input id="uploadImage" type="file" name="myPhoto" onchange="addImage();"></input>
</div>

<div id="cropImageBtnId" onclick="cropImage();" class="button">
<i id="cropImageBtnIcon" style="color: #039be5;" class="material-icons">crop_free</i>
</div>
</div>

<div id="merge-rect-btn" onclick="createGroupWithNewRects();" class="button" style="float: right; display: none;">
<i class="material-icons">crop_free</i>
</div>

<div id="groupButton" style="float: right; margin: -4px; display: none;">
<label for="addState"><i id="iconGroup" class="material-icons"
style="color: #607d8b; margin: 10px;">collections</i></label>
<input id="addState" type="checkbox" style="display: none;" value="false">
</div>

<div id="color-palette-btn" onclick="colorPalette();" class="button"
style="float: right; display: block; pointer-events: unset; color: rgb(96, 125, 139);">
<i class="material-icons">palette</i>
</div>

<div style="float: right; padding-right: 10px;">
<div onclick="zoomIn();" class="button"><i class="material-icons" style="color: #455A64;">zoom_in</i></div>
<div onclick="zoomOut();" class="button"><i class="material-icons" style="color: #455A64;">zoom_out</i></div>
<div onclick="resetZoom();" class="button"><i class="material-icons" style="color: #455A64;">zoom_out_map</i>
</div>
</div>
</header-2>


<!-- color palette -->
<header-3 id="color-palette-header" style="display: none;">
<div onclick="changeColorPalette(this);" class="button" color="#f44336" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #f44336; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#4caf50" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #4caf50; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#2196f3" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #2196f3; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#009688" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #009688; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#3f51b5" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #3f51b5; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#9c27b0" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #9c27b0; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#ff9800" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #ff9800; padding-top: 6px;">lense</i>
</div>

<div onclick="changeColorPalette(this);" class="button" color="#00bcd4" style="font-size: 0px;">
<i class="material-icons" style="font-size: 20px; color: #00bcd4; padding-top: 6px;">lense</i>
</div>
</header-3>


<!-- main side nav -->
<div id="mainSideNav" class="sidenav-main" style="right: 0;">
<a class="closebtn" onclick="closeMainNav()">
<i class="material-icons" style="color: white;">close</i>
</a>

<div class="sidenav-header">Anki Image Occlusion</div>

<div style="padding-top: 20px; text-align: left;">
<a href="#" onclick="changeMode('normal');">Normal Cloze</a>
<!--<a href="#" onclick="changeMode('group')">Group Cloze</a>-->
<a href="#" onclick="changeMode('combine')">Combine Cloze</a>
<!--<a href="#" onclick="changePage('move')">Move Images</a>-->
<a href="#" onclick="changePage('view')">View Notes</a>
<a href="#" onclick="changePage('settings')">Settings</a>
<a href="#" onclick="changePage('help')">Help</a>
</div>

<div class="sidenav-version">
<div style="bottom: 20px; position: absolute; margin: auto; text-align: center;left: 10%;">Version 3.0.0</div>
</div>

<!-- github logo -->
<div style="position: absolute; bottom: 8px; right: 10px;">
<a href="https://github.com/infinyte7/image-occlusion-in-browser">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" shape-rendering="geometricPrecision"
style="cursor: unset; border: unset" text-rendering="geometricPrecision" image-rendering="optimizeQuality"
fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640" fill="white">
<path
d="M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z">
</path>
</svg>
</a>
</div>

</div>
<!--main Side Nav -->

<!-- bottom -->
<nav class="nav">
<a id="enableDrawBtn" href="#" class="nav__link" onclick="enableDrawing();">
<i id="enabledrawBtnIcon" class="material-icons nav__icon" style="color: #009688;">dashboard</i>
<span class="nav__text">Draw</span>
</a>
<a href="#" id="removeBtn" class="nav__link" onclick="removePolygon();">
<i id="removeBtnIcon" class="material-icons nav__icon" style="color: #f44336;">delete</i>
<span class="nav__text">Delete</span>
</a>
<a href="#" class="nav__link" onclick="addNote();">
<i class="material-icons nav__icon" style="color: #5c6bc0;">post_add</i>
<span class="nav__text">Note</span>
</a>

<a href="#" class="nav__link" onclick="moreTools();">
<i class="material-icons nav__icon" style="color: #0099ff;">more_horiz</i>
<span class="nav__text">More</span>
</a>
</nav>


<!--more tools -->
<more-tools-nav id="more-tools" class="more-tools-nav" style="display: none;">

<a id="rectBtn" href="#" class="more-tools-nav__link" onclick="selectPolygon(this);">
<i id="drawRectId" class="material-icons more-tools-nav__icon" style="color: #2196f3;">view_compact</i>
<span class="more-tools-nav__text">Rectangle</span>
</a>

<a id="ellipseBtn" href="#" class="more-tools-nav__link" onclick="selectPolygon(this);">
<i id="drawEllipseId" class="material-icons more-tools-nav__icon" style="color: #2196f3;">lens</i>
<span class="more-tools-nav__text">Ellipse</span>
</a>

<a id="polygonBtn" href="#" class="more-tools-nav__link" onclick="selectPolygon(this);">
<i id="drawPolygonId" class="material-icons more-tools-nav__icon" style="color: #2196f3;">navigation</i>
<span class="more-tools-nav__text">Polygon</span>
</a>

<a id="textBtn" href="#" class="more-tools-nav__link" onclick="selectPolygon(this);">
<i id="drawTextBoxId" class="material-icons more-tools-nav__icon" style="color: #2196f3;">format_shapes</i>
<span class="more-tools-nav__text">Textbox</span>
</a>

<a id="undoBtn" href="#" class="more-tools-nav__link" onclick="undoDraw();">
<i id="undoBtnId" class="material-icons more-tools-nav__icon" style="color: #f44336;">undo</i>
<span class="more-tools-nav__text">Undo</span>
</a>

<a id="redoBtn" href="#" class="more-tools-nav__link" onclick="redoDraw();">
<i id="redoBtnId" class="material-icons more-tools-nav__icon" style="color: #f44336;">redo</i>
<span class="more-tools-nav__text">Redo</span>
</a>

</more-tools-nav>


<div id="drawing" class="container-editor"></div>

<div id="statusMsg" class="status-message"></div>

<div id="snackbar"></div>

<div class="card-added-msg-box">
<div id="card-added" class="card-added-msg"></div>
</div>

<div id="side-nav-container"></div>

<!-- settings side nav -->
<div id="settingsSideNav" class="sidenav-help" style="right: 0;">
<div style="margin-top: 60px; padding: 2px;">
<b>Enter Deck Name</b>
</div>
<div class="settings-input-label">
<label for="deckName">Deck Name</label>
</div>
<div>
<input type="text" id="deckName" name="deckName" class="settings-input">
</div>

<br>
<div style="padding: 2px;">
<b>Enter valid hex color</b>
</div>
<div class="settings-input-label">
<label for="OColor">Original Mask Color</label>
</div>
<div>
<input type="text" id="OColor" name="OColor" class="settings-input">
</div>

<div class="settings-input-label">
<label for="QColor">Question Mask Color</label>
</div>
<div>
<input type="text" id="QColor" name="QColor" class="settings-input">
</div>
<br>
<div>Note: Question mask color only applied to Normal Cloze and Group Cloze</div>
<br>
<div>View this for color's hex values
<br>
<a href="https://www.materialpalette.com/colors">Material Palette</a>
</div>

<hr>

<div style="padding: 2px;">
<b>Text Box Settings</b>
</div>
<div class="settings-input-label">
<label for="textColor">Text Color</label>
</div>
<div>
<input type="text" id="textColor" name="textColor" class="settings-input">
</div>

<div class="settings-input-label">
<label for="textSize">Text Size</label>
</div>
<div>
<input type="text" id="textSize" name="textSize" class="settings-input">
</div>

<hr>
<div style="padding: 2px;">
<b>Reset Settings</b>
</div>
<div onclick="resetSettings()" class="button-2">Reset</div>
</div>
<!--settings Side Nav -->
<script>
get_local_file("v3/common.html");
</script>

</body>

</html>
2 changes: 1 addition & 1 deletion docs/v3/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -881,7 +881,7 @@ function get_local_file(path) {
html = xhr.response;
document.getElementById("side-nav-container").innerHTML = html;
} else {
showSnackbar("Failed to load side navigation data.");
// showSnackbar("Failed to load side navigation data.");
}
}
xhr.send();
Expand Down

0 comments on commit b68210f

Please sign in to comment.