Add files via upload

ZigaoWang · Aug 16, 2023 · 6bc23da · 6bc23da
1 parent 6473b84
commit 6bc23da
Show file tree

Hide file tree

Showing 6 changed files with 248 additions and 0 deletions.
diff --git a/image/delete.png b/image/delete.png
diff --git a/image/upload.png b/image/upload.png
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>DazTab Lite Beta Version</title>
+</head>
+<body>
+  <div id="background-container"></div>
+  <div id="content-container">
+    <div id="clock"></div>
+    <div id="date"></div>
+    <div id="quote"></div>
+  </div>
+  <div id="upload-container">
+    <button id="upload-button" class="button">
+      <img src="image/upload.png" alt="Upload Background" class="button-icon">
+    </button>
+    <button id="delete-button" class="button">
+      <img src="image/delete.png" alt="Delete Background" class="button-icon">
+    </button>
+    <input type="file" id="image-upload" accept="image/*">
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,11 @@
+{
+  "name":"DazTab Lite Beta Version",
+  "description":"Start Page Extension",
+  "manifest_version":3,
+  "version":"1.0",
+  "author": "Zigao Wang",
+  "homepage_url": "https://zigaow.com",
+
+  "chrome_url_overrides":{
+       "newtab":"index.html"}
+  }
diff --git a/script.js b/script.js
@@ -0,0 +1,113 @@
+const quotes = [
+  "Smile, breathe, and go slowly.",
+  "Every moment is a new beginning.",
+  "You are stronger than you think.",
+  "Believe you can and you're halfway there.",
+  "Progress, not perfection.",
+  "The future depends on what you do today.",
+  "Dream big and dare to fail.",
+  "Challenges are what make life interesting.",
+  "Embrace the uncertainty.",
+  "Life is tough, but so are you.",
+  "Be kind to yourself.",
+  "Keep going, you're making progress.",
+  "Difficult roads lead to beautiful destinations.",
+  "Inhale confidence, exhale doubt.",
+  "The only limit is your mind.",
+  "Stay positive. Work hard. Make it happen.",
+  "You got this.",
+  "The best is yet to come.",
+  "The harder you work, the luckier you get.",
+  "Be a voice, not an echo.",
+  "Rise above the storm and you will find the sunshine.",
+  "Make today amazing.",
+  "Create your own sunshine.",
+  "You are unstoppable.",
+  "Every day is a new chance.",
+  "Good things take time.",
+  "Your vibe attracts your tribe.",
+  "Change your thoughts, change your world.",
+  "Don't watch the clock; do what it does. Keep going.",
+  "Do what you can, with what you have, where you are.",
+  "Stay close to people who feel like sunlight.",
+  "Believe in yourself and all that you are.",
+  "Wake up with determination, go to bed with satisfaction.",
+  "You are never too old to set another goal.",
+  "Don't wait for opportunity. Create it.",
+  "Your life does not get better by chance, it gets better by change.",
+  "The only way to predict the future is to create it.",
+  "Don't count the days; make the days count.",
+  "Dream it, wish it, do it.",
+  "Strive for progress, not perfection.",
+  "Be yourself; everyone else is already taken.",
+  "The power of imagination makes us infinite.",
+  "It's not about ideas. It's about making ideas happen.",
+  "Doubt kills more dreams than failure ever will.",
+  "Stay hungry, stay foolish.",
+  "Life is either a daring adventure or nothing at all.",
+  "Success is walking from failure to failure with no loss of enthusiasm.",
+  "It's not whether you get knocked down, it's whether you get up.",
+  "If you want to lift yourself up, lift up someone else.",
+];
+
+function updateClock() {
+  const now = new Date();
+  const hours = now.getHours().toString().padStart(2, '0');
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  document.getElementById('clock').textContent = `${hours}:${minutes}`;
+}
+
+function updateDate() {
+  const now = new Date();
+  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+  const dateText = now.toLocaleDateString('en-US', options);
+  document.getElementById('date').textContent = dateText;
+}
+
+function updateQuote() {
+  const randomIndex = Math.floor(Math.random() * quotes.length);
+  document.getElementById('quote').textContent = quotes[randomIndex];
+}
+
+const imageUpload = document.getElementById('image-upload');
+const backgroundContainer = document.getElementById('background-container');
+const uploadButton = document.getElementById('upload-button');
+const deleteButton = document.getElementById('delete-button');
+
+imageUpload.addEventListener('change', (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const imageUrl = e.target.result;
+      backgroundContainer.style.backgroundImage = `url('${imageUrl}')`;
+
+      localStorage.setItem('backgroundImage', imageUrl);
+    };
+    reader.readAsDataURL(file);
+  }
+});
+
+uploadButton.addEventListener('click', () => {
+  imageUpload.click();
+});
+
+deleteButton.addEventListener('click', () => {
+  backgroundContainer.style.backgroundImage = 'url(https://bing.shangzhenyang.com/api/1080p)';
+  localStorage.removeItem('backgroundImage');
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const cachedBackgroundImage = localStorage.getItem('backgroundImage');
+  if (cachedBackgroundImage) {
+    backgroundContainer.style.backgroundImage = `url('${cachedBackgroundImage}')`;
+  } else {
+    backgroundContainer.style.backgroundImage = 'url(https://bing.shangzhenyang.com/api/1080p)';
+  }
+
+  updateClock();
+  setInterval(updateClock, 1000);
+
+  updateDate();
+  updateQuote(); // Call the function to set the initial quote
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,97 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  background-image: url(https://bing.shangzhenyang.com/api/1080p);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  flex-direction: column; /* Align elements in a column */
+  font-family: 'Quicksand', sans-serif; /* Use Quicksand font */
+}
+
+#background-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  z-index: -1;
+}
+
+#content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#clock {
+  position: relative;
+  font-size: 10rem;
+  color: white;
+  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  margin-top: 20px; /* Add margin to the top */
+  text-align: center; /* Center the text horizontally */
+}
+
+#date {
+  position: relative;
+  font-size: 1.5rem; /* Adjust font size for the date */
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow */
+  z-index: 1;
+  margin-top: 5px; /* Add a bit of margin between clock and date */
+  text-align: center; /* Center the text horizontally */
+}
+
+#quote {
+  position: relative;
+  font-size: 2rem; /* Adjust font size for the quote */
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow */
+  z-index: 1;
+  margin-top: 10px; /* Add a bit of margin between date and quote */
+  text-align: center; /* Center the text horizontally */
+}
+
+#upload-container {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  z-index: 1;
+}
+
+#image-upload {
+  display: none;
+}
+
+.button {
+  background-color: #3498db;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 2px;
+  transition: background-color 0.3s ease;
+  margin-right: 5px;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button:hover {
+  background-color: #2980b9;
+}
+
+.button-icon {
+  width: 100%;
+  height: 100%;
+}