Website aufrufen und Quellcode einlesen

12nico07 · 2015-02-20T22:36:01+0100

Hi,
ich habe eine Seite die mit Java Script geschrieben ist. Ich müsste die Website aufrufen und dann den erstellten Quelltext irgendwie lesen. Vllt in nem String speichern oder direkt nach bestimmten Elementen suchen.
Leider weiss ich nicht genau wie das geht. Die Webseite soll NICHT angezeigt werden, ich brauche nur ein paar Daten aus dem Quelltext.

Ich habe das mit http Client probiert aber das wird nicht unterstützt (vermutlich weils ne Java Script Seite ist?) Auch mit einem URL Objekt habe ich es versucht aber das ging auch nicht.... Ich weiss jetzt gar nicht ob ich da überhaupt auf dem richtigen Weg bin.

kosmus · 2015-02-21T08:11:59+0100

Zunächst mal eine Sache vorweg. JavaScript wird beim Client und nicht auf dem Server ausgeführt. Wenn du also den Quelltext der Seite einliest wirst du (anders als z. B. bei PHP) auch den JavaScript Quelltext sehen und nicht den Output des JavaScript.

Wenn es das ist was du willst, dann kannst du AsyncTask eine URLConnection aufbauen und dir den Quelltext als String zurückgeben lassen.

rihntrha · 2015-02-21T08:14:30+0100

Ist das deine Seite? Oder versuchst du Infos aus fremden Seiten zu holen?

Beides erfordert unterschiedliche Techniken.

cu

12nico07 · 2015-02-21T09:55:13+0100

Es handelt sich um die Seite Pass.Telekom.De ich möchte dort mein internetvolumen auslesen. Ich habe die Seite mal auf dem Laptop im Firefox angeschaut... Wenn ich einfach den Quelltext anschaue, sehe ich nur Java Script, wenn ich die Seite speicher und dann mit dem Texteditor angucke sehe ich den Code, den ich auslesen möchte.

rihntrha · 2015-02-21T10:00:29+0100

Du musst herrausfinden wie die Seite funktioniert. Also vergiss erstmal die Android App Sache und löse erstmal dieses Problem.

Wenn der Javascript Code z.B. dein Volumen vom Server abfragt, dann kannst du das auch tun.
http://de.m.wikipedia.org/wiki/Ajax_(Programmierung)

Das wäre meine erste Vermutung, ist heutzutage eine beliebte und verbreitete Technik.

D.h. es wäre möglich das du nur ne bestimmte URL aufrufen musst und dann die Daten in einer json/xml Datei bekommst.

cu

12nico07 · 2015-02-21T10:09:03+0100

Meine Idee war es die Internet Seite irgendwie temporär zu speichern und dann auszulesen. So wie ich es am PC auch gemacht habe
Geht das nicht auch irgendwie?

rihntrha · 2015-02-21T10:14:25+0100

Deine Idee ist nicht zielführend. Und die macht auch wesentlich mehr Arbeit als es gleich richtig zu machen ;-)

Wenn du Daten aus fremden Webseiten klauen willst musst du erstmal die Funktionsweise dieser Seiten verstehen.

Aber wenns unbedingt sein muss. Schau dir mal Webview an. Da sollte man die Seite laden können und dann auf die fertige Seite zugreifen können.

cu

Der ursprüngliche Beitrag von 10:10 Uhr wurde um 10:14 Uhr ergänzt:

http://developer.android.com/reference/android/webkit/WebView.html

12nico07 · 2015-02-21T10:28:21+0100

Das Problem ist halt das ich nicht blicke wie die Seite funktioniert

sonst würde ich es auch richtig und professionell machen. Naja ich werde mir das ändert dann nochmal angucken. Danke

rihntrha · 2015-02-21T10:33:06+0100

Dann poste doch mal den Quelltext
(Am besten hier http://pastebin.com/).
Aber vorher schauen ob persönliche Daten drin sind und diese AusXen.

cu

12nico07 · 2015-02-21T10:54:43+0100

Also hier mal der komplette Java script Code der Website:

Code:

function contains(b, a) {
  return b.indexOf(a, 0) > 0
}
function notifyApp(a) {
  if (window.external && typeof window.external.notify === 'function') {
    window.external.notify(a)
  }
}
function getStyle(c, a, b) {
  return getAutoStyle(c, a, a, b)
}
function getAutoStyle(d, c, a, b) {
  var e = b;
  if (d === undefined) {
    return e
  }
  if (d.currentStyle) {
    e = d.currentStyle[c]
  } else {
    if (document.defaultView && document.defaultView.getComputedStyle) {
      e = document.defaultView.getComputedStyle(d, null).getPropertyValue(a)
    }
  }
  if (isNaN(parseInt(e))) {
    e = b
  }
  return e
}
function getPassListWidth() {
  var b = parseInt(getStyle(document.getElementsByClassName('container').item(0), 'max-width', window.innerWidth));
  var c = parseInt(getStyle(document.getElementById('content'), 'margin-left', 0));
  var a = Math.min(window.innerWidth, b) - c;
  return a
}
function getBoxWidth(b, c) {
  var a = parseInt(getStyle(b, 'width', c));
  a += getBoxHorizontalSpacing(b, 0);
  return a
}
function getBoxHorizontalSpacing(b, e) {
  var c = parseInt(getStyle(b, 'margin-left', 0)) + parseInt(getStyle(b, 'margin-right', 0));
  var a = parseInt(getStyle(b, 'border-left-width', 0)) + parseInt(getStyle(b, 'border-right-width', 0));
  var d = 0;
  if (!contains(navigator.userAgent.toLowerCase(), 'firefox')) {
    d = parseInt(getStyle(b, 'padding-left', 0)) + parseInt(getStyle(b, 'padding-right', 0))
  } else {
    a -= 1
  }
  if (contains(navigator.userAgent.toLowerCase(), 'webkit')) {
    a += 1
  }
  return d + c + a
}
function getBoxHeight(b, e) {
  var f = parseInt(getStyle(b, 'height', e));
  var d = parseInt(getStyle(b, 'padding-top', 0)) + parseInt(getStyle(b, 'padding-bottom', 0));
  var c = parseInt(getStyle(b, 'margin-top', 0)) + parseInt(getStyle(b, 'margin-bottom', 0));
  var a = parseInt(getStyle(b, 'border-top-width', 0)) + parseInt(getStyle(b, 'border-bottom-width', 0));
  f += d + c + a;
  return f
}
function getMaxHeight(b) {
  var d = document.getElementsByClassName(b);
  var c = 0;
  for (var a = 0;
  a < d.length;
  a++) {
    if (d[a].clientHeight > c) {
      c = d[a].clientHeight
    }
  }
  return c
}
function alignHeightByClassName(b) {
  var d = document.getElementsByClassName(b);
  var c = getMaxHeight(b);
  for (var a = 0;
  a < d.length;
  a++) {
    d[a].style.height = c + 'px'
  }
}
function alignTopMarginByClassName(c, a) {
  var e = document.getElementsByClassName(c);
  var d = getMaxHeight(c);
  for (var b = 0;
  b < e.length;
  b++) {
    var f = parseInt(d - e[b].clientHeight);
    e[b].style.marginTop = parseInt(a + f) + 'px'
  }
}
function determineBoxesPerRow(c, b) {
  var a = Math.ceil(c / b);
  return Math.ceil(c / a)
}
function calculateOptimalOfferBoxWidth(b, c) {
  var a = b / c;
  return Math.min(a, 1.75 * offerBoxWidth)
}
function updateOrientation() {
  layoutPassBoxes();
  popup = document.getElementById('popup');
  if (popup) {
    centerPopup(popup)
  }
  window.scrollTo(0, 1)
}
function layoutPassBoxes() {
  var l = document.getElementById('offers');
  if (l) {
    var c = Math.max(1, Math.floor(getPassListWidth() / offerBoxWidth));
    var n = Array.prototype.slice.call(document.getElementsByClassName('offer_list'));
    var g = Array.prototype.slice.call(document.getElementsByClassName('offer_box'));
    var f = n.length;
    var b = Math.ceil(g.length / c);
    var m = determineBoxesPerRow(g.length, c);
    for (var p = 0;
    p < b;
    p++) {
      var j = document.createElement('div');
      j.className = 'offer_list';
      var d = p * m;
      for (var k = d;
      k - d < m && k < g.length;
      k++) {
        var h = g[k];
        var o = calculateOptimalOfferBoxWidth(getPassListWidth(), m) - spacingForOfferBoxes;
        h.style.width = o + 'px';
        h.getElementsByClassName('offer_features').item(0).style.height = '';
        j.appendChild(g[k])
      }
      l.appendChild(j)
    }
    for (var e = 0;
    e < f;
    e++) {
      l.removeChild(n[e])
    }
    alignTopMarginByClassName('offer_title', originalOfferTitleMarginTop);
    alignHeightByClassName('offer_features');
    alignTopMarginByClassName('listHeader', originalListHeaderMarginTop)
  }
  var a = document.getElementById('popup');
  if (a) {
    centerPopup(a)
  }
}
function centerPopup(a) {
  var c = (window.innerWidth - getBoxWidth(a, 500)) / 2;
  a.style.left = c + 'px';
  var b = (window.innerHeight - getBoxHeight(a, 500)) / 2;
  a.style.top = b + 'px'
}
function getBaseUrl() {
  var a = document.getElementsByTagName('script') [0].src;
  a = a.replace(/scripts\/.*/, '');
  return a
}
function cancelSelection(c) {
  var a = new XMLHttpRequest();
  a.open('GET', c, false);
  a.send(null);
  if (a.status === 200) {
    var d = document.getElementById('overlay');
    var b = document.getElementById('popup');
    d.style.display = 'none';
    b.style.display = 'none';
    b.innerHTML = '';
    return false
  }
  return true
}
function requestInPopup(i, d, a, e, b) {
  if (i.indexOf('voucher') >= 0) {
    return true
  }
  var g = document.getElementById('overlay');
  var c = document.getElementById('popup');
  c.innerHTML = '<div class="loading"> </div>';
  g.style.display = 'block';
  c.style.display = 'block';
  centerPopup(c);
  var f = new XMLHttpRequest();
  f.open(a, i, true);
  f.onreadystatechange = function () {
    if (f.readyState === 4) {
      if (f.status !== 200) {
        window.location = self.location;
        return
      }
      var j = f.responseText;
      var n = j.match(/.*<meta name="apollo-page-id" content="(transparency|confirmPass|error|xtcError|errorPurchase|redeemVoucher)" \/>.*/);
      if (!n) {
        document.body.innerHTML = j;
        return
      }
      j = j.replace(new RegExp('<head>.*</head>', 'ig'), '<HUT/>');
      j = j.replace(new RegExp('.*<div id="page_', 'ig'), '<div id="popup_');
      var k = document.getElementById('popup');
      k.innerHTML = j;
      var m = document.getElementById('btnCancel');
      if (m === null) {
        var l = document.createElement('div');
        l.setAttribute('id', 'buttonBar');
        m = document.createElement('a');
        m.setAttribute('id', 'btnCancel');
        m.setAttribute('class', 'button');
        m.setAttribute('href', b);
        m.innerHTML = e;
        l.appendChild(m);
        k.getElementsByClassName('container') [0].appendChild(l)
      }
      m.setAttribute('onclick', 'return cancelSelection(\'' + b + '\');');
      centerPopup(k)
    }
  };
  var h = null;
  if (d) {
    h = getMessageBody(d);
    f.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  }
  f.send(h);
  return false
}
function openInPopup(c, b, a) {
  return requestInPopup(c, null, 'GET', b, a)
}
function submitInPopup(d, c, e, b, a) {
  return requestInPopup(d, c, e, b, a)
}
function getMessageBody(a) {
  var f = '';
  for (var g = 0;
  g < a.elements.length;
  g++) {
    var d = a.elements[g];
    if (d.name) {
      var l = d.nodeName.toLowerCase();
      var k = d.type ? d.type.toLowerCase()  : '';
      if (l === 'input' && (k === 'checkbox' || k === 'radio')) {
        if (!d.checked) {
          continue
        }
      }
      var c = '';
      if (l === 'select') {
        for (var e = 0;
        e < d.options.length;
        e++) {
          var h = d.options[e];
          if (h.selected) {
            var b = h.getAttributeNode('value');
            var m = (b && b.specified) ? h.value : h.text;
            if (c != '') {
              c += '&'
            }
            c += encodeURIComponent(d.name) + '=' + encodeURIComponent(m)
          }
        }
      } else {
        c = encodeURIComponent(d.name) + '=' + encodeURIComponent(d.value)
      }
      if (f != '') {
        f += '&'
      }
      f += c
    }
  }
  return f
}
var responseText;
function openUri(e, c) {
  if (c === 0) {
    return true
  }
  var b = document.getElementById('overlay');
  var a = document.getElementById('popup');
  b.style.display = 'block';
  a.style.display = 'block';
  a.innerHTML = '<div class="loading"> </div>';
  centerPopup(a);
  var d = new XMLHttpRequest();
  d.open('GET', e, true);
  d.onreadystatechange = function () {
    if (d.readyState === 4) {
      if (d.status === 200 && !d.responseText.match(/.*"apollo-page-id" content="restartRequired".*/)) {
        responseText = d.responseText;
        setTimeout('document.body.innerHTML = responseText; init();', c)
      } else {
        setTimeout('window.location.reload();', c)
      }
    }
  };
  d.send(null);
  notifyApp('Update');
  return false
}
function init() {
  if (document.getElementsByClassName('offer_box').length > 0) {
    offerBoxWidth = getBoxWidth(document.getElementsByClassName('offer_box').item(0), 250);
    spacingForOfferBoxes = getBoxHorizontalSpacing(document.getElementsByClassName('offer_box').item(0), 0);
    originalOfferTitleMarginTop = parseInt(getAutoStyle(document.getElementsByClassName('offer_title') [0], 'marginTop', 'margin-top', 0));
    originalListHeaderMarginTop = parseInt(getAutoStyle(document.getElementsByClassName('listHeader') [0], 'marginTop', 'margin-top', 0));
    window.onresize = layoutPassBoxes;
    window.onorientationchange = updateOrientation;
    layoutPassBoxes()
  }
  if (document.getElementById('purchaseNotification')) {
    notifyApp('Update')
  }
};

rihntrha · 2015-02-21T10:57:49+0100

Da fehlt doch noch was. Das ist doch nicht die komplette Website.

Und hier im Forum gepostet ist das nicht lesbar.

cu

12nico07 · 2015-02-21T11:09:47+0100

Also bin grad am Laptop. Wenn ich mir im Firefox den Quellcode anzeigen lasse, sieht der so aus :

(Sorry für die Foramtierung aber er zeigt mit trotz diesem Pastebin alles in einer Zeile an.)

Code:

[LIST=1]
[*]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><meta name="viewport" content="width=device-width" /><meta name="apollo-target-device" content="Firefox_6up" /><meta name="apollo-page-id" content="home" /><meta name="language" content="de" /><meta name="mobile-web-app-title" content="Datennutzung" /><meta name="apple-mobile-web-app-title" content="Datennutzung" /><title>Datennutzung - SpeedOn</title><link rel="stylesheet" type="text/css" href="/styles/css3-web-firefox$web$TMDE.css" /><link rel="apple-touch-icon-precomposed" href="../images/touch-icon.png" /><link rel="icon" sizes="192x192" href="../images/favicon.png" /><script type="text/javascript" src="/scripts/web.js"></script></head><body class="speed pad" onload="init();"><div id="screenHeaderBar"> </div><div id="page_home" class="container"><a id="lnkHome" name="lnkHome" href="/home" class="logoLink"><div id="logoBar"><div id="logoLeft"> </div><div id="logoRight">SpeedOn</div></div></a><div id="titleBar"><div class="filterOptions roamingInfo"><a href="/home" class="filterButton left active">Inland</a><a href="/info/roaming" class="filterButton right">Ausland</a></div><h2 id="pageTitle" class="title">SpeedOn</h2><div class="hr"><hr /></div></div><div id="content" class="pageContent"><div class="passStatus"><div class="progress emphasized"><div class="barTextAbove color_default"></div><div class="progressBar"><div class="indicator color_default" style="width:7%"> </div></div><div class="barTextBelow color_default"><span class="colored">65,13 MB</span> von 1 GB verbraucht</div></div><table class="frame"><tr class="infoLine"><td><table><tr><td class="infoLabel totalVolume">Datenvolumen:</td><td class="infoValue totalVolume">1 GB</td></tr></table></td></tr><tr class="infoLine"><td><table><tr><td class="infoLabel maxBandwidth">Download-Geschwindigkeit:</td><td class="infoValue maxBandwidth">max. 21,6 Mbit/s</td></tr></table></td></tr><tr class="hrUnderlyingPass"><td /></tr><tr class="infoLine"><td><table><tr><td colspan="2" class="infoLabel passName">Ihr Telekom Datentarif</td></tr></table></td></tr><tr class="infoLine"><td><table><tr><td class="infoLabel billingPeriod">Abrechnungsmonat:</td><td class="infoValue billingPeriod">Februar 2015</td></tr></table></td></tr><tr class="infoLine"><td><table><tr><td class="infoLabel remainingTime">Verbleibende Zeit:</td><td class="infoValue remainingTime"><span class="value">7</span> Tage <span class="value">12</span> Std.</td></tr></table></td></tr></table></div><div class="infoBox exhaustionInfo">Nach Verbrauch Ihres SpeedOn Passes gilt wieder Ihr Telekom Datentarif.</div><p>Die angezeigten Informationen sind zeitverzögert und können vom tatsächlichen Verbrauch abweichen.<br/>Letzte Aktualisierung: 21.02.2015 um 10:56 Uhr (MEZ/MESZ)</p><p></p><div><p class="bookmark">Tipp: Richten Sie sich für diese Seite ein Lesezeichen ein - und Sie sind immer über Ihren Datenverbrauch informiert. </p></div></div><div id="footer"><p id="customerCare" class="customerCare">Bei Fragen wenden Sie sich an den Kundenservice:<br/>Privatkunden:<br/>Kurzwahl vom Handy: <a class="phonenr" href="tel:2202">2202</a><br/>aus dem Festnetz: <a class="phonenr" href="tel:08003302202">0800 330-2202</a><br/>Geschäftskunden:<br/>Kurzwahl vom Handy: <a class="phonenr" href="tel:2828">2828</a><br/>aus dem Festnetz: <a class="phonenr" href="tel:08003302828">0800 330-2828</a></p><p id="costInfo" class="costInfo">Diese Seite ist für Sie kostenfrei.</p><div id="links"><div id="copyright">© 2011 - 2014 Deutsche Telekom  </div><p><span id="lang_switching">Sprache wechseln:  <a href="/home?lang=en" class="lnkLang"><span>English</span></a> | </span><a href="/history/domestic">Buchungen</a> | <a href="/imprint">Impressum</a> | <a href="/faqs">FAQ</a></p></div></div></div><div id="overlay" class="hidden"> </div><div id="popup" class="hidden"><div class="loading"> </div></div></body></html>
[/LIST]

Und die dazugehörigen JScript Methoden sind hier:

Code:

function contains(b, a) {
  return b.indexOf(a, 0) > 0
}
function notifyApp(a) {
  if (window.external && typeof window.external.notify === 'function') {
    window.external.notify(a)
  }
}
function getStyle(c, a, b) {
  return getAutoStyle(c, a, a, b)
}
function getAutoStyle(d, c, a, b) {
  var e = b;
  if (d === undefined) {
    return e
  }
  if (d.currentStyle) {
    e = d.currentStyle[c]
  } else {
    if (document.defaultView && document.defaultView.getComputedStyle) {
      e = document.defaultView.getComputedStyle(d, null).getPropertyValue(a)
    }
  }
  if (isNaN(parseInt(e))) {
    e = b
  }
  return e
}
function getPassListWidth() {
  var b = parseInt(getStyle(document.getElementsByClassName('container').item(0), 'max-width', window.innerWidth));
  var c = parseInt(getStyle(document.getElementById('content'), 'margin-left', 0));
  var a = Math.min(window.innerWidth, b) - c;
  return a
}
function getBoxWidth(b, c) {
  var a = parseInt(getStyle(b, 'width', c));
  a += getBoxHorizontalSpacing(b, 0);
  return a
}
function getBoxHorizontalSpacing(b, e) {
  var c = parseInt(getStyle(b, 'margin-left', 0)) + parseInt(getStyle(b, 'margin-right', 0));
  var a = parseInt(getStyle(b, 'border-left-width', 0)) + parseInt(getStyle(b, 'border-right-width', 0));
  var d = 0;
  if (!contains(navigator.userAgent.toLowerCase(), 'firefox')) {
    d = parseInt(getStyle(b, 'padding-left', 0)) + parseInt(getStyle(b, 'padding-right', 0))
  } else {
    a -= 1
  }
  if (contains(navigator.userAgent.toLowerCase(), 'webkit')) {
    a += 1
  }
  return d + c + a
}
function getBoxHeight(b, e) {
  var f = parseInt(getStyle(b, 'height', e));
  var d = parseInt(getStyle(b, 'padding-top', 0)) + parseInt(getStyle(b, 'padding-bottom', 0));
  var c = parseInt(getStyle(b, 'margin-top', 0)) + parseInt(getStyle(b, 'margin-bottom', 0));
  var a = parseInt(getStyle(b, 'border-top-width', 0)) + parseInt(getStyle(b, 'border-bottom-width', 0));
  f += d + c + a;
  return f
}
function getMaxHeight(b) {
  var d = document.getElementsByClassName(b);
  var c = 0;
  for (var a = 0;
  a < d.length;
  a++) {
    if (d[a].clientHeight > c) {
      c = d[a].clientHeight
    }
  }
  return c
}
function alignHeightByClassName(b) {
  var d = document.getElementsByClassName(b);
  var c = getMaxHeight(b);
  for (var a = 0;
  a < d.length;
  a++) {
    d[a].style.height = c + 'px'
  }
}
function alignTopMarginByClassName(c, a) {
  var e = document.getElementsByClassName(c);
  var d = getMaxHeight(c);
  for (var b = 0;
  b < e.length;
  b++) {
    var f = parseInt(d - e[b].clientHeight);
    e[b].style.marginTop = parseInt(a + f) + 'px'
  }
}
function determineBoxesPerRow(c, b) {
  var a = Math.ceil(c / b);
  return Math.ceil(c / a)
}
function calculateOptimalOfferBoxWidth(b, c) {
  var a = b / c;
  return Math.min(a, 1.75 * offerBoxWidth)
}
function updateOrientation() {
  layoutPassBoxes();
  popup = document.getElementById('popup');
  if (popup) {
    centerPopup(popup)
  }
  window.scrollTo(0, 1)
}
function layoutPassBoxes() {
  var l = document.getElementById('offers');
  if (l) {
    var c = Math.max(1, Math.floor(getPassListWidth() / offerBoxWidth));
    var n = Array.prototype.slice.call(document.getElementsByClassName('offer_list'));
    var g = Array.prototype.slice.call(document.getElementsByClassName('offer_box'));
    var f = n.length;
    var b = Math.ceil(g.length / c);
    var m = determineBoxesPerRow(g.length, c);
    for (var p = 0;
    p < b;
    p++) {
      var j = document.createElement('div');
      j.className = 'offer_list';
      var d = p * m;
      for (var k = d;
      k - d < m && k < g.length;
      k++) {
        var h = g[k];
        var o = calculateOptimalOfferBoxWidth(getPassListWidth(), m) - spacingForOfferBoxes;
        h.style.width = o + 'px';
        h.getElementsByClassName('offer_features').item(0).style.height = '';
        j.appendChild(g[k])
      }
      l.appendChild(j)
    }
    for (var e = 0;
    e < f;
    e++) {
      l.removeChild(n[e])
    }
    alignTopMarginByClassName('offer_title', originalOfferTitleMarginTop);
    alignHeightByClassName('offer_features');
    alignTopMarginByClassName('listHeader', originalListHeaderMarginTop)
  }
  var a = document.getElementById('popup');
  if (a) {
    centerPopup(a)
  }
}
function centerPopup(a) {
  var c = (window.innerWidth - getBoxWidth(a, 500)) / 2;
  a.style.left = c + 'px';
  var b = (window.innerHeight - getBoxHeight(a, 500)) / 2;
  a.style.top = b + 'px'
}
function getBaseUrl() {
  var a = document.getElementsByTagName('script') [0].src;
  a = a.replace(/scripts\/.*/, '');
  return a
}
function cancelSelection(c) {
  var a = new XMLHttpRequest();
  a.open('GET', c, false);
  a.send(null);
  if (a.status === 200) {
    var d = document.getElementById('overlay');
    var b = document.getElementById('popup');
    d.style.display = 'none';
    b.style.display = 'none';
    b.innerHTML = '';
    return false
  }
  return true
}
function requestInPopup(i, d, a, e, b) {
  if (i.indexOf('voucher') >= 0) {
    return true
  }
  var g = document.getElementById('overlay');
  var c = document.getElementById('popup');
  c.innerHTML = '<div class="loading"> </div>';
  g.style.display = 'block';
  c.style.display = 'block';
  centerPopup(c);
  var f = new XMLHttpRequest();
  f.open(a, i, true);
  f.onreadystatechange = function () {
    if (f.readyState === 4) {
      if (f.status !== 200) {
        window.location = self.location;
        return
      }
      var j = f.responseText;
      var n = j.match(/.*<meta name="apollo-page-id" content="(transparency|confirmPass|error|xtcError|errorPurchase|redeemVoucher)" \/>.*/);
      if (!n) {
        document.body.innerHTML = j;
        return
      }
      j = j.replace(new RegExp('<head>.*</head>', 'ig'), '<HUT/>');
      j = j.replace(new RegExp('.*<div id="page_', 'ig'), '<div id="popup_');
      var k = document.getElementById('popup');
      k.innerHTML = j;
      var m = document.getElementById('btnCancel');
      if (m === null) {
        var l = document.createElement('div');
        l.setAttribute('id', 'buttonBar');
        m = document.createElement('a');
        m.setAttribute('id', 'btnCancel');
        m.setAttribute('class', 'button');
        m.setAttribute('href', b);
        m.innerHTML = e;
        l.appendChild(m);
        k.getElementsByClassName('container') [0].appendChild(l)
      }
      m.setAttribute('onclick', 'return cancelSelection(\'' + b + '\');');
      centerPopup(k)
    }
  };
  var h = null;
  if (d) {
    h = getMessageBody(d);
    f.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  }
  f.send(h);
  return false
}
function openInPopup(c, b, a) {
  return requestInPopup(c, null, 'GET', b, a)
}
function submitInPopup(d, c, e, b, a) {
  return requestInPopup(d, c, e, b, a)
}
function getMessageBody(a) {
  var f = '';
  for (var g = 0;
  g < a.elements.length;
  g++) {
    var d = a.elements[g];
    if (d.name) {
      var l = d.nodeName.toLowerCase();
      var k = d.type ? d.type.toLowerCase()  : '';
      if (l === 'input' && (k === 'checkbox' || k === 'radio')) {
        if (!d.checked) {
          continue
        }
      }
      var c = '';
      if (l === 'select') {
        for (var e = 0;
        e < d.options.length;
        e++) {
          var h = d.options[e];
          if (h.selected) {
            var b = h.getAttributeNode('value');
            var m = (b && b.specified) ? h.value : h.text;
            if (c != '') {
              c += '&'
            }
            c += encodeURIComponent(d.name) + '=' + encodeURIComponent(m)
          }
        }
      } else {
        c = encodeURIComponent(d.name) + '=' + encodeURIComponent(d.value)
      }
      if (f != '') {
        f += '&'
      }
      f += c
    }
  }
  return f
}
var responseText;
function openUri(e, c) {
  if (c === 0) {
    return true
  }
  var b = document.getElementById('overlay');
  var a = document.getElementById('popup');
  b.style.display = 'block';
  a.style.display = 'block';
  a.innerHTML = '<div class="loading"> </div>';
  centerPopup(a);
  var d = new XMLHttpRequest();
  d.open('GET', e, true);
  d.onreadystatechange = function () {
    if (d.readyState === 4) {
      if (d.status === 200 && !d.responseText.match(/.*"apollo-page-id" content="restartRequired".*/)) {
        responseText = d.responseText;
        setTimeout('document.body.innerHTML = responseText; init();', c)
      } else {
        setTimeout('window.location.reload();', c)
      }
    }
  };
  d.send(null);
  notifyApp('Update');
  return false
}
function init() {
  if (document.getElementsByClassName('offer_box').length > 0) {
    offerBoxWidth = getBoxWidth(document.getElementsByClassName('offer_box').item(0), 250);
    spacingForOfferBoxes = getBoxHorizontalSpacing(document.getElementsByClassName('offer_box').item(0), 0);
    originalOfferTitleMarginTop = parseInt(getAutoStyle(document.getElementsByClassName('offer_title') [0], 'marginTop', 'margin-top', 0));
    originalListHeaderMarginTop = parseInt(getAutoStyle(document.getElementsByClassName('listHeader') [0], 'marginTop', 'margin-top', 0));
    window.onresize = layoutPassBoxes;
    window.onorientationchange = updateOrientation;
    layoutPassBoxes()
  }
  if (document.getElementById('purchaseNotification')) {
    notifyApp('Update')
  }
};

Und das Layout:

Code:

/*
    This includes additional styles for PAD and Desktop styles
*/

html {
    -webkit-text-size-adjust:none;
}










/* pass-outline D0D0D0 */

body {
    border: 0px;    
    padding: 0px;
/*     margin: 0px 10px 10px 10px ; */
    margin: 0px;
    background-color: #FFFFFF;
    
}
.hidden{
/*     display: none; */
    line-height: 0px;
}

#screenHeaderBar{
    height: 0px;
/*     display: none; */
}

/* Logo style */


a.logoLink, a.logoLink:LINK, a.logoLink:VISITED {
    text-decoration: none;
    color: #8C8C8C;
}

/* .pfu #logoBar { */
/*     -webkit-box-shadow: none; Chrome, Safari */
/*     -khtml-box-shadow: none; older Konquerer browsers */
/*     box-shadow: none; */
/* } */

#logoBar {
    min-width: 230px;
    line-height: 20px;
    height: 20px;    
    border-radius: none;        
                        padding: 10px;  
            margin-top: 0px;  
            margin-bottom: 20px;
               background: #e6e6e6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
   background-image: linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
            -moz-border-radius: 3px; /*Firefox*/
            -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset; /*Chrome, Safari*/
            -khtml-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset; /*older Konquerer browsers*/
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset;
            }
/*      */
/*         #page_selectPass #logoBar{ */
/*                     margin-bottom: 10px;  */
/*         } */
/*      */

#logoLeft,#logoRight {
/*     line-height: 26px; */
/*     height: 26px; */
    line-height: 20px;
    height: 20px;
}

#logoLeft {
           display: none;
    }

#logoRight {    
                       background: url('../images/web/t_logo.png') no-repeat left;
                text-align: right;
        font-size: 19px; 
        color: #4B4B4B;
    }



