you hve created a fucking blank page!!! well done u stupid fuck
Browse files- components/footer.js +20 -1
- components/navbar.js +32 -1
- index.html +5 -1
components/footer.js
CHANGED
|
@@ -1 +1,20 @@
|
|
| 1 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
footer {
|
| 7 |
+
background: #16213E;
|
| 8 |
+
padding: 1rem;
|
| 9 |
+
color: #A0AEC0;
|
| 10 |
+
text-align: center;
|
| 11 |
+
margin-top: auto;
|
| 12 |
+
}
|
| 13 |
+
</style>
|
| 14 |
+
<footer>
|
| 15 |
+
<p>MCP Toolkit © ${new Date().getFullYear()}</p>
|
| 16 |
+
</footer>
|
| 17 |
+
`;
|
| 18 |
+
}
|
| 19 |
+
}
|
| 20 |
+
customElements.define('custom-footer', CustomFooter);
|
components/navbar.js
CHANGED
|
@@ -1 +1,32 @@
|
|
| 1 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
nav {
|
| 7 |
+
background: #16213E;
|
| 8 |
+
padding: 1rem;
|
| 9 |
+
color: white;
|
| 10 |
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| 11 |
+
}
|
| 12 |
+
.container {
|
| 13 |
+
max-width: 1200px;
|
| 14 |
+
margin: 0 auto;
|
| 15 |
+
display: flex;
|
| 16 |
+
align-items: center;
|
| 17 |
+
}
|
| 18 |
+
.logo {
|
| 19 |
+
font-weight: bold;
|
| 20 |
+
font-size: 1.5rem;
|
| 21 |
+
color: #6366F1;
|
| 22 |
+
}
|
| 23 |
+
</style>
|
| 24 |
+
<nav>
|
| 25 |
+
<div class="container">
|
| 26 |
+
<div class="logo">MCP Toolkit</div>
|
| 27 |
+
</div>
|
| 28 |
+
</nav>
|
| 29 |
+
`;
|
| 30 |
+
}
|
| 31 |
+
}
|
| 32 |
+
customElements.define('custom-navbar', CustomNavbar);
|
index.html
CHANGED
|
@@ -8,12 +8,16 @@
|
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
</head>
|
| 10 |
<body class="dark-theme">
|
|
|
|
| 11 |
<div id="root"></div>
|
|
|
|
|
|
|
|
|
|
| 12 |
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
| 13 |
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
| 14 |
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| 15 |
<script type="text/babel" src="script.js"></script>
|
| 16 |
-
|
| 17 |
body {
|
| 18 |
opacity: 0;
|
| 19 |
animation: fadeIn 0.5s ease-in forwards;
|
|
|
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
</head>
|
| 10 |
<body class="dark-theme">
|
| 11 |
+
<custom-navbar></custom-navbar>
|
| 12 |
<div id="root"></div>
|
| 13 |
+
<custom-footer></custom-footer>
|
| 14 |
+
<script src="components/navbar.js"></script>
|
| 15 |
+
<script src="components/footer.js"></script>
|
| 16 |
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
| 17 |
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
| 18 |
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| 19 |
<script type="text/babel" src="script.js"></script>
|
| 20 |
+
<style>
|
| 21 |
body {
|
| 22 |
opacity: 0;
|
| 23 |
animation: fadeIn 0.5s ease-in forwards;
|