-
Notifications
You must be signed in to change notification settings - Fork 1
/
texthypnosis.html
137 lines (130 loc) · 4.33 KB
/
texthypnosis.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
<html>
<head>
<link rel='stylesheet' href='css/spectrum.css' />
<link rel='stylesheet' type="text/css" href='css/hypnosis.css' />
<link rel='stylesheet' href='hypnosis.css' />
<script src="jquery.js" > </script>
<script src='js/spectrum.js'></script>
<style>
</style>
<script>
// strings and config variables
startingString = "Your text will appear here in a few seconds.";
fadeDuration = 2200;
wordDuration = 750;
waitBetweenWords = 0;
defaultWidth = 300;
function hypWidthChange(widthVal) {
widthVal = Number(widthVal);
console.log("change margin size to "+widthVal);
if(isNaN(widthVal)) {
return(false);
}
negVal = widthVal * -1;
$( '.fadeContent' ).css("padding-left", widthVal);
$( '.fadeContent' ).css("padding-right", widthVal);
// $( '#padding-container' ).css("padding-left", widthVal);
// $( '#padding-container' ).css("padding-right", widthVal);
// $( '#padding-container-bg' ).css("margin-left", negVal);
// $( '#padding-container-bg' ).css("margin-right", negVal);
return(true);
}
displayer = "";
$( 'document' ).ready( function() {
$(' #hypWidthInput ').val(defaultWidth);
$(' #configTrigger ').click( function() {
$('#config').toggle();
});
$( '#hypWidthInput' ).change( function() {
val = $( '#hypWidthInput' ).val();
hypWidthChange(val);
});
$("#hypColorInput").spectrum({
color: "#555"
});
$( '#hypColorInput' ).change( function() {
$( '#output' ).css("color", $( '#hypColorInput' ).get());
});
});
var openFile = function(event) {
clearInterval(displayer);
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
list = text.split("\n");
node = $("#output");
// node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
i=0;
$("#config").fadeOut();
node = $("#output");
node.hide();
node.html(startingString);
node.fadeIn(2000, function() {
node.fadeOut(4000);
});
displayer = setInterval(
function() {
if(i==list.length) {
clearInterval(displayer);
}
else {
node.fadeOut(fadeDuration, function() {
node.html(list[i]);
i++;
t2 = setTimeout(
function() {node.fadeIn(fadeDuration);},
wordDuration
);
});
}
}, fadeDuration*2 + waitBetweenWords + wordDuration
);
};
</script>
</head>
<body>
<div id="configTrigger">
</div>
<div id="padding-container">
<div id="padding-container-bg">
<div id="container">
<div id="trans-container">
<table>
<tr>
<td class="fadeContent" valign="center" align="center">
<div id="config">
<div class="option" id="hypWidth">
Left and right margin size: <input type="text" size="5" value="200" id="hypWidthInput" name="hypWidthInput"><br>
<em>Incease this to minimize left-right eye motion</em>
</div>
<div class="option" id="hypColor">
Text color: <input type="text" id="hypColorInput" name="hypColorInput"><br>
</div>
<div class="option" id="hypText">
Hypnosis text: <input type='file' accept='text/plain' onchange='openFile(event); $(" #start ").show();'><br>
</div>
</div>
<div id='info' class="info">
Before you start:<ul>
<li>Make sure Caffeine is on / sleep is off
</li><li>Make sure screensaver is off or mouse is in hot corner
</li><li>Remember that you can reopen the settings by clicking in the upper left corner
</ul>
<button id="start" name="start">Start</button>
</div>
<div id='output' class="fadeOutput">
Hypnosis text will appear here after you click "start".
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>