/* Page */
#content {
    clear: both;
    margin: 0px;
/*     padding: 0 10px; */
    margin: 0px 10px;
}
.container {
    font-family: Helvetica, Arial, Roboto, 'Droid Sans', sans-serif;
    line-height: 20px;
    font-size: 14px;
    color: #8C8C8C;
    background-color: $backgroundColor;
    text-align: left;
    
            min-width: 480px;
                max-width: 960px;
        margin: 0px auto;
        
}

#copyright { display:none; }


@media screen and (min-width: 300px) {
    .frame {
        min-width: 250px;
    }
}
@media screen and (min-width: 768px) {
    #copyright {
        display: inline-block;
        float: left;
        padding: 10px 0px 0px 20px;
    }
    .frame {
        min-width: 320px;
    }
}


/* Ph6 */
#messageBox {
    margin: 0px 10px;
}

#titleBar #messageBox {
   margin: 10px 0;
   text-align: left;
}

h2,h3,h4 {
    text-align: center;
    padding: 0;
    margin: 0 auto;
    color: #4B4B4B;
    -webkit-margin-after: 0px;
    -webkit-margin-before: 0px;
}

h2 {
    font-size: 16px;
    line-height: 35px;
/*     color: #4B4B4B; */
}

h2.header {
/*     deprecated */
    margin-bottom: 10px;    
/*     border-bottom: 1px solid #E7E7E7; */
    border-bottom: 1px solid #A4A4A4;
}

