{"id":1301,"date":"2026-04-22T01:23:08","date_gmt":"2026-04-22T01:23:08","guid":{"rendered":"https:\/\/boredbarista.com\/?page_id=1301"},"modified":"2026-04-22T02:25:50","modified_gmt":"2026-04-22T02:25:50","slug":"my-brews","status":"publish","type":"page","link":"https:\/\/boredbarista.com\/?page_id=1301","title":{"rendered":"My Brews"},"content":{"rendered":"<div style=\"margin-bottom:24px\">\r\n  <a href=\"https:\/\/boredbarista.com\/?page_id=1220\" style=\"font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999;text-decoration:none\">\u2190 Coffee Lab<\/a>\r\n<\/div>\r\n<!-- Bored Barista Brew Session Tool -->\r\n<style>\r\n  #bs-app * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }\r\n  #bs-app {\r\n    max-width: 720px;\r\n    margin: 0 auto;\r\n    padding: 48px 24px;\r\n    background: #faf8f4;\r\n    color: #1a1a1a;\r\n  }\r\n  #bs-hero {\r\n    border-bottom: 2px solid #1a1a1a;\r\n    padding-bottom: 28px;\r\n    margin-bottom: 36px;\r\n  }\r\n  #bs-hero h2 {\r\n    font-size: 11px;\r\n    letter-spacing: .25em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    margin-bottom: 10px;\r\n  }\r\n  #bs-hero h1 {\r\n    font-size: 36px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    margin-bottom: 8px;\r\n  }\r\n  #bs-hero p { font-size: 15px; color: #666; line-height: 1.6; }\r\n\r\n  \/* STEPS *\/\r\n  .bs-step {\r\n    background: #fff;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 8px;\r\n    padding: 28px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-step-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-step-num {\r\n    width: 32px;\r\n    height: 32px;\r\n    border-radius: 50%;\r\n    background: #1a1a1a;\r\n    color: #faf8f4;\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n  .bs-step-title {\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n  }\r\n  .bs-step-sub {\r\n    font-size: 13px;\r\n    color: #999;\r\n    margin-top: 2px;\r\n  }\r\n\r\n  \/* FORM ELEMENTS *\/\r\n  .bs-label {\r\n    font-size: 11px;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    font-weight: 600;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n  }\r\n  .bs-select {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 4px;\r\n    background: #faf8f4;\r\n    font-size: 15px;\r\n    color: #1a1a1a;\r\n    cursor: pointer;\r\n    margin-bottom: 20px;\r\n    appearance: none;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\");\r\n    background-repeat: no-repeat;\r\n    background-position: right 16px center;\r\n  }\r\n  .bs-select:focus { outline: none; border-color: #c8a84b; }\r\n  .bs-input-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 16px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-input-group { position: relative; }\r\n  .bs-input {\r\n    width: 100%;\r\n    padding: 12px 48px 12px 16px;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 4px;\r\n    background: #faf8f4;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n  }\r\n  .bs-input:focus { outline: none; border-color: #c8a84b; }\r\n  .bs-input-unit {\r\n    position: absolute;\r\n    right: 14px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    font-size: 13px;\r\n    color: #999;\r\n    font-weight: 600;\r\n    letter-spacing: .05em;\r\n  }\r\n  .bs-ratio-row {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 8px;\r\n  }\r\n  .bs-ratio-label { font-size: 14px; color: #666; white-space: nowrap; }\r\n  .bs-ratio-input {\r\n    width: 70px;\r\n    padding: 8px 12px;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 4px;\r\n    background: #faf8f4;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    text-align: center;\r\n  }\r\n  .bs-ratio-input:focus { outline: none; border-color: #c8a84b; }\r\n\r\n  \/* RESULT BOX *\/\r\n  .bs-result {\r\n    background: #faf8f4;\r\n    border: 1.5px solid #c8a84b;\r\n    border-radius: 6px;\r\n    padding: 20px;\r\n    margin-top: 4px;\r\n  }\r\n  .bs-result-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\r\n    gap: 12px;\r\n  }\r\n  .bs-result-item { text-align: center; }\r\n  .bs-result-value {\r\n    font-size: 32px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    display: block;\r\n    line-height: 1;\r\n    margin-bottom: 4px;\r\n  }\r\n  .bs-result-label-sm {\r\n    font-size: 11px;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    font-weight: 600;\r\n  }\r\n  .bs-divider {\r\n    width: 1px;\r\n    background: #e8e4dc;\r\n    align-self: stretch;\r\n  }\r\n  .bs-tip {\r\n    margin-top: 14px;\r\n    padding-top: 14px;\r\n    border-top: 1px solid #e8e4dc;\r\n    font-size: 13px;\r\n    color: #666;\r\n    line-height: 1.6;\r\n  }\r\n  .bs-tip span { color: #c8a84b; font-weight: 700; }\r\n\r\n  \/* TIMER *\/\r\n  .bs-timer-display {\r\n    text-align: center;\r\n    padding: 24px 0;\r\n  }\r\n  .bs-timer-time {\r\n    font-size: 64px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    letter-spacing: .05em;\r\n    display: block;\r\n    font-variant-numeric: tabular-nums;\r\n  }\r\n  .bs-timer-phase {\r\n    font-size: 13px;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    font-weight: 600;\r\n    margin-top: 8px;\r\n    display: block;\r\n    min-height: 20px;\r\n  }\r\n  .bs-timer-btns {\r\n    display: flex;\r\n    gap: 10px;\r\n    justify-content: center;\r\n    margin-top: 20px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .bs-btn {\r\n    padding: 12px 28px;\r\n    border-radius: 4px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    transition: all .15s;\r\n    border: 1.5px solid;\r\n  }\r\n  .bs-btn-primary { background: #1a1a1a; color: #faf8f4; border-color: #1a1a1a; }\r\n  .bs-btn-primary:hover { background: #333; }\r\n  .bs-btn-secondary { background: transparent; color: #666; border-color: #ccc; }\r\n  .bs-btn-secondary:hover { border-color: #1a1a1a; color: #1a1a1a; }\r\n  .bs-btn-gold { background: #c8a84b; color: #1a1a1a; border-color: #c8a84b; }\r\n  .bs-btn-gold:hover { background: #e0bf5a; }\r\n  .bs-phases {\r\n    margin-top: 20px;\r\n    display: flex;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .bs-phase-pill {\r\n    padding: 5px 12px;\r\n    border-radius: 20px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: .08em;\r\n    text-transform: uppercase;\r\n    background: #f0ede8;\r\n    color: #999;\r\n    border: 1.5px solid #e8e4dc;\r\n    transition: all .2s;\r\n  }\r\n  .bs-phase-pill.active { background: #c8a84b; color: #1a1a1a; border-color: #c8a84b; }\r\n  .bs-phase-pill.done { background: #1a1a1a; color: #faf8f4; border-color: #1a1a1a; }\r\n\r\n  \/* TASTING NOTES *\/\r\n  .bs-notes-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 14px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-notes-card {\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 6px;\r\n    padding: 14px;\r\n    cursor: pointer;\r\n    transition: all .15s;\r\n    text-align: center;\r\n  }\r\n  .bs-notes-card:hover { border-color: #c8a84b; }\r\n  .bs-notes-card.selected { border-color: #c8a84b; background: #fef9ec; }\r\n  .bs-notes-icon { font-size: 24px; display: block; margin-bottom: 6px; }\r\n  .bs-notes-title { font-size: 14px; font-weight: 700; color: #1a1a1a; display: block; margin-bottom: 3px; }\r\n  .bs-notes-hint { font-size: 11px; color: #999; display: block; }\r\n  .bs-textarea {\r\n    width: 100%;\r\n    padding: 14px 16px;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 4px;\r\n    background: #faf8f4;\r\n    font-size: 14px;\r\n    color: #1a1a1a;\r\n    line-height: 1.6;\r\n    resize: vertical;\r\n    min-height: 100px;\r\n    margin-bottom: 16px;\r\n  }\r\n  .bs-textarea:focus { outline: none; border-color: #c8a84b; }\r\n  .bs-rating {\r\n    display: flex;\r\n    gap: 8px;\r\n    margin-bottom: 20px;\r\n    flex-wrap: wrap;\r\n  }\r\n  .bs-rating-btn {\r\n    width: 44px;\r\n    height: 44px;\r\n    border-radius: 50%;\r\n    border: 1.5px solid #e8e4dc;\r\n    background: transparent;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n    transition: all .15s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  .bs-rating-btn:hover { border-color: #c8a84b; transform: scale(1.1); }\r\n  .bs-rating-btn.selected { border-color: #c8a84b; background: #fef9ec; transform: scale(1.15); }\r\n\r\n  \/* SUMMARY *\/\r\n  .bs-summary {\r\n    background: #1a1a1a;\r\n    border-radius: 8px;\r\n    padding: 28px;\r\n    display: none;\r\n    margin-top: 20px;\r\n  }\r\n  .bs-summary h3 {\r\n    font-size: 11px;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-summary-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 16px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bs-summary-item label {\r\n    font-size: 10px;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    color: #666;\r\n    display: block;\r\n    margin-bottom: 4px;\r\n  }\r\n  .bs-summary-item span {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #fff;\r\n  }\r\n  .bs-summary-notes {\r\n    border-top: 1px solid #333;\r\n    padding-top: 16px;\r\n    font-size: 14px;\r\n    color: #aaa;\r\n    line-height: 1.7;\r\n  }\r\n  .bs-save-btn {\r\n    margin-top: 16px;\r\n    width: 100%;\r\n    padding: 14px;\r\n    background: #c8a84b;\r\n    color: #1a1a1a;\r\n    border: none;\r\n    border-radius: 4px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    cursor: pointer;\r\n    transition: background .15s;\r\n  }\r\n  .bs-save-btn:hover { background: #e0bf5a; }\r\n  .bs-saved-sessions {\r\n    margin-top: 20px;\r\n    display: none;\r\n  }\r\n  .bs-saved-title {\r\n    font-size: 11px;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    margin-bottom: 12px;\r\n    font-weight: 600;\r\n  }\r\n  .bs-session-card {\r\n    background: #fff;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 6px;\r\n    padding: 16px;\r\n    margin-bottom: 10px;\r\n    font-size: 13px;\r\n    color: #555;\r\n    line-height: 1.6;\r\n    cursor: pointer;\r\n    transition: border-color .15s;\r\n  }\r\n  .bs-session-card:hover { border-color: #c8a84b; }\r\n  .bs-session-card strong { color: #1a1a1a; font-weight: 700; font-size: 14px; display: block; margin-bottom: 4px; }\r\n  @media (max-width: 480px) {\r\n    .bs-input-row { grid-template-columns: 1fr; }\r\n    .bs-notes-grid { grid-template-columns: 1fr; }\r\n    .bs-summary-grid { grid-template-columns: 1fr; }\r\n    .bs-timer-time { font-size: 48px; }\r\n    #bs-app { padding: 24px 16px; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"bs-app\">\r\n  <div id=\"bs-hero\">\r\n    <h2>Bored Barista<\/h2>\r\n    <h1>Brew Session<\/h1>\r\n    <p>Dial in your dose, set your timer, and log your tasting notes \u2014 all in one place.<\/p>\r\n  <\/div>\r\n\r\n  <!-- STEP 1: METHOD -->\r\n  <div class=\"bs-step\">\r\n    <div class=\"bs-step-header\">\r\n      <div class=\"bs-step-num\">1<\/div>\r\n      <div>\r\n        <div class=\"bs-step-title\">Choose your brew method<\/div>\r\n        <div class=\"bs-step-sub\">Sets the recommended ratio and brew time<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <label class=\"bs-label\">Brew method<\/label>\r\n    <select class=\"bs-select\" id=\"method-select\" onchange=\"updateMethod()\">\r\n      <option value=\"\">\u2014 Select a method \u2014<\/option>\r\n      <option value=\"v60\" data-ratio=\"16\" data-time=\"210\" data-bloom=\"45\" data-temp=\"95\">V60 Pour Over<\/option>\r\n      <option value=\"kalita\" data-ratio=\"15\" data-time=\"210\" data-bloom=\"45\" data-temp=\"93\">Kalita Wave<\/option>\r\n      <option value=\"chemex\" data-ratio=\"16\" data-time=\"270\" data-bloom=\"45\" data-temp=\"94\">Chemex<\/option>\r\n      <option value=\"frenchpress\" data-ratio=\"15\" data-time=\"240\" data-bloom=\"0\" data-temp=\"93\">French Press<\/option>\r\n      <option value=\"aeropress\" data-ratio=\"13\" data-time=\"90\" data-bloom=\"0\" data-temp=\"88\">AeroPress<\/option>\r\n      <option value=\"moka\" data-ratio=\"7\" data-time=\"300\" data-bloom=\"0\" data-temp=\"0\">Moka Pot<\/option>\r\n      <option value=\"espresso\" data-ratio=\"2\" data-time=\"28\" data-bloom=\"0\" data-temp=\"91\">Espresso<\/option>\r\n      <option value=\"coldbrew\" data-ratio=\"8\" data-time=\"0\" data-bloom=\"0\" data-temp=\"0\">Cold Brew<\/option>\r\n    <\/select>\r\n  <\/div>\r\n\r\n  <!-- STEP 2: DOSE CALCULATOR -->\r\n  <div class=\"bs-step\">\r\n    <div class=\"bs-step-header\">\r\n      <div class=\"bs-step-num\">2<\/div>\r\n      <div>\r\n        <div class=\"bs-step-title\">Calculate your dose<\/div>\r\n        <div class=\"bs-step-sub\">Enter coffee or water \u2014 we'll calculate the other<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bs-ratio-row\" style=\"margin-bottom:20px\">\r\n      <span class=\"bs-ratio-label\">Ratio 1 :<\/span>\r\n      <input type=\"number\" class=\"bs-ratio-input\" id=\"ratio-input\" value=\"15\" min=\"1\" max=\"20\" oninput=\"recalculate('ratio')\">\r\n      <span class=\"bs-ratio-label\" style=\"color:#999;font-size:13px\">(coffee : water)<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"bs-input-row\">\r\n      <div class=\"bs-input-group\">\r\n        <label class=\"bs-label\">Coffee dose<\/label>\r\n        <input type=\"number\" class=\"bs-input\" id=\"coffee-input\" placeholder=\"18\" min=\"1\" max=\"100\" oninput=\"recalculate('coffee')\">\r\n        <span class=\"bs-input-unit\">g<\/span>\r\n      <\/div>\r\n      <div class=\"bs-input-group\">\r\n        <label class=\"bs-label\">Water<\/label>\r\n        <input type=\"number\" class=\"bs-input\" id=\"water-input\" placeholder=\"270\" min=\"1\" max=\"2000\" oninput=\"recalculate('water')\">\r\n        <span class=\"bs-input-unit\">g<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bs-result\" id=\"dose-result\" style=\"display:none\">\r\n      <div class=\"bs-result-grid\" id=\"dose-result-grid\"><\/div>\r\n      <p class=\"bs-tip\" id=\"dose-tip\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- STEP 3: TIMER -->\r\n  <div class=\"bs-step\">\r\n    <div class=\"bs-step-header\">\r\n      <div class=\"bs-step-num\">3<\/div>\r\n      <div>\r\n        <div class=\"bs-step-title\">Brew timer<\/div>\r\n        <div class=\"bs-step-sub\">Tracks bloom, pour phases, and total brew time<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bs-timer-display\">\r\n      <span class=\"bs-timer-time\" id=\"timer-display\">0:00<\/span>\r\n      <span class=\"bs-timer-phase\" id=\"timer-phase\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"bs-phases\" id=\"timer-phases\"><\/div>\r\n\r\n    <div class=\"bs-timer-btns\">\r\n      <button class=\"bs-btn bs-btn-primary\" id=\"timer-start\" onclick=\"startTimer()\">Start brew<\/button>\r\n      <button class=\"bs-btn bs-btn-secondary\" onclick=\"resetTimer()\">Reset<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- STEP 4: TASTING NOTES -->\r\n  <div class=\"bs-step\">\r\n    <div class=\"bs-step-header\">\r\n      <div class=\"bs-step-num\">4<\/div>\r\n      <div>\r\n        <div class=\"bs-step-title\">Tasting notes<\/div>\r\n        <div class=\"bs-step-sub\">Log what you taste to dial in next time<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <label class=\"bs-label\">Overall impression<\/label>\r\n    <div class=\"bs-notes-grid\">\r\n      <div class=\"bs-notes-card\" onclick=\"selectNote('balanced', this)\">\r\n        <span class=\"bs-notes-icon\">\ud83d\ude0c<\/span>\r\n        <span class=\"bs-notes-title\">Balanced<\/span>\r\n        <span class=\"bs-notes-hint\">Sweet, clean, well-extracted<\/span>\r\n      <\/div>\r\n      <div class=\"bs-notes-card\" onclick=\"selectNote('sour', this)\">\r\n        <span class=\"bs-notes-icon\">\ud83d\ude23<\/span>\r\n        <span class=\"bs-notes-title\">Too sour<\/span>\r\n        <span class=\"bs-notes-hint\">Under-extracted<\/span>\r\n      <\/div>\r\n      <div class=\"bs-notes-card\" onclick=\"selectNote('bitter', this)\">\r\n        <span class=\"bs-notes-icon\">\ud83d\ude2c<\/span>\r\n        <span class=\"bs-notes-title\">Too bitter<\/span>\r\n        <span class=\"bs-notes-hint\">Over-extracted<\/span>\r\n      <\/div>\r\n      <div class=\"bs-notes-card\" onclick=\"selectNote('weak', this)\">\r\n        <span class=\"bs-notes-icon\">\ud83d\udca7<\/span>\r\n        <span class=\"bs-notes-title\">Too weak<\/span>\r\n        <span class=\"bs-notes-hint\">Low strength<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <label class=\"bs-label\">Flavor notes (what do you taste?)<\/label>\r\n    <textarea class=\"bs-textarea\" id=\"flavor-notes\" placeholder=\"e.g. Dark chocolate, caramel sweetness, slight citrus on the finish...\"><\/textarea>\r\n\r\n    <label class=\"bs-label\">Rate this brew<\/label>\r\n    <div class=\"bs-rating\" id=\"rating-row\">\r\n      <button class=\"bs-rating-btn\" onclick=\"setRating(1, this)\" title=\"1 \u2014 Poor\">\ud83d\ude15<\/button>\r\n      <button class=\"bs-rating-btn\" onclick=\"setRating(2, this)\" title=\"2 \u2014 Okay\">\ud83d\ude10<\/button>\r\n      <button class=\"bs-rating-btn\" onclick=\"setRating(3, this)\" title=\"3 \u2014 Good\">\ud83d\ude42<\/button>\r\n      <button class=\"bs-rating-btn\" onclick=\"setRating(4, this)\" title=\"4 \u2014 Great\">\ud83d\ude04<\/button>\r\n      <button class=\"bs-rating-btn\" onclick=\"setRating(5, this)\" title=\"5 \u2014 Perfect\">\ud83e\udd29<\/button>\r\n    <\/div>\r\n\r\n    <label class=\"bs-label\">What would you adjust next time?<\/label>\r\n    <textarea class=\"bs-textarea\" id=\"adjust-notes\" placeholder=\"e.g. Grind slightly finer, increase dose to 20g, try 93\u00b0C...\"><\/textarea>\r\n\r\n    <button class=\"bs-btn bs-btn-gold\" style=\"width:100%\" onclick=\"saveSession()\">Save this brew session<\/button>\r\n\r\n    <div class=\"bs-summary\" id=\"session-summary\">\r\n      <h3>Brew session saved<\/h3>\r\n      <div class=\"bs-summary-grid\" id=\"summary-grid\"><\/div>\r\n      <div class=\"bs-summary-notes\" id=\"summary-notes\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- SAVED SESSIONS -->\r\n  <div class=\"bs-saved-sessions\" id=\"saved-sessions\">\r\n    <p class=\"bs-saved-title\">Previous brew sessions<\/p>\r\n    <div id=\"sessions-list\"><\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  const API = \"https:\/\/bored-barista-api-production.up.railway.app\";\r\n\r\n  let timerInterval = null;\r\n  let timerSeconds = 0;\r\n  let timerRunning = false;\r\n  let currentPhase = 0;\r\n  let phases = [];\r\n  let selectedNote = '';\r\n  let selectedRating = 0;\r\n  let brewSessions = JSON.parse(localStorage.getItem('brewSessions') || '[]');\r\n\r\n  function updateMethod() {\r\n    const sel = document.getElementById('method-select');\r\n    const opt = sel.options[sel.selectedIndex];\r\n    if (!opt.value) return;\r\n    const ratio = opt.dataset.ratio;\r\n    const time = parseInt(opt.dataset.time);\r\n    const bloom = parseInt(opt.dataset.bloom);\r\n    const temp = opt.dataset.temp;\r\n    document.getElementById('ratio-input').value = ratio;\r\n    recalculate('ratio');\r\n    buildPhases(opt.value, time, bloom, temp);\r\n    resetTimer();\r\n  }\r\n\r\n  function buildPhases(method, totalTime, bloomTime, temp) {\r\n    phases = [];\r\n    if (method === 'coldbrew') {\r\n      phases = [{ name: 'Steep', duration: 0, label: '12\u201318 hours in fridge' }];\r\n    } else if (method === 'espresso') {\r\n      phases = [\r\n        { name: 'Pre-infusion', duration: 5, label: '5 sec' },\r\n        { name: 'Shot', duration: 23, label: '23 sec' }\r\n      ];\r\n    } else if (method === 'frenchpress') {\r\n      phases = [\r\n        { name: 'Pour', duration: 30, label: '30 sec' },\r\n        { name: 'Steep', duration: 210, label: '3:30 min' },\r\n        { name: 'Press', duration: 30, label: '30 sec' }\r\n      ];\r\n    } else if (method === 'aeropress') {\r\n      phases = [\r\n        { name: 'Add coffee + water', duration: 15, label: '15 sec' },\r\n        { name: 'Stir', duration: 10, label: '10 sec' },\r\n        { name: 'Steep', duration: 50, label: '50 sec' },\r\n        { name: 'Press', duration: 30, label: '30 sec' }\r\n      ];\r\n    } else {\r\n      phases = [];\r\n      if (bloomTime > 0) phases.push({ name: 'Bloom', duration: bloomTime, label: `${bloomTime} sec` });\r\n      const remaining = totalTime - bloomTime;\r\n      const pours = 3;\r\n      const pourTime = Math.round(remaining \/ pours);\r\n      for (let i = 1; i <= pours; i++) {\r\n        phases.push({ name: `Pour ${i}`, duration: pourTime, label: `~${pourTime} sec` });\r\n      }\r\n    }\r\n    renderPhases();\r\n  }\r\n\r\n  function renderPhases() {\r\n    const container = document.getElementById('timer-phases');\r\n    container.innerHTML = phases.map((p, i) => `\r\n      <span class=\"bs-phase-pill\" id=\"phase-${i}\">${p.name}<\/span>\r\n    `).join('');\r\n  }\r\n\r\n  function startTimer() {\r\n    if (timerRunning) {\r\n      clearInterval(timerInterval);\r\n      timerRunning = false;\r\n      document.getElementById('timer-start').textContent = 'Resume';\r\n      return;\r\n    }\r\n    timerRunning = true;\r\n    document.getElementById('timer-start').textContent = 'Pause';\r\n    timerInterval = setInterval(() => {\r\n      timerSeconds++;\r\n      updateTimerDisplay();\r\n      updatePhaseIndicator();\r\n    }, 1000);\r\n  }\r\n\r\n  function resetTimer() {\r\n    clearInterval(timerInterval);\r\n    timerRunning = false;\r\n    timerSeconds = 0;\r\n    currentPhase = 0;\r\n    document.getElementById('timer-display').textContent = '0:00';\r\n    document.getElementById('timer-phase').textContent = '';\r\n    document.getElementById('timer-start').textContent = 'Start brew';\r\n    renderPhases();\r\n  }\r\n\r\n  function updateTimerDisplay() {\r\n    const m = Math.floor(timerSeconds \/ 60);\r\n    const s = timerSeconds % 60;\r\n    document.getElementById('timer-display').textContent = `${m}:${s.toString().padStart(2,'0')}`;\r\n  }\r\n\r\n  function updatePhaseIndicator() {\r\n    if (!phases.length) return;\r\n    let elapsed = 0;\r\n    for (let i = 0; i < phases.length; i++) {\r\n      elapsed += phases[i].duration;\r\n      const pill = document.getElementById(`phase-${i}`);\r\n      if (!pill) continue;\r\n      if (timerSeconds < elapsed - phases[i].duration + phases[i].duration) {\r\n        if (timerSeconds >= elapsed - phases[i].duration && timerSeconds < elapsed) {\r\n          pill.classList.remove('done');\r\n          pill.classList.add('active');\r\n          document.getElementById('timer-phase').textContent = phases[i].name;\r\n          currentPhase = i;\r\n        } else if (timerSeconds >= elapsed) {\r\n          pill.classList.remove('active');\r\n          pill.classList.add('done');\r\n        }\r\n      }\r\n    }\r\n    const total = phases.reduce((a, b) => a + b.duration, 0);\r\n    if (timerSeconds >= total && total > 0) {\r\n      document.getElementById('timer-phase').textContent = '\u2713 Brew complete';\r\n      clearInterval(timerInterval);\r\n      timerRunning = false;\r\n      document.getElementById('timer-start').textContent = 'Start brew';\r\n    }\r\n  }\r\n\r\n  function recalculate(changed) {\r\n    const ratio = parseFloat(document.getElementById('ratio-input').value) || 15;\r\n    const coffeeInput = document.getElementById('coffee-input');\r\n    const waterInput = document.getElementById('water-input');\r\n    let coffee = parseFloat(coffeeInput.value);\r\n    let water = parseFloat(waterInput.value);\r\n\r\n    if (changed === 'coffee' && coffee) {\r\n      water = Math.round(coffee * ratio);\r\n      waterInput.value = water;\r\n    } else if (changed === 'water' && water) {\r\n      coffee = Math.round(water \/ ratio);\r\n      coffeeInput.value = coffee;\r\n    } else if (changed === 'ratio' && coffee) {\r\n      water = Math.round(coffee * ratio);\r\n      waterInput.value = water;\r\n    } else if (changed === 'ratio' && water) {\r\n      coffee = Math.round(water \/ ratio);\r\n      coffeeInput.value = coffee;\r\n    }\r\n\r\n    if (coffee && water) showDoseResult(coffee, water, ratio);\r\n  }\r\n\r\n  function showDoseResult(coffee, water, ratio) {\r\n    const method = document.getElementById('method-select');\r\n    const opt = method.options[method.selectedIndex];\r\n    const temp = opt && opt.dataset.temp && opt.dataset.temp !== '0' ? opt.dataset.temp + '\u00b0C' : '\u2014';\r\n    document.getElementById('dose-result-grid').innerHTML = `\r\n      <div class=\"bs-result-item\">\r\n        <span class=\"bs-result-value\">${coffee}g<\/span>\r\n        <span class=\"bs-result-label-sm\">Coffee<\/span>\r\n      <\/div>\r\n      <div class=\"bs-divider\"><\/div>\r\n      <div class=\"bs-result-item\">\r\n        <span class=\"bs-result-value\">${water}g<\/span>\r\n        <span class=\"bs-result-label-sm\">Water<\/span>\r\n      <\/div>\r\n      <div class=\"bs-divider\"><\/div>\r\n      <div class=\"bs-result-item\">\r\n        <span class=\"bs-result-value\">1:${ratio}<\/span>\r\n        <span class=\"bs-result-label-sm\">Ratio<\/span>\r\n      <\/div>\r\n      <div class=\"bs-divider\"><\/div>\r\n      <div class=\"bs-result-item\">\r\n        <span class=\"bs-result-value\">${temp}<\/span>\r\n        <span class=\"bs-result-label-sm\">Temp<\/span>\r\n      <\/div>\r\n    `;\r\n    const tips = {\r\n      v60: 'Bloom with <strong>' + Math.round(coffee * 2) + 'g<\/strong> of water for 45 seconds before continuing your pour.',\r\n      kalita: 'Bloom with <strong>' + Math.round(coffee * 2) + 'g<\/strong> of water for 45 seconds. Pour in three even stages.',\r\n      chemex: 'Bloom with <strong>' + Math.round(coffee * 2) + 'g<\/strong> for 45 seconds. Pour slowly and steadily.',\r\n      frenchpress: 'Pour all <strong>' + water + 'g<\/strong> of water at once. Stir gently. Start your timer.',\r\n      aeropress: 'Add water, stir once, and start your timer. Adjust ratio freely.',\r\n      moka: 'Fill the basket level \u2014 no tamping. Use pre-boiled water to avoid metallic taste.',\r\n      espresso: 'Target yield: <strong>' + Math.round(coffee * 2) + 'g<\/strong> in 25\u201330 seconds. Adjust grind if off.',\r\n      coldbrew: 'Combine and steep in the fridge for 12\u201318 hours. Dilute 1:1 before serving.'\r\n    };\r\n    const methodVal = opt ? opt.value : '';\r\n    document.getElementById('dose-tip').innerHTML = tips[methodVal] || 'Adjust grind size and temperature to dial in your extraction.';\r\n    document.getElementById('dose-result').style.display = 'block';\r\n  }\r\n\r\n  function selectNote(note, el) {\r\n    selectedNote = note;\r\n    document.querySelectorAll('.bs-notes-card').forEach(c => c.classList.remove('selected'));\r\n    el.classList.add('selected');\r\n  }\r\n\r\n  function setRating(rating, el) {\r\n    selectedRating = rating;\r\n    document.querySelectorAll('.bs-rating-btn').forEach(b => b.classList.remove('selected'));\r\n    el.classList.add('selected');\r\n  }\r\n\r\n  function saveSession() {\r\n    const method = document.getElementById('method-select');\r\n    const opt = method.options[method.selectedIndex];\r\n    const coffee = document.getElementById('coffee-input').value;\r\n    const water = document.getElementById('water-input').value;\r\n    const ratio = document.getElementById('ratio-input').value;\r\n    const flavorNotes = document.getElementById('flavor-notes').value;\r\n    const adjustNotes = document.getElementById('adjust-notes').value;\r\n    const date = new Date().toLocaleDateString('en-PH', { day: 'numeric', month: 'short', year: 'numeric' });\r\n\r\n    const session = {\r\n      id: Date.now(),\r\n      date,\r\n      method: opt ? opt.text : 'Unknown',\r\n      coffee: coffee || '\u2014',\r\n      water: water || '\u2014',\r\n      ratio: ratio || '\u2014',\r\n      impression: selectedNote || 'Not noted',\r\n      rating: selectedRating || 0,\r\n      flavorNotes: flavorNotes || 'None',\r\n      adjustNotes: adjustNotes || 'None'\r\n    };\r\n\r\n    brewSessions.unshift(session);\r\n    localStorage.setItem('brewSessions', JSON.stringify(brewSessions));\r\n\r\n    const ratingEmojis = ['', '\ud83d\ude15', '\ud83d\ude10', '\ud83d\ude42', '\ud83d\ude04', '\ud83e\udd29'];\r\n    document.getElementById('summary-grid').innerHTML = `\r\n      <div class=\"bs-summary-item\"><label>Date<\/label><span>${session.date}<\/span><\/div>\r\n      <div class=\"bs-summary-item\"><label>Method<\/label><span>${session.method}<\/span><\/div>\r\n      <div class=\"bs-summary-item\"><label>Coffee<\/label><span>${session.coffee}g<\/span><\/div>\r\n      <div class=\"bs-summary-item\"><label>Water<\/label><span>${session.water}g<\/span><\/div>\r\n      <div class=\"bs-summary-item\"><label>Ratio<\/label><span>1:${session.ratio}<\/span><\/div>\r\n      <div class=\"bs-summary-item\"><label>Rating<\/label><span>${ratingEmojis[session.rating] || '\u2014'}<\/span><\/div>\r\n    `;\r\n    document.getElementById('summary-notes').innerHTML = `\r\n      <strong style=\"color:#c8a84b;font-size:11px;letter-spacing:.15em;text-transform:uppercase\">Tasting notes<\/strong><br>\r\n      ${session.flavorNotes}<br><br>\r\n      <strong style=\"color:#c8a84b;font-size:11px;letter-spacing:.15em;text-transform:uppercase\">Next time<\/strong><br>\r\n      ${session.adjustNotes}\r\n    `;\r\n    document.getElementById('session-summary').style.display = 'block';\r\n    renderSavedSessions();\r\n  }\r\n\r\n  function renderSavedSessions() {\r\n    if (!brewSessions.length) return;\r\n    const container = document.getElementById('saved-sessions');\r\n    const list = document.getElementById('sessions-list');\r\n    const ratingEmojis = ['', '\ud83d\ude15', '\ud83d\ude10', '\ud83d\ude42', '\ud83d\ude04', '\ud83e\udd29'];\r\n    list.innerHTML = brewSessions.slice(0, 5).map(s => `\r\n      <div class=\"bs-session-card\">\r\n        <strong>${s.method} \u2014 ${s.date} ${ratingEmojis[s.rating] || ''}<\/strong>\r\n        ${s.coffee}g coffee \u00b7 ${s.water}g water \u00b7 1:${s.ratio}<br>\r\n        <span style=\"color:#c8a84b\">${s.impression}<\/span>${s.flavorNotes !== 'None' ? ' \u2014 ' + s.flavorNotes : ''}\r\n      <\/div>\r\n    `).join('');\r\n    container.style.display = 'block';\r\n  }\r\n\r\n  renderSavedSessions();\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":1220,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1301","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"brizy_media":[],"_links":{"self":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boredbarista.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1301"}],"version-history":[{"count":5,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1301\/revisions"}],"predecessor-version":[{"id":1316,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1301\/revisions\/1316"}],"up":[{"embeddable":true,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1220"}],"wp:attachment":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}