Jump to content

laterrarossa

Member
 View Profile  See their activity

  • Posts

    25

  • Joined

  • Last visited

Recent Profile Visitors

467 profile views

laterrarossa's Achievements

Level 5

Level 5 (5/20)

  • Dedicated Contributor Rare
  • Daily Visitor Rare
  • Conversation Starter Rare
  • Circle Community Advocate Rare

Recent Badges

11

Reputation

1

Community Answers

  1. laterrarossa
    Good morning OP and @tiffatron, I don't know if this is helpful, but here is how I have solved this issue until Squarespace implements this as a feature. I created an email forwarding filter in Gmail filtering all emails containing the text "La Terra Rossa Coffee Co: A New Order has Arrived" and forwarding the email as an MMS text to my phone using my carrier's text forwarding email address. In my case, I use Verizon, so the email is forwarded to number@vzwpix.com, with the "number" part of the address changed to my phone number. This requires a confirmation text for security as well as entering a confirmation code in Gmail. It is a roundabout solution, but it works for my needs.
  2. laterrarossa started following Elfsight
  3.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  4. laterrarossa
    I am going to call it a day here in a few minutes, as I have to get up early, but I did set a different hover state color for the background and text of the buttons, with the updated code below. <!DOCTYPE html> <html> <head> <title>AeroPress Brewing Timer</title> <style> button { background-color: #CB6849; color: #E9D8C1; font-family: "Futura PT", sans-serif; font-size: 16px; padding: 10px 10px; border: none; border-radius: 5px; margin-right: 5px; } button:hover{ background: #B7B8AB; color: #556E77; </style> </head> <center><body> <p id="stage">Pour 24 g of water, stir, and bloom for 30 sec.</p> <h1 id="timer">00:30</h1> <button onclick="startTimer()">Start</button> <button onclick="pauseTimer()">Pause</button> <button onclick="resetTimer()">Reset</button> <script> var stage1 = 30; // Time for stage 1 in seconds var stage2 = 60; // Time for stage 2 in seconds var stage3 = 10; // Time for stage 3 in seconds var totalTime = stage1 + stage2 + stage3; // Total time in seconds var timeLeft = stage1; // Time left in seconds var currentStage = 1; // Current stage of brewing process var timerInterval; // Interval ID for timer function startTimer() { document.getElementById("timer").innerHTML = formatTime(timeLeft); timerInterval = setInterval(updateTimer, 1000); } function pauseTimer() { clearInterval(timerInterval); } function updateTimer() { if (timeLeft <= 0) { clearInterval(timerInterval); if (currentStage === 1) { currentStage++; document.getElementById("stage").innerHTML = "Add remaining 168 g of water and brew for 1 min."; timeLeft = stage2; } else if (currentStage === 2) { currentStage++; document.getElementById("stage").innerHTML = "Place the filter cap on the AeroPress and flip it onto your mug. Press down slowly for 10 sec."; timeLeft = stage3; } else { document.getElementById("timer").innerHTML = "Enjoy."; return; } document.getElementById("timer").innerHTML = formatTime(timeLeft); timerInterval = setInterval(updateTimer, 1000); } else { document.getElementById("timer").innerHTML = formatTime(timeLeft); if (timeLeft <= 10) { var blink = document.getElementById("timer"); blink.style.color = (blink.style.color == "#556E77" ? "#FFFFFF" : "#556E77"); } timeLeft--; } } function resetTimer() { clearInterval(timerInterval); timeLeft = stage1; currentStage = 1; document.getElementById("stage").innerHTML = "Pour 24 g of water, stir, and bloom for 30 sec."; document.getElementById("timer").innerHTML = "00:30"; document.getElementById("timer").style.color = "#556E77"; } function formatTime(time) { var minutes = Math.floor(time / 60); var seconds = time % 60; return (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds; } </script> </body></center> </html>
  5.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  6.    sayreambrosio reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  7. laterrarossa
    @sayreambrosio Thank you so much. Forums, videos, articles, and podcasts have all been helpful in building my website for sure. Yes, we are in Oregon and there are many Human Bean locations around. They are not really my style of coffee, but I am happy to have them around and they are well liked by many without a doubt.
  8.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  9.    sayreambrosio reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  10. laterrarossa
    @sayreambrosio Thank you. These are all good tips. Originally the first draft did not auto-advance, but I was worried that people would forget to hit start again. Perhaps I will add a buffer between each step. I am still trying to get it to work, but the time is also supposed to blink when it gets to the final 10 seconds of each step to indicate to be ready. I like the different button colour idea, and will play around with that later this week, as my brain is fried currently trying to get this to even function.
  11.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  12. laterrarossa
    Good evening @paul2009 and @sayreambrosio. It is not perfect and still need a lot of finessing, but below is the code I had so far for an upgraded timer, which you can see live at https://laterrarossa.com/aeropress. Thank you both for your help and let me know what you think. <!DOCTYPE html> <html> <head> <title>AeroPress Brewing Timer</title> <style> button { background-color: #CB6849; color: #E9D8C1; font-family: "Futura PT", sans-serif; font-size: 16px; padding: 10px 10px; border: none; border-radius: 5px; margin-right: 5px; } </style> </head> <center><body> <p id="stage"><strong>Pour 24 g of water, stir, and bloom for 30 sec.</strong></p> <h1 id="timer">00:30</h1> <button onclick="startTimer()">Start</button> <button onclick="pauseTimer()">Pause</button> <button onclick="resetTimer()">Reset</button> <script> var stage1 = 30; // Time for stage 1 in seconds var stage2 = 60; // Time for stage 2 in seconds var stage3 = 10; // Time for stage 3 in seconds var totalTime = stage1 + stage2 + stage3; // Total time in seconds var timeLeft = stage1; // Time left in seconds var currentStage = 1; // Current stage of brewing process var timerInterval; // Interval ID for timer function startTimer() { document.getElementById("timer").innerHTML = formatTime(timeLeft); timerInterval = setInterval(updateTimer, 1000); } function pauseTimer() { clearInterval(timerInterval); } function updateTimer() { if (timeLeft <= 0) { clearInterval(timerInterval); if (currentStage === 1) { currentStage++; document.getElementById("stage").innerHTML = "<strong> Add remaining 168 g of water and brew for 1 min. </strong>"; timeLeft = stage2; } else if (currentStage === 2) { currentStage++; document.getElementById("stage").innerHTML = "<strong> Place filter the cap on the AeroPress and flip it onto your mug. Press down slowly for 10 sec. </strong>"; timeLeft = stage3; } else { document.getElementById("timer").innerHTML = "Enjoy."; return; } document.getElementById("timer").innerHTML = formatTime(timeLeft); timerInterval = setInterval(updateTimer, 1000); } else { document.getElementById("timer").innerHTML = formatTime(timeLeft); if (timeLeft <= 10) { var blink = document.getElementById("timer"); blink.style.color = (blink.style.color == "#556E77" ? "#FFFFFF" : "#556E77"); } timeLeft--; } } function resetTimer() { clearInterval(timerInterval); timeLeft = stage1; currentStage = 1; document.getElementById("stage").innerHTML = "Pour 24 g of water, stir, and bloom for 30 sec."; document.getElementById("timer").innerHTML = "00:30"; document.getElementById("timer").style.color = "#556E77"; } function formatTime(time) { var minutes = Math.floor(time / 60); var seconds = time % 60; return (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds; } </script> </body></center> </html>
  13.    Elfsight reacted to a post in a topic: Styled Buttons within HTML Code Element
  14.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  15.    laterrarossa reacted to a post in a topic: Segmented Timer with Headings for Each Stage
  16. laterrarossa
    Thank you @paul2009! Sorry for the slow reply, but attached is a rough concept of how I envision the steps.
  17. laterrarossa
    Understandably, this a complicated question and one that I have been trying to find a solution for all over online. I have a coffee company and on my website (https://laterrrarossa.com) I have brewing guides with timers to help customers brew their coffee with a step by step guide. Currently the timers are a simple stopwatch with Start, Pause, and Clear buttons with the time displayed as seconds. While I am happy with this solution, I would love to create a more useful timer, with segments (or basically laps) that countdown and pause until the user is ready to proceed to the next step. For instance, instead of the current timer counting up from zero until it is paused, the displayed text would read "Pour 60 grams of Water" and when the start button is pushed, the timer would countdown from 30 seconds and display the words "Bloom for 30 sec". When the 30 seconds had elapsed, the time would pause before the next stage with a new heading. This might not be possible, at least with fairly simple code which can be used in Squarespace, but I thought I would ask here in case anyone had any ideas on how I might accomplish this. Thank you so much.
  18. laterrarossa
    You're welcome and thank you for your apps. They have been a huge help!
  19.    laterrarossa reacted to a post in a topic: Styled Buttons within HTML Code Element
  20.    sayreambrosio reacted to a post in a topic: Styled Buttons within HTML Code Element
  21. laterrarossa started following sayreambrosio
  22. laterrarossa
    @sayreambrosio You're so welcome and thank you! I will be adding a new decaf this week and a new Rwandan coffee next month : )
  23.    laterrarossa reacted to a post in a topic: Styled Buttons within HTML Code Element
  24.    sayreambrosio reacted to a post in a topic: Styled Buttons within HTML Code Element
  25.    laterrarossa reacted to a post in a topic: Styled Buttons within HTML Code Element
  26. laterrarossa
    @sayreambrosio I am using a WhatsApp Business chat plug-in from Elfsight Apps. I then customized the colours to match my brand as well as added custom wording and my memoji from Apple. https://apps.elfsight.com/panel/applications/whatsapp-chat/
  27.    sayreambrosio reacted to a post in a topic: Styled Buttons within HTML Code Element
  28. laterrarossa started following Ziggy
  29.    laterrarossa reacted to a post in a topic: Styled Buttons within HTML Code Element
  30. laterrarossa
    @Ziggy Thank you so much! That worked perfectly. I made some UI tweaks and will probably keep working on it, as I would love to add minutes and stages, with instructions to the timers, but this made it look so much better, so thank you again. I really do appreciate it.
  31. laterrarossa
    @Ziggy Thank you so much. The page url is https://laterrarossa.com/aeropress
  32. laterrarossa
    Good evening, I run a coffee business, so my website includes brew guide pages for various brewing methods, and as a part of the page, I have added a timer that may be used in line with the guide for timing each step, but I would love to style the shape, colour, and fonts of the buttons to match our branding. I have tried to create a modifier or style section within the code to adjust the corner radius, but nothing seems to work. Can anyone point me in the right direction? I have included the html for the code embed below for reference: <html lang = "en"> <head> <title>Stopwatch</title> </head> <body> <div><strong>Seconds:</strong> <span id="time">0</span></div> </center><input type="button" id="startTimer" value="Start" onclick="start();"> <input type="button" id="stopTimer" value="Pause" onclick="stop();"> <input type="button" id="resetTimer" value="Clear" onclick="reset();"> <script> var timeElapsed = 0; var timerID = -1; function tick() { timeElapsed++ document.getElementById("time").innerHTML = timeElapsed; } function start() { if(timerID == -1){ timerID = setInterval(tick, 1000); } } function stop() { if(timerID != -1){ clearInterval(timerID) timerID = -1 } } function reset() { stop(); timeElapsed = -1; tick() } </script> </body> </html> Thank you all.
  33.    creedon reacted to a post in a topic: Make text block sticky
  34.    creedon reacted to a post in a topic: Make text block sticky
  35. laterrarossa started following creedon
  36. laterrarossa
    @creedon I was able to pull the other 3 indentifiers by inspecting the element for each page and that worked perfectly! Thank so much for you assistance!
  37. laterrarossa
    @creedon Thank you so much! This is working great for the example page I had sent, but not yet for the other, though I added the same code to the code injection for each individual page. Forgive me for my lack of knowledge, but I am guessing that the fe-block part of the code is pointing to that elements position on that specific page? I may be far off. If so, I am guessing I can pull the position for each page by inspecting the element within the developer tools in my browser to adjust the code on per-page basis?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources