Loading...
  OR  Zero-K Name:    Password:   

Post edit history

[NewFeatures] Draft for landing page feature list

To display differences between versions, select one or more edits in the list using checkboxes and click "diff selected"
Post edit history
Date Editor Before After
1/24/2016 1:59:32 PMSkasi before revert after revert
1/24/2016 12:16:12 PMSkasi before revert after revert
1/24/2016 11:28:29 AMSkasi before revert after revert
1/24/2016 1:07:04 AMSkasi before revert after revert
1/24/2016 12:58:41 AMSkasi before revert after revert
Before After
1 [url=https://jsfiddle. net/Lk0gemqn/6/]Proof of concept for fancy unit display. [/url] 1 [url=https://jsfiddle. net/Lk0gemqn/13/]Proof of concept for fancy unit display. [/url]
2 \n 2 \n
3 (code backup) 3 (code backup)
4 [spoiler]SVG 4 [spoiler]SVG
5 {{{<svg height="512" width="512"> 5 {{{<svg height="512" width="512">
6 <g> 6 <g>
7 <polygon points="120, 250, 7 <polygon points="120, 250,
8 75, 180, 8 75, 180,
9 60, 125, 9 60, 125,
10 81, 55, 10 81, 55,
11 98, 45, 11 98, 45,
12 155, 75, 12 155, 75,
13 200, 140, 13 200, 140,
14 180, 160, 14 180, 160,
15 125, 120, 15 125, 120,
16 185, 190, 16 185, 190,
17 145, 210" /> 17 145, 210" />
18 <text x="160" y="20">Lightning Tail 18 <text x="160" y="20">Lightning Tail
19 <tspan x="180" y="45">Surprise your enemies with a</tspan> 19 <tspan x="180" y="45">Surprise your enemies with a</tspan>
20 <tspan x="180" y="63">high powered electro magnetic</tspan> 20 <tspan x="180" y="63">high powered electro magnetic</tspan>
21 <tspan x="180" y="81">lightning sting.</tspan> 21 <tspan x="180" y="81">lightning sting.</tspan>
22 <tspan x="200" y="101">Enough to quickly disable even</tspan> 22 <tspan x="200" y="101">Enough to quickly disable even</tspan>
23 <tspan x="200" y="119">a tougher opponent.</tspan> 23 <tspan x="200" y="119">a tougher opponent.</tspan>
24 </text> 24 </text>
25 </g> 25 </g>
26 26
27 <g> 27 <g>
28 <polygon points="375, 240, 28 <polygon points="378, 240,
29 420, 235, 29 423, 235,
30 485, 280, 30 489, 281,
31 430, 325, 31 439, 322,
32 375, 280" /> 32 378, 278" />
33 <polygon points="225, 350, 33 <polygon points="225, 350,
34 270, 345, 34 270, 345,
35 335, 390, 35 336, 391,
36 280, 435, 36 283, 434,
37 225, 390" /> 37 225, 390" />
38 <text x="265" y="100">Frontal Particle Cannons 38 <text x="265" y="100">Frontal Particle Cannons
39 <tspan x="295" y="125">After an enemy has been</tspan> 39 <tspan x="295" y="125">After an enemy has been</tspan>
40 <tspan x="295" y="143">disabled by the tail there</tspan> 40 <tspan x="295" y="143">disabled by the tail there</tspan>
41 <tspan x="295" y="161">is not much chance for them</tspan> 41 <tspan x="295" y="161">is not much chance for them</tspan>
42 <tspan x="295" y="179">to escape these particle</tspan> 42 <tspan x="295" y="179">to escape these particle</tspan>
43 <tspan x="295" y="197">accelerators.</tspan> 43 <tspan x="295" y="197">accelerators.</tspan>
44 <tspan x="400" y="217">Pew pew pew. </tspan> 44 <tspan x="365" y="217">Pew pew pew. </tspan>
45 </text> 45 </text>
46 </g> 46 </g>
47 47
48 <g> 48 <g>
49 <polygon points="245, 195, 49 <polygon points="245, 195,
50 315, 240, 50 315, 240,
51 315, 265, 51 315, 265,
52 215, 340, 52 215, 340,
53 145, 295, 53 145, 295,
54 145, 270" /> 54 145, 270" />
55 <text x="230" y="80">Cloaking device 55 <text x="230" y="80">Cloaking device
56 <tspan x="230" y="105">A very distinctive feature,</tspan> 56 <tspan x="230" y="105">A very distinctive feature,</tspan>
57 <tspan x="230" y="123">this high tech cloaking device</tspan> 57 <tspan x="230" y="123">this high tech cloaking device</tspan>
58 <tspan x="230" y="141">is strong enough to hide even</tspan> 58 <tspan x="230" y="141">is strong enough to hide even</tspan>
59 <tspan x="230" y="159">the massive Scorpion strider</tspan> 59 <tspan x="230" y="159">the massive Scorpion strider</tspan>
60 <tspan x="230" y="177">from enemy sensors.</tspan> 60 <tspan x="230" y="177">from enemy sensors.</tspan>
61 <tspan x="265" y="197">2spooky4me. </tspan> 61 <tspan x="278" y="193" class="small">( Provided you don't</tspan>
62 <tspan x="283" y="207" class="small">run out of energy.)</tspan>
62 </text> 63 </text>
63 </g> 64 </g>
64 65
65 <g> 66 <g>
66 <circle cx="75" cy="300" r="30" /> 67 <circle cx="75" cy="300" r="30" />
67 <circle cx="130" cy="370" r="30" /> 68 <circle cx="130" cy="370" r="30" />
68 <circle cx="200" cy="420" r="30" /> 69 <circle cx="200" cy="420" r="30" />
69 <!--<circle cx="230" cy="170" r="25" /> 70 <!--<circle cx="230" cy="170" r="25" />
70 <circle cx="335" cy="230" r="25" />--> 71 <circle cx="335" cy="230" r="25" />-->
71 <text x="5" y="375">Legs 72 <text x="5" y="375">Legs
72 <tspan x="5" y="400">Three all-</tspan> 73 <tspan x="5" y="400">Three all-</tspan>
73 <tspan x="5" y="418">terrain legs</tspan> 74 <tspan x="5" y="418">terrain legs</tspan>
74 <tspan x="5" y="436">on both sides allow</tspan> 75 <tspan x="5" y="436">on both sides allow</tspan>
75 <tspan x="5" y="454">the Scorpion to</tspan> 76 <tspan x="5" y="454">the Scorpion to</tspan>
76 <tspan x="5" y="472">reach almost any</tspan> 77 <tspan x="5" y="472">reach almost any</tspan>
77 <tspan x="5" y="490">target with ease.</tspan> 78 <tspan x="5" y="490">target with ease.</tspan>
78 </text> 79 </text>
79 </g> 80 </g>
80 </svg> 81 </svg>
81 }}} 82 }}}
82 \n 83 \n
83 CSS 84 CSS
84 {{{html { 85 {{{html {
85 background-color: #000; 86 background-color: #000;
86 } 87 }
87 \n 88 \n
88 svg { 89 svg {
89 background: url('http://licho.eu/alba/Zero-K/showcase_big_1.png') no-repeat scroll left top; 90 background: url('http://licho.eu/alba/Zero-K/showcase_big_1.png') no-repeat scroll left top;
90 } 91 }
91 \n 92 \n
92 text { 93 text {
93 display: none; 94 display: none;
94 fill: #fff; 95 fill: #fff;
95 text-shadow: 1px 1px 2px #000, 96 text-shadow: 1px 1px 2px #000,
96 -1px 1px 2px #000, 97 -1px 1px 2px #000,
97 1px -1px 2px #000, 98 1px -1px 2px #000,
98 -1px -1px 2px #000; 99 -1px -1px 2px #000;
99 font-size: 22px; 100 font-size: 22px;
100 } 101 }
101 tspan { 102 tspan {
102 font-size: 16px; 103 font-size: 16px;
104 }
105 tspan.small {
106 font-size: 12px;
103 } 107 }
104 \n 108 \n
105 g:hover text { 109 g:hover text {
106 display: block; 110 display: block;
107 } 111 }
108 \n 112 \n
109 polygon, circle { 113 polygon, circle {
110 fill: rgba(0, 255, 255, 0); 114 fill: rgba(0, 255, 255, 0);
111 stroke: rgba(255, 255, 255, 0.4); 115 stroke: rgba(255, 255, 255, 0.4);
112 stroke-width: 3; 116 stroke-width: 3;
113 transition: fill 1.5s; 117 transition: fill 1.5s;
114 } 118 }
115 \n 119 \n
116 g:hover polygon, g:hover circle { 120 g:hover polygon, g:hover circle {
117 fill: rgba(0, 255, 255, 0.33); 121 fill: rgba(0, 255, 255, 0.33);
118 stroke: rgba(0, 255, 255, 0.5); 122 stroke: rgba(0, 255, 255, 0.5);
119 stroke-width: 4; 123 stroke-width: 4;
120 cursor: help; 124 cursor: help;
121 } 125 }
122 }}}[/spoiler] 126 }}}[/spoiler]