Rodrigo Rodriguez (Pragmatismo)
f2624aef94
Update dashboard CSS to use new color scheme matching visual identity, replacing CSS variables with specific color values. Improved button hover state with background transition instead of opacity. Expanded layout.js with additional application sections including dashboard, editor, player, and settings to support new navigation structure.
67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tables</title>
|
|
<link rel="stylesheet" href="../css/global.css">
|
|
<link rel="stylesheet" href="tables.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body x-data="tablesApp()" x-init="init()">
|
|
<div id="main-content">
|
|
<div class="content-section active">
|
|
<div class="app-container">
|
|
<div class="content-container">
|
|
<div class="header">
|
|
<h1>📊 Tables</h1>
|
|
<div class="subtitle">Excel Clone - Celebrating Lotus 1-2-3 Legacy 🎉</div>
|
|
</div>
|
|
|
|
<div class="resizable-container">
|
|
<div class="resizable-panel left" style="width: 30%">
|
|
<!-- Left panel content -->
|
|
</div>
|
|
<div class="resizable-handle"></div>
|
|
<div class="resizable-panel right" style="width: 70%">
|
|
<div class="spreadsheet-content">
|
|
<table>
|
|
<thead id="tableHead"></thead>
|
|
<tbody id="tableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Formula bar -->
|
|
<div class="formula-bar">
|
|
<span id="cellRef">A1</span>
|
|
<input type="text"
|
|
id="formulaInput"
|
|
placeholder="Enter formula..."
|
|
@keypress.enter="updateCellValue($event.target.value)"
|
|
x-model="formulaInputValue">
|
|
</div>
|
|
|
|
<!-- Status bar -->
|
|
<div class="status-bar">
|
|
<span>Rows: <span id="rowCount" x-text="rows"></span></span>
|
|
<span>Columns: <span id="colCount" x-text="cols"></span></span>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<button @click="addRow()">Add Row</button>
|
|
<button @click="addColumn()">Add Column</button>
|
|
<button @click="deleteRow()">Delete Row</button>
|
|
<button @click="deleteColumn()">Delete Column</button>
|
|
<button @click="sort()">Sort</button>
|
|
<button @click="sum()">Sum</button>
|
|
<button @click="average()">Average</button>
|
|
<button @click="exportData()">Export</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="tables.js"></script>
|
|
</body>
|
|
</html>
|