mirror of
https://github.com/mrfluffy-dev/assignment.git
synced 2026-01-17 05:40:34 +00:00
initial commit
This commit is contained in:
Zastian Pretorius
42
public/pages/index.html
Normal file
42
public/pages/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mrfluffy-dev</title>
|
||||
<script src="/pages/loadSrc.js"></script>
|
||||
</head>
|
||||
<body onload="loadSidebar()">
|
||||
<div id="sidebar">
|
||||
<!-- Sidebar content will be loaded dynamically here -->
|
||||
</div>
|
||||
|
||||
<div id="toggle-btn" onclick="toggleSidebar()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor" d="M3 13h18v-2H3v2zm0 5h18v-2H3v2zm0-10v2h18V8H3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<h1>Star Wars</h1>
|
||||
<div class="parent">
|
||||
<div id="div1">
|
||||
<!-- make a text input that's value will be used for loadPeople -->
|
||||
<input type="text" id="person1" placeholder="Enter a person">
|
||||
<button onclick="loadPeople(document.getElementById('person1').value,1)">Load People</button>
|
||||
<div id="people1">
|
||||
<!-- People data will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<!-- make a text input that's value will be used for loadPeople -->
|
||||
<input type="text" id="person2" placeholder="Enter a person">
|
||||
<button onclick="loadPeople(document.getElementById('person2').value,2)">Load People</button>
|
||||
<div id="people2">
|
||||
<!-- People data will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
public/pages/loadSrc.js
Normal file
17
public/pages/loadSrc.js
Normal file
@@ -0,0 +1,17 @@
|
||||
function loadSrc() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/pages/style.css';
|
||||
document.head.appendChild(link);
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.src = '/pages/sidebar.js';
|
||||
document.head.appendChild(script);
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.src = '/pages/people.js';
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
// Call the function to load src.html
|
||||
loadSrc();
|
||||
26
public/pages/people.js
Normal file
26
public/pages/people.js
Normal file
@@ -0,0 +1,26 @@
|
||||
async function loadPeople(name,id) {
|
||||
try {
|
||||
// fix name from spaces to dashes
|
||||
name = name.replace(' ', '+');
|
||||
const response = await fetch(`http://localhost:4200/api/${name}`);
|
||||
const data = await response.json();
|
||||
const peopleElement = document.getElementById('people'+id);
|
||||
// Clear any existing content
|
||||
peopleElement.innerHTML = '';
|
||||
// Create a div element for the person
|
||||
const personElement = document.createElement('div');
|
||||
// Set the text content using the person's name, height, mass, hair color, skin color, eye color, birth year, and gender
|
||||
personElement.innerHTML = `Name: ${data.name}<br>
|
||||
Height: ${data.height}<br>
|
||||
Mass: ${data.mass}<br>
|
||||
Hair Color: ${data.hair_color}<br>
|
||||
Skin Color: ${data.skin_color}<br>
|
||||
Eye Color: ${data.eye_color}<br>
|
||||
Birth Year: ${data.birth_year}<br>
|
||||
Gender: ${data.gender}`;
|
||||
// Append the person element to the people element
|
||||
peopleElement.appendChild(personElement);
|
||||
} catch (error) {
|
||||
console.error('Error loading people:', error);
|
||||
}
|
||||
}
|
||||
3
public/pages/sidebar.html
Normal file
3
public/pages/sidebar.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<h2>Sidebar</h2>
|
||||
<li class="sideContent"><a href="/">Home</a></li>
|
||||
<li class="sideContent"><a href="/test">Test</a></li>
|
||||
20
public/pages/sidebar.js
Normal file
20
public/pages/sidebar.js
Normal file
@@ -0,0 +1,20 @@
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
const content = document.getElementById('content');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
toggleBtn.classList.toggle('collapsed');
|
||||
content.classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
function loadSidebar() {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '/pages/sidebar.html', true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
document.getElementById('sidebar').innerHTML = xhr.responseText;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
141
public/pages/style.css
Normal file
141
public/pages/style.css
Normal file
@@ -0,0 +1,141 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #282a36; /* Dracula theme background color */
|
||||
color: #f8f8f2; /* Dracula theme text color */
|
||||
}
|
||||
|
||||
|
||||
/*give h1 Dracula green*/
|
||||
h1 {
|
||||
color: #50fa7b;
|
||||
}
|
||||
/*give h2 Dracula orange*/
|
||||
h2 {
|
||||
color: #ffb86c;
|
||||
}
|
||||
|
||||
/*give h3 Dracula yello*/
|
||||
h3 {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
|
||||
/*give code Dracula red*/
|
||||
code {
|
||||
color: #ff5555;
|
||||
}
|
||||
/*give a Dracula pink*/
|
||||
a {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/*give pre Dracula red*/
|
||||
pre {
|
||||
color: #ff5555;
|
||||
background-color: #1e1f2a;
|
||||
}
|
||||
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
background-color: #1e1f2a; /* Dracula theme background color */
|
||||
color: #f8f8f2; /* Dracula theme text color */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.sideContent {
|
||||
/* make the background color darker then the sidebar */
|
||||
padding: 7px;
|
||||
background-color: #282a36;
|
||||
/* rounded corners */
|
||||
border-radius: 0 15px 15px 0;
|
||||
}
|
||||
|
||||
.sideContent:hover {
|
||||
background-color: #21222c; /* New background color when hovering */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sideContent a {
|
||||
color: #ff79c6; /* Default link color */
|
||||
}
|
||||
|
||||
.sideContent:hover a {
|
||||
color: #8a2be2; /* New link color when hovering */
|
||||
}
|
||||
|
||||
#sidebar.collapsed {
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-left: 200px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#content.collapsed {
|
||||
/* animation: content-collapse 0.3s ease; */
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#toggle-btn {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 175px;
|
||||
cursor: pointer;
|
||||
color: #f8f8f2; /* Dracula theme text color */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#toggle-btn.collapsed {
|
||||
transform: translateX(-170px);
|
||||
}
|
||||
|
||||
#toggle-btn:hover {
|
||||
color: #6272a4; /* Dracula theme hover color */
|
||||
}
|
||||
|
||||
.parent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#div1, #div2 {
|
||||
width: 45%; /* Adjust as needed */
|
||||
overflow: auto;
|
||||
border: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#people1, #people2 {
|
||||
font-family: 'Arial', sans-serif; /* Change as needed */
|
||||
color: #ff79c6; /* Change as needed */
|
||||
line-height: 1.6;
|
||||
font-size: 32px; /* Change as needed */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
background-color: #4CAF50; /* Green */
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049; /* Darker green */
|
||||
}
|
||||
24
public/pages/template.html
Normal file
24
public/pages/template.html
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mrfluffy-Dev</title>
|
||||
<script src="/pages/loadSrc.js"></script>
|
||||
</head>
|
||||
<body onload="loadSidebar()">
|
||||
<div id="sidebar">
|
||||
<!-- Sidebar content will be loaded dynamically here -->
|
||||
</div>
|
||||
|
||||
<div id="toggle-btn" onclick="toggleSidebar()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="currentColor" d="M3 13h18v-2H3v2zm0 5h18v-2H3v2zm0-10v2h18V8H3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<h1>Welcome to my website!</h1>
|
||||
<p>This is the main content area. You can place your text, images, and other elements here.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user