h2.title {
    font-size: 19px;
    font-weight: normal;
    line-height: 26px;
    margin: 30px 0px 10px;    

/*     border-bottom: 1px solid #E7E7E7; */
    padding-bottom: 5px;
    border-bottom: 1px solid #A4A4A4;
    vertical-align: baseline;
}

#content h2.title{    
    margin: 30px -10px 10px;    
}


h3 {
    font-size: 12px;
    line-height: 25px;
/*     color: #4B4B4B; */
}

.list{
    margin-top: 30px;
    margin-bottom: 30px;
}

h3.listHeader {
    text-align: left;
    padding-left: 10px;
    margin: 10px -10px;
/*     margin-bottom: 10px; */
    font-size: 17px;
    font-weight: normal;    
    line-height: 24px;
/*     color: #4B4B4B; */
    border-bottom: 1px solid #E7E7E7;
}

#zoneInfo h3.listHeader {
    border-bottom: none;
}

.passInstance h3.listHeader{
    margin-top: 0;
    margin-bottom: 5px;
    border-bottom: none;
}
h3.headline.listHeader{
    margin-bottom: 10px;
} 
h4 {
    font-size: 10px;
    line-height: 25px;
    color: #8C8C8C;
}

.brandName {
    color: #E20074;
}
strong.brandName {
    font-weight: normal;
}

p {
    margin: 0px 0px 10px 0px;
}

.emphasized {
    color: #4B4B4B;
}

a,
a:LINK,
a:VISITED {
    text-decoration: none;
    color: #0090C4;
/*     -webkit-tap-highlight-color:rgba(191,191,191,1.0);     */
/*    -webkit-tap-highlight-color:rgba(226,0,116,0.1);    */
    -webkit-tap-highlight-color:rgba(118,118,118,0.35);    
}
a:FOCUS,
a:HOVER,
a:ACTIVE {
    color: #0090C4;
    outline: none;
    text-decoration: underline;
/*     -webkit-tap-highlight-color:rgba(200,0,0,0.2);     */
}

.offerlineAnchor {
    margin:  5px 0px ;
    display:block;
}

.passOfferBlock a{
    text-decoration: none;
    color: #8C8C8C;    
}

.offerHeader{
/*     background-color: green;  */
    font-size: 12px;
    line-height: 25px;
    color: #4B4B4B;
    margin-top: 10px;
    margin-bottom: 10px;
border-bottom: 1px solid #E7E7E7;
    
}

.passOfferCmd{
    margin-top: 3.3333333333333335px;
/*     line-height: 20px; */
/*     height: 20px; */
/*     display: block; */
/*     float: right; */
/*     vertical-align: baseline; */
}

#content #dataPass {
    text-align: center;
    margin: 10px 0px;
}

.pfuCharges{
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}
.pfuCharges .price{
    color:     #E20074;
    font-size: 19px;
    line-height: 26px;
}
    
.textArea .passUpgradeText .productLine,
.priceBlock .price { 
    margin: 0px;
    color: #4B4B4B;
/*     font-size: 11px; */
/*     line-height: 12px; */
}

.oldPrice {
    text-decoration:line-through;
}

.bundlePrice .price {
    color: #E20074;
}

li .passOfferBlock  {
   overflow: hidden;
    height: 1%;
}

li .passOfferText  {
            margin-bottom: 3.3333333333333335px;
        
/*     margin-right: $selectPassMarginRight; */
}

.textArea.upgrade1, 
.textArea.upgrade2 {
/*     margin-top: 10px; */
    position: relative;
/*     margin-bottom: 10px;     */
/*     border-bottom: 1px solid #E7E7E7; */
}

.textArea.upgrade1 .infoLine {
    margin-bottom: 10px;
}

.textArea.upgrade1 .passUpgradeText,
.textArea.upgrade2 .passUpgradeText {
/*     margin-right: $selectPassMarginRight; */
/*     float: left; */
}

.textArea.upgrade1 .selectPass {
    margin: 0;
    margin-top: 3.3333333333333335px;
    margin-left: 10px;
    float: right;
/*     margin-top: 10px; */
/*     padding-top: 11px; */
/*     margin-right: 10px; */
/*     position: absolute; */
/*     right: 0px; */
/*     top: 0px; */
/*     width: $selectButtonWidth; */
}

.textArea.upgrade2 .choosePass {
/*     margin-top: 10px; */
/*     padding-top: 11px; */
/*  margin-right: 10px; */
    margin: 0;
    margin-left: 10px;
/*     position: absolute;     */
/*     right: 0px; */
/*     top: 0px; */
    float: right;
/*     width: $selectButtonWidth; */
}
.textArea.upgrade2 .selectPass a.button{
    margin: 0px auto;
}

.passEnd {
    line-height: 0;
    clear: both;
}
.buttonOffer{
/*     clear: both; */
    margin: 10px 0px;
    text-align: center;
    padding:10px 0px;
}
.buttonOffer .button{
    float: none;
/*     padding: 10px !important; */
}


/* Button style */

/* .pfu a.button { */
/*     -moz-box-shadow: none; */
/*     -webkit-box-shadow: none; */
/*     -o-box-shadow: none; */
/*     -khtml-box-shadow: none; */
/*     box-shadow: none; */
/* } */

input[type="submit"]::-moz-focus-inner {
    border:0;
}

.button {
    -moz-box-shadow: 0px 1px 1.9px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0);
    -webkit-box-shadow: 0px 1px 1.9px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0);
    -o-box-shadow: 0px 1px 1.9px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0);
    -khtml-box-shadow: 0px 1px 1.9px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0);
    box-shadow: 0px 1px 1.9px rgba(000,000,000,0.4), inset 0px 0px 1px rgba(255,255,255,0);
}

.button,
.filterButton {
    color: #4B4B4B;
    text-align: center;
    text-shadow: 0px 1px 0px #ffffff;
    cursor: pointer;
       background: #e6e6e6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
   background-image: linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    line-height: 20px;
}

.filterButton,
.filterText {
    box-shadow: none;
    -webkit-appearance: none;
    margin: 0;
}

.button,
.filterButton,
.filterText {
    white-space: nowrap;
    display: inline-block;
    border-bottom: 1px solid #d0d0d0;
    border-top: 1px solid #d0d0d0;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
                -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/    ;
    padding: 5px 10px;
    text-decoration: none;
    outline: none; /* hide dotted outline in Firefox */
    vertical-align: middle;
    line-height: 20px;
}

