Tick-Tock Widget

Project Explanation

I’m working on a minimalist desktop live wallpaper 🖥️ to display two clocks:

1. CT Time 🕰️ (Central Time) – for the schools I work with online 🏫
2. São Paulo Time ⏰ (SP Time) – for where I currently live 🌎

I wanted a quick visual reference for these two time zones when I open my laptop 💻. It’s designed to be simple, beige, and include a cute cat 🐱 to make it more fun and personal! This personalized project will help me keep track of my teaching schedule and the time in my current location—all with a visual glance when I open my laptop.

1. How to Change the Time Zones
2. How to Change the Title
3. How to Create an AI Image for the bakckground
4. How to Upload the AI Image and Update Your Code
5. How to Make it into a Dynamic Wallper on Desktop

---

Customizing the Times

Step 1: Clone the GitHub Repository

1. Find the Correct Time Zone Name

   • Look up the correct IANA time zone string (e.g., America/Sao_Paulo for São Paulo or Asia/Tokyo for Tokyo).
   • Use this IANA Time Zone Lookup Tool.

2. Update Your Code

   • Replace the existing time zone string in the code with the one for your desired region.

---

Customizing the Title

Step 1: Edit the Cloned Repository

1. Open index.html

   • Locate the title of the webpage, typically represented by an <h1> tag.

2. Update the Title

   • Replace the existing title with your custom one and save the file.

---

Customizing the Image

How I Created an Image with Canva AI

1. Access Canva's AI Image Generator
   • Use Canva's AI tool: https://www.canva.com/ai-image-generator/.

3. Choose Your Wording
   Start by thinking about the text prompt that describes the image you want. Be specific about the theme, mood, or key elements you want in the design. For example, you can describe the style, objects, and color palette.

5. Pick the Style
   Canva AI allows you to select from various styles like realistic, cartoonish, abstract, or even specific art movements. Choose a style that fits your vision for the image.

7. Run the Generator
   Enter your text prompt and let the AI create an image for you. If the first result doesn’t match what you’re envisioning, tweak the wording or refine your style preferences and run it again.

9. Refine Your Results
   Don’t hesitate to do multiple reruns until the AI generates an image you’re happy with. Experimentation is key to achieving the desired result.

11. Save Once you've created an image you love, save it to your device.

and upload it to your github repository. Name your image: insertname.jpg

By following this process, I was able to create an image I liked by carefully choosing my words, picking a style, and rerunning the generator until it felt just right. Have fun experimenting with Canva's AI to bring your ideas to life!

How to Upload Your Image and Update Your Code

Follow these steps to upload your image and ensure it displays correctly in your project:

Step 1: Upload Your Image

• Go to your GitHub repository and upload the image file.
• Use the "Upload files" option in the repository interface.

---

Step 2: Choose Your File

• After clciking upload file, click "choose file", select your image and click "open"

---

Step 3: Commit Your Changes

• Add a commit message (e.g., "Uploaded new background image") and click "Commit changes" to save your updates.

---

Step 4: Copy the File Path

• Locate your uploaded image in the repository, right-click on it, and select "Copy file path."

---

Step 5: Update the Image Path in Your Code

• Replace the placeholder image path in your code with the correct file path from Step 4. Ensure the file path is accurate to display the desired image.

---

By following these steps, your custom image should now display correctly in your project. Let me know if you encounter any issues!

Turn It into Your Desktop Background

For Windows

• Use Lively Wallpaper for dynamic wallpapers.

• 

• 

• Check their GitHub repository.

  For Mac

• Use the Splash App for live wallpapers.

• Check out their Github GitHub instructions.

Overview 🌟