Subversion Repositories LCARS

Rev

Rev 211 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
236 PointedEar 1
 
2
<div id="LCARS">
210 PointedEar 3
<?php /*
4
      <div id="button-grid" style="position: absolute; opacity: 0.3">
5
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
6
 
7
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
8
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
9
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
10
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
11
 
12
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
13
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
14
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
15
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
16
 
17
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
18
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
19
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
20
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
21
 
22
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
23
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
24
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
25
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
26
 
27
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
28
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
29
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
30
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
31
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
32
 
33
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
34
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
35
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
36
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
37
 
38
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
39
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
40
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
41
 
42
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
43
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
44
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
45
 
46
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
47
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
48
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
49
 
50
        <a class="button" style="display: block; clear: left; float: left"><span class="text">Button 1</span></a>
51
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
52
        <a class="button" style="display: block; float: left"><span class="text">Button 1</span></a>
53
      </div>
54
*/ ?>
55
      <div id="bow">
236 PointedEar 56
    <div id="bow-top">
57
      <div class="separator-left">&nbsp;</div>
58
      <div class="text" lang="<?php echo $language; ?>">
59
        <span><?php echo tr("PointedEars' Website"); ?></span>
60
      </div>
61
    </div>
62
    <div id="bow-top-left">
63
      <div class="concave">&nbsp;</div>
64
      <div style="position: absolute; top: 3.2em; left: 0; background-color: black">
65
        <div class="bow" style="margin-top: 0.2em; width: 8em; height: 1em">&nbsp;</div>
66
      </div>
67
    </div>
68
    <div id="bottom">
69
      <div id="bow-bottom">
70
        <div class="concave">&nbsp;</div>
71
        <div class="spacer">&nbsp;</div>
72
      </div>
73
    </div>
74
 
75
    <div class="menu-container">
76
      <nav class="menu">
77
        <ul>
78
          <?php foreach ($languages as $key => $name): ?>
79
            <li><a href="index.<?php echo language_key_short($key); ?>?ani=0"
80
                   lang="<?php echo $key; ?>" hreflang="<?php echo $key; ?>"
81
                   class="button<?php if ($language === $key) { ?> selected<?php } ?>"
82
                   tabindex="2"
83
                   ><span class="text"><?php echo language_name($key); ?></span></a></li>
84
          <?php endforeach; ?>
85
        </ul>
86
        <div class="bow" style="margin-bottom: 0.4em; height: 0.4em">&nbsp;</div>
87
        <ul style="margin-bottom: 1.2em">
88
          <li><a href="<?php echo $menu['scripts']['path']; ?>"
89
                 target="_top" class="button" lang="<?php echo $language; ?>"
90
                 ><span class="text"><?php echo $menu['scripts']['text']; ?></span></a></li>
91
          <li><a href="<?php echo $menu['es-matrix']['path']; ?>"
92
                 target="_top" class="button"
93
                 title="<?php echo $menu['es-matrix']['title']; ?>"
94
                 ><span class="text"><?php echo $menu['es-matrix']['text']; ?></span></a></li>
95
          <li><a href="<?php echo $menu['devel']['path']; ?>"
96
                 target="_top" class="button" lang="<?php echo $language; ?>"
97
                 ><span class="text"><?php echo $menu['devel']['text']; ?></span></a></li>
98
        </ul>
99
        <ul style="margin-bottom: 0.2em">
100
          <li><a href="psf/" target="_top" class="button ancillary"><abbr
101
                 title="<?php echo tr("PointedEars' Standard Frases"); ?>"
102
                 class="text"
103
                 >psf</abbr></a></li>
104
          <li><a href="<?php echo $menu['series']['path']; ?>"
105
                 target="_top" class="button ancillary"
106
                 title="<?php echo tr('List of recommended TV shows and episodes, with logos in CSS'); ?>"
107
                 ><span class="text"><?php echo $menu['series']['text']; ?></span></a></li>
108
          <li><a href="<?php echo $menu['ufpdb']['path']; ?>"
109
                 target="_top" class="button database"
110
                 ><abbr title="<?php echo $menu['ufpdb']['title']; ?>" class="text"
111
                        ><?php echo $menu['ufpdb']['text']; ?></abbr></a></li>
112
        </ul>
113
        <div style="position: relative; margin-bottom: 1.2em">
114
          <div class="bow" style="height: 0.8em">&nbsp;</div>
210 PointedEar 115
        </div>
236 PointedEar 116
        <ul>
117
          <li><a
118
            href="http://climateapps2.oerc.ox.ac.uk/cpdnboinc/show_user.php?userid=648544"
