Reyanabid123 · July 1, 2024 08:58
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weekly Timetable</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anta&display=swap" rel="stylesheet">
  <style>
    /* Common styles */
    body {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 100%;
      background: linear-gradient(to right, #00000, #ffffff, #010101);
      background-size: 2000% auto;
      animation: gradientAnimation 3s ease ;
      mix-blend-mode: difference;
      /* Prevent horizontal scrollbar */
    }
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    .container {
      max-width: 800px;
      font-family: "Anta", sans-serif;
      font-weight: 400;
      mix-blend-mode: difference;
      font-style: normal;
      margin-top: 10vh;
      margin: 0 auto;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: background-color 0.3s ease;
    }

    h2 {
      margin-top: 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      mix-blend-mode: difference;
    }

    th,
    td {
      padding: 10px;
      text-align: center;
    }

    th {
      font-weight: bold;
    }

  

    /* .dark-mode th {} */

    /* Animation */
    @keyframes slideIn {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Additional styling */
    .sunday {
      font-size: 5vh;
      mix-blend-mode: difference;

    }

    .activity-exclude {
      text-decoration: line-through;
      color: #888;

    }

  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 </head>

 <body>
  <div class="container mt-5">
    <h2 class="text-center">Weekly Timetable</h2>
    <p class="text-center">Today's Date and Time: <span id="currentDateTime"></span></p>
    <table class="table table-bordered" id="timetable">
      <thead>
        <tr>
          <th>Day</th>
          <th>Prayer</th>
          <th>No Sleep</th>
          <th>Prepare Work and Test</th>
          <th>Go to School</th>
          <th>Come from School</th>
          <th>1 Hour Rest</th>
          <th>2 Hours School Work</th>
          <th>Computer Only</th>
        </tr>
      </thead>
      <tbody>
        <!-- Repeat rows for all days -->
        <tr class="light-theme">
          <td>Sunday</td>
          <td>Prayer</td>
          <td>No</td>
          <td>Prepare</td>
          <td class="activity-exclude">Go</td>
          <td>Come</td>
          <td>1 Hour</td>
          <td>2 Hours</td>
          <td>Yes</td>
        </tr>
        <!-- Repeat for Monday, Tuesday, etc. -->
      </tbody>
    </table>
  </div>

  <script>
    // Function to toggle dark mode
    function toggleDarkMode() {
      document.body.classList.toggle('dark-mode');
    }

    // Function to speak the timetable
    function speakTimetable() {
      const speechSynthesis = window.speechSynthesis;
      const utterance = new SpeechSynthesisUtterance('Your timetable is as follows:');
      // Add each row of the timetable to the speech
      document.querySelectorAll('#timetable tbody tr').forEach(row => {
        const cells = Array.from(row.children).map(cell => cell.textContent.trim()).join(', ');
        utterance.text += cells;
      });
      speechSynthesis.speak(utterance);
    }

    // Function to respond to specific commands
    function respondToCommand(command) {
      const speechSynthesis = window.speechSynthesis;
      switch (command) {
        case "time table":
          speakTimetable();
          break;
        case "it's time for":
          // Add logic to determine the current activity and respond accordingly
          const currentActivity = "Go to school"; // Example current activity
          const utterance = new SpeechSynthesisUtterance(`It's time for ${currentActivity}`);
          speechSynthesis.speak(utterance);
          break;
        case "what day is it":
          const today = new Date().toLocaleDateString('en-US', { weekday: 'long' });
          const dayUtterance = new SpeechSynthesisUtterance(`Today is ${today} ${Date}`);
          speechSynthesis.speak(dayUtterance);
          break;
        case "what time is it":
          const time = new Date().toLocaleTimeString();
          const timeUtterance = new SpeechSynthesisUtterance(`The current time is ${time}`);
          speechSynthesis.speak(timeUtterance);
          break;
          case "what is my name ":
          const name = new Date().toLocaleTimeString();
          const nameUtterance = new SpeechSynthesisUtterance(`you name is reyan`);
          speechSynthesis.speak(timeUtterance);
          break;
        default:
          // Default response for unrecognized commands
          const defaultUtterance = new SpeechSynthesisUtterance("I dont understand please try agian ");
          speechSynthesis.speak(defaultUtterance);
      }
    }

    // Function to handle speech recognition
    function handleSpeechRecognition() {
      const recognition = new webkitSpeechRecognition(); // for Chrome
      recognition.onresult = function (event) {
        const result = event.results[event.results.length - 1];
        const transcript = result[0].transcript.trim().toLowerCase();
        console.log('Transcript:', transcript);
        respondToCommand(transcript);
      };
      recognition.start();
    }

    // Update the timetable and current date and time when the page loads
    window.onload = function () {
      // Generate timetable and update date time as before
      updateDateTime();

      // Activate speech recognition when the user clicks anywhere on the page
      document.body.addEventListener('click', function () {
        handleSpeechRecognition();
      });

      // Highlight the current day and apply animation
      const days = document.querySelectorAll('#timetable tbody tr');
      const todayIndex = new Date().getDay() - 1; // Adjusting index for array (0-6) vs. days (1-7)
      days.forEach((day, index) => {
        if (index === todayIndex) {
          day.classList.add('dark-theme');
        } else {
          day.classList.add('light-theme');
        }
        day.style.animation = 'slideIn 1s ease-in-out';
      });

      // Event listener for the dark mode toggle button

     
    };

    // Function to update the current date and time
    function updateDateTime() {
      const currentDateTimeElement = document.getElementById('currentDateTime');
      const now = new Date();
      const date = now.toDateString();
      const time = now.toLocaleTimeString();
      currentDateTimeElement.textContent = `${date} ${time}`;
    }
  </script>
  
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Weekly Timetable</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Anta&display=swap" rel="stylesheet">
	<style>
	/* Common styles */
	body {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100%;
	background: linear-gradient(to right, #00000, #ffffff, #010101);
	background-size: 2000% auto;
	animation: gradientAnimation 3s ease ;
	mix-blend-mode: difference;
	/* Prevent horizontal scrollbar */
	}
	@keyframes gradientAnimation {
	0% {
	background-position: 0% 50%;
	}
	50% {
	background-position: 100% 50%;
	}
	100% {
	background-position: 0% 50%;
	}
	}
	.container {
	max-width: 800px;
	font-family: "Anta", sans-serif;
	font-weight: 400;
	mix-blend-mode: difference;
	font-style: normal;
	margin-top: 10vh;
	margin: 0 auto;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
	}

	h2 {
	margin-top: 0;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	mix-blend-mode: difference;
	}

	th,
	td {
	padding: 10px;
	text-align: center;
	}

	th {
	font-weight: bold;
	}



	/* .dark-mode th {} */

	/* Animation */
	@keyframes slideIn {
	from {
	transform: translateY(-20px);
	opacity: 0;
	}

	to {
	transform: translateY(0);
	opacity: 1;
	}
	}

	/* Additional styling */
	.sunday {
	font-size: 5vh;
	mix-blend-mode: difference;

	}

	.activity-exclude {
	text-decoration: line-through;
	color: #888;

	}

	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>

	<body>
	<div class="container mt-5">
	<h2 class="text-center">Weekly Timetable</h2>
	<p class="text-center">Today's Date and Time: <span id="currentDateTime"></span></p>
	<table class="table table-bordered" id="timetable">
	<thead>
	<tr>
	<th>Day</th>
	<th>Prayer</th>
	<th>No Sleep</th>
	<th>Prepare Work and Test</th>
	<th>Go to School</th>
	<th>Come from School</th>
	<th>1 Hour Rest</th>
	<th>2 Hours School Work</th>
	<th>Computer Only</th>
	</tr>
	</thead>
	<tbody>
	<!-- Repeat rows for all days -->
	<tr class="light-theme">
	<td>Sunday</td>
	<td>Prayer</td>
	<td>No</td>
	<td>Prepare</td>
	<td class="activity-exclude">Go</td>
	<td>Come</td>
	<td>1 Hour</td>
	<td>2 Hours</td>
	<td>Yes</td>
	</tr>
	<!-- Repeat for Monday, Tuesday, etc. -->
	</tbody>
	</table>
	</div>

	<script>
	// Function to toggle dark mode
	function toggleDarkMode() {
	document.body.classList.toggle('dark-mode');
	}

	// Function to speak the timetable
	function speakTimetable() {
	const speechSynthesis = window.speechSynthesis;
	const utterance = new SpeechSynthesisUtterance('Your timetable is as follows:');
	// Add each row of the timetable to the speech
	document.querySelectorAll('#timetable tbody tr').forEach(row => {
	const cells = Array.from(row.children).map(cell => cell.textContent.trim()).join(', ');
	utterance.text += cells;
	});
	speechSynthesis.speak(utterance);
	}

	// Function to respond to specific commands
	function respondToCommand(command) {
	const speechSynthesis = window.speechSynthesis;
	switch (command) {
	case "time table":
	speakTimetable();
	break;
	case "it's time for":
	// Add logic to determine the current activity and respond accordingly
	const currentActivity = "Go to school"; // Example current activity
	const utterance = new SpeechSynthesisUtterance(`It's time for ${currentActivity}`);
	speechSynthesis.speak(utterance);
	break;
	case "what day is it":
	const today = new Date().toLocaleDateString('en-US', { weekday: 'long' });
	const dayUtterance = new SpeechSynthesisUtterance(`Today is ${today} ${Date}`);
	speechSynthesis.speak(dayUtterance);
	break;
	case "what time is it":
	const time = new Date().toLocaleTimeString();
	const timeUtterance = new SpeechSynthesisUtterance(`The current time is ${time}`);
	speechSynthesis.speak(timeUtterance);
	break;
	case "what is my name ":
	const name = new Date().toLocaleTimeString();
	const nameUtterance = new SpeechSynthesisUtterance(`you name is reyan`);
	speechSynthesis.speak(timeUtterance);
	break;
	default:
	// Default response for unrecognized commands
	const defaultUtterance = new SpeechSynthesisUtterance("I dont understand please try agian ");
	speechSynthesis.speak(defaultUtterance);
	}
	}

	// Function to handle speech recognition
	function handleSpeechRecognition() {
	const recognition = new webkitSpeechRecognition(); // for Chrome
	recognition.onresult = function (event) {
	const result = event.results[event.results.length - 1];
	const transcript = result[0].transcript.trim().toLowerCase();
	console.log('Transcript:', transcript);
	respondToCommand(transcript);
	};
	recognition.start();
	}

	// Update the timetable and current date and time when the page loads
	window.onload = function () {
	// Generate timetable and update date time as before
	updateDateTime();

	// Activate speech recognition when the user clicks anywhere on the page
	document.body.addEventListener('click', function () {
	handleSpeechRecognition();
	});

	// Highlight the current day and apply animation
	const days = document.querySelectorAll('#timetable tbody tr');
	const todayIndex = new Date().getDay() - 1; // Adjusting index for array (0-6) vs. days (1-7)
	days.forEach((day, index) => {
	if (index === todayIndex) {
	day.classList.add('dark-theme');
	} else {
	day.classList.add('light-theme');
	}
	day.style.animation = 'slideIn 1s ease-in-out';
	});

	// Event listener for the dark mode toggle button


	};

	// Function to update the current date and time
	function updateDateTime() {
	const currentDateTimeElement = document.getElementById('currentDateTime');
	const now = new Date();
	const date = now.toDateString();
	const time = now.toLocaleTimeString();
	currentDateTimeElement.textContent = `${date} ${time}`;
	}
	</script>

	</body>

	</html>