Skip to content

Instantly share code, notes, and snippets.

@germ13

germ13/index.html

Created February 28, 2025 05:53
Show Gist options
  • Save germ13/89fce92148bcb5159fb2de6c339dacb5 to your computer and use it in GitHub Desktop.
Save germ13/89fce92148bcb5159fb2de6c339dacb5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/daisyui.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-community.min.js"></script>
<link href="css/output.css" rel="stylesheet" type="text/css" />
<title>Daisy Index</title>
</head>
<body class="items-center justify-center h-screen">
<div class="navbar bg-base-100 bg-green-700 shadow-sm">
<div class="flex-1 filter drop-shadow-2x">
<a class="btn btn-ghost text-4xl text-base-100 font-roboto-condensed">Shultz Steel</a>
</div>
<div class="flex-1">
<img src="ss-logo.png" alt="Shultz Steel Logo" class="w-20 h-15" />
</div>
<div class="flex gap-2">
<input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-8">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</div>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
<li>
<a class="justify-between">
Profile
<span class="badge">New</span>
</a>
</li>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="flex">
<div class="bg-base-200 h-screen p-5 pt-8 w-72">
<nav>
<ul class="menu bg-base-200 rounded-box w-60 font-roboto-condensed">
<li><a>Item 1</a></li>
<li>
<details open>
<svg class="size-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
<li>
<details open>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li><a>Item 3</a></li>
</ul>
</nav>
</div>
<div class="p-7">
<div class="overflow-x-auto">
<div id="myGrid" style="height: 500px" class="font-roboto-condensed"></div>
<hr />
<table class="table font-roboto-condensed">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>company</th>
<th>location</th>
<th>Last Login</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Littel, Schaden and Vandervort</td>
<td>Canada</td>
<td>12/16/2020</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Zemlak, Daniel and Leannon</td>
<td>United States</td>
<td>12/5/2020</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Carroll Group</td>
<td>China</td>
<td>8/15/2020</td>
<td>Red</td>
</tr>
<tr>
<th>4</th>
<td>Marjy Ferencz</td>
<td>Office Assistant I</td>
<td>Rowe-Schoen</td>
<td>Russia</td>
<td>3/25/2021</td>
<td>Crimson</td>
</tr>
<tr>
<th>5</th>
<td>Yancy Tear</td>
<td>Community Outreach Specialist</td>
<td>Wyman-Ledner</td>
<td>Brazil</td>
<td>5/22/2020</td>
<td>Indigo</td>
</tr>
<tr>
<th>6</th>
<td>Irma Vasilik</td>
<td>Editor</td>
<td>Wiza, Bins and Emard</td>
<td>Venezuela</td>
<td>12/8/2020</td>
<td>Purple</td>
</tr>
<tr>
<th>7</th>
<td>Meghann Durtnal</td>
<td>Staff Accountant IV</td>
<td>Schuster-Schimmel</td>
<td>Philippines</td>
<td>2/17/2021</td>
<td>Yellow</td>
</tr>
<tr>
<th>8</th>
<td>Sammy Seston</td>
<td>Accountant I</td>
<td>O'Hara, Welch and Keebler</td>
<td>Indonesia</td>
<td>5/23/2020</td>
<td>Crimson</td>
</tr>
<tr>
<th>9</th>
<td>Lesya Tinham</td>
<td>Safety Technician IV</td>
<td>Turner-Kuhlman</td>
<td>Philippines</td>
<td>2/21/2021</td>
<td>Maroon</td>
</tr>
<tr>
<th>10</th>
<td>Zaneta Tewkesbury</td>
<td>VP Marketing</td>
<td>Sauer LLC</td>
<td>Chad</td>
<td>6/23/2020</td>
<td>Green</td>
</tr>
<tr>
<th>11</th>
<td>Andy Tipple</td>
<td>Librarian</td>
<td>Hilpert Group</td>
<td>Poland</td>
<td>7/9/2020</td>
<td>Indigo</td>
</tr>
<tr>
<th>12</th>
<td>Sophi Biles</td>
<td>Recruiting Manager</td>
<td>Gutmann Inc</td>
<td>Indonesia</td>
<td>2/12/2021</td>
<td>Maroon</td>
</tr>
<tr>
<th>13</th>
<td>Florida Garces</td>
<td>Web Developer IV</td>
<td>Gaylord, Pacocha and Baumbach</td>
<td>Poland</td>
<td>5/31/2020</td>
<td>Purple</td>
</tr>
<tr>
<th>14</th>
<td>Maribeth Popping</td>
<td>Analyst Programmer</td>
<td>Deckow-Pouros</td>
<td>Portugal</td>
<td>4/27/2021</td>
<td>Aquamarine</td>
</tr>
<tr>
<th>15</th>
<td>Moritz Dryburgh</td>
<td>Dental Hygienist</td>
<td>Schiller, Cole and Hackett</td>
<td>Sri Lanka</td>
<td>8/8/2020</td>
<td>Crimson</td>
</tr>
<tr>
<th>16</th>
<td>Reid Semiras</td>
<td>Teacher</td>
<td>Sporer, Sipes and Rogahn</td>
<td>Poland</td>
<td>7/30/2020</td>
<td>Green</td>
</tr>
<tr>
<th>17</th>
<td>Alec Lethby</td>
<td>Teacher</td>
<td>Reichel, Glover and Hamill</td>
<td>China</td>
<td>2/28/2021</td>
<td>Khaki</td>
</tr>
<tr>
<th>18</th>
<td>Aland Wilber</td>
<td>Quality Control Specialist</td>
<td>Kshlerin, Rogahn and Swaniawski</td>
<td>Czech Republic</td>
<td>9/29/2020</td>
<td>Purple</td>
</tr>
<tr>
<th>19</th>
<td>Teddie Duerden</td>
<td>Staff Accountant III</td>
<td>Pouros, Ullrich and Windler</td>
<td>France</td>
<td>10/27/2020</td>
<td>Aquamarine</td>
</tr>
<tr>
<th>20</th>
<td>Lorelei Blackstone</td>
<td>Data Coordiator</td>
<td>Witting, Kutch and Greenfelder</td>
<td>Kazakhstan</td>
<td>6/3/2020</td>
<td>Red</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>company</th>
<th>location</th>
<th>Last Login</th>
<th>Favorite Color</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- <p class="font-script">This will use the Great Vibes font family.</p> -->
<!--
<p>Collapsible Menu</p>
<li><a>Item 1</a></li>
<li>
<details open>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
<li>
<details open>
<summary>Parent</summary>
<ul>
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li><a>Item 3</a></li>
</ul>
<p>Other Menu</p> -->
<script>
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
const nestedMenu = this.nextElementSibling;
if (nestedMenu) {
nestedMenu.classList.toggle('hidden');
this.querySelector('svg').classList.toggle('rotate-0');
}
});
});
const myTheme = agGrid.themeBalham.withParams({
spacing: 6,
accentColor: "green",
fontFamily: "Roboto Condensed"
});
const themes = {
quartz: agGrid.themeQuartz,
material: agGrid.themeMaterial,
balham: agGrid.themeBalham.withParams({
// spacing: 6,
accentColor: "green",
fontFamily: "Roboto Mono"
}),
alpine: agGrid.themeAlpine,
};
// const myTheme = agGrid.themeQuartz.withParams({
// spacing: 6,
// accentColor: "green",
// fontFamily: "Roboto Condensed"
// });
const theme = themes["balham"];
// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {
theme: theme,
pagination: true,
accentColor: "green",
defaultColDef: {
// editable: true,
flex: 1,
minWidth: 100,
filter: true,
},
// Row Data: The data to be displayed.
rowData: [
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false }, { make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false }, { make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false },
{ make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false }, { make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false }, { make: "Tesla", model: "Model Y", price: 64950, electric: true },
{ make: "Ford", model: "F-Series", price: 33850, electric: false },
{ make: "Toyota", model: "Corolla", price: 29600, electric: false }
],
// Column Definitions: Defines the columns to be displayed.
columnDefs: [
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "electric" }
]
};
// Your Javascript code to create the Data Grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);
</script>
</body>
</html>
Raw
pre.css
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
@import "tailwindcss";
@theme {
--font-roboto: "Roboto", sans-serif;
--font-roboto-condensed: "Roboto Condensed", sans-serif;
--font-roboto-mono: "Roboto Mono", monospace;
}
@plugin "daisyui" {
themes: cupcake --default, dark --prefersdark, nord;
logs: true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment