TwitterStatistics/index.html at master · CodeHunger/TwitterStatistics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
  <title>TwitterSt@tistics - calculating your social score</title>
  <meta name="description" content="">
  <meta name="author" content="CodeHunger">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="main.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jarallax-0.2.3.js"></script>
  <script type="text/javascript" src="handle_interface.js"></script>
  <script type="text/javascript" src="socialscore.js"></script>

</head>
<body onload="init()">
  <div class="main_container">
    <h1>TwitterSt@tistics</h1>
    <div class="search_container">
      <div class="bird"></div>
      <form method='post' action='/?user=sadasd'>
        <input name='user' type='text' id='user_input' value='Username' />
        <input id="search_button" class='button_search' type="submit" name="mysubmit" value="Click!"/>
      </form>
    </div>
    <h2><a href="#" class="logo center">Sowijs</a></h2>
    <div class="profile">

      <div class="profile_container">
        <img id="user_image" class="user" src="img/profile.jpg" width="80" height="80"/>
        <p class="name">@<span id='user_name'>Jarallax</span></p>
        <p class="details">
        following: <span id="following_amount">254</span><br />
        followers: <span id="followers_amount">235.493</span>
        </p>
      </div>
      <div class="icon_quote head" ></div>
      <h3 class="populair">Most populair tweets</h3>
      <div class="populair_container">
        <p><span id="most_populair_tweet_message">This site is amazing!!</span><span class="retweets"><span id="most_populair_tweet_retweet">6</span> times</span></p>
      </div>
      <div class="icon_graph head"></div>
      <h3 class="statistics">Twitter statistics</h3>
      <div class="statistics_container">
        <ul>
          <li><span class="icon_mention">Mentions</span><div class="bar" id="bar1">Social<span id="statistics_social">55%</span></div></li>
          <li><span class="icon_hash">Informer</span><div class="bar" id="bar2">Informer<span id="statistics_informer">55%</span></div></li>
          <li><span class="icon_retweet">Retweet</span><div class="bar" id="bar3">Retweeted<span id="statistics_retweeted">55%</span></div></li>
        </ul>
      </div>
      <div class="icon_mention head"></div>
      <h3 class="mentions">Most mentioned friends</h3>
      <div class="mentions_container">
        <ol id="mentions">
          <a href="#"><li><img src="img/profile.jpg" width="80" height="80"/>@sowijs<span>6 times</span></li></a>
          <li><img src="img/profile.jpg" width="80" height="80"/>@sowijs<span>6 times</span></li>
          <li><img src="img/profile.jpg" width="80" height="80"/>@sowijs<span>6 times</span></li>
        </ol>
      </div>
      <div class="icon_hash head"></div>
      <h3 class="hastags">Most used hastags</h3>
      <div class="hastags_container">
        <ol id="hastags">
          <li>#mtnw</li>
          <li>#cmdlwd</li>
          <li>#sowijs</li>
        </ol>
      </div>
      <div class="icon_retweet head"></div>
      <h3 class="retweet">Retweet statistics</h3>
      <div class="retweet_container">
        <ul>
          <li>Retweeted others:<span id="retweet_retweets">10%</span></li>
          <li>Your tweets get retweeted:<span id="retweet_retweeted">12,8%</span></li>
          <li>Average amount of retweets:<span id="retweet_amount">1,23x</span></li>
        </ul>
      </div>
      <div class="score_container">
        <h4>social score</h4>
        <p id="social_score" class="score">8,1</p>
        <a href="#" class="button_tweet"><div class="bird"></div>Tweet this!</a>
      </div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
      <div class="line4"></div>
      <div class="line5"></div>
    </div>

    <footer>
      <p>
        Powerd by <a href="http://sowijs.nl">Sowijs.nl</a><br />
        Animations made possible by <a href="http://jarallax.com">Jarallax.com</a>
      </p>
    </footer>
    <div class="sun"></div>
    <div class="sun2"></div>
    <div class="mountains"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
  </div>
<div class="addthis_toolbox addthis_default_style share_buttons">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e77569f111870bb"></script>
</body>
</html>