119
            target="_top" class="button secondary"
120
            title="<?php echo tr("The world's largest climate forecasting experiment for the 21st century"); ?>"
121
            ><span class="text">climateprediction.net</span></a></li>
122
          <li><a
123
            href="http://fah-web2.stanford.edu/cgi-bin/main.py?qtype=userpage&username=Thomas_Lahn"
124
            target="_top" class="button secondary"
125
            title="<?php echo tr("Distributed computing to understand protein folding, protein aggregation, and related diseases"); ?>"
126
            ><span class="text">Folding at home</span></a></li>
127
          <li><a
128
            href="http://lhcathomeclassic.cern.ch/sixtrack/show_user.php?userid=221181"
129
            target="_top" class="button secondary"
130
            title="<?php echo tr("Particle physics research with the Large Hadron Collider at CERN"); ?>"
131
            ><span class="text">LHC at home</span></a></li>
132
          <li><a
133
            href="http://setiathome.berkeley.edu/show_user.php?userid=378921"
134
            target="_top" class="button secondary"
135
            title="<?php echo tr("The Search for Extra-Terrestrial Intelligence at HOME"); ?>"
136
            ><span class="text">SETI at home</span></a></li>
137
          <li><a
138
            href="http://stackoverflow.com/users/855543/pointedears"
139
            target="_top" class="button secondary"
140
            title="<?php echo tr("Me on Stack Overflow"); ?>"
141
            ><span class="text">Stack Overflow</span></a></li>
142
          <li><a href="https://twitter.com/PointedEars2" target="_top"
143
            class="button secondary"
144
            title="<?php echo tr("Me on Twitter"); ?>"
145
            ><span class="text">Twitter</span></a></li>
146
          <li><a
147
            href="<?php echo tr("http://en.wikipedia.org/wiki/Special:Contributions/PointedEars"); ?>"
148
            target="_top" class="button secondary"
149
            title="<?php echo tr("My contributions to Wikipedia"); ?>"
150
            ><span class="text"><?php echo tr('Wikipedia'); ?></span></a></li>
151
        </ul>
210 PointedEar 152
<?php /*
153
            <script type="text/javascript">
154
              var sURL = location.href;
155
              var sFavAnchorTitle =
156
                  "Klicken Sie hier, um PointedEars' Website Ihren Favoriten"
157
                + " hinzuzufügen";
158
              var sOtherAnchorTitle =
159
                  "Klicken Sie hier mit der rechten Maustaste, um PointedEars' Website"
160
                + " Ihren Lesezeichen hinzuzufügen";
161
              var sFavoriteTitle = "PointedEars' Website";
162
 
163
              if (jsx.object.isHostMethod(jsx.global.window, "external", "AddFavorite"))
164
              {
165
                document.write(
166
                    '<div style="position: relative; margin-top: 1em; border-bottom: 0.2em solid transparent">'
167
                  + '  <div class="bow" style="width: 8em; height: 1em">&nbsp;<\/div>'
168
                  + '  <div class="bow" style="position: absolute; top: 0; left: 8.2em; width: 2em; height: 1em">&nbsp;<\/div>'
169
                  + '</div>'
170
                  + '<a href="javascript:window.external.AddFavorite('
171
                  + ' sURL, sFavoriteTitle);" title="' + sFavAnchorTitle + '"'
172
                  + ' class="button"'
173
                  + ' onclick="window.external.AddFavorite('
174
                  + ' sURL, sFavoriteTitle); return false"'
175
                  + ' onmouseover="return setStatus(sFavAnchorTitle)"'
176
                  + ' onmouseout="return resetStatus()"'
177
                  + '><span class="text">Favorit<\/span><\/a>');
178
              }
179
            </script>
180
*/ ?>
181
          </nav>
236 PointedEar 182
    </div>
183
  </div>
184
  <div id="connectors">
185
    <div class="bow top left">&nbsp;</div>
186
    <div class="bow top right">&nbsp;</div>
187
 
188
    <div class="bow mid left">&nbsp;</div>
189
    <div class="bow mid right">&nbsp;</div>
190
  </div>
191
  <div class="multi-display">
192
    <div class="upper">
193
      <div class="content">
194
        <div class="title" id="title" lang="<?php echo $language; ?>">
195
          <span class="text"><?php echo tr('Home'); ?></span>
210 PointedEar 196
        </div>
236 PointedEar 197
        <div class="analysis" id="analysis">
198
          <table>
199
            <tr>
200
              <th lang="<?php echo $language; ?>"><span class="text"><?php echo tr('Display'); ?></span></th>
201
              <td lang="<?php echo $language; ?>"><script type="text/javascript">
