index.html 6.7 KB
Newer Older
 JosephK's avatar
JosephK committed
1
<!DOCTYPE html>
2
<html lang="en">
 JosephK's avatar
JosephK committed
3 4 5
<head>
  <meta charset="UTF-8" />
  <meta name="robots" content="noindex, follow" />
6
  <title>Sense3 - Examples</title>
 JosephK's avatar
JosephK committed
7
  <link rel="icon" type="image/png" href="favicon.png">
8
  <link href="css/demo.css" media="all" rel="stylesheet">
 JosephK's avatar
JosephK committed
9 10
</head>
<body>
11
  <div class="container">
 JosephK's avatar
JosephK committed
12 13 14

    <h1><img src="logo.png" alt="Sense3" /></h1>

15 16 17
    <h2>Examples</h2>
    <h3>Leaderboard (728 x 90)</h3>
    <div class="text-center">
 JosephK's avatar
JosephK committed
18 19 20
      <script src="sense3.js" data-sense3="728x90;;;vangogh"></script>
      <script src="sense3.js" data-sense3="728x90;;;wikipedia"></script>
      <pre><code>&lt;script src="sense3.js" data-sense3="728x90"&gt;&lt;/script&gt;</code></pre>
21
    </div>
 JosephK's avatar
JosephK committed
22

23 24
    <h3>Medium rectangle (350 x 200)</h3>
    <div class="text-center">
 JosephK's avatar
JosephK committed
25 26 27
      <script src="sense3.js" data-sense3="300x250;;;vangogh"></script>
      <script src="sense3.js" data-sense3="300x250;;;wikipedia"></script>
      <pre><code>&lt;script src="sense3.js" data-sense3="300x250"&gt;&lt;/script&gt;</code></pre>
28 29 30 31 32 33 34 35 36 37
    </div>

    <h2>Customization</h2>
    <p>Parameters can be added in the <code>data-sense3</code> attribut like this:</p>
    <pre><code>data-sense3="&lt;size&gt;;&lt;keywords&gt;;&lt;colors&gt;;&lt;bannerId&gt;"</code></pre>
    <p>Be careful with semicolons !</p>
    <h3>Filters</h3>

    <p>You can filter the banners to be randomly displayed according to a list of allowed keywords (separated by comas)…</p>
    <div class="text-center col-sm-6" style="margin:0 auto; float:none;">
 JosephK's avatar
JosephK committed
38
      <script src="sense3.js" data-sense3="300x250;chaplin,hals"></script>
39 40 41 42 43
      <pre><code>data-sense3="300x250;chaplin,hals"</code></pre>
    </div>

    <p class="clearfix">… or choose one specific banner to display.</p>
    <div class="text-center col-sm-6">
 JosephK's avatar
JosephK committed
44
      <script src="sense3.js" data-sense3="300x250;;;mastodon"></script>
45 46 47
      <pre><code>data-sense3="300x250;;;mastodon"</code></pre>
    </div>
    <div class="text-center col-sm-6">
 JosephK's avatar
JosephK committed
48
      <script src="sense3.js" data-sense3="300x250;;;dioGafam"></script>
49 50 51
      <pre><code>data-sense3="300x250;;;dioGafam"</code></pre>
    </div>

 JosephK's avatar
JosephK committed
52 53
    <p class="clearfix">… this one can be useful</p>
    <div class="text-center">
 JosephK's avatar
JosephK committed
54
      <script src="/sense3/sense3.js" data-sense3="728x90;;;showInfos"></script>
 JosephK's avatar
