diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..28401ba --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,134 @@ +/* DaurixSkills Custom Styles */ +body { + font-family: 'Roboto', sans-serif; + background-color: #F3F4F6; /* Light Gray Background */ + color: #374151; /* Slate Text */ +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Poppins', sans-serif; + color: #111827; /* Charcoal Headings */ +} + +.navbar { + box-shadow: 0 2px 4px rgba(0,0,0,.05); +} + +.sidebar { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 280px; + z-index: 1000; + padding-top: 56px; /* Navbar height */ + background-color: #fff; + border-right: 1px solid #e5e7eb; + transition: transform 0.3s ease-in-out; +} + +@media (max-width: 991.98px) { + .sidebar { + transform: translateX(-100%); + } + .sidebar.active { + transform: translateX(0); + } +} + +.sidebar .nav-link { + color: #374151; + padding: .75rem 1.5rem; + font-weight: 500; +} + +.sidebar .nav-link.active, +.sidebar .nav-link:hover { + color: #2563EB; /* Royal Blue */ + background-color: #eff6ff; +} + +.sidebar .nav-link .bi { + margin-right: 10px; +} + +.sidebar-heading { + padding: .75rem 1.5rem; + font-size: .9rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .05em; + color: #6b7280; +} + + +.content-wrapper { + margin-left: 280px; + padding-top: 56px; /* Navbar height */ + transition: margin-left 0.3s ease-in-out; +} + +@media (max-width: 991.98px) { + .content-wrapper { + margin-left: 0; + } +} + +.btn-primary { + background-color: #2563EB; + border-color: #2563EB; + border-radius: 0.5rem; + transition: all 0.2s ease-in-out; +} + +.btn-primary:hover { + background-color: #1d4ed8; + border-color: #1d4ed8; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2); +} + +.btn-secondary { + background-color: #10B981; + border-color: #10B981; + color: #fff; + border-radius: 0.5rem; + transition: all 0.2s ease-in-out; +} + +.btn-secondary:hover { + background-color: #059669; + border-color: #059669; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(16, 185, 129, 0.2); +} + +.progress { + border-radius: 0.5rem; +} + +.progress-bar { + background-color: #10B981; /* Emerald Green */ +} + +.code-block { + background-color: #111827; /* Charcoal */ + color: #e5e7eb; + padding: 1.5rem; + border-radius: 0.5rem; + font-family: 'Fira Code', monospace; + overflow-x: auto; +} + +.quiz-btn { + background-color: #F59E0B; /* Amber/Yellow */ + border-color: #F59E0B; + color: #111827; + border-radius: 0.5rem; + font-weight: 600; +} +.quiz-btn:hover { + background-color: #d97706; + border-color: #d97706; + color: #000; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e59bc66 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,13 @@ +// DaurixSkills Custom JS +document.addEventListener('DOMContentLoaded', function () { + const sidebarToggler = document.getElementById('sidebarToggler'); + const sidebar = document.getElementById('sidebar'); + + if (sidebarToggler) { + sidebarToggler.addEventListener('click', function () { + if (sidebar) { + sidebar.classList.toggle('active'); + } + }); + } +}); diff --git a/index.php b/index.php index 7205f3d..fdde8d4 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,145 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + Daurix Skills + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ + + + + + -
- + + +
+
+ + +
+
Your Progress
+
+
25%
+
+
+ +
+

HTML Elements

+

An HTML element is defined by a start tag, some content, and an end tag.

+ +
+ +

The HTML element is everything from the start tag to the end tag:

+

<tagname>Content goes here...</tagname>

+

Examples of some HTML elements:

+
    +
  • <h1>My First Heading</h1>
    • +
  • <p>My first paragraph.</p>
    • +
+ +

Code Example

+

The following example shows a simple HTML document structure with a heading and a paragraph.

+ +
+ 
<!DOCTYPE html>
+<html>
+<head>
+<title>Page Title</title>
+</head>
+<body>
+
+<h1>This is a Heading</h1>
+<p>This is a paragraph.</p>
+
+</body>
+</html>
+
+ +
+ Take the Quiz! +
+ +
+ + +
+ Previous + Next +
+ +
+
+ + + + + - + \ No newline at end of file