-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
136 lines (130 loc) · 10.7 KB
/
index.html
File metadata and controls
136 lines (130 loc) · 10.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet" />
<title>Excel Clone</title>
</head>
<body>
<div class="container">
<div class="title-bar">Book-1 Excel</div>
<div class="menu-bar">
<div class="menu-file menu-item">File</div>
<div class="menu-home menu-item selected">Home</div>
<div class="menu-insert menu-item">Insert</div>
<div class="menu-layout menu-item">Layout</div>
<div class="menu-help menu-item">Help</div>
</div>
<div class="menu-icon-bar">
<div class="material-icons menu-icon icon-cut">content_cut</div>
<div class="material-icons menu-icon icon-copy">content_copy</div>
<div class="material-icons menu-icon icon-paste">content_paste</div>
<select class="selector font-family-selector">
<option style="font-family:Arial" value="Arial" selected>Arial</option>
<option style="font-family: Noto Sans;" value="Noto Sans">Noto Sans</option>
<option style="font-family:Calibri" value="Calibri">Calibri</option>
<option style="font-family:Comic Sans MS" value="Comic Sans MS">Comic Sans MS</option>
<option style="font-family:Courier New" value="Courier New">Courier New</option>
<option style="font-family:Impact" value="Impact">Impact</option>
<option style="font-family:Georgia" value="Georgia">Georgia</option>
<option style="font-family:Garamond" value="Garamond">Garamond</option>
<option style="font-family:Lato" value="Lato">Lato</option>
<option style="font-family:Open Sans" value="Open Sans">Open Sans</option>
<option style="font-family:Palatino" value="Palatino">Palatino</option>
<option style="font-family:Verdana" value="Verdana">Verdana</option>
</select>
<select class="selector font-size-selector">
<option value="10px">10</option>
<option value="12px">12</option>
<option value="14px" selected>14</option>
<option value="16px">16</option>
<option value="18px">18</option>
<option value="20px">20</option>
<option value="22px">22</option>
<option value="24px">24</option>
<option value="26px">26</option>
<option value="30px">30</option>
<option value="32px">32</option>
</select>
<div class="material-icons menu-icon icon-bold style-icon">format_bold</div>
<div class="material-icons menu-icon icon-italic style-icon">format_italic</div>
<div class="material-icons menu-icon icon-underline style-icon">format_underline</div>
<div class="material-icons menu-icon icon-align-left selected align-icon">format_align_left</div>
<div class="material-icons menu-icon icon-align-center align-icon">format_align_center</div>
<div class="material-icons menu-icon icon-align-right align-icon">format_align_right</div>
<div class="menu-icon icon-color-fill">
<input class="color-picker background-color-picker" type="color" value="#ffffff" />
<div class="material-icons color-fill-icon">format_color_fill</div>
</div>
<div class="menu-icon icon-color-text">
<input class="color-picker text-color-picker" type="color" />
<div class="material-icons color-fill-text">format_color_text</div>
</div>
</div>
<div class="formula-bar">
<div class="formula-editor selected-cell"></div>
<div class="function-sign">
<svg class="[object SVGAnimatedString] ewa-svg-icon" focusable="false" viewBox="0,0,2048,2048"
style="height: 16px; width: 16px; margin: 5.5px 9px;">
<title>Insert Function</title>
<path type="path" class="OfficeIconColors_HighContrast"
d="M 1198 639 h -194 l -126 511 q -62 249 -133 421 q -71 171 -150 277 q -79 106 -164 153 q -85 47 -175 47 q -30 0 -60 -9 q -30 -9 -54 -26 q -24 -17 -39 -42 q -15 -25 -15 -57 q 0 -22 10 -42 q 9 -21 26 -36 q 16 -15 38 -24 q 22 -9 46 -9 q 19 0 36 7 q 17 7 30 19 q 13 12 21 28 q 7 15 7 32 q 0 36 -30 63 q 33 0 66 -13 q 33 -14 64 -45 q 31 -31 59 -81 q 28 -50 51 -123 q 1 -8 6 -26 q 5 -18 15 -52 q 10 -34 25 -87 q 14 -53 34 -131 l 191 -755 h -217 l 26 -122 h 53 q 53 0 79 -3 q 26 -4 37 -8 q 7 -3 21 -9 q 13 -6 30 -18 q 16 -12 34 -31 q 17 -20 32 -50 q 33 -65 62 -113 q 29 -49 59 -85 q 86 -103 180 -151 q 93 -49 176 -49 q 45 0 82 14 q 37 14 64 36 q 26 22 41 50 q 14 28 14 56 q 0 24 -8 45 q -9 21 -24 37 q -15 15 -36 24 q -21 9 -46 9 q -44 0 -72 -26 q -29 -27 -29 -65 q 0 -12 5 -23 q 4 -11 9 -20 q 5 -10 10 -19 q 4 -9 4 -16 q -7 -5 -24 -5 q -70 0 -126 54 q -56 54 -101 151 q -6 13 -13 27 q -7 14 -16 37 q -10 23 -22 59 q -13 36 -30 92 h 195 m 488 514 q -49 40 -119 160 q 19 80 33 137 q 13 56 23 96 q 9 39 15 64 q 6 24 11 39 q 4 14 8 21 q 3 7 7 11 q 7 0 20 -10 q 13 -11 29 -29 q 15 -19 32 -43 q 17 -25 32 -52 l 76 39 q -26 50 -59 95 q -33 44 -68 78 q -35 34 -68 54 q -34 20 -61 20 q -22 0 -50 -13 q -28 -13 -51 -56 q -3 -5 -7 -17 q -4 -12 -11 -38 q -8 -27 -19 -70 q -11 -44 -27 -112 q -54 89 -97 148 q -43 59 -79 94 q -37 35 -69 50 q -33 14 -65 14 q -20 0 -39 -7 q -20 -7 -36 -20 q -17 -13 -27 -32 q -10 -19 -10 -44 q 0 -38 26 -65 q 26 -28 64 -28 q 17 0 30 6 q 12 5 23 13 q 11 7 22 16 q 10 8 23 13 q 30 -25 60 -62 q 29 -37 56 -77 q 27 -41 50 -81 q 22 -41 38 -73 q -18 -70 -28 -111 q -11 -42 -17 -64 q -6 -23 -8 -30 q -3 -8 -3 -9 q -9 -25 -19 -42 q -10 -17 -24 -27 q -14 -10 -34 -14 q -20 -4 -50 -4 q -9 0 -23 1 q -14 0 -46 2 v -80 l 269 -47 q 25 27 42 47 q 16 19 28 41 q 12 22 23 53 q 10 31 24 82 l 46 -69 q 22 -34 51 -62 q 29 -28 59 -48 q 29 -20 58 -31 q 28 -12 49 -12 q 47 0 79 27 q 31 27 31 68 q 0 27 -8 45 q -9 17 -23 28 q -14 11 -31 16 q -17 4 -33 4 q -13 0 -25 -3 q -12 -4 -23 -8 q -12 -4 -23 -7 q -12 -4 -24 -4 q -2 0 -10 3 q -8 3 -23 16 z">
</path>
<path type="path" class="OfficeIconColors_m22"
d="M 1198 639 h -194 l -126 511 q -62 249 -133 421 q -71 171 -150 277 q -79 106 -164 153 q -85 47 -175 47 q -30 0 -60 -9 q -30 -9 -54 -26 q -24 -17 -39 -42 q -15 -25 -15 -57 q 0 -22 10 -42 q 9 -21 26 -36 q 16 -15 38 -24 q 22 -9 46 -9 q 19 0 36 7 q 17 7 30 19 q 13 12 21 28 q 7 15 7 32 q 0 36 -30 63 q 33 0 66 -13 q 33 -14 64 -45 q 31 -31 59 -81 q 28 -50 51 -123 q 1 -8 6 -26 q 5 -18 15 -52 q 10 -34 25 -87 q 14 -53 34 -131 l 191 -755 h -217 l 26 -122 h 53 q 53 0 79 -3 q 26 -4 37 -8 q 7 -3 21 -9 q 13 -6 30 -18 q 16 -12 34 -31 q 17 -20 32 -50 q 33 -65 62 -113 q 29 -49 59 -85 q 86 -103 180 -151 q 93 -49 176 -49 q 45 0 82 14 q 37 14 64 36 q 26 22 41 50 q 14 28 14 56 q 0 24 -8 45 q -9 21 -24 37 q -15 15 -36 24 q -21 9 -46 9 q -44 0 -72 -26 q -29 -27 -29 -65 q 0 -12 5 -23 q 4 -11 9 -20 q 5 -10 10 -19 q 4 -9 4 -16 q -7 -5 -24 -5 q -70 0 -126 54 q -56 54 -101 151 q -6 13 -13 27 q -7 14 -16 37 q -10 23 -22 59 q -13 36 -30 92 h 195 m 488 514 q -49 40 -119 160 q 19 80 33 137 q 13 56 23 96 q 9 39 15 64 q 6 24 11 39 q 4 14 8 21 q 3 7 7 11 q 7 0 20 -10 q 13 -11 29 -29 q 15 -19 32 -43 q 17 -25 32 -52 l 76 39 q -26 50 -59 95 q -33 44 -68 78 q -35 34 -68 54 q -34 20 -61 20 q -22 0 -50 -13 q -28 -13 -51 -56 q -3 -5 -7 -17 q -4 -12 -11 -38 q -8 -27 -19 -70 q -11 -44 -27 -112 q -54 89 -97 148 q -43 59 -79 94 q -37 35 -69 50 q -33 14 -65 14 q -20 0 -39 -7 q -20 -7 -36 -20 q -17 -13 -27 -32 q -10 -19 -10 -44 q 0 -38 26 -65 q 26 -28 64 -28 q 17 0 30 6 q 12 5 23 13 q 11 7 22 16 q 10 8 23 13 q 30 -25 60 -62 q 29 -37 56 -77 q 27 -41 50 -81 q 22 -41 38 -73 q -18 -70 -28 -111 q -11 -42 -17 -64 q -6 -23 -8 -30 q -3 -8 -3 -9 q -9 -25 -19 -42 q -10 -17 -24 -27 q -14 -10 -34 -14 q -20 -4 -50 -4 q -9 0 -23 1 q -14 0 -46 2 v -80 l 269 -47 q 25 27 42 47 q 16 19 28 41 q 12 22 23 53 q 10 31 24 82 l 46 -69 q 22 -34 51 -62 q 29 -28 59 -48 q 29 -20 58 -31 q 28 -12 49 -12 q 47 0 79 27 q 31 27 31 68 q 0 27 -8 45 q -9 17 -23 28 q -14 11 -31 16 q -17 4 -33 4 q -13 0 -25 -3 q -12 -4 -23 -8 q -12 -4 -23 -7 q -12 -4 -24 -4 q -2 0 -10 3 q -8 3 -23 16 z">
</path>
</svg>
</div>
<div class="formula-editor formula-input" contenteditable="true"></div>
</div>
<div class="data-container">
<div class="select-all"></div>
<div class="column-name-container">
<!-- <div class="column-name colId-1" id="colCod-A">A</div>
<div class="column-name colId-2" id="colCod-B">B</div> -->
</div>
<div class="row-name-container">
<!-- <div class="row-name" id="rowId-1">1</div>
<div class="row-name">2</div> -->
</div>
<div class="input-cell-container">
<!-- <div class="cell-row">
<div class="input-cell" contenteditable="true" id = "row-1-col-1" data="code-A"></div>
<div class="input-cell" contenteditable="true"></div>
</div>
<div class="cell-row">
<div class="input-cell" contenteditable="true"></div>
<div class="input-cell" contenteditable="true"></div>
</div> -->
</div>
</div>
<div class="sheet-bar">
<div class="scroller">
<div class="material-icons icon-left-scroll">arrow_left</div>
<div class="material-icons icon-right-scroll">arrow_right</div>
</div>
<div class="material-icons icon-add">add_circle</div>
<div class="sheet-tab-container">
<div class="sheet-tab selected">Sheet1</div>
</div>
</div>
<!-- <div class="sheet-options-modal">
<div class="sheet-rename">Rename</div>
<div class="sheet-delete">Delete</div>
</div> -->
<!-- <div class="sheet-rename-modal">
<h4 class="modal-title">Rename Sheet To:</h4>
<input type="text" class="new-sheet-name" placeholder="Sheet Name" />
<div class="action-buttons">
<div class="submit-button">Rename</div>
<div class="cancel-button">Cancel</div>
</div>
</div> -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="scriptjs.js"></script>
</body>
</html>