/** @jsxImportSource https://esm.sh/react */ import html2canvas from "https://esm.sh/html2canvas"; import { jsPDF } from "https://esm.sh/jspdf"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const INITIAL_QUOTE = "Courage is not the absence of fear, but action despite it"; const PROGRESSION_QUOTE = "Rejection is part of growth, not a reflection of your worth"; const GROWTH_QUOTE = "Every step forward brings us closer to the person we are meant to be"; const MOTIVATIONAL_MESSAGES = { initial: "Trust your journey. Each 'no' is a step towards your true potential.", midway: "You're building resilience with every ask. Keep going!", completion: "You've shown incredible courage. Your growth is remarkable.", nextSteps: "What bold step will you take next?", }; const DISCLAIMER = ` DISCLAIMER: 1. All data in this application is stored ONLY on your local device. 2. No data is transmitted or stored on external servers. 3. You are responsible for managing and protecting your own data. 4. This tool is provided as-is, without any warranties. 5. Use at your own risk and discretion. By using this No Collection Challenge, you acknowledge and accept these terms. `; function formatDate(dateString) { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }); } function App() { const [stage, setStage] = useState("asks"); const [asks, setAsks] = useState(() => { try { const savedAsks = localStorage.getItem("nocollection_asks"); return savedAsks ? JSON.parse(savedAsks) : []; } catch (error) { console.error("Error parsing saved asks:", error); return []; } }); const [noCount, setNoCount] = useState(() => { try { const savedNoCount = localStorage.getItem("nocollection_nocount"); return savedNoCount ? parseInt(savedNoCount) : 0; } catch (error) { console.error("Error accessing NO count:", error); return 0; } }); const [newAsk, setNewAsk] = useState(""); const [reflection, setReflection] = useState(""); const [currentQuote, setCurrentQuote] = useState(INITIAL_QUOTE); const [imageUpload, setImageUpload] = useState(null); const [journeyReflection, setJourneyReflection] = useState(""); const [followUpComment, setFollowUpComment] = useState(""); const [error, setError] = useState(null); const pdfRef = useRef(null); const imageInputRef = useRef(null); // Error Boundary for localStorage function safeSetItem(key, value) { try { localStorage.setItem(key, value); } catch (error) { console.error(`Error setting ${key} in localStorage:`, error); setError("Unable to save data. Local storage might be full or disabled."); } } // Persist state changes to localStorage with error handling useEffect(() => { safeSetItem("nocollection_asks", JSON.stringify(asks)); }, [asks]); useEffect(() => { safeSetItem("nocollection_nocount", noCount.toString()); }, [noCount]); useEffect(() => { // Check for transition to reflection stage if (noCount >= 5 && stage === "asks") { setStage("reflection"); setCurrentQuote(PROGRESSION_QUOTE); } else if (noCount < 5 && stage !== "asks") { setStage("asks"); setCurrentQuote(INITIAL_QUOTE); } else if (noCount >= 1 && stage === "asks") { setCurrentQuote(PROGRESSION_QUOTE); } }, [noCount, stage]); // Enhanced PDF Generation Function async function generatePDF() { try { const pdf = new jsPDF("p", "mm", "a4"); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); // Set up PDF styling pdf.setFontSize(12); let yPosition = 20; // Title pdf.setFontSize(18); pdf.text("No Collection Challenge Journey", pdfWidth / 2, yPosition, { align: "center" }); yPosition += 15; // Journey Quote pdf.setFontSize(14); pdf.text(currentQuote, pdfWidth / 2, yPosition, { align: "center", maxWidth: pdfWidth - 40 }); yPosition += 20; // Asks Section pdf.setFontSize(12); asks.forEach((ask, index) => { // Check if we need a new page if (yPosition > pdfHeight - 40) { pdf.addPage(); yPosition = 20; } pdf.text(`Ask #${index + 1}: ${ask.ask}`, 20, yPosition); yPosition += 10; if (ask.reflection) { const lines = pdf.splitTextToSize(`Reflection: ${ask.reflection}`, pdfWidth - 40); pdf.text(lines, 20, yPosition); yPosition += lines.length * 7; } if (ask.result) { pdf.text(`Result: ${ask.result === "yes" ? "Success 🎉" : "Not this time 🚫"}`, 20, yPosition); yPosition += 10; } yPosition += 10; }); // Journey Reflection if (journeyReflection) { // Check if we need a new page if (yPosition > pdfHeight - 60) { pdf.addPage(); yPosition = 20; } pdf.text("Journey Reflection:", 20, yPosition); yPosition += 10; const lines = pdf.splitTextToSize(journeyReflection, pdfWidth - 40); pdf.text(lines, 20, yPosition); yPosition += lines.length * 7 + 20; } // Symbolic Image if (imageUpload) { // Check if we need a new page if (yPosition > pdfHeight - 120) { pdf.addPage(); yPosition = 20; } pdf.text("Symbolic Journey Image:", 20, yPosition); yPosition += 10; try { const imgWidth = 100; const imgHeight = 100; pdf.addImage(imageUpload, "PNG", (pdfWidth - imgWidth) / 2, yPosition, imgWidth, imgHeight); yPosition += imgHeight + 20; } catch (imageError) { console.error("Image addition to PDF failed", imageError); } } // Disclaimer pdf.setFontSize(8); const disclaimerLines = pdf.splitTextToSize(DISCLAIMER, pdfWidth - 40); // Check if we need a new page for the disclaimer if (yPosition + disclaimerLines.length * 3 > pdfHeight) { pdf.addPage(); yPosition = 20; } pdf.text(disclaimerLines, 20, yPosition); // Save PDF pdf.save("no-collection-journey.pdf"); } catch (error) { console.error("PDF Generation Error:", error); setError("Failed to generate PDF. Please try again."); } } // Data Clearing Mechanism function clearAllData() { try { // Clear specific nocollection keys Object.keys(localStorage) .filter(key => key.startsWith("nocollection_")) .forEach(key => localStorage.removeItem(key)); // Reset all state setStage("asks"); setAsks([]); setNoCount(0); setNewAsk(""); setReflection(""); setCurrentQuote(INITIAL_QUOTE); setImageUpload(null); setJourneyReflection(""); // Optional: Reload page for complete reset window.location.reload(); } catch (error) { console.error("Data Clearing Error:", error); setError("Unable to clear data. Please try again."); } } // Export/Import Functionality function exportJourney() { try { const journeyData = { stage, asks, noCount, quote: currentQuote, imageUpload, journeyReflection, }; const dataStr = JSON.stringify(journeyData, null, 2); const dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr); const exportFileDefaultName = "no-collection-journey.json"; const linkElement = document.createElement("a"); linkElement.setAttribute("href", dataUri); linkElement.setAttribute("download", exportFileDefaultName); linkElement.click(); } catch (error) { console.error("Export Error:", error); setError("Failed to export journey data."); } } function importJourney(event) { const fileReader = new FileReader(); fileReader.onload = (e) => { try { const journeyData = JSON.parse(e.target.result); // Validate imported data if (!journeyData.asks || !Array.isArray(journeyData.asks)) { throw new Error("Invalid journey data"); } // Restore journey state setStage(journeyData.stage); setAsks(journeyData.asks); setNoCount(journeyData.noCount); setCurrentQuote(journeyData.quote); setImageUpload(journeyData.imageUpload); setJourneyReflection(journeyData.journeyReflection); } catch (error) { console.error("Import Error:", error); setError("Failed to import journey data. File might be corrupted."); } }; fileReader.readAsText(event.target.files[0]); } function startNewJourney() { setStage("asks"); setAsks([]); setNoCount(0); setNewAsk(""); setReflection(""); setCurrentQuote(INITIAL_QUOTE); setImageUpload(null); setJourneyReflection(""); // Clear localStorage Object.keys(localStorage) .filter(key => key.startsWith("nocollection_")) .forEach(key => localStorage.removeItem(key)); } function renderAsksStage() { return ( <>

🚀 No Collection Challenge

{currentQuote}

{ e.preventDefault(); const newAskObject = { id: Date.now(), ask: newAsk, reflection: reflection, result: null, timestamp: new Date().toISOString(), }; const updatedAsks = [...asks, newAskObject]; setAsks(updatedAsks); setNewAsk(""); setReflection(""); }} > setNewAsk(e.target.value)} placeholder="What bold ask did you make?" required />