210 PointedEar 202
                    var _addEventListener = jsx.dom.addEventListener;
203
                    var _runAsync = jsx.dom.timeout.runAsync;
204
                    var ID_SCREEN_DIM = 'screenDim';
205
                    var ID_AVAIL_DIM = 'availDim';
206
                    var ID_INNER_DIM = 'innerDim';
207
 
208
                    var dim = (function () {
209
                      var screenInfo = jsx.dom.window.screenInfo;
210
 
211
                      return {
212
                        getScreenText: function () {
213
                          var screenDim = screenInfo.getDim();
214
                          return screenDim.width + "×" + screenDim.height;
215
                        },
216
 
217
                        getAvailText: function () {
218
                          var availDim = screenInfo.getAvailDim();
219
                          return <?php echo sprintf(tr('%s + "x" + %s + " available"'), 'availDim.width', 'availDim.height'); ?>;
220
                        },
221
 
222
                        getInnerText: function () {
223
                          var innerDim = screenInfo.getInnerDim();
224
                          return ", " + <?php echo sprintf(tr('%s + "x" + %s + " used"'), 'innerDim.width', 'innerDim.height'); ?>;
225
                        },
226
 
227
                        getColorDepthText: function () {
228
                          var colorDepth = screenInfo.getColorDepth();
229
                          return colorDepth
230
                            ? '2<sup>' + colorDepth + "<\/sup> <?php echo tr('colors'); ?>"
231
                            : "";
232
                        }
233
                      };
234
                    }());
235
 
236
                    (function () {
237
                      var screenDimText = dim.getScreenText();
238
                      var availDimText = dim.getAvailText();
239
                      var innerDimText = dim.getInnerText();
240
                      var colorDepthText = dim.getColorDepthText();
241
                      var displayInfo = (screenDimText || availDimText || innerDimText || colorDepthText)
236 PointedEar 242
                        ?   (screenDimText ? <?php echo sprintf("'" . tr('%s pixels') . '"', "<span id=\"' + ID_SCREEN_DIM + '\">' + screenDimText + '<\/span>' + \""); ?> : "")
210 PointedEar 243
                          + (availDimText ? ' (<span id="' + ID_AVAIL_DIM + '">' + availDimText + "<\/span>" : "")
244
                          + (innerDimText ? '<span id="' + ID_INNER_DIM + '">' + innerDimText + "<\/span>)" : "")
245
                          + (colorDepthText ? ' ×&nbsp;<span id="colorDepth">' + colorDepthText + "<\/span>" : "")
246
                        : TEXT_NOT_AVAILABLE;
247
 
248
                      /* FIXME: Convert HTML to text, update whole title text */
249
                      document.write('<span class="text">' + displayInfo + '<\/span>');
250
 
251
                      var oColorDepth;
252
                      var tColor = _runAsync(function () {
253
                        if (typeof oColorDepth == "undefined")
254
                        {
255
                          oColorDepth = document.getElementById("colorDepth");
256
                        }
257
 
258
                        if (oColorDepth)
259
                        {
260
                          var colorDepthText = dim.getColorDepthText();
261
                          <?php /* FIXME: Also update title attribute value */ ?>
262
                          if (oColorDepth.innerHTML != colorDepthText)
263
                          {
264
                            oColorDepth.innerHTML = colorDepthText;
265
                          }
266
                        }
267
 
268
                        tColor = this.run();
269
                      }, 1000);
270
 
271
                      _addEventListener(document, "unload", function () {
272
                        tColor.unset();
273
                        tColor = null;
274
                      });
275
                    }());
236 PointedEar 276
                  </script>
277
                <noscript><?php echo tr('N/A'); ?></noscript></td>
278
            </tr>
279
            <tr>
280
              <th lang="<?php echo $language; ?>"><span class="text"><?php echo tr('User Agent'); ?></span></th>
281
              <td><script type="text/javascript"
282
                  src="application/scripts/ua.js"
283
                ></script>
284
                <noscript><?php
210 PointedEar 285
                    echo tr('N/A'); ?></noscript></td>
236 PointedEar 286
            </tr>
287
            <tr>
288
              <th lang="<?php echo $language; ?>"><span class="text"><?php echo tr('Features'); ?></span></th>
289
              <td><script type="text/javascript">
210 PointedEar 290
                    var fullscreen = jsx.dom.window.fullscreen;
291
 
