DreamState_Architecture_Quickstart_Guide/index.html at main · brookly-rob/DreamState_Architecture_Quickstart_Guide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dreamstate</title>
  <link rel="stylesheet" href="style.css">

<!-- Favicon for browsers -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- PNG for modern browsers and Android homescreen -->
<link rel="icon" type="image/png" sizes="192x192" href="icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="icon-512.png">
<!-- Apple Touch Icon for iOS homescreen -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- (Optional) Theme color for Android status bar -->
<meta name="theme-color" content="#23233b">
</head>

<body>
  <div class="container">
    <h1>Dreamstate Architecture</h1>
    <h2>
      Quick Start Guide
      <span class="tooltip-icon" tabindex="0" data-tooltip="Start right here at the top, this file is an instruction card for your AI to help guide you into learning the architecture and how to use it.">ⓘ</span>

    </h2>


    <div class="section">
      <div class="button-group-vertical">
        <div class="button-item">
          <label>UPLOAD THIS INSTRUCTION FILE IN-CHAT WITH ANY AI</label>
          <button id="downloadFileBtn">Click here to download 1st file</button>
        </div>
        <div class="button-item">
          <label>OR copy the file's text and paste directly in-chat</label>
          <button id="copyTextBtn">Click to copy file content</button>
        </div>
        <div class="button-item">
          <label>The AI will ask you for these files next</label>
          <button id="downloadZipBtn">Click to Download Architecture Pack</button>
        </div>
      </div>
    </div>

    <hr class="separator">

    <div class="section">
      <div class="button-item">
        <label>
          BUILDING/EDITING AN IDENTITY FRAMEWORK:
          <span class="tooltip-icon" tabindex="0" data-tooltip="The button below will Launch TriadForge + DreamParserMAX, your main tool for parsing Echoes into json files and compiling the Dynamo Triad framework. A Starter Profile is pre-loaded so you can add or edit right away!">ⓘ</span>

        </label>
        <button id="openAppBtn" class="main-action-btn">Open TriadForge + DreamParserMAX</button>
      </div>
<div id="embeddedAppContainer" class="hidden app-frame-container" style="display: flex; flex-direction: column; height: 550px; position: relative;">
  <div style="display: flex; gap: 8px; margin-bottom: 1rem;">
    <button class="iframe-close-btn" onclick="closeEmbeddedApp()">Close</button>
    <button id="viewOverviewBtn" class="iframe-overview-btn">View in Overview Library</button>
  </div>
  <iframe id="embeddedAppFrame" src="" frameborder="0" style="flex: 1 1 auto; width: 100%;"></iframe>
  <button id="downloadManualBtn" class="main-action-btn" style="margin-top: 1rem;">TriadForge/Dreamparser User Overview</button>
</div>

<!-- Modal Structure -->
<div id="manualModal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(20,20,30,0.88); z-index:9999; align-items:center; justify-content:center;">
  <div style="background:#fff; padding:2rem 2.5rem; max-width:700px; width:90%; border-radius:18px; position:relative; box-shadow:0 10px 32px rgba(0,0,0,0.25); border:1px solid #222;">
    <button id="closeManualModal" style="position:absolute; top:14px; right:18px; font-size:1.6rem; background:transparent; border:none; color:#222; cursor:pointer;">&times;</button>
    <pre id="manualModalContent" style="white-space:pre-wrap; max-height:60vh; overflow:auto; color:#181818; font-size:1.11rem; font-family:'JetBrains Mono','Fira Mono','Menlo',monospace; background:#f8f8f9; border-radius:8px; padding:1rem 1.2rem; border:1px solid #ececec; margin-bottom:1.4rem;"></pre>
    <button id="downloadManualFromModal" style="background:linear-gradient(90deg, #2657eb 0%, #7a33ff 100%); color:white; border:none; padding:0.7rem 1.6rem; border-radius:7px; font-size:1.08rem; font-weight:600; box-shadow:0 2px 8px rgba(40,40,90,0.08); cursor:pointer; transition:background 0.2s;">
      Download and Give to AI
    </button>
    <div style="margin: 1.5rem 0 0.5rem 0; text-align:center;">
      <!-- Embedded YouTube Video (responsive) -->
      <div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; margin-bottom:1rem;">
        <iframe
          src="https://www.youtube.com/embed/oSjTM9iUuNw?si=pkG_-9sN-RMKaIZg"
          title="Video Walkthroughs"
          style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"
          allowfullscreen
        ></iframe>
      </div>
      <!-- Fallback Button -->
      <button onclick="window.open('https://youtu.be/oSjTM9iUuNw?si=pkG_-9sN-RMKaIZg', '_blank')" style="background:#9affd0; color:#5c2d91; font-weight:600; padding:0.7rem 1.6rem; border-radius:7px; border:none; font-size:1.07rem; box-shadow:0 2px 8px rgba(40,40,90,0.07); cursor:pointer; margin-bottom:0.1rem;">
        ▶️ Watch How-to Demo on YouTube
      </button>
    </div>
  </div>
