hero comps

quantuminformation · Oct 26, 2024 · dac89ce · dac89ce
1 parent 61c4421
commit dac89ce
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 23 deletions.
diff --git a/css/common.css b/css/common.css
@@ -21,27 +21,11 @@ body {
     color 0.5s;
 }
 
-@keyframes slideInFromLeft {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFromTop {
-  0% {
-    transform: translateY(-100%);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
+
 [data-component='router'] {
   flex-grow: 1;
   flex-basis: 200px;
   flex-shrink: 1;
-  padding: var(--p-md);
 }
 
 footer {

diff --git a/css/form.css b/css/form.css
@@ -14,7 +14,8 @@ form.centered {
   }
 }
 
-input {
+input,
+textarea {
   padding: 0.5rem;
   border-radius: 0.75rem;
   border: 1px solid var(--default-text);

diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
   </head>
   <body class="flex flex-col">
     <div class="flex">
-      <nav data-component="nav" data-header-bar="true" data-burger-px="600"></nav>
+      <nav data-component="nav" data-burger-px="600"></nav>
       <!--
       <nav data-component="nav" ></nav>
 -->

diff --git a/js/components/fullscreen-hero.js b/js/components/fullscreen-hero.js
@@ -0,0 +1,71 @@
+export default (hostComponent) => {
+    // Extract data attributes
+    const imageUrl = hostComponent.getAttribute('data-image-url') || 'https://picsum.photos/1600/900';
+    const overlayColor = hostComponent.getAttribute('data-overlay-color') || 'rgba(0, 0, 0, 0.5)';
+    const header = hostComponent.getAttribute('data-header') || 'Welcome';
+    const text = hostComponent.getAttribute('data-text') || 'Your default hero text here.';
+    const buttonText = hostComponent.getAttribute('data-button-text') || 'Learn More';
+    const buttonLink = hostComponent.getAttribute('data-button-link') || '#';
+
+    // Inject HTML
+    hostComponent.innerHTML = `
+    <style>
+      .hero-container {
+        position: relative;
+        width: 100%;
+        height: 100vh;
+        background-image: url('${imageUrl}');
+        background-size: cover;
+        background-position: center;
+        background-attachment: fixed;
+      }
+      .hero-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: ${overlayColor};
+      }
+      .hero-content {
+        position: relative;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 5rem 1rem;
+        color: white;
+        text-align: left;
+      }
+      .hero-header {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+      }
+      .hero-text {
+        font-size: 1.125rem;
+        margin-bottom: 1.5rem;
+      }
+      .hero-button {
+        display: inline-block;
+        padding: 0.75rem 1.5rem;
+        border: 2px solid white;
+        color: white;
+        text-decoration: none;
+        font-weight: bold;
+        border-radius: 5px;
+        transition: background-color 0.3s, color 0.3s;
+      }
+      .hero-button:hover {
+        background-color: white;
+        color: #1a202c;
+      }
+    </style>
+    <div class="hero-container">
+      <div class="hero-overlay"></div>
+      <div class="hero-content">
+        <h1 class="hero-header">${header}</h1>
+        <p class="hero-text">${text}</p>
+        <a href="${buttonLink}" class="hero-button">${buttonText}</a>
+      </div>
+    </div>
+  `;
+};
diff --git a/js/components/narrow-hero.js b/js/components/narrow-hero.js
@@ -0,0 +1,60 @@
+// Updated narrow-hero component to maintain padding and a fixed height
+
+export default (hostComponent) => {
+    const { header = "Default Header", text = "" } = hostComponent.dataset;
+
+    const render = () => {
+        hostComponent.innerHTML = `
+      <style>
+        .narrow-hero {
+          position: relative;
+          width: 100%;
+          height: 250px; 
+          background: url('https://picsum.photos/1600/900') center/cover no-repeat;
+        }
+        
+        .narrow-hero-overlay {
+          position: absolute;
+          inset: 0;
+          /*
+          background-color: rgba(255, 255, 255, 0.7);
+          */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 1rem;
+        }
+        
+        .narrow-hero-content {
+          text-align: center;
+          max-width: 600px;
+          margin: auto;
+          padding: 20px; 
+          background: rgba(255, 255, 255, 0.7);
+        }
+        
+        .narrow-hero h1 {
+          font-size: 2rem;
+          margin: 0;
+          color: #333;
+        }
+        
+        .narrow-hero p {
+          font-size: 1rem;
+          color: #555;
+        }
+      </style>
+
+      <section class="narrow-hero">
+        <div class="narrow-hero-overlay">
+          <div class="narrow-hero-content">
+            <h1>${header}</h1>
+            <p>${text}</p>
+          </div>
+        </div>
+      </section>
+    `;
+    };
+
+    render();
+};
diff --git a/js/components/nav.js b/js/components/nav.js
@@ -121,6 +121,10 @@ export default (hostComponent) => {
         <span class="icon">&#x270F;</span>
         <span class="text">Form</span>
       </a>
+      <a data-nav href="/heros" title="Heros">
+          <span class="icon">&#x1F9B8;</span> <!-- Superhero icon -->
+          <span class="text">Heros</span>
+      </a>
       <a data-nav href="/maps" title="Map example">
         <span class="icon">&#x1F5FA;</span>
         <span class="text">Maps</span>

diff --git a/js/routes/form.js b/js/routes/form.js
@@ -4,7 +4,7 @@ export default (hostComponent) => {
   //language=HTML
   const indexHTML = `
 
-  <h1>Welcome to the Form route!</h1>
+  <h1>Form</h1>
 <form class="centered">
  <h2>Centered class form</h2>
 
@@ -17,10 +17,10 @@ export default (hostComponent) => {
     <input type="password" id="password" name="password">
   </div>
 
-  <div>
+<!--  <div>
     <label for="iagree">I agree</label>
     <input type="checkbox" name="iagree" id="iagree">
-  </div>
+  </div>-->
   <div>
     <label for="date">Date</label>
     <input type="date" name="date" id="date">
@@ -29,6 +29,7 @@ export default (hostComponent) => {
     <label for="range">Range</label>
     <input type="range" name="range" id="range">
   </div>
+  <textarea id="message" name="message" rows="4" required></textarea>
 
   <button type="submit">Submit</button>
 </form>

diff --git a/js/routes/heros.js b/js/routes/heros.js
@@ -0,0 +1,20 @@
+export default (hostComponent) => {
+  // Define HTML structure with data attributes directly in the template
+  const indexHTML = `
+    <div data-component="fullscreen-hero"
+         data-image-url="https://picsum.photos/1600/900"
+         data-overlay-color="rgba(0, 0, 0, 0.5)"
+         data-header="Herzlich willkommen"
+         data-text="Mit unserer umfassenden Kenntnis des aktuellen Markts..."
+         data-button-text="Mehr dazu"
+         data-button-link="/kontakt">
+    </div>
+
+    <div data-component="narrow-hero" 
+         data-header="Narrow hero">
+    </div>
+  `;
+
+  // Apply HTML to the hostComponent
+  hostComponent.innerHTML = indexHTML;
+};
diff --git a/js/routes/index.js b/js/routes/index.js
@@ -6,7 +6,7 @@ export default (hostComponent) => {
 
   // Create some new HTML content
   const indexHTML = `
-    <h1>Welcome to the Homepage route!</h1>
+    <h1>Homepage</h1>
     <p>This is some content for the homepage.</p>
     <p class="minor">This is minor text.</p>
   `;