292
                    (function () {
293
                      function getFeatures ()
294
                      {
295
                        var features = [];
296
                        if (typeof document.cookie != "undefined")
297
                        {
298
                          var cookiesText = "<?php echo tr('Cookies'); ?>"
299
                          if (navigator.cookieEnabled)
300
                          {
301
                            if (document.cookie)
302
                            {
303
                              var cookies = document.cookie;
304
                              cookies = cookies.split(/\s*;\s*/);
305
                              features.push('<a href="#" title="'
306
                                + cookies.join("&#13;&#10;")
307
                                + '"'
236 PointedEar 308
                                + ' onclick=\'window.alert(<?php
309
                                  echo htmlspecialchars(sprintf(tr('"Cookies for " + %s + "'), 'document.domain'), ENT_QUOTES);
310
                                  ?>'
311
                                + '\\n\\n'
312
                                + cookies.join("\\n")
313
                                + '"); return false\'><span class=\'text\' lang=\'<?php
314
                                  echo $language;
315
                                  ?>\'>' + cookiesText + '<\/span><\/a>');
210 PointedEar 316
                            }
317
                            else
318
                            {
319
                              features.push('<span class="unavailable"'
236 PointedEar 320
                                + ' title="<?php echo htmlspecialchars(tr('Cookies supported, but no data for this site'), ENT_QUOTES); ?>"'
210 PointedEar 321
                                + '>' + cookiesText + '<\/span>');
322
                            }
323
                          }
324
                          else
325
                          {
326
                            features.push('<span class="offline"'
236 PointedEar 327
                              + ' title="<?php echo htmlspecialchars(tr('Cookies supported, but disabled'), ENT_QUOTES); ?>"'
210 PointedEar 328
                              + '>' + cookiesText + '<\/span>');
329
                          }
330
                        }
331
 
332
                        if (fullscreen.isSupportedBy(document.documentElement))
333
                        {
236 PointedEar 334
                          features.push("<span class='text' lang='<?php echo $language; ?>'><?php echo tr('Fullscreen'); ?><\/span>");
210 PointedEar 335
                        }
336
 
337
                        if (navigator.webkitGetGamepads && navigator.webkitGetGamepads().length)
338
                        {
236 PointedEar 339
                          features.push("<span class='text' lang='<?php echo $language; ?>'><?php echo tr('Gamepad'); ?></span>");
210 PointedEar 340
                        }
341
 
342
                        if (jsx.dom.geolocation.isAvailable())
343
                        {
236 PointedEar 344
                          features.push('<a href="#" title="<?php echo htmlspecialchars(tr('Get location'), ENT_QUOTES); ?>"'
345
                            + ' lang="<?php echo $language; ?>"'
346
                            + ' onclick=\'return lcars.multiDisplay.geolocate("<?php echo htmlspecialchars(tr('Geolocation'), ENT_QUOTES); ?>", "<?php echo $language; ?>")\''
347
                            + '><span class="text"><?php echo htmlspecialchars(tr('Geolocation'), ENT_QUOTES); ?><\/span><\/a>');
210 PointedEar 348
                        }
349
 
350
                        if (typeof navigator.javaEnabled != "undefined" && navigator.javaEnabled())
351
                        {
352
                          features.push("Java");
353
                        }
354
 
355
                        var storage = jsx.dom.storage;
356
                        if (storage.localStorage.isSupported()) features.push("Local Storage");
357
 
358
                        if (navigator.plugins)
359
                        {
360
                          if (navigator.plugins.length > 0)
361
                          {
362
                            features.push('<span title="'
363
                              + navigator.plugins.length
236 PointedEar 364
                              + ' <?php echo htmlspecialchars(tr('plugins installed'), ENT_QUOTES); ?>">Plugins<\/span>');
210 PointedEar 365
                          }
366
                          else
367
                          {
368
                                features.push('<span class="unavailable"'
236 PointedEar 369
                                + ' title="<?php echo htmlspecialchars(tr('Plugins supported, but none detected'), ENT_QUOTES); ?>"'
210 PointedEar 370
                                + '>Plugins<\/span>');
371
                          }
372
                        }
373
 
374
                        if (storage.sessionStorage.isSupported())
375
                        {
376
                          features.push("Session Storage");
377
                        }
378
 
379
                        if (typeof window.ontouchstart != "undefined") features.push("Touch");
380
                        return features.join(" &#8226; ");
381
                      }
382
 
383
                      function stripTags (s)
384
                      {
236 PointedEar 385
                        return s.replace(/<(br|p)\s*\/?>/ig, "\\n").replace(/<[^>]*>/g, "");
210 PointedEar 386
                      }
387
 
388
                      var sFeatures = getFeatures();
389
                      document.write('<span id="features" title="' + stripTags(sFeatures) + '">' + sFeatures + '<\/span>');
390
 
391
                      var oFeatures;
392
                      var oFeaturesHtml;
393
                      var tFeatures = _runAsync(function () {
394
                        if (typeof oFeatures == "undefined")
395
                        {
396
                          oFeatures = document.getElementById("features");
397
                        }
398
 
399
                        if (oFeatures)
400
                        {
401
                          var sNewFeatures = getFeatures();
402
 
403
                          if (!oFeaturesHtml)
404
                          {
405
                            oFeaturesHtml = document.createElement("span");
406
                          }
407
 
408
                          if (oFeaturesHtml)
409
                          {
410
                            oFeaturesHtml.innerHTML = sNewFeatures;
411
                            sNewFeatures = oFeaturesHtml.innerHTML;
412
                          }
413
 
414
                          if (oFeatures.innerHTML != sNewFeatures)
415
                          {
416
                            oFeatures.innerHTML = sNewFeatures;
417
                          }
418
 
419
                          /* Converts CREs */
420
                          var newTitle = stripTags(oFeatures.innerHTML)
421
                          if (oFeatures.title != newTitle)
422
                          {
423
                            oFeatures.title = newTitle;
424
                          }
425
                        }
426
 
427
                        tFeatures = this.run();
428
                      }, 1000);
429
                    }());
