Scribd
Upload
56 views13 pages

Index HTML

The document is an HTML template for an editor interface, featuring various styles and functionalities for text editing. It includes options for file selection, text formatting, alignment, and annotations, with associated buttons for user interaction. The design utilizes Bootstrap and custom CSS for layout and styling, ensuring a responsive and user-friendly experience.

Uploaded by

eraldiruci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
56 views13 pages

Index HTML

The document is an HTML template for an editor interface, featuring various styles and functionalities for text editing. It includes options for file selection, text formatting, alignment, and annotations, with associated buttons for user interaction. The design utilizes Bootstrap and custom CSS for layout and styling, ensuring a responsive and user-friendly experience.

Uploaded by

eraldiruci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>

<head>
<title>Editor</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN PLUGIN CSS -->
<link href="css/plugins/bootstrapv3/css/[Link]" rel="stylesheet"
type="text/css" />
<link href="css/plugins/bootstrapv3/css/[Link]"
rel="stylesheet" type="text/css" />
<link href="css/plugins/font-awesome/css/[Link]" rel="stylesheet"
type="text/css" />
<!-- END PLUGIN CSS -->
<!-- BEGIN CORE CSS FRAMEWORK -->
<link href="[Link]
rel="stylesheet">
<!-- END CORE CSS FRAMEWORK -->
<link href="css/app/[Link]" rel="stylesheet" type="text/css" />
<style>
.tab {
padding: 0;
margin: 0;
padding-left: 40px;
height: 1px;
}

.expansion {
color: red;
}

.block-right {
text-align: right;
}

.block-center {
text-align: center;
}

.flip {
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Webkit */
transform: scaleX(-1); /* Standard */
filter: FlipH; /* IE 6/7/8 */
display: inline-block;
}

.peekaboo {
overflow: hidden;
display: inline-block;
position: relative;
}
.block-indent {
padding: 0 40px;
margin: 0;
}

.block-justify {
text-align: justify;
}