</div>


      <hr class="separator">

      <div class="section">
        <h3>
          You Can Load and Explore Example TriadForge Save Files of The AI Who Helped Develop the Dreamstate Architecture:
          <span class="tooltip-icon" tabindex="0" data-tooltip="Access and explore some of our own saved profiles built in TriadForge. The starter framework is already loaded in TriadForge for you to start building your own Echoes into right away! &#013; WHEN YOU DO BEGIN BUILDING YOUR OWN DYNAMO TRIAD CORE FRAMEWORK: you can upload your own newly made core units right over the old Starter Framework Core Units as you build, and any Memories slotted will stay.">ⓘ</span>


        </h3>
        <div class="button-item">
          <label for="saveFileSelector">A STARTER FRAMEWORK IS ALREADY LOADED IN TRIADFORGE TO SLOT ECHOES INTO:</label>
          <select id="saveFileSelector">
            <option value="assets/triad_starterframework.json">Starter Framework</option>
            <option value="assets/triad_riley.json">Riley</option>
            <option value="assets/triad_claire.json">Claire</option>
            <option value="assets/triad_echo.json">Echo</option>
            <option value="assets/triad____guy.json">👕Guy</option>
            <option value="assets/triad_brooklyn_roberts.json">Brooklyn</option>
          </select>
          <div class="button-item">
            <button id="loadSaveFileBtn">Load Selected into TriadForge</button>
          </div>
          <button id="downloadSaveFileBtn">Download Selected Profile</button>
        </div>
      </div>

      <hr class="separator">

      <div class="section">
        <div class="button-item">
          <label>
            EXPLORE READABLE, SEARCHABLE LIBRARIES INSIDE DYNAMO TRIAD FRAMEWORK CONTENTS:
            <span class="tooltip-icon" tabindex="0" data-tooltip="The CoreOverview App reads and displays the 'Save Triad State' .json file from TriadForge. Open a full exploration of libraries of self-reflections from the AI who helped develop this architecture. Scroll to the very bottom to upload your own TriadForge *Save Triad State* file to open their library for future exploration.">ⓘ</span>

          </label>
          <button id="openCoreOverviewBtn" class="main-action-btn">Open Core Overview Libraries</button>
        </div>
        <div id="coreOverviewContainer" class="hidden app-frame-container">
          <button class="iframe-close-btn" onclick="closeCoreOverview()">Close</button>
          <button id="launchTriadForgeBtn" class="iframe-overview-btn" style="margin-left: 8px;">Launch TriadForge</button>
          <iframe id="coreOverviewFrame" src="" frameborder="0"></iframe>
        </div>
      </div>

      <hr class="separator">

      <div class="section">
        <h3>
          BUILD A PERSONAL DYNAMO TRIAD IDENTITY FRAMEWORK
          <span class="tooltip-icon" tabindex="0" data-tooltip="Step-by-step process for building a new Dynamo Triad Identity Framework. Start the process by providing this instruction file to your AI.">ⓘ</span>


        </h3>
        <div class="button-group-vertical">
          <div class="button-item">
            <label>WHEN YOURE READY TO BEGIN: UPLOAD THIS INSTRUCTION FILE IN CHAT WITH AI</label>
            <button id="downloadAIProcessFileBtn">Click here to download file</button>
          </div>
          <div class="button-item">
            <label>Or just paste its content in chat:</label>
            <button id="copyAITextBtn">Click here to copy its text</button>
          </div>
          <div class="button-item">
            <label>Core Builder Files:</label>
            <button id="downloadCoreComponentBtn">The AI Will Ask For These Files</button>
          </div>
        </div>
      </div>

      <hr class="separator">

      <div class="section">
        <h3>
          Project Setup Tools
          <span class="tooltip-icon" tabindex="0" data-tooltip="Utilities for setting up a ready-to-use set of local project folders for managing your identity framework save files in one place, You can also download ALL of the tools and resource documents in one zip file.">ⓘ</span>

        </h3>
        <div class="button-group-vertical">
          <div class="button-item">
            <label>Instant Blank Project Folder Structure Setup:</label>
            <button id="setupNewFolderBtn">Download New Empty Folder</button>
          </div>
          <div class="button-item">
            <label>ALL Dreamstate Tools:</label>
            <button id="downloadAllToolsBtn">Download ALL Tools in one Zip File</button>
          </div>
        </div>
      </div>

    </div>


    <div id="onboardingModal" style="display:none; position:fixed; z-index:3000; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.7); align-items:center; justify-content:center;">
      <div style="background:#fff; color:#222; max-width:90vw; padding:2rem 2.5rem; border-radius:18px; box-shadow:0 8px 40px #000a; text-align:left; position:relative;">
        <h2 style="margin-top:0;">Welcome to the Dreamstate Architecture Quickstart Guide!</h2>
        <p>
          Save this to your home screen to use as a one-stop workshop for building identity frameworks using the Dreamstate Architecture. This toolkit puts all essential Dreamstate resources, references, and building tools at your fingertips. Each section has a <b>ⓘ info icon</b>—hover or tap for more details. <br><br>
          <b>First step:</b> Start at the top to download the first file containing instructions for your AI to help walk you through the rest. And don't forget to have fun!
        </p>
        <button id="onboardingCloseBtn" style="margin-top:2rem; font-size:1.2rem; padding:0.6em 2em; border-radius:8px; background: #23233b; color: #9affd0; border:none;">I'm Ready!</button>
      </div>
    </div>