.button:link,
.button:visited,
.filterButton:link,
.filterButton:visited {
    color: #4B4B4B;
    text-decoration: none;
}
.button:hover,
.filterButton:hover {
    border: 1px solid #bfbfbf;;
       background: #d4d4d4;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#d4d4d4));
   background-image: -webkit-linear-gradient(top, #ededed, #d4d4d4);
   background-image: -moz-linear-gradient(top, #ededed, #d4d4d4);
   background-image: -ms-linear-gradient(top, #ededed, #d4d4d4);
   background-image: -o-linear-gradient(top, #ededed, #d4d4d4);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d4d4d4');
   background-image: linear-gradient(top, #ededed 0%, #d4d4d4 100%);
}
.button:active,
.filterButton:active, 
.filterButton.active {
    border: 1px solid #ababab;;
       background: $buttonGadientActiveColor_end;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to($buttonGadientActiveColor_end));
   background-image: -webkit-linear-gradient(top, #d9d9d9, $buttonGadientActiveColor_end);
   background-image: -moz-linear-gradient(top, #d9d9d9, $buttonGadientActiveColor_end);
   background-image: -ms-linear-gradient(top, #d9d9d9, $buttonGadientActiveColor_end);
   background-image: -o-linear-gradient(top, #d9d9d9, $buttonGadientActiveColor_end);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d9d9', endColorstr='$buttonGadientActiveColor_end');
   background-image: linear-gradient(top, #d9d9d9 0%, $buttonGadientActiveColor_end 100%);
    
   -moz-box-shadow: 0px 0px 0px rgba(000,000,000,000), inset 0px 0px 30px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0px 0px 0px rgba(000,000,000,000), inset 0px 0px 30px rgba(0,0,0,0.2);
   -o-box-shadow: 0px 0px 0px rgba(000,000,000,000), inset 0px 0px 30px rgba(0,0,0,0.2);
   -khtml-box-shadow: 0px 0px 0px rgba(000,000,000,000), inset 0px 0px 30px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 0px rgba(000,000,000,000), inset 0px 0px 30px rgba(0,0,0,0.2);
}
.filterButton {
    min-width: 60px;
}

.roamingInfo .filterButton {
    min-width: 100px;
}

.filterButton.left,
.filterText.left {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    -khtml-border-radius-topright: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;

}

.filterButton.left {
    border-right-width: 0;
}
.filterButton.left {
    border-right-width: 0;
}

.filterButton.middle {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
}

.filterButton.right {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    -khtml-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    -khtml-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
}

.filterText.error {
    background: none repeat scroll 0 0 #FDF2F2;;
    border-color: #BF0000;;
    color: #4B4B4B;
}

input {
    font-size: 14px;
}

/* Other passes box. */
.box {
    background-color: #FFFFFF;
    margin: 7px 0px 9px;
    padding-bottom: 10px;
    border: 1px solid #DDDDDD;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Chrome, Safari */
    -khtml-border-radius: 3px; /* older Konquerer browsers */
    border-radius: 3px; /* CSS3 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset;
    -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0) inset;
    
    /* once again for the IE */
    color: #8C8C8C;
    text-align: left;
/*     line-height: 14px; */
}

.box h3 {
    padding: 0px 10px 0px 10px;
    border-bottom: 1px solid #E7E7E7;
}

.box .description {
    display: block;
/*     font-size: 10px; */
/*     font-weight: normal; */
/*     line-height: 14px; */
    margin-top: -6px;
    text-align: center;
}

.box .textArea, .box a {
    padding: 0px 10px 0px 10px;
/*     font-size: 10px; */
/*     line-height: 14px; */
}

.box .textArea .remainingTime {
    text-align: center;
}

.box .textArea .remainingTime .value {
/*     font-size: 10px; */
    color: #8C8C8C;    
    font-weight: bold;
}

.box .textArea .remainingTimeHuge {
    text-align: center;
    font-size: 10px;
    margin-top: 10px;
}

.box .textArea .remainingTimeHuge .value {
    font-size: 12px;
    color: #8C8C8C;  
    font-weight: bold;
}

.box .textArea.pass {
    border-bottom: 1px solid #E7E7E7;
}

#titleBar {
    clear: both;
/*     border-bottom: 1px solid #A4A4A4; */
    margin-bottom: 0px;
    text-align: center;
    position: relative;
}
/* #titleBar .hr, */
/* .hr { */
/*     color: #A4A4A4; */
/*     background-color: #A4A4A4; */
/*     height: 1px; */
/*     border-bottom: 1px solid #A4A4A4; */
/* } */
/* #titleBar .hr hr, */
.hr {
    display: none;
}
.footnote_indicator, .price.footnote {
    color: #E20074;
    font-size: 20px;
}
#footer {
    clear: both;
    margin-top: 20px;
    padding: 0px;
}

#footer p {
    margin: 10px;
}

.small {
    font-size: 12px;
    line-height: 16px;
}
    


#links {
/*     text-align: right; */
    font-size: 12px;
     line-height: 16px;
    border-top: 1px solid #E7E7E7;
    margin-top:0px;
    padding: 0px 0px 0px;
/*     padding: 10px 0px 0px; */
    margin-bottom: 10px;
    
}

#links p{
/*     margin-top: 0px; */
}

#links a{
/*     background-color: green; */
    text-decoration: none;    
}

#links a:link, 
#links a:visited {
    color: #8C8C8C;
}

#links a:focus, 
#links a:hover, 
#links a:active {
    color: #4B4B4B;    
}


/* progressbar */
.barLabelAbove {
    height: 14px;
}

.frame {
    border-spacing: 0;
   empty-cells:show;
    background-color: #FFFFFF;
   margin: 10px auto;
    max-width: 320px;
    padding: 7.5px;
    border: 1px solid #D0D0D0;
        -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/}
.frame .infoLabel{
    padding: 0px;
    vertical-align: baseline;
}
.frame .infoValue{
    padding: 0 0 0 2.5px;
   text-align: right;
   margin-left: 10px;
   color: #4B4B4B;
    vertical-align: baseline;
}
.frame table {
    border-collapse: collapse;
    width: 100%;
}

.frame .hrUnderlyingPass{
    margin: 5px 0px;
/*     margin: 0px; */
    padding: 0px;
    line-height: 1px;
}
.frame .hrUnderlyingPass td{
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 7.5px;
}
.frame td.passName{
    padding-top: 7.5px;
}

.passStatus{
    margin-bottom: 20px;    
}
.passStatus .frame{
    margin-top: 0px;    
}
.progress {    
/*     margin-top: 10px; */
    margin-top: 0px;
    
}

.progressBar {
    clear: both;
    background: url('../images/web/bar_fill.png') repeat-x ;
    width: 100%;
    height: 10px;
    line-height: 10px;
/*     margin: 5px 0px;  */
    margin: 0px 0px; 
    
           -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/
}
.progressBar .volumeUsed {
/*     background: #E20074; */
    height: 10px;
    line-height: 10px;
}
.progressBar .indicator { 
    background: none repeat scroll 0 0 #E20074;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -khtml-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
.progressBar .indicator[style*="width"][style*="100%"] { 
        -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/;    
}
.progressBar .indicator.color_green {    
    background: none repeat scroll 0 0 #6BB324;
}
.progressBar .indicator.color_yellow { 
    background: none repeat scroll 0 0 #FECB00;
}
.progressBar .indicator.color_red { 
    background: none repeat scroll 0 0 #D90000;
}
.progressBar .volumeAvail {
    float:right;
    height: inherit;
    margin:0px;
    background: black;       
}
.progress .barTextBelow{
    padding-top: 10px;
    padding-bottom: 10px;
}

.progress .usedVolume {
    float: left;
}

.progress .remainingVolume {
    float: right;
}

.progress .remainingTime {
    margin-top: 10px;
}

/* Button Bar */
#buttonBar {
    text-align: center;
    margin: 10px 0px 10px;
    padding: 10px 0px;
/*     position: relative; */
}
#buttonBar .button {
    display: inline-block;
    margin:0px 10px  20px;
    /*width: 40%;*/
    min-width: 170px;
    max-width: 200px;
}
.clearfix {
    clear: both;
}

