-
Notifications
You must be signed in to change notification settings - Fork 0
/
d3_flotoolkit_ui4.html
138 lines (108 loc) · 4.42 KB
/
d3_flotoolkit_ui4.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
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One|Raleway" rel="stylesheet">
<style>
svg {
margin: 50px
}
.sub_title {
font-family: 'Raleway', sans-serif;
font-size: 3.5px;
}
.title {
font-family: 'Raleway', sans-serif;
font-size: 9.5px;
}
.content {
font-size: 2.4px;
}
.button rect {
cursor: pointer;
}
.button text {
cursor: pointer;
text-transform: uppercase;
font-size: 3.5px;
font-weight: 300;
font-family: 'Raleway', sans-serif;
}
/* Mozilla browser */
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.content {
font-size: 2px;
}
}
</style>
</head>
<body>
<script>var company_name = "Ranchi Mall"</script>
<svg id="svg1" viewBox="0 0 100 70" height="70%" width="70%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="180%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
<feOffset dx="0.2" dy="0.2" result="offsetblur"></feOffset>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="blurFilter" x="0" y="0">
<feGaussianBlur stdDeviation="0.5"></feGaussianBlur>
</filter>
<pattern id="Pattern" width="100%" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
<image width="100%" height="100%" y="-2" xlink:href="https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA22943-1280x800.jpg" patternUnits="userSpaceOnUse">
</image>
</pattern>
<pattern id="blurPattern" width="100%" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
<image width="100%" height="100%" y="-2" xlink:href="https://www.jpl.nasa.gov/spaceimages/images/wallpaper/PIA22943-1280x800.jpg" filter="url(#blurFilter)">
</image>
</pattern>
</defs>
<!-- Background and overlay -->
<rect class="background_rect" x="0" y="0" width="100%" height="100%" stroke="rgba(250,250,250,0.3)" stroke-width="0.1px" fill="url(#Pattern)"></rect>
<rect class="overlay_rect" x="12" y="5" width="35%" height="83%" fill="url(#blurPattern)" rx="1" ry="1">
</rect>
<rect class="overlay_rect_rgba1" x="12" y="5" width="35%" height="83%" fill="rgba(250, 250, 250, 0.3)" stroke="rgba(250, 250, 250, 0.8)" stroke-width="0px" rx="1" ry="1">
</rect>
<!-- Overlay inner styling -->
<text x="30" y="10" width="30" fill="black" text-anchor="middle" style="font-size: 5px;">
<tspan class="sub_title" x="30" dy="3" id="anotherUpdate"><script id="updateThis">document.write(company_name)</script></tspan>
<tspan class="title" x="30" dy="7.5" height="10">FLOKit</tspan>
<tspan class="content" x="30" dy="7">This is the glass looks</tspan>
<tspan class="content" x="30" dy="3">Done Totally in SVG</tspan>
<tspan class="content" x="30" dy="3">One of the ways to create mirror</tspan>
<tspan class="content" x="30" dy="3">Lets try other backgrounds</tspan>
<tspan class="content" x="30" dy="3">Or maybe radial background</tspan>
<tspan class="content" x="30" dy="3">Experiment</tspan>
</text>
<g class="button">
<rect x="17.5" y="48" width="25%" height="11%" fill="none" stroke="#56362e" stroke-width="0.1px" rx="1" ry="1"></rect>
<text x="30" y="53" fill="black" text-anchor="middle">Discover</text>
</g>
</svg>
<script>
/*
//This document.write will write at the end of page .. when everything else has been written. It will not write at the location I want. For that innerHTML is needed
x0 = document.getElementById("updateThis");
x0.innerHTML = 'document.write("Hello")';
*/
/*
var js = "document.write('Hello12')" // put your JS code here
var oScript = document.createElement("script");
var oScriptText = document.createTextNode(js);
oScript.appendChild(oScriptText);
document.getElementById("anotherUpdate").innerHTML="";
document.getElementById("anotherUpdate").appendChild(oScript);
*/
var index = 0;
function updateCompany(){
company_name = ["Intricap","Ranchi Mall", "WhatsApp","Facebook","Visa","Google","BerkShire Hathaway"];
//console.log(index+" "+company_name[index]);
document.getElementById("anotherUpdate").innerHTML=company_name[index];
index++;
if (index>6) {index = index - 7};
}
</script>
<!--And then call this function on the basis of Reactor Event-->
<button onclick="updateCompany()">Update</button>
</body></html>