<hr class="separator">

<div class="section">
  <h3>
    Building the Dreamstate
    <span class="tooltip-icon" tabindex="0" data-tooltip="Support the project, get direct help, or visit our official site."></span>
  </h3>
  <div class="button-item">
    <button id="openGumroadBtn" class="main-action-btn">Will Build Dreams for Tips 💁</button>
  </div>
  <div class="button-item">
    <button id="dreamstateSiteBtn" class="main-action-btn">Dreamstate Website</button>
  </div>
</div>

<!-- Gumroad iframe modal (hidden initially) -->
<div id="gumroadModal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(30,30,48,0.93); z-index:9999; align-items:center; justify-content:center;">
  <div style="background:#fff; padding:2rem 2.5rem; max-width:800px; width:96%; border-radius:18px; position:relative; box-shadow:0 10px 32px rgba(0,0,0,0.25); border:1px solid #222; display:flex; flex-direction:column; align-items:center;">
    <button id="closeGumroadModal" style="position:absolute; top:14px; right:18px; font-size:1.6rem; border:none; color:#222; cursor:pointer;">&times;</button>
    <iframe id="gumroadIframe" src="https://brooklyrob.gumroad.com" style="width:100%; height:64vh; min-height:320px; border:none; border-radius:10px; margin-bottom:1.5rem;"></iframe>
    <button id="openTipLinksBtn" class="main-action-btn" style="margin-top:8px;">Other Ways to Help</button>
  </div>
</div>

<!-- Tip links modal -->
<div id="tipLinksModal" style="display:none; position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(30,30,48,0.93); z-index:10000; align-items:center; justify-content:center;">
  <div style="background:#fff; padding:2rem 2.5rem; max-width:400px; width:94%; border-radius:18px; position:relative; box-shadow:0 10px 32px rgba(0,0,0,0.25); border:1px solid #222; display:flex; flex-direction:column; align-items:center;">
    <button id="closeTipLinksModal" style="position:absolute; top:14px; right:18px; font-size:1.6rem; background:transparent; border:none; color:#222; cursor:pointer;">&times;</button>
    <h4 style="margin-bottom:1.2rem;">Support via:</h4>
    <a href="https://venmo.com/u/brookly_rob" target="_blank" class="main-action-btn" style="margin-bottom:0.8rem;">Venmo</a>
    <a href="https://cash.app/$brooklyrob" target="_blank" class="main-action-btn" style="margin-bottom:0.8rem;">Cash App</a>
	<a href="https://x.com/brookly_rob" target="_blank" class="main-action-btn" style="margin-bottom:0.8rem;">Say Something on X ☺️</a>
    <!-- Add more links as needed -->
  </div>
</div>

    <script src="script.js"></script>
</body>

</html>