/
d3_help7.html
398 lines (275 loc) · 10 KB
/
d3_help7.html
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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<html lang="en"><head>
<meta charset="UTF-8">
<title>Help System Design</title>
<style>
html {
scroll-behavior: smooth;
}
body {
/* overflow:hidden; */
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
background-color:#482828;background-size: 16px 16px;}
.overall {
display: grid;
place-items: center right;
}
.card {
width:300px;height:400px;overflow:hidden;
display: grid;
place-items: center center;
border-radius:5px;border:1px solid rgba(150,150,150,.2);box-sizing:border-box;
background:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), transparent);
-webkit-box-shadow:4px 9px 20px rgba(0, 0, 0, .2), 5px 18px 40px rgba(0, 0, 0, .6),inset 0px 5px 10px rgba(255, 255, 255, 0.1);
-webkit-transform-style:preserve-3d;
-webkit-animation: shimmy 60s ease-in-out infinite;
}
@-webkit-keyframes shimmy {
0%,100% {-webkit-transform:rotateY(0deg);}
50% {-webkit-transform:rotateY(30deg);}
}
.card:after {content:'';position:absolute;margin-left:-100px;
width:1000px;height:100px;
background:-webkit-linear-gradient(top, transparent, rgba(200, 200, 200, 0.1), transparent);
-webkit-transform:rotate(30deg);
-webkit-animation:shine 6s ease-in-out infinite;
}
@-webkit-keyframes shine {
0%,100% {top:-800px;}
50% {top:800px;} }
.typewriter {
color: #fff;
font-family: monospace;
font-size: 30px;
overflow: hidden;
/* Ensures the content is not revealed until the animation */
border-right: .15em solid #fff;
/* The typwriter cursor */
/* white-space: nowrap; */
/* Keeps the content on a single line */
margin: 0 auto;
/* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation:
typing 3s steps(20, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
0% {
border-color: transparent
}
50% {
border-color: #fff
}
}
.helptext {
color: red;
margin-left: 30px;
}
.box {
width:400px;
height:400px;
margin-top:10px;
margin-right:10px;
display: inline-block;
}
a:visited {
color:white;
}
</style>
</head>
<body>
<script>
if (typeof reactor == "undefined" || !reactor) {
(function () {
function Event(name){
this.name = name;
this.callbacks = [];
}
Event.prototype.registerCallback = function(callback){
this.callbacks.push(callback);
};
function Reactor(){
this.events = {};
}
Reactor.prototype.registerEvent = function(eventName){
var event = new Event(eventName);
this.events[eventName] = event;
};
Reactor.prototype.dispatchEvent = function(eventName, eventArgs){
this.events[eventName].callbacks.forEach(function(callback){
callback(eventArgs);
});
};
Reactor.prototype.addEventListener = function(eventName, callback){
this.events[eventName].registerCallback(callback);
};
window.reactor = new Reactor();
})();
}
</script>
<script>
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const tgtId = e.target.getAttribute('href').substr(1),
tgtElm = document.getElementById(tgtId);
tgtElm.scrollIntoView({behavior: "smooth", block: "center",inline: "center"});
});
});
</script>
<div class="box" style="background-color: white" id="display_area">This ID has been selected. Hell Yeah </div>
<div class="box" style="background-color: grey;visibility: hidden" id="box_1">Box 1 is here </div>
<div class="box" style="background-color: pink;visibility: hidden" id="box_2">I am Box 2 </div>
<div class="box" style="background-color: orange;visibility: hidden" id="box_3">Box 3 rocks </div>
<div class="box" style="background-color: yellow;visibility: hidden" id="box_4">Box 4 Hell Yeah</div>
<div class="box" style="background-color: red;visibility: hidden" id="box_5">Box 5 Hip Hip Hurray</div>
<script>
//Navigation Design
var myBox = "box_2"
x0 = document.getElementById(myBox);
var toBeDisplayed = x0.innerHTML;
document.getElementById("display_area").innerHTML = toBeDisplayed;
//Create Navigation Map
//Set of If Else conditions for every box
// For everthing not set, you can create a global navigation map
//Error Detection
var flo_id = "abc";
var navigation_map = [];
if(!flo_id) { navigation_map[0] = "box_3";console.log("Navigation map is "+navigation_map[0]) ;
document.getElementById("display_area").innerHTML += " Go to "+ navigation_map[0]; }
</script>
<script>
//Contextual Help System
reactor.registerEvent('contextHelp');
reactor.addEventListener('contextHelp', contextHelpF);
function contextHelpF(someObject){
console.log('contextHelp fired with data '+ someObject);
}
//Contextual Help System
var helpData = "";
var helpSystem = true;
function helpText (data,navigationData="") {
if (helpSystem) { helpData = data }
//trigger event system
reactor.dispatchEvent('contextHelp',helpData)
//further processing will happen in contextHelpF function
//Navigation Data will be done here
}
//Actual Contextual Help
helpText("Create your own FLO Key Here!!");
</script>
<script>
//Navigation Design Section
/*
To navigate, you can only go to an ID ...
Possibilities
The web page moves to the ID
ID comes to the active mirror display element
User is redirected to the new location
At every point, back to help has to be there
To bring where the person already was
Every functionality needs to have a unique identifier .. and should be possible to pass parameters to it .. and back
NAVIGATION DESIGN
It will have 2 sections: Base Help Data ... and courses of actions
A. Base Help Data
You can use this to send Data into FLO Blockchain. You will need FLO and RMT balance
Base help can come in contextual help section
B. Courses of action
Get FLO Balance => FLO_Balance_Request_ID (ID of FLO Balance Request)
If you want to generate keys, go here => Key_Generator_ID
If you want RMT balance, go here =>RMT_Balance_Request_ID
Every help point will have these things
In addition, all functionality will be available in some control panel accessible all the time
Every element is an ID .. and we can shift between IDs
Div ID is a position. And it is a functionality
Comes with its own layout and positioning
YOU ARE NOT NAVIGATING
THE SCREEN IS COMING TO YOU
x0 = document.getElementByID(id_selected);
toBeDisplayed = x0.innerHTML;
document.getElementByID("display_section").innerHTML = toBeDisplayed;
Lets do it now
HOw can you make an ID data copied
C. Contextual Navigation
List of if then else statements
Every failure has to be captured in some condition.
Data Section
if(FLO_ID_Is_Not_Set) then $floIdNotSeT = true
iF(considtion2) then $condition = true
There is a set of ifs
Then for every if .. we got to decide which options have to be given
Create Navigation Map
Start ID: Faliure conditions (For failure Condition A, show screen B .... For failure Condition C, show screen D )
Second ID: Failure Conditions
Third ID: Failure Conditions
Every app is a set of IDs
Create Navigation Map for every ID. Where to go if certain failure occurs in case screen switch is needed
You got to design initial ID flow
And this will complete help system description
if(FLO Balance not available)
Oops, you do not have FLO balance => get_flo_balance
if( ABC)
Do this
For multiple conditions ..
DO THIS AND DO THIS AND DO THIS
===
location.href
Or innerHTML of relevant ID
*/
</script>
<script>
//Initial Help System
/*
var activeCounter = 1;
var nextCounter = 2;
var index;
var initialHelpText = ["First Help Snippet 1","Second Help Snippet 2","Third Help Snippet 3","Fourth Help Snippet 4","Fifth Help Snippet 5"];
//Creating framework for success condition
var floID1 = ""; var floID2 = ""; var floID3 = ""; var floID4 = ""; var floID5 = "";
if (successCondition(activeCounter)) {activeCounter = activeCounter+1;};
//VISIBILITY METHOD
//visibility hidden for everything
for (index = 1; index <= 5; index++) {
//document.getElementById("box_"+index).style.visibility = "hidden";
document.getElementById("box_"+index).style.opacity = "0.5";
document.getElementById("box_"+index).style.pointerEvents = "none";
}
//visibility active for activeCounter
//document.getElementById("box_"+activeCounter).style.visibility = "visible";
//TEXT METHOD
document.getElementById("box_"+activeCounter).style.pointerEvents = "auto";
document.getElementById("box_"+activeCounter).style.visibility = "visible";
document.getElementById("box_"+activeCounter).style.opacity = "1";
document.getElementById("box_"+activeCounter).innerHTML = initialHelpText[activeCounter-1];
function successCondition(activeCounter){
var result = false;
if (activeCounter==1) { if (floID1) { result =true} };
if (activeCounter==2) { if (floID2) { result =true} };
if (activeCounter==3) { if (floID3) { result =true} };
if (activeCounter==4) { if (floID4) { result =true} };
if (activeCounter==5) { if (floID5) { result =true} };
return result;
}
*/
</script>
<div class="overall">
<div class="card" id="help"style="margin-top:30px"><div class="typewriter helptext">Hello I am your help box. I am here to tell you what to do<a href="#id_1"> Block 1</a><a href="#id_2"> Block 2</a><a href="#id_3"> Block 3</a></div></div></div>
<div class="box" style="background-color: blue;margin-top:800px;margin-left:400px;" id="id_1">ID 1 <a href="#help"> GO BACK TO HELP</a></div>
<div class="box" style="background-color: green;margin-top:1000px;margin-left:600px" id="id_2">ID 2<a href="#help"> GO BACK TO HELP</a></div>
<div class="box" style="background-color: red;margin-top:1200px;margin-left:400px" id="id_3">ID 3<a href="#help"> GO BACK TO HELP</a></div>
<!--
<div class="typewriter" style="color:white;margin-left:30px"><h1>Hello I am your help text. I am here to tell you what to do</h1></div>
-->
</body></html>