/* FAQs */
ul.faqs {
    list-style-image: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul.faqs li {
    margin: 0px 0px 10px 0px;
}

ul.faqs li .question {    
    color: #4B4B4B;
    font-weight: normal;
}

ul.faqs li .answer {     
    color: #8C8C8C;
}

  
.pfuUssdInfo{
/*     margin: 10px; */
    text-align: left;
}

.pfuUssdCodes{
        margin: 10px;
        text-align: center;
}

.pfuUssdCode{
/*     background-color: green; */
    display: inline-block;  
/*     border-style:solid; */
/*     border-width: 1px; */
/*     border-color: #E20074; */
    border: 1px solid #d0d0d0;
    margin: 5px;
    width: 20px;
    line-height: 20px;
    color: #E20074;
    text-align: center;    
       background: #e6e6e6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
   background-image: linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
/*     padding: 5px 10px; */
/*         -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/ */
}
.startCall {
    display: inline-block;
    background: url('../images/web/start_call.png') no-repeat left top;
    height: 20px;
    line-height: 20px;
    width: 20px;
    margin: 5px;
}

.offerGlueMargin{    
            margin-top: -11px;
        margin-bottom: -10px;
    
    line-height: 0px;
}

.color_red .colored {
    color: #D90000;
}
.color_yellow .colored {
    color: #FECB00;
}
.color_green .colored {
    color: #6BB324;
}

.infoBox, .otherSubscriptionInfo {
    padding: 10px 10px; 
    margin: 10px 0; 
    color: #4B4B4B;
    background-color: #E0F1FA;    
        -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/}
.infoBox p:LAST-CHILD{
    margin-bottom: 0px;    
}

.infoBox .textArea .passDescription {
       color: #8C8C8C;
    
}

#overlay {
    background: none repeat scroll 0 0 black;
    display: none;
    opacity: 0.4;
    position: fixed;
    height: 200%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

#popup {
    background: transparent;
    border: none;
    display: none;
    max-width: 570px;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: left;
    z-index: 10;
}

#popup .container {
    background: none repeat scroll 0 0 #FFFFFF;padding: 20px;
    border: 1px solid #A4A4A4;
        -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/}

#popup #footer {
    display: none;
}

#popup .loading {
    width: 100px;
    height: 100px;
    background: url('../images/web/loading_indicator.gif') no-repeat center;
    background: rgba(0,0,0,0) url('../images/web/loading_indicator.svg') no-repeat center;
}


.titleCommand {
    margin-bottom: 10px;
}
.filterOptions {
    text-align: center;
}
.listHeader.history {
    border-bottom: 1px solid #A4A4A4;
}
.historyTable {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.historyTable:nth-child(2) {
    margin-bottom: 20px;
}
.historyTable thead {
    display: none;
}
.historyTable tr {
    vertical-align: middle;
    border-bottom: 1px solid #E7E7E7;
    color: #4B4B4B;
}
.historyTable .passName, #page_voucherConfirmation .infoLabel .passName{
    color: #E20074;
}

.tariffTransparencyTable {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.tariffTransparencyTable.lblCol {
    width: 200px;
}
.tariffTransparencyTable.volumeCol {
    text-align: right;
}

#page_redeemVoucher .infoBox, #page_validateAndReedemVoucher .infoBox, #page_getVoucher .infoBox {
    display: block;
}
#voucherCodeBox {
    margin-bottom: 20px;
}
#zoneInfo #UNKNOWN_ZONE {
    display: none;
}
.frame td{
    white-space:nowrap;
}

h2,h3,h4 {
    font-weight: normal;
}

h2.title {
    font-weight: normal;
}

.pad #lnkHome{
    display: block;
}
.pad #logoBar{
    padding: 10px 20px;
}

    #page_selectPass #logoBar{
                margin-bottom: 20px; 
    }

/* Ph6 */
.pad #messageBox {
    margin: 0px 20px;
}

.pad #titleBar #messageBox {
   margin: 20px 0;
}

.pad #logoRight {
    right: 20px;
}
.pad .container{
    min-width: 500px;
    max-width: none;
}

.pad #titleBar{
    padding: 0 20px;
}

.pad #content {
    min-height: 50px;
    margin: 10px 20px 0px 20px;
}

.pad #footer p {
    padding: 0 20px;
    margin: 10px 0px;
/*     margin: 10px 20px; */
}

.pad #links {
 text-align: right;
}

.offer_list {
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
}
#headline {
    background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#FFFFFF), to(#EFEFEF));
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);
    background-image: -o-linear-gradient(#FFFFFF,#EFEFEF);
    background-image: linear-gradient(top, #FFFFFF 0%, #EFEFEF 100%);    
    -moz-box-shadow: 0 8px 6px -3px #AAAAAA;
    box-shadow: 0 8px 6px -3px #AAAAAA;
    float: left;
    height: 40px;
    margin-bottom: 27px;
    padding: 9px;
    width: 100%;
}
#header-wrap {
    margin: 0 auto;
    position: relative;
}
#product-name {
    color: #A4A4A4;
    float: right;
    line-height: 40px;
    padding-right: 20px;
    vertical-align: middle;
}

#popup a#lnkHome.logoLink {
    display: none;
}
#popup #close_purchase_box {
    color: #4B4B4B;
    position: absolute;
    right: 5px;
    top: 5px;
}
#popup h1 {
    border-bottom: 1px solid #A4A4A4;
    text-align: center;
}

#offers {
    text-align: center;
}
.offer_list {
    margin: 20px 0px 20px 0px;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
}
.offer_box:last-child {
    margin-right: 20px;
}
.offer_box:only-child {
    margin-right: 0;
}
.offer_box.monetary {
    border-top: 2px solid #FECB00;
}
.offer_box {
   text-align: center;
    border: 1px solid #e7e7e7;
    border-top: 2px solid #e2007a;
    -webkit-box-orient: vertical;
    -webkit-box-pack: end;
    -moz-box-orient: vertical;
    -moz-box-pack: end;
    -ms-box-orient: vertical;
    -ms-box-pack: end;
    box-orient: vertical;
    box-pack: end;
        -moz-border-radius: 3px; /*Firefox*/
    -webkit-border-radius: 3px; /*Chrome, Safari*/
    -khtml-border-radius: 3px; /*older Konquerer browsers*/
    border-radius: 3px; /*CSS3*/    border-radius: 3px 3px 3px 3px;
    background-color: #FFFFFF;
    border-right: 1px solid #E7E7E7;
    border-style: solid;
    border-width: 2px 1px 1px;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
    margin: 0px 15px 0px 0px;
    padding: 10px;
    width: 170px;
    }

#content h2.title {
    margin: 20px 0px 10px;
    font-weight: normal;
}

.pad h2.title {
    margin: 20px 0px 10px;
}

ul{
    margin: 0px;
    padding: 0px;
}

.offer_title {
    font-size: 19px;
    font-weight: normal;
    line-height: 26px;
    margin: 20px 0px 10px;

/*     border-bottom: 1px solid #E7E7E7; */
    padding-bottom: 5px;
    border-bottom: 1px solid #A4A4A4;    
}

.offer_features {
    color: #8C8C8C;
    display: block;
    list-style: square outside none;
    text-align: left;
}

ul.offer_features {
    padding-left: 15px;
}
.offer_features li {
    color: #E20074;
}
.offer_features .offer_feature {
    color: #8C8C8C;
}

.pad .listHeader {
    margin: 20px 0px 10px 0px;
    padding: 0px;
}

.offer_summary {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    text-align: left;
    color: #4b4b4b
}
.offer_price {
    margin: 20px 0px 20px 0px;
}
.offer_price .oldPrice .price {
    color: #4B4B4B;
    font-size: 15px;
    text-decoration: line-through;
    line-height: 10px;
    margin-right: 10px;
}
.offer_price .price, .offer_price .no_fraction {
    color: #E20074;
    font-size: 20px;
}
.offer_price > .price .fraction {
    font-size: 14px;
    line-height: 14px;
    vertical-align: top;
}
.offer_price .price_unit {
    font-size: 10px;
    line-height: 10px;
}
.offer_price .no_price {
    font-size: 15px;
    text-decoration: underline overline;
}
.wrapper {
    border: 1px solid red;
}