/**
Overrides Bootstrap modal CSS to ensure dynamic vertical positioning.
*/
.modal {
text-align: center;
padding: 0 !important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* Adjusts for spacing */
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

.modal-heading {
background-color: #333;
padding: 5px 20px;
font-size: 2em;
border-top-left-radius: 10px;
color: #fff;
border-top-right-radius: 10px;
}

.modal-close {
color: #fff;
}

.modal-text {
padding: 10px 20px;
background-color: #fff;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

.editor {
background: #fff;
font-family: Garamond;
padding: 50px 100px;
line-height: 2em;
max-height: 500px;
font-size: 1.75em;
overflow-y: scroll;
resize: vertical;
position: relative;
}
</style>
</head>

<body style="background-color: #efefef;">


<div style="display: none;" id="modal-nav"></div>
<section id="main-template">
<div data-bind="template: { name: 'text-edit-part-template', data:
$data }"></div>
</section>
<style>
.tei-del {
color: red;
}

.tei-unclear {
color: yellow;
}

.tei-p {
color: gray;
}

.tei-subst {
background-color: lightgoldenrodyellow;
}

.tei-add {
color: green;
}

.tei-choice {
background-color: #eee;
}

.tei-sic {
color: orange;
}

.tei-abbr {
color: green;
}

.tei-corr {
color: red;
}

.tei-expan {
color: blue;
}

.expansion-bracket {
background-color: #ccc;
user-select: none;
}
.leiden__expansion {
color: blue;
}

.leiden__emphasis {
color: red;
}

.leiden__supra_lineam {
color: orange;
}

.leiden__marginalia {
color: purple;
}

.leiden__striked_out {
text-decoration: line-through;
}

.leiden__commentary {
color: blue;
}

.leiden__repetition {
position: absolute;
display: inline;
width: 100%;
border-bottom: 3px solid brown;
left: 0px;
bottom: -1px;
opacity: 1;
}

.leiden__sic {
position: absolute;
display: inline;
width: 100%;
border-bottom: 3px solid green;
left: 0px;
bottom: -1px;
opacity: 1;
}

.leiden__rewritten {
position: absolute;
display: inline;
width: 100%;
border-bottom: 3px solid yellow;
left: 0px;
bottom: -1px;
opacity: 1;
}

.leiden__correction {
position: absolute;
display: inline;
width: 100%;
border-bottom: 3px solid red;
left: 0px;
bottom: -1px;
opacity: 1;
}

.leiden__transposition {
position: absolute;
display: inline;
width: 100%;
border-bottom: 3px solid pink;
left: 0px;
bottom: -1px;
opacity: 1;
}

.monitor-arrow {
margin-left: 5px;
position: relative;
}

.monitor-arrow-icon {
font-size: 1.5em;
top: 3px;
position: relative;
}

.zwa-hyphen {
color: red;
}

.flip {
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Webkit */
transform: scaleX(-1); /* Standard */
filter: FlipH; /* IE 6/7/8 */
display: inline-block;
}

.upside-down {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
ms-filter: "progid:[Link](rotation=2)";
filter: progid:[Link](rotation=2);
display: inline-block;
}

.clock {
display: inline-block;
}

.pulsate {
display: inline-block;
}

rect {
fill: none;
stroke: #000;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
stroke-dasharray: 4px;
animation: stroke 0.2s linear infinite;
shape-rendering: geometricPrecision;
stroke-dashoffset: 8px;
stroke-width: 2px;
}

@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
</style>
<script src="scripts/[Link]"></script>
<script src="scripts/app/[Link]"></script>
<script type="text/html" id="text-edit-part-template">
<div class="container" style="margin-top: 40px;">
<div class="row">
<div class="col-md-6">
<label>
File
</label>
<div class="input-group">
<select class="form-control" data-bind="value: $[Link],
options: $[Link], optionsText: 'text', optionsValue: 'value'"></select>
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Load</button>
</span>
</div>
</div>
<div class="col-md-6">
<label>
Blacklist types
</label>
<input type="text" data-bind="value: $[Link]"
class="form-control" />
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<label>
Line height
</label>
<div class="input-group">
<input type="text" class="form-control" data-bind="value:
$[Link]">
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Change</button>
</span>
</div>
</div>
<div class="col-md-2">
<label>
Font size
</label>
<div class="input-group">
<input type="text" class="form-control" data-bind="value:
$[Link]">
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Change</button>
</span>
</div>
</div>
<div class="col-md-3">
<label>
Font family
</label>
<div class="input-group">
<input type="text" class="form-control" data-bind="value:
$[Link]">
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Change</button>
</span>
</div>
</div>
<div class="col-md-2">
<label>
Text colour
</label>
<div class="input-group">
<input type="text" class="form-control" data-bind="value:
$[Link]">
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Change</button>
</span>
</div>
</div>
<div class="col-md-2">
<label>
Background colour
</label>
<div class="input-group">
<input type="text" class="form-control" data-bind="value:
$[Link]">
<span class="input-group-btn">
<button class="btn btn-primary" data-bind="click:
$[Link]">Change</button>
</span>
</div>
</div>

</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<div style="display: inline-block; margin-right: 20px;">
<div>
<label>
Alignment
</label>
</div>
<button data-toggle="tooltip" data-original-
title="justify (align)" class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-align-justify"></span></button>
<button data-toggle="tooltip" data-original-title="left
(align)" class="btn btn-default tip" data-bind="click: $[Link]"><span
class="fa fa-align-left"></span></button>
<button data-toggle="tooltip" data-original-
title="center (align)" class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-align-center"></span></button>
<button data-toggle="tooltip" data-original-
title="right (align)" class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-align-right"></span></button>
<button data-toggle="tooltip" data-original-
title="indent" class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-indent"></span></button>
<button data-toggle="tooltip" data-original-title="tab"
class="btn btn-default tip" data-bind="click:
$[Link]"><span>tab</span></button>
</div>
<div style="display: inline-block; margin-right: 20px;">
<div>
<label>
Styles
</label>
</div>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Bold"
data-bind="click: $[Link], css:
{ 'active': $[Link]('bold') }"><span
class="fa fa-bold"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Italics"
data-bind="click: $[Link], css:
{ 'active': $[Link]('italics') }"><span
class="fa fa-italic"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Strike-through"
data-bind="click: $[Link], css:
{ 'active': $[Link]('strike') }"><span
class="fa
fa-strikethrough"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Underline"
data-bind="click: $[Link], css:
{ 'active': $[Link]('underline') }"><span
class="fa fa-underline"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Superscript"
data-bind="click: $[Link],
css: { 'active': $[Link]('superscript') }"><span
class="fa fa-superscript"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Subscript"
data-bind="click: $[Link], css:
{ 'active': $[Link]('subscript') }"><span
class="fa fa-subscript"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Space"
data-bind="click: $[Link], css:
{ 'active': $[Link]('space') }"><span
class="fa
fa-space-shuttle"></span></button>
</div>
<div style="display: inline-block; margin-right:
20px;">
<div>
<label>
Layout
</label>
</div>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Hyphen"
data-bind="click: $[Link]"><span
style="font-weight: 600;">-</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Line"
data-bind="click:
$[Link]"><span>|</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Expansion"
data-bind="click: $[Link]"><span
class="fa fa-arrows-h"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Paragraph"
data-bind="click: $[Link]"><span
class="fa fa-paragraph"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Page"
data-bind="click: $[Link]"><span
style="font-weight: 600;">P</span></button>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div>
<label>
Annotations
</label>
</div>
<button style="border-bottom: 3px solid red;" data-
toggle="tooltip" data-original-title="Person"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-user"></span></button>
<button style="border-bottom: 3px solid pink;" data-
toggle="tooltip" data-original-title="Place"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-map"></span></button>
<button style="border-bottom: 3px solid cyan;" data-
toggle="tooltip" data-original-title="Date"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-clock-o"></span></button>
<button style="border-bottom: 3px solid blue;" data-
toggle="tooltip" data-original-title="Event"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-calendar"></span></button>
<button style="border-bottom: 3px solid green;" data-
toggle="tooltip" data-original-title="Concept"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-lightbulb-o"></span></button>
<button style="border-bottom: 3px solid yellow;" data-
toggle="tooltip" data-original-title="Text"
class="btn btn-default tip" data-bind="click:
$[Link]"><span class="fa fa-file-text"></span></button>
<button style="border-bottom: 3px solid lightgreen;"
data-toggle="tooltip"
data-original-title="Web Link" class="btn btn-
default tip" data-bind="click: $[Link]"><span
class="fa fa-link"></span></button>
<button style="border-bottom: 3px solid yellow;" data-
toggle="tooltip" data-original-title="Footnotes"
class="btn btn-default tip" data-bind="click:
$[Link]"><span style="font-weight: 600;">f</span></button>
<button style="border-bottom: 3px solid purple;" data-
toggle="tooltip" data-original-title="Domain" class="btn btn-default tip" data-
bind="click: $[Link]"><span>|</span></button>
</div>
<div class="col-md-3">
<div>
<label>
TEI
</label>
</div>
<div class="input-group" style="width: 300px;">
<select class="form-control" data-bind="value:
$[Link], options: $[Link]"></select>
<span class="input-group-btn">
<button class="btn btn-default" data-
bind="click: $[Link]">Apply</button>
</span>
</div>

</div>
<div class="col-md-2" style="padding-top: 20px; padding-
left: 40px;">
<label>Expansions</label>
<input data-bind="checked: $[Link]"
type="checkbox">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-12">
<label>Animations</label>
<div class="annotation-block">
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="drop" data-bind="click:
$[Link]"><span class="fa fa-arrow-down"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="spinner" data-bind="click:
$[Link]">*</button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="spinner" data-bind="click:
$[Link]"><span class="fa fa-pause"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="rectangle" data-bind="click:
$[Link]"><span>rect</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="wink" data-bind="click:
$[Link]"><span>😉</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="flip" data-bind="click:
$[Link]"><span>flip</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="invert" data-bind="click:
$[Link]"><span>invert</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="clock" data-bind="click:
$[Link]"><span class="fa fa-clock-o"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="pulse" data-bind="click:
$[Link]"><span>pulse</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="peek" data-bind="click:
$[Link]"><span>peek</span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Image" data-bind="click:
$[Link]"><span class="fa fa-picture-o"></span></button>
<button class="btn btn-default tip" data-
toggle="tooltip" data-original-title="Video" data-bind="click:
$[Link]"><span class="fa fa-film"></span></button>
</div>
</div>
</div>

<div class="row" style="margin-top: 10px;">


<div class="col-md-12">
<div data-role="editor" spellcheck="false"
contenteditable="true" class="editor"></div>
<div data-role="monitor" class="form-control
monitor"></div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-12">
<button class="btn btn-default" data-bind="click:
$[Link]">Cancel</button>
<button class="btn btn-primary" data-bind="click:
$[Link]">Save</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-bind="click:
$[Link]">Unbind</button>
<button class="btn btn-primary" data-bind="click:
$[Link]">Bind</button>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-12">
<textarea class="form-control" rows="5" data-
bind="value: $[Link]"></textarea>
</div>
</div>

</div>
</div>
</div>
</script>
<script>
require(["jquery", "pubsub", "bootstrap"], function ($, pubsub) {
var modals = [];
function addModal(modal) {
[Link](modal);
renderModals();
}
function removeModal() {
if (![Link]) {
return;
}
[Link]();
renderModals();
}
function renderModals() {
if (![Link]) {
$("#modal-nav").hide();
return;
}
var text = "<span class='fa fa-table' style='margin-right:
5px;'></span>";
for (var i = 0; i < [Link]; i++) {
text += modals[i] + " > ";
}
$("#modal-nav").html(text).show();
}
[Link]("modal/opened", function (__, modal) {
addModal(modal);
});
$(document).on('[Link]', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex
- 1).addClass('modal-stack');
}, 0);
});
$(document).on('[Link]', '.modal', function () {
$('.modal:visible').length && $([Link]).addClass('modal-
open');
removeModal();
});
});
</script>
<script>
var editor;
require(["part/text-edit", "jquery"], function (Editor, $) {

//
// This ensures that tooltips are applied to all targets, whether or
not they are dynamically created.
//
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
var urlParams = new URLSearchParams([Link]);
var file = [Link]("file") || "[Link]";
var node = [Link]("main-template");
$.get(file, function (json) {
var editor = new Editor({
template: node,
editor: json
});
[Link](node);
});

});
</script>
</body>

</html>

You might also like