Hardware Acceleration

HarishPrabhu-02 — Mon, 17 Jun 2024 14:23:23 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Hardware acceleration is a feature that uses specialized hardware to enhance the performance of certain tasks like graphics, videos, and sounds.
It frees up the CPU, which results in much smoother and faster computer operations for a far superior experience

Additional Context
With the help of Gemini, I have been able to write about hardware acceleration.
This still involved my hand in structuring the words and not making it a complete AI generated submission.

Created a simple Earth simulation-like with a message with CSS only.

HarishPrabhu-02 — Sun, 28 Apr 2024 16:49:23 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Hey there!
I built a Earth showing it's transition from being natural to dreadfulness with CSS animations.
This simply highlights the immediate need of protecting the earth before it's gone.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Earth Day - Protect Our Planet</title>
  <style>
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e0e0e0 0%, #ececec 30%, #f0f0f0 60%);
}

.earth {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  position: relative; /* Make Earth the reference point for message positioning */
  background: conic-gradient(#2c9bff 0%, #43a047 60%); /* Healthy Earth colors */
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.4);
  animation: earth-state 10s linear infinite alternate;
}

@keyframes earth-state {
from {
    background: conic-gradient(#2c9bff 0%, #43a047 60%); /* Healthy Earth colors (0%) */
  }
  /* No intermediate keyframes needed as messages control visibility */
  to {
    background: conic-gradient(#333 0%, #555 60%); /* Deteriorated Earth colors (100%) */
  }
}



.message {
  position: absolute;
  transform: translateX(-50%); /* Center horizontally */
  white-space: nowrap;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 5px #000;
  opacity: 0; /* Initially invisible */
}

.message.before {
  top: calc(50% - 60px); /* Position above Earth with offset */
  transform: translateX(-50%); /* Center horizontally */
  animation: message-fade-before 10s linear infinite alternate; /* Separate fade animation */
}

.message.after {
  top: calc(50% + 60px); /* Position below Earth with offset */
  transform: translateX(-50%); /* Center horizontally */
  animation: message-fade-after 10s linear infinite alternate; /* Separate fade animation */
}

@keyframes message-fade-before {
  /* Fade out slightly before the full color transition of Earth (around 70%) */
  0% {
    opacity: 1; /* Visible when Earth is healthy (before message) */
  }
  8 0% {
    opacity: 0; /* Fade out before Earth deteriorates */
  }
  100% {
    opacity: 0; /* Remain invisible during deteriorated state */
  }
}

@keyframes message-fade-after {
  /* Fade in when Earth is fully deteriorated (100%) */
  0% {
    opacity: 0; /* Remain invisible until fully deteriorated */
  }
  100% {
    opacity: 1; /* Visible only at 100% (deteriorated state) */
  }
}
  </style>
</head>
<body>
  <div class="earth"></div>
 <div class="message before">Protect Our Planet Before...</div>
  <div class="message after">It's Gone...</div>
</body>
</html>

This was pretty challenging to implement the idea of Earth transition from a natural state(blue & green) to it's deteriorated and dreadful state(gloomy grey)using pure CSS.
I mustered myself on completing this challenge and finished with what I could.
The takeaway from this was learning about keyframes in CSS and not relying on Javascript to enhance the visual outlook of the prototype.
Thanks for this challenge DEV team!
I hope everybody who participated had learnt something regardless of how you feel about it.

Celebrate Earth Day by being aware of it's importance.

HarishPrabhu-02 — Sun, 28 Apr 2024 11:47:56 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

I've built a Landing Page for Earth Day Celebration using HTML, CSS & Javascript in Brackets editor

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celebrate Earth Day - Protect Our Planet!</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <section class="hero">
    <img src="earth-day-image.jpeg" alt="Earth Day Image" style="width: 100%;">
    <div class="hero-content">
      <h1 style="color: #006400; font-size: 2.5em; text-shadow: 1px 1px 1px #32994e; background-image: url(light-blue-texture.jpeg); background-size: cover; background-position: center;">
  <img src="earth-icon.png" alt="Earth Day Icon" style="width: 40px; margin-right: 10px;">
  Celebrate Earth Day!
</h1>
<p style="color: #006400; font-size: 2.5em; text-shadow: 1px 1px 1px #32994e; background-image: url(light-blue-texture.jpeg); background-size: cover; background-position: center;">Take action and protect our planet.</p>
    </div>
  </section>

  <header>
    <h1>Welcome to Our Earth Day Celebration!</h1>
  </header>
  <section id="main-content" style="background-color: #d0f0ff; border: 1px solid #006400; padding: 1rem;">
    <article class="facts">
      <h2><img src="earth-icon.png" alt="Earth Icon" style="width: 20px; margin-right: 5px;"> Did You Know?</h2>
      <p style="color: #006400;">Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
    </article>
    <hr style="border: 1px solid #006400; margin: 1rem 0;">
    <article class="facts">
      <h2><img src="earth-icon.png" alt="Earth Icon" style="width: 20px; margin-right: 5px;"> Why Celebrate Earth Day?</h2>
      <p style="color: #006400;">Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
      <a href="https://www.who.int/teams/environment-climate-change-and-health/call-for-climate-action" class="cta-button">Learn More</a>
    </article>
  </section>
  </body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #2c9bff;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 2em;
  margin: 0;
}

section {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.hero img {
  width: 100%; /* Fills the entire width of the container (optional) */
  max-height: 400px; /* Sets a maximum height */
  object-fit: cover; /* Ensures image covers the entire container while maintaining aspect ratio */
}
article,
.action-call,
.testimonial,
.events {
  flex: 1 1 300px;
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}
.facts article { /* Styles for all articles */
  cursor: pointer;
  background-color: #e0e0e0;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out;
}

.facts article:hover { /* Hover effect for all articles */
  background-color: #d0d0d0;
}

/* Target specific articles for animations */
.facts article:nth-child(1):hover { /* "Did You Know?" animation */
  animation: pulsate 0.5s ease-in-out infinite alternate;
}

.facts article:nth-child(2):hover { /* "Why Celebrate Earth Day?" animation */
  animation: shake 0.3s ease-in-out infinite alternate;
}


@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

article h2,
.action-call h2,
.testimonial h2,
.events h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

article p,
.action-call p,
.testimonial p,
.events p {
  line-height: 1.5;
}

.facts p {
  font-style: italic;
}

.action-call a {
  background-color: #2c9bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.action-call a:hover {
  background-color: #1a759b;
}

/* Accordion Styles (assuming content paragraphs have class 'hidden') */
article p.hidden {
  display: none;
}

article h2.active {
  /* Style for active accordion titles (e.g., font-weight: bold) */
}

/* Image Slider Styles (assuming slider container has class 'image-slider' and images have class 'active') */
.image-slider {
  width: 100%;
  overflow: hidden;
}

.image-slider img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0; /* Initially hide all images */
  transition: opacity 0.5s ease-in-out;
}

.image-slider .active {
  opacity: 1; /* Show the active image */
}

/* Animation Styles (assuming class 'fade-in' is used for animation) */
.fade-in {
  opacity: 1;
  animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

script.js:

const sections = document.querySelectorAll('section, .testimonial + section, .events + section');


// Accordion functionality for articles
const articles = document.querySelectorAll('article');
articles.forEach(article => {
    const content = article.querySelector('p');
    const title = article.querySelector('h2');
    title.addEventListener('click', () => {
        content.classList.toggle('hidden'); // Toggle visibility on click
        title.classList.toggle('active'); // Add/remove active class for styling
    });
});

// Image slider functionality (assuming images are within a container with class 'image-slider')
const sliderContainer = document.querySelector('.image-slider');
if (sliderContainer) { // Check if slider container exists
    const images = sliderContainer.querySelectorAll('img');
    let currentImage = 0;

    // Function to display the current image
    const showImage = (index) => {
        images.forEach(img => img.classList.remove('active'));
        images[index].classList.add('active');
    };

    // Display first image initially
    showImage(currentImage);

    // Add functionality for next/previous buttons (assuming buttons have classes 'next' and 'prev')
    const nextButton = document.querySelector('.next');
    const prevButton = document.querySelector('.prev');
    if (nextButton && prevButton) { // Check if buttons exist
        nextButton.addEventListener('click', () => {
            currentImage = (currentImage + 1) % images.length;
            showImage(currentImage);
        });
        prevButton.addEventListener('click', () => {
            currentImage = (currentImage - 1 + images.length) % images.length; // Handle negative index
            showImage(currentImage);
        });
    }
}

// Animations for smoother transitions (using CSS classes)
sections.forEach(section => {
    section.classList.add('fade-in'); // Add initial fade-in class
});

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('fade-in'); // Add animation class on intersection
        } else {
            entry.target.classList.remove('fade-in'); // Remove animation class on non-intersection
        }
    });
});

