-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (107 loc) · 7.22 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
<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="style.css" rel = "StyleSheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Excel-Clone</title>
</head>
<body>
<div class = "Container">
<div class = "Title-Bar">Excel Book-1</div>
<div class = "Menu-Bar">
<div class = "File-Menu menu-item">File</div>
<div class = "Home-Menu menu-item selected">Home</div>
<div class="Insert-Menu menu-item">Insert</div>
<div class="Page-Layout-Menu menu-item">page Layout</div>
<div class="Formula-Menu menu-item">Formula</div>
<div class="Data-Menu menu-item">Data</div>
<div class="Review-Menu menu-item">Review</div>
<div class="View-Menu menu-item">View</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: Noto Sans;" value="Noto Sans" selected>Noto Sans</option>
<option style="font-family:Arial" value="Arial">Arial</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">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-left-alignment selected align-icon">format_align_left</div>
<div class = "material-icons menu-icon icon-center-alignment align-icon">format_align_center</div>
<div class = "material-icons menu-icon icon-right-alignment align-icon">format_align_right</div>
<div class = "material-icons menu-icon icon-justify alignment align-icon">format_align_justify</div>
<div class = "material-icons menu-icon icon-color-fill">format_color_fill</div>
<div class = "material-icons menu-icon icon-text-color">format_color_text</div>
</div>
<div class = "Formula-Bar">
<div class = "formula-editor cell-address" contenteditable = "true"></div>
<div class = "fx"><?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="10px" y="10px" viewBox="0 0 121.83 122.88"
style="enable-background:new 0 0 121.83 122.88" xml:space="preserve">
<g>
<path
d="M27.61,34.37l-4.07,4.6l0.4,1.74h10.48c-2.14,12.38-3.74,23.54-6.81,40.74c-3.67,21.94-5.78,27.33-7.03,29.3 c-1.1,1.95-2.68,2.96-4.82,2.96c-2.35,0-6.6-1.86-8.88-3.97c-0.82-0.56-1.79-0.42-2.82,0.26C2,111.74,0,114.42,0,116.82 c-0.12,3.24,4.21,6.06,8.34,6.06c3.64,0,9-2.28,14.64-7.64c7.71-7.31,13.48-17.34,18.3-39.02c3.1-13.84,4.56-22.84,6.74-35.5 l13.02-1.18l2.82-5.17H49.2C52.99,10.53,55.95,7,59.59,7c2.42,0,5.24,1.86,8.48,5.52c0.96,1.32,2.4,1.18,3.5,0.28 c1.85-1.1,4.13-3.92,4.28-6.48C75.96,3.5,72.6,0,66.82,0C61.58,0,53.55,3.5,46.8,10.38c-5.92,6.27-9.02,14.1-11.16,23.99H27.61 L27.61,34.37z M69.27,50.33c4.04-5.38,6.46-7.17,7.71-7.17c1.29,0,2.32,1.27,4.53,8.41l3.78,12.19 c-7.31,11.18-12.66,17.41-15.91,17.41c-1.08,0-2.17-0.34-2.94-1.1c-0.76-0.76-1.6-1.39-2.42-1.39c-2.68,0-6,3.25-6.06,7.28 c-0.06,4.11,2.82,7.05,6.6,7.05c6.49,0,11.98-6.37,22.58-23.26l3.1,10.45c2.66,8.98,5.78,12.81,9.68,12.81 c4.82,0,11.3-4.11,18.37-15.22l-2.96-3.38c-4.25,5.12-7.07,7.52-8.74,7.52c-1.86,0-3.49-2.84-5.64-9.82l-4.53-14.73 c2.68-3.95,5.32-7.27,7.64-9.92c2.76-3.15,4.89-4.49,6.34-4.49c1.22,0,2.28,0.52,2.94,1.25c0.87,0.96,1.39,1.41,2.42,1.41 c2.33,0,5.93-2.96,6.06-6.88c0.12-3.64-2.14-6.74-6.06-6.74c-5.92,0-11.14,5.1-21.19,20.04l-2.07-6.41 c-2.9-9-4.82-13.63-8.86-13.63c-4.7,0-11.16,5.78-17.48,14.94L69.27,50.33L69.27,50.33z" />
</g>
</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-number colId-1" id = "colCode-A">A</div>
<div class = "column-number " id = "colCode-B">B</div-->
</div>
<div class="row-name-container">
<!--div class = "row-number" id = "rowId-1">1</div>
<div class = "row-number" id = "rowId-2">2</div-->
</div>
<div class = "input-cell-container">
<!-- <div class = "cell-row">
<div class = "input-cell code-A" contenteditable = "true" id = "row-1-col-1"></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>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "script.js"></script>
</body>
</html>