.offer_select {
    width: 100%;
    text-align: center;
}

.offer_select a {
    width: 130px;
}

.titleCommand {
    position: absolute;
    right: 20px;
}
.historyTable .dateCol {
    width: 200px;
}
.historyTable .priceCol {
    text-align: right;
}
.historyTable td {
    height: 50px;
}
.xtraData .offer_title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 5px;
}
.xtraData ul.offer_features {
    border-bottom: 1px solid #A4A4A4;
    list-style: none outside none;
    text-align: center;
    padding-left: 0;
    padding-bottom: 5px;
}
.xtraData .offer_list .listHeader {
    border-bottom: none;
}

body.pad{    
    overflow-x: hidden;
}
.pad .container {
    font-family: Helvetica, Arial, Roboto, 'Droid Sans', sans-serif;
    min-width: 480px;
    max-width: 960px;
    margin: 0px auto;

/*     height: auto !important;     */
/*     min-height: 100%;    */
}

.pad #content {
/*     height: auto !important; */
/*     margin: 0 auto -2em; */
/*     min-height: 100%;     */
    
}

    .pad #screenHeaderBar {
        display: block;
        z-index: -1;
        position:absolute;
        top: 0px;
        width: 100%;
        padding: 10px;
        height: 20px;
           background: #e6e6e6;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
   background-image: linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
        -moz-box-shadow: 0 8px 6px -3px #AAAAAA;
        box-shadow: 0 8px 6px -3px #AAAAAA;
    }
    .pad #logoBar {
        background: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }


/* Firefox keeps subtracting margins and paddings from the width, so we add it to the width for FF.*/
.offer_box {
    margin: 0px 15px 0px 0px;
    padding: 10px;
    width: 198px;
}

.offer_box:last-child {
    width: 203px;
}
[/SPOILER]

rihntrha · 2015-02-21T11:12:38+0100

Die Idee ist das du den Text auf Pastebin eingibst und dann die URL postest ;-)

12nico07 · 2015-02-21T11:18:12+0100

Ich Trottel

Der Quelltext:

HTML:

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML - Pastebin.com[/url]

JavaScript:
[url=http://pastebin.com/AFpNW4tc][JavaScript] function contains(b, a) { return b.indexOf(a, 0) > 0 } function notifyApp(a - Pastebin.com[/url]

Design:
[url=http://pastebin.com/tJhVj0qQ][CSS] /* This includes additional styles for PAD and Desktop styles */ ht - Pastebin.com[/url]

rihntrha · 2015-02-21T11:34:39+0100

Das ist doch nicht due die Webseite wie sie vom Server kommt, diese Seite wurde doch schon durch das JavaScript verändert. Oder?

cu

12nico07 · 2015-02-21T11:54:17+0100

Ja, das ist das was ich bekomme wenn ich die Seite aufrufe. Wie sie davor aussieht weiss ich nicht. Ich habe gerade probiert JavaScript auszuschalten aber irgendwie wird es trotzdem noch angezeigt... Keine Ahnung, lassen wir das einfach, ist hoch ne Nummer zu hoch für mich....

Aber danke für deine Mühe...

kleinerkathe · 2015-02-21T12:24:57+0100

Das Javascript ist gänzlich unwichtig ... das macht ein paar Layoutmanipulationen, das braucht dich eigtl. nicht interessieren. Im HTML-Quelltext steht doch folgendes: "<span class="colored">65,13 MB</span> von 1 GB verbraucht</div>" das ist doch die Information die du benötigst?

Reading Directly from a URL (The Java Tutorials > Custom Networking > Working with URLs)
Reading from and Writing to a URLConnection (The Java Tutorials > Custom Networking > Working with URLs)

Du holst dir den Quelltext, parst diesen und holst dir die für dich wichtige Information heraus ...

Wobei du zu 99% noch mehr Probleme haben wirst, da du dich noch um Session, Login, etc. kümmern musst ...

12nico07 · 2015-02-21T13:03:43+0100

@Kleinerkathe: Das hatte ich schon porbiert, jedoch kommt es hier zu einem Fehler. Die Webseite wird nicht richtig aufgerufen... "Direkter Zugriff auf die Seite nicht möglich."

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--     <meta http-equiv="Refresh" -->
<!--    content="5; url=portal/home?event=meta_refresh" /> -->    
<title>Travel & Surf - Weiterleitung</title>    
<link rel="stylesheet" type="text/css" href="stylesheet-telekom.css" />
</head>
<body>
<div id="container">
    <div id="logo">
        <div id="logoLeft">
        </div>
        <div id="logoFill">
        </div>
    </div>
    <div id="title" class="pageTitle">
    <h1 class="header">Weiterleitung</h1>
    </div>
    <div id="content" class="pageContent">
    <p>Direkter Zugriff auf die Seite nicht möglich.</p>
     <p>Sie werden in 5 Sekunden auf die Startseite weitergeleitet.  Wenn dies nicht automatisch geschieht klicken Sie bitte <a  href="portal/home?event=unknown_browser">hier</a>.</p>
    </div>
    <div id="footer">
        <div id="links"><a href="portal/imprint?event=unknown_browser">Impressum</a>
        </div>
        <p id="costInfo" class="costInfo">Diese Seite ist für Sie kostenfrei.</p>
    </div>
</div>
</body></html>

rihntrha · 2015-02-21T13:08:28+0100

Das ist kein Fehler ;-)

Das ist die Seite die unter dieser URL ist.

Hängst du an die URL ein "portal/home?event=meta_refresh" dann bekommst du gleich die richtige.

cu

Der ursprüngliche Beitrag von 13:06 Uhr wurde um 13:08 Uhr ergänzt:

Dann ist dein Problem nicht das JavaScript (wie anfangs vermutet) sondern das....

Ja, wenn man so was macht dann am besten per wget in der Konsole. Das was der Browser da automatisch macht verwirrt nur.

Du hast im Browser immer eine andere Seite gesehen als du aufgerufen hast weil die Seite automatisch ne andere geladen hat.

cu

12nico07 · 2015-02-21T13:46:42+0100

rihntrha schrieb:
(...)

Hängst du an die URL ein "portal/home?event=meta_refresh" dann bekommst du gleich die richtige.
(...)
Ja, wenn man so was macht dann am besten per wget in der Konsole. Das was der Browser da automatisch macht verwirrt nur.

Du hast im Browser immer eine andere Seite gesehen als du aufgerufen hast weil die Seite automatisch ne andere geladen hat.

cu

Nein, wenn ich "portal/home?event=meta_refresh" dran hänge bekomme ich eine FileNotFaoundExcetion. Die URL existiert dann nicht. wgat sagt dazu:

--2015-02-21 13:38:44-- Datennutzung
Resolving pass.telekom.de... 109.237.176.33
Connecting to pass.telekom.de|109.237.176.33|:80... connected.
HTTP request sent, awaiting response... 302 Moved Temporarily
Location: Datennutzung [following]
--2015-02-21 13:38:44-- Datennutzung
Reusing existing connection to pass.telekom.de:80.
HTTP request sent, awaiting response... 511 Unknown
2015-02-21 13:38:44 ERROR 511: Unknown.

Im Browser geht der Link, er leitet mich auf "http://pass.telekom.de/home?event=meta_refresh" weiter.
Mit dieser Adresse, ist das selbe... FileNotFoundException und wget:

--2015-02-21 13:45:22-- Datennutzung
Resolving pass.telekom.de... 109.237.176.33
Connecting to pass.telekom.de|109.237.176.33|:80... connected.
HTTP request sent, awaiting response... 511 Unknown
2015-02-21 13:45:23 ERROR 511: Unknown.

Website aufrufen und Quellcode einlesen

12nico07

Neues Mitglied

kosmus

Erfahrenes Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied

kleinerkathe

Dauer-User

12nico07

Neues Mitglied

rihntrha

Philosoph

12nico07

Neues Mitglied