observer.observe(sections[0]); // Start observing the first section initially
window.addEventListener('scroll', () => observer.observe(sections[0])); // Observe subsequent sections on scroll

const didYouKnowText = document.querySelector('.facts article:nth-child(1) p'); // Select first article's paragraph
const whyCelebrateText = document.querySelector('.facts article:nth-child(2) p'); // Select second article's paragraph

didYouKnowText.addEventListener('click', () => {
  // Implement your logic to display "Did You Know" information
  didYouKnowText.textContent = 'Read interesting Earth Day facts!'; // Example change
});

whyCelebrateText.addEventListener('click', () => {
  // Implement your logic to display "Why Celebrate Earth Day" information
  didYouKnowText.textContent = 'Discover the importance of Earth Day!'; // Example change (fix typo)
});

This isn't the first time I'm building something using HTML, CSS & Javascript but yet I learned some ways to build something once again from a criteria.
I look forward to participate in more challenges as it's pretty fun, challenging a lot and that helps to stay in the loop with computers.
Nonetheless, it got the job done.
And good luck to everyone who's trying whatever they can to participate and give a shot in this challenge.

DEV Community: HarishPrabhu-02

Hardware Acceleration

Created a simple Earth simulation-like with a message with CSS only.

Celebrate Earth Day by being aware of it's importance.