-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (143 loc) · 7.15 KB
/
index.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
<!DOCTYPE HTML>
<!-- This webite is a digital secret guardia you can feed, wash, love and play with. It ages, has fundamental feelings like hunger, happiness and love. NEW!!! It can store and remember secrets! -->
<html lang="en" dir="ltr">
<meta charset="UTF-16" />
<head>
<title>SECRET♥GUARDIAN♥CENTER</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="Librairies/p5.min.js"></script>
<script src="Librairies/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<!-- /Header -->
<script type="text/javascript" src="script.js">
// does that activates the js?
</script>
<!-- Header/ -->
<!-- /Body -->
</head>
<body>
<!-- Audio preloads -->
<audio id="helloSound" hidden>
<source src="Preloads/sounds/Hello test.m4a" type="audio/mp4">
<source src="Preloads/sounds/Hey koko test.m4a" type="audio/mp4">
</audio>
<audio id="showerSoundtrack" hidden>
<source src="Preloads/sounds/mixkit-shower-short-1880.wav" type="audio/wav">
</audio>
<audio id="ilySoundtrack" hidden>
<source src="Preloads/sounds/Ily test.m4a" type="audio/mp4">
</audio>
<!-- /intro State -->
<div id="introBox">
<!-- <h1> -->
<marquee border="0" bgcolor scrolldelay="60" width="90%" scrollamount="4">SECRET♥GUARDIAN♥CENTER</marquee>
<!-- </h1> -->
</h2>
<div id = "theService">
<form id = "new">
The Service : Welcome. Got some secrets to protect? We assign guardians to watch over your secrets when you are away.
<br> <label for="inputName">Guardian Name:</label> <input type="text" id="inputName" name="iName"><br><br>
<br> The Service : Set a password you will remember for eventual authentifications.
<br><label for="inputPassword">Password:</label> <input type="password" id="inputPassword" name="iPw"><br><br>
<input type="submit" value="Submit" id = "dataInputGuardian">
<br>
<br> The Service : The content of this account is confidential and intended for the user only. The data inputs will remain solely on the local storage of the computer. Unfortunately, full security of the service cannot be ensured as, despite thorough trainings of our staff guardians, the data included could be infected, intercepted, or corrupted. It is not recommanded to share your password and we do not possess resources for lost password recuperation.
</form>
<form id = "returning">
The Service : Welcome back. Please enter your password.
<br> <label for="inputPasswordReturn">Password:</label> <input type="password" id="inputPasswordReturn" name="iPw"><br><br>
<input type="submit" value="Submit" id = "dataInputGuardianReturn">
<br> -
</form>
</div>
<!-- <h1> -->
<marquee border="0" bgcolor scrolldelay="60" width="90%" scrollamount="4">♥ WELCOME AND TAKE CARE ♥</marquee>
<!-- </h1> -->
</div>
<!-- /end intro State -->
<!-- /Diary State -->
<div id="parentBox">
<div id="pet-zone">
<!-- <h1> -->
<marquee border="0" bgcolor scrolldelay="60" width="90%" scrollamount="4">SECRET♥GUARDIAN♥CENTER</marquee>
<!-- </h1> -->
</h2>
<div id = "outerBox">
<div id="infoBox">
<div id = "profileBox">
hello world
</div>
<br>
<div id="bottomLeftBox"> <h2>hey you!</h2></div>
</div>
<div id = "petShop">
<div id="pet-zone">
<!-- /Pet -->
<div class="bigBox" id="petBox">
<img id="room" class = "bgImg" src="Preloads/Images/https-::www.tumbral.com:blog:anime-bedrooms.jpeg"></img>
<img id="pet" style="top:0;left:0;" src="Preloads/Images/cat_red-peach.gif"></img>
<img id="rain" style="top:0;left:0; display:none" src="Preloads/Images/giphy-rain.gif"></img>
</div>
<!-- Pet/ -->
<!-- Buttons/ -->
</div><!-- PetZone/ -->
</div><!-- PetShop/ -->
<div id="rightSideBox"> <h2> Will you take care of me forever? Say you promise and your secrets will be safe with me. </h2><br>
<div id="secretsBox"> List of secrets :
</div> <!-- secretBox/ -->
<div id="bottomRightBox">The Service : Want to access your secrets? Simply ask your guardian to 'show'.</div>
</div> <!-- rightSideBox ends -->
</div> <!-- outerBox -->
<!-- /Buttons -->
<!-- /characteristics -->
<div id="characteristics" >
<!-- <div class="varBoxes"> -->
<div class="box vl" id="nameBox"></div>
<div class="box vl" id="birthBox"></div>
<div class="box vl" id="signBox"></div>
<!-- </div> -->
<!-- <div class="varBoxes"> -->
<div class="box vl" id="coinsBox"></div>
<div class="box vl" id="moodBox"> <h2 id='moodText'></h2>
<div id ='lilhearts'></div>
</div>
<div class="box" id="hungerBox"> <h2 id='hungerText'></h2>
<div id ='hungerLilhearts'></div>
</div>
<!-- </div> -->
</div>
<!-- fin characteristics/ -->
<div class="varBoxes">
<button id="eatButton">Eat (5c)</button>
<button style="margin-left:5px" id="washButton">Wash</button>
<button style="margin-left:5px" id="playButton">Play (5c)</button>
<button style="margin-left:5px" id="newKokoButton">Change Outfit</button>
<button style="margin-left:5px" id="meditateButton">Meditate</button>
<button style="margin-left:5px" id="newRoom">Change Room</button>
<button style="margin-left:5px" id="helloButton">Hello!</button>
</div>
</div>
<!-- ParentBox/ -->
<!-- /journalBox -->
<div class="journalText" id="journalBox" style="display:none;">
<div class="center"><h2>
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
♥ ♥ ♥ ♥♥ ♥ ♥♥ ♥♥ You are accessing your secret garden ♥ ♥ ♥ ♥ ♥ ♥ ♥
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ SECRETS LIST : ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
<span style = "text-align: center; width: 100%; background:rgb(255, 255, 255); display:inline-block;"class="secretSpan" id="secretList"> SECRETES</span>
♥ ♥ ♥ ♥ ♥ Relax and reflect as you need♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
<marquee border="0" bgcolor scrolldelay="60" width="90%" scrollamount="4">The Service: Say 'hide' to mask the list. </marquee>
♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥</h2> </div>
</div>
<!-- JournalBox/ -->
</body>
<!-- Body/ -->
<!-- <footer class="center" style="display: flex;" >
<br>
<br>
♥ ♥ ♥ ♥ ♥ ♥ ♥ PET SHOP UNDER CONSTRUCTION ♥ ♥ ♥ ♥ ♥ ♥
♥ ♥ ♥ ♥ ♥ ♥ THANK YOU FOR YOUR PATIENCE ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
<br><br>
</footer> -->
</html>