setReflection(e.target.value)}
            placeholder="How do you feel about this ask? What did you learn?"
          />
          <button
            type="submit"
            className={noCount < 5 ? "primary" : "disabled"}
            disabled={noCount >= 5}
          >
            {noCount < 5 ? `Submit Ask (${5 - noCount} NO's remaining)` : "No Collection Challenge Complete!"}
          </button>
        </form>

<div className="asks-list">
          <h2>Your Bold Asks 🏆</h2>
          {asks.map((ask, index) => (
            <div key={index} className={`ask-item ${ask.result}`}>
              <div>
                <strong>Ask:</strong> {ask.ask}
                <br />
                <small>📅 {formatDate(ask.timestamp)}</small>
                {ask.reflection && (
                  <>
                    <br />
                    <strong>Initial Reflection:</strong> {ask.reflection}
                  </>
                )}
              </div>
              {!ask.result && (
                <div className="ask-actions">
                  <div className="ask-buttons">
                    <button
                      onClick={() => {
                        const updatedAsks = asks.map(a =>
                          a.id === ask.id
                            ? { ...a, result: "yes", result_date: new Date().toISOString() }
                            : a
                        );
                        setAsks(updatedAsks);
                      }}
                      className="yes-button"
                    >
                      ✅ Yes
                    </button>
                    <button
                      onClick={() => {
                        const updatedAsks = asks.map(a =>
                          a.id === ask.id
                            ? { ...a, result: "no", result_date: new Date().toISOString() }
                            : a
                        );
                        setAsks(updatedAsks);
                        const currentNoCount = updatedAsks.filter(a => a.result === "no").length;
                        setNoCount(currentNoCount);
                      }}
                      className="no-button"
                    >
                      ❌ No
                    </button>
                  </div>
                  <textarea
                    value={followUpComment}
                    onChange={(e) => setFollowUpComment(e.target.value)}
                    placeholder="Optional follow-up comment about this ask..."
                  />
                </div>
              )}
              {ask.result && (
                <div>
                  <strong>Result:</strong> {ask.result === "yes" ? "🎉 Success!" : "🚫 Not this time"}
                  {ask.result_date && (
                    <>
                      <br />
                      <small>📅 {formatDate(ask.result_date)}</small>
                    </>
                  )}
                  {ask.follow_up_comment && (
                    <div>
                      <strong>Follow-up Comment:</strong> {ask.follow_up_comment}
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>

<div className="disclaimer">
          <h4>🔒 Data Privacy Disclaimer</h4>
          <p>
            {DISCLAIMER}
          </p>
        </div>
      </>
    );
  }

function renderReflectionStage() {
    return (
      <div className="reflection-stage">
        <h2>🌟 Reflection Stage</h2>
        <p className="quote">{currentQuote}</p>

<div className="image-upload">
          <h3>Upload a Symbolic Image</h3>
          <input
            type="file"
            accept="image/*"
            ref={imageInputRef}
            onChange={(event) => {
              const file = event.target.files[0];
              if (file) {
                const reader = new FileReader();
                reader.onloadend = () => {
                  setImageUpload(reader.result);
                };
                reader.readAsDataURL(file);
              }
            }}
          />
          {imageUpload && (
            <img
              src={imageUpload}
              alt="Uploaded"
              className="uploaded-image"
            />
          )}
        </div>

<textarea
          placeholder="Reflect on your journey..."
          value={journeyReflection}
          onChange={(e) => setJourneyReflection(e.target.value)}
          className="journey-reflection"
        />

<div className="reflection-buttons">
          <button
            onClick={() => {
              setStage("completion");
              setCurrentQuote(GROWTH_QUOTE);
            }}
            className="primary"
          >
            Complete Journey
          </button>
          <button
            onClick={() => {
              setStage("asks");
              setCurrentQuote(INITIAL_QUOTE);
            }}
            className="secondary"
          >
            Return to Asks
          </button>
        </div>
      </div>
    );
  }

function renderCompletionStage() {
    return (
      <div ref={pdfRef} className="completion-stage">
        <h2>🎉 Journey Completed</h2>
        <p className="quote">{currentQuote}</p>

<div>
          <h3>Your Growth Journey</h3>
          <p>{MOTIVATIONAL_MESSAGES.completion}</p>

<div className="action-buttons">
            <button onClick={generatePDF} className="primary">
              Download Journey PDF
            </button>
            <button onClick={clearAllData} className="secondary">
              Clear All Data
            </button>
            <button onClick={exportJourney} className="secondary">
              Export Journey
            </button>
            <label className="file-input">
              Import Journey
              <input
                type="file"
                accept=".json"
                onChange={importJourney}
              />
            </label>
          </div>

<button onClick={startNewJourney} className="secondary">
            Start New Journey
          </button>

<div className="disclaimer">
            <h4>🔒 Data Privacy Disclaimer</h4>
            <p>
              {DISCLAIMER}
            </p>
          </div>

{error && (
            <div className="error-message">
              {error}
            </div>
          )}
        </div>
      </div>
    );
  }

return (
    <div className="app-container">
      {stage === "asks" && renderAsksStage()}
      {stage === "reflection" && renderReflectionStage()}
      {stage === "completion" && renderCompletionStage()}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <html>
      <head>
        <title>No Collection Challenge</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://esm.town/v/std/catch"></script>
        <style>
          body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
          }
          
          .app-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
          }
          
          h1, h2, h3 {
            color: #2c3e50;
          }
          
          .quote {
            font-style: italic;
            color: #3498db;
            text-align: center;
            margin: 20px 0;
          }
          
          input, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
          }
          
          textarea {
            min-height: 100px;
          }
          
          button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
          }
          
          .primary {
            background-color: #3498db;
            color: white;
          }
          
          .secondary {
            background-color: #95a5a6;
            color: white;
          }
          
          .disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
          }
          
          .asks-list {
            margin-top: 30px;
          }
          
          .ask-item {
            background-color: #ecf0f1;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
          }
          
          .ask-item.yes {
            background-color: #e6ffe6;
          }
          
          .ask-item.no {
            background-color: #ffe6e6;
          }
          
          .ask-actions {
            margin-top: 10px;
          }
          
          .ask-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
          }
          
          .yes-button {
            background-color: #2ecc71;
          }
          
          .no-button {
            background-color: #e74c3c;
          }
          
          .reflection-stage, .completion-stage {
            text-align: center;
          }
          
          .image-upload {
            margin: 20px 0;
          }
          
          .uploaded-image {
            max-width: 300px;
            max-height: 300px;
            margin-top: 10px;
          }
          
          .journey-reflection {
            width: 100%;
            min-height: 200px;
          }
          
          .action-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
          }
          
          .file-input {
            display: inline-block;
            padding: 10px 15px;
            background-color: #95a5a6;
            color: white;
            border-radius: 4px;
            cursor: pointer;
          }
          
          .file-input input {
            display: none;
          }
          
          .disclaimer {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
          }
          
          .error-message {
            color: #e74c3c;
            margin-top: 10px;
          }

.reflection-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}</article></body></html>

noCollectionTracker