430
 
431
                    _addEventListener(document, "unload", function () {
432
                      tFeatures.unset();
433
                      tFeatures = null;
434
                    });
435
 
436
                    var windowText = "<?php echo tr("Window"); ?>";
236 PointedEar 437
                  </script>
438
              <noscript><?php echo tr('N/A'); ?></noscript></td>
439
            </tr>
440
          </table>
210 PointedEar 441
        </div>
236 PointedEar 442
        <ul class="commands">
443
          <li id="cmd1"><a href="index.php" title="Language selection"
444
            tabindex="1" class="button left right"
445
            onmouseover="return setStatus(this.title + ': ' + this.href)"
446
            onmouseout="return resetStatus()"
447
            onfocus="return this.onmouseover()"
448
            onblur="return this.onmouseout()"
449
          ><abbr class="text" title="Language selection">Language</abbr></a></li>
450
          <li id="cmd2"><a
451
            href="index.<?php echo language_key_short($language); ?>?printable=1"
452
            title="<?php echo tr('Printable version'); ?>" tabindex="1"
453
            class="button left right"
454
            onmouseover="return setStatus(this.title + ': ' + this.href)"
455
            onmouseout="return resetStatus()"
456
            onfocus="return this.onmouseover()"
457
            onblur="return this.onmouseout()"
458
            lang="<?php echo $language; ?>"
459
          ><span class="text"><?php echo tr("Printable"); ?></span></a></li>
460
          <li id="cmd3"><div class="button left right"
461
              style="cursor: not-allowed !important"
462
              onclick="toggleFullscreen(this)"
463
              onkeyup="if (event.keyCode == 13) { this.click(); }"
464
              lang="<?php echo $language; ?>"
465
              ><span class="text"></span></div></li>
466
          <li id="cmd4"><div class="button left right"
467
                style="cursor: not-allowed !important"
468
                onkeyup="if (event.keyCode == 13) { this.click(); }"
469
                ><span class="text" lang="<?php echo $language; ?>"></span></div></li>
470
        </ul>
471
      </div>
472
      <div class="elbo-button">
473
        <span class="text" lang="<?php echo $language; ?>"
474
          title="<?php echo tr("Date of last modification"); ?>"
475
        ><?php echo gmdate('Ym.d', $modi); ?></span>
476
      </div>
477
      <div class="elbo" lang="<?php echo $language; ?>">
478
        <span class="text"><abbr
479
          title="<?php echo tr('Library Computer Access and Retrieval System'); ?>"
480
        ><?php echo tr('LCARS'); ?></abbr> <span lang="en">PE-</span>22<span style="text-transform: uppercase">a</span></span>
481
        <div class="concave">&nbsp;</div>
482
      </div>
483
      <div class="border">
484
        <div class="left">&nbsp;</div>
485
        <div class="right">&nbsp;</div>
486
      </div>
487
    </div>
488
    <div class="lower">
489
      <div class="elbo">
490
        <div class="concave">&nbsp;</div>
491
      </div>
492
      <div class="bg">&nbsp;</div>
493
      <div class="border-container">
494
        <div class="border">
495
          <div class="left">&nbsp;</div>
496
          <div class="right">&nbsp;</div>
210 PointedEar 497
        </div>
498
      </div>
499
    </div>
236 PointedEar 500
  </div>
501
</div>