JosephK committed
55 56 57
      <pre><code>data-sense3="728x90;;;showInfos"</code></pre>
    </div>

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
    <h3>Color</h3>
    <p>Colors on text banners can be customized.<br>Default colors are:</p>
    <div class="col-sm-6 clearfix" style="margin:0 auto; float:none;">
      <table>
        <thead>
          <tr><th>Element</th><th>Color</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>Background</td>
            <td style="background:#FFFFFF">#FFFFFF</td>
          </tr>
          <tr>
            <td>Text 1</td>
            <td style="background:#963425;color:#fff;">#963425</td>
          </tr>
          <tr>
            <td>Text 2</td>
            <td style="background:#333333;color:#fff;">#333333</td>
          </tr>
          <tr>
            <td>Link</td>
            <td style="background:#757575">#757575</td>
          </tr>
          <tr>
            <td>Button</td>
            <td style="background:#963425;color:#fff;">#963425</td>
          </tr>
          <tr>
            <td>Border</td>
            <td style="background:#CCCCCC">#CCCCCC</td>
          </tr>
        </tbody>
      </table>
      <pre><code>#FFFFFF,#963425,#333333,#757575,#963425,#CCCCCC</code></pre>
    </div>

    <h4>Examples from FramAdsense (for April Fools' Day)</h4>
    <div class="text-center">
      <h5>Default</h5>
 JosephK's avatar
JosephK committed
98
      <script src="sense3.js" data-sense3="728x90;wikipedia;#FFF,#6A5687,#616161,#757575,#6A5687,#D3C5E8"></script>
99 100 101 102 103
      <pre><code>data-sense3="728x90;;#FFFFFF,#6A5687,#616161,#757575,#6A5687,#D3C5E8"</code></pre>
    </div>

    <div class="text-center col-sm-6">
      <h5>Peertube</h5>
 JosephK's avatar
JosephK committed
104
      <script src="sense3.js" data-sense3="300x250;wikipedia;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"></script>
 JosephK's avatar
JosephK committed
105
      <pre><code>data-sense3="300x250;;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"</code></pre>
106 107 108 109
    </div>

    <div class="text-center col-sm-6">
      <h5>Framaporn</h5>
 JosephK's avatar
JosephK committed
110
      <script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#EF7896,#757776,#757575,#EF7896,#EF7896"></script>
 JosephK's avatar
JosephK committed
111
      <pre><code>data-sense3="300x250;;#FFF,#EF7896,#757776,#757575,#EF7896,#EF7896"</code></pre>
112 113 114 115 116
    </div>

    <h4>Examples from Google Adsense</h4>
    <div class="text-center col-sm-6">
      <h5>Default</h5>
 JosephK's avatar
JosephK committed
117
      <script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#3F7DFB,#000,#A1A1A1,#5B99FE,#F3F3F3"></script>
118 119 120 121
      <pre><code>data-sense3="300x250;;#FFF,#3F7DFB,#000,#A1A1A1,#5B99FE,#F3F3F3"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Minimalist</h5>
 JosephK's avatar
JosephK committed
122
      <script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#212121,#838383,#858585,#C3C3C3,#E0E0E0"></script>
123 124 125 126
      <pre><code>data-sense3="300x250;;#FFF,#212121,#838383,#858585,#C3C3C3,#E0E0E0"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Splash of color</h5>
 JosephK's avatar
JosephK committed
127
      <script src="sense3.js" data-sense3="300x250;wikipedia;#F1F1F1,#4A4A4A,#5E5E5E,#49C4A5,#BABABA,#F1F1F1"></script>
128 129 130 131
      <pre><code>data-sense3="300x250;;#F1F1F1,#4A4A4A,#5E5E5E,#49C4A5,#BABABA,#F1F1F1"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Prestige</h5>
 JosephK's avatar
JosephK committed
132
      <script src="sense3.js" data-sense3="300x250;wikipedia;#000000,#F7F7F7,#CBCBCB,#707070,#444444,#ffffff"></script>
133 134 135 136
      <pre><code>data-sense3="300x250;;#000000,#F7F7F7,#CBCBCB,#707070,#444444,#ffffff"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Colorful</h5>
 JosephK's avatar
JosephK committed
137
      <script src="sense3.js" data-sense3="300x250;wikipedia;#4D90FE,#FFFFFF,#FFFFFF,#9DC3FF,#9DC3FF,#4D90FE"></script>
138 139 140 141
      <pre><code>data-sense3="300x250;;#4D90FE,#FFFFFF,#FFFFFF,#9DC3FF,#9DC3FF,#4D90FE"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Dark blue reverse</h5>
 JosephK's avatar
JosephK committed
142
      <script src="sense3.js" data-sense3="300x250;wikipedia;#336699,#FFFFFF,#FFFFFF,#6FA2C1,#6FA2C1,#336699"></script>
143 144 145 146
      <pre><code>data-sense3="300x250;;#336699,#FFFFFF,#FFFFFF,#6FA2C1,#6FA2C1,#336699"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Notepad</h5>
 JosephK's avatar
JosephK committed
147
      <script src="sense3.js" data-sense3="300x250;wikipedia;#FFFEEB,#8C6239,#75746E,#C7B295,#C5B092,#8C6239"></script>
148 149 150 151
      <pre><code>data-sense3="300x250;;#FFFEEB,#8C6239,#75746E,#C7B295,#C5B092,#8C6239"</code></pre>
    </div>
    <div class="text-center col-sm-6">
      <h5>Neon</h5>
 JosephK's avatar
JosephK committed
152
      <script src="sense3.js" data-sense3="300x250;wikipedia;#000000,#FA8BDF,#FA8BDF,#731B50,#8C2367,#8C2367"></script>
153 154 155
      <pre><code>data-sense3="300x250;;#000000,#FA8BDF,#FA8BDF,#731B50,#8C2367,#8C2367"</code></pre>
    </div>
    <div class="clearfix"></div>
 JosephK's avatar
JosephK committed
156 157 158
  </div>
</body>
</html>