tuitviewer/tuitsapp.html
tuitsapp.htmlRaw
1<!DOCTYPE html>
2<html>
3<head>
4<title>info visualizer</title>
5<meta charset="UTF-8" />
6<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
8
9
10<!-- (no cal pq ja estan les funcions i el css en aquest fitxer)
11<link rel='StyleSheet' type='text/css' href='estil.css'>
12<script src='funcions.js'></script>
13-->
14
15<!-- llibraries -->
16<script src="xml2json.js"></script>
17<!-- /llibraries -->
18
19
20
21<script>
22 function OnLoadApp()
23 {//function that runs on load the page
24 InitializeObjectOFromXML();
25 //MostraInfo();
26 }
27 function InitializeObjectOFromXML()
28 {//function to convert the xml object to a json object 'o'
29 xmlDoc=LoadXMLDoc("dadestw.xml");
30 ojson=xml2json(xmlDoc, "");
31 o=JSON.parse(ojson);
32 }
33 function LoadXMLDoc(dname)
34 {
35 if(window.XMLHttpRequest){
36 xhttp=new XMLHttpRequest();
37 }else{
38 xhttp=new ActiveXObject("Microsoft.XMLHTTP");
39 }
40 xhttp.open("GET",dname,false);
41 xhttp.send();
42 return xhttp.responseXML;
43 }
44 function swModeClick()
45 {
46 if(document.getElementById("swmode").checked==true)
47 {
48 MostraInfoModeNormal();
49 document.getElementById("swmode").checked="";
50 }else if(document.getElementById("swmode").checked==false)
51 {
52 MostraInfoModeResumit();
53 document.getElementById("swmode").checked="true";
54 }
55 }
56 function MostraInfoModeNormal()
57 {
58 var sortida="";
59 document.getElementById("contingutInfo").innerHTML="";
60 //sortida+="<div class='botoMode' onclick='MostraInfoModeResumit()'>MostraInfo(Resum)</div>";
61 // document.getElementById("contingutInfo").innerHTTML=o.root.llistaamics.amic.length;
62 numbucle=o.root.llistatuits.tuit.length -1;
63 for(i=numbucle; i>0; i--)
64 {
65 if(o.root.llistatuits.tuit[i]["@retuits"]>5)
66 {
67 sortida+= "<font color='#3C9166'>" + o.root.llistatuits.tuit[i]["@de"] + "</font>";
68 sortida+= " - <font color='#7a5752'>" + o.root.llistatuits.tuit[i]["@hora"] + "</font><br>";
69 sortida+=o.root.llistatuits.tuit[i]["#text"] + "<br>";
70 if(o.root.llistatuits.tuit[i]["@imatge"])
71 {
72 sortida+="<img class='imatge' src='"+o.root.llistatuits.tuit[i]["@imatge"]+"'/><br>";
73 }
74 sortida+="<font color='#51707b'>rt: " + o.root.llistatuits.tuit[i]["@retuits"] + "</font><br>";
75 sortida+="<hr color='#343434'>";
76 }else{
77 sortida+= "<div style='background:#2c313a; color:#7d889c'><font color='#3C9166'>" + o.root.llistatuits.tuit[i]["@de"] + "</font>";
78 sortida+= " - <font color='#7a5752'>" + o.root.llistatuits.tuit[i]["@hora"] + "</font><br>";
79 sortida+=o.root.llistatuits.tuit[i]["#text"] + "<br>";
80 if(o.root.llistatuits.tuit[i]["@imatge"])
81 {
82 sortida+="<img class='imatge' src='"+o.root.llistatuits.tuit[i]["@imatge"]+"'/><br>";
83 }
84 sortida+="<font color='#51707b'>rt: " + o.root.llistatuits.tuit[i]["@retuits"] + "</font><br>";
85 sortida+="</div><hr color='#343434'>";
86 }
87 }
88 document.getElementById("contingutInfo").innerHTML=sortida;
89 }
90 function MostraInfoModeResumit()
91 {
92 var sortida="";
93 document.getElementById("contingutInfo").innerHTML="";
94 //sortida+="<div class='botoMode' onclick='MostraInfoModeNormal()'>MostraInfo(Normal)</div>";
95 numbucle=o.root.llistatuits.tuit.length -1;
96 for(i=numbucle; i>0; i--)
97 {
98 //alert(o.root.llistatuits.tuit[i]["@retuits"]);
99 if(o.root.llistatuits.tuit[i]["@retuits"]>5)
100 {
101 sortida+= "<font color='#3C9166'>" + o.root.llistatuits.tuit[i]["@de"] + "</font>";
102 sortida+= " - <font color='#7a5752'>" + o.root.llistatuits.tuit[i]["@hora"] + "</font><br>";
103 sortida+=o.root.llistatuits.tuit[i]["#text"] + "<br>";
104 if(o.root.llistatuits.tuit[i]["@imatge"])
105 {
106 sortida+="<img class='imatge' src='"+o.root.llistatuits.tuit[i]["@imatge"]+"'/><br>";
107 }
108 sortida+="<font color='#51707b'>rt: " + o.root.llistatuits.tuit[i]["@retuits"] + "</font><br>";
109 sortida+="<hr color='#343434'>";
110 }
111 }
112 document.getElementById("contingutInfo").innerHTML=sortida;
113 }
114
115</script>
116
117<style>
118 html, body { /* sense marges ni padding */
119 margin: 0;
120 padding: 0;
121 /*background-color: #EDEEF0;*/
122 font-family: "Courier New", Courier, monospace;
123 background: #282c34;
124 }
125
126 .caixainfo{
127 background: #282c34;
128 color: #abb2bf;
129 /*border: 2px black solid;
130 margin-left: 100px;
131 margin-top: 10px;
132 width: 350px;
133 height: 630px;*/
134 /*overflow-y: scroll;*/
135 }
136 .botoMode{
137 background: #6f7a90;
138 width: 180px;
139 padding: 5px;
140 margin: 5px;
141 margin-left: auto;
142 font-weight: bold;
143 border-radius: 3px;
144 }
145
146 .imatge{
147 width: 400px;
148 height: 1px;
149 /*border: 1px solid #3b4044;*/
150 transition:all .1s linear;
151 filter: grayscale(100%);
152 border-radius: 8px;
153 }
154 .imatge:hover{
155 /*width: 400px;*/
156 height: auto;
157 transition:all .1s linear;
158 filter: grayscale(0%);
159 }
160
161
162 /*switcher small*/
163 .onoffswitch01 {
164 margin-left:440px;
165 display: inline-block;
166 position: relative; width: 40px;
167 -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
168 transition:all .5s linear;
169 }
170 .onoffswitch01-checkbox {
171 display: none;
172 }
173 .onoffswitch01-label {
174 display: block; overflow: hidden; cursor: pointer;
175 border: 2px solid #A0A5AB; border-radius: 36px;
176 }
177 .onoffswitch01-inner {
178 display: block; width: 200%; margin-left: -100%;
179 transition: margin 0.25s ease-in 0s;
180 }
181 .onoffswitch01-inner:before, .onoffswitch01-inner:after {
182 display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
183 font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
184 box-sizing: border-box;
185 }
186 .onoffswitch01-inner:before {
187 content: "";
188 padding-left: 10px;
189 background-color: #374d73; color: #FFFFFF;
190 }
191 .onoffswitch01-inner:after {
192 content: "";
193 padding-right: 10px;
194 background-color: #CBCDCF; color: #666666;
195 text-align: right;
196 }
197 .onoffswitch01-switch {
198 display: block; width: 15px; margin: 0px;
199 background: #FFFFFF;
200 position: absolute; top: 0; bottom: 0;
201 right: 21px;
202 border: 2px solid #CCCCCC; border-radius: 36px;
203 transition: all 0.25s ease-in 0s;
204 }
205 .onoffswitch01-checkbox:checked + .onoffswitch01-label .onoffswitch01-inner {
206 margin-left: 0;
207 }
208 .onoffswitch01-checkbox:checked + .onoffswitch01-label .onoffswitch01-switch {
209 right: 0px;
210 }
211</style>
212</head>
213<body onload="OnLoadApp()">
214
215<div class='onoffswitch01' onclick='swModeClick()'>
216 <input type='checkbox' name='onoffswitch01' class='onoffswitch01-checkbox' id='swmode' checked>
217 <label class='onoffswitch01-label' for='mode'>
218 <span class='onoffswitch01-inner'></span>
219 <span class='onoffswitch01-switch'></span>
220 </label>
221</div><br>
222 <div id="contingutInfo" class='caixainfo'>
223 <!-- <div class='botoMode' onclick='MostraInfoModeNormal()'>MostraInfo(Normal)</div>-->
224
225 </div>
226
227
228
229
230</body>
231</html>