addons/website/views/snippets.xml

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <openerp>
   3 <data>
   4 <template id="snippets">
   5 <div class="scroll" t-ignore="1">
   6     <ul class="nav navbar-nav nav-tabs">
   7       <li class="active"><a href="#snippet_structure" data-toggle="tab">Structure</a></li>
   8       <li><a href="#snippet_content" data-toggle="tab">Content</a></li>
   9       <li><a href="#snippet_feature" data-toggle="tab">Features</a></li>
  10       <li><a href="#snippet_effect" data-toggle="tab">Effects</a></li>
  11     </ul>
  12     <div class="tab-content">
  13
  14 <div id="snippet_structure" class="tab-pane active">
  15
  16     <div name="Banner" class="o_block_banner">
  17         <div id="myCarousel" class="carousel slide mb32" data-interval="10000" style="height: 320px;">
  18             <!-- Indicators -->
  19             <ol class="carousel-indicators hidden">
  20                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  21             </ol>
  22             <div class="carousel-inner">
  23                 <div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
  24                     <div class="container">
  25                         <div class="row content">
  26                             <div class="carousel-content col-md-6 col-sm-12">
  27                                     <h2>Your Banner Title</h2>
  28                                     <h3>Click to customize this text</h3>
  29                                     <p>
  30                                         <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
  31                                     </p>
  32                             </div>
  33                             <span class="carousel-img col-md-6 hidden-sm hidden-xs">
  34                                 <img class="carousel-image img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
  35                             </span>
  36                         </div>
  37                     </div>
  38                 </div>
  39             </div>
  40             <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div>
  41             <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div>
  42         </div>
  43     </div>
  44
  45     <div name="Text-Image" class="o_block_text_image">
  46         <section>
  47             <div class="container">
  48                 <div class="row">
  49                     <div class="col-md-6 mt16">
  50                         <h3>A Section Subtitle</h3>
  51                         <p>
  52                             Write one or two paragraphs describing your product or
  53                             services. To be successful your content needs to be
  54                             useful to your readers.
  55                         </p><p>
  56                             Start with the customer – find out what they want
  57                             and give it to them.
  58                         </p>
  59                     </div>
  60                     <div class="col-md-6 mt16">
  61                         <img class="img img-responsive shadow mb16" src="/website/static/src/img/text_image.png"/>
  62                     </div>
  63                 </div>
  64             </div>
  65         </section>
  66     </div>
  67
  68
  69     <div name="Image-Text" class="o_block_image_text">
  70         <section>
  71             <div class="container">
  72                 <div class="row">
  73                     <div class="col-md-6 mt16">
  74                         <img class="img img-responsive shadow mb16" src="/website/static/src/img/image_text.jpg"/>
  75                     </div>
  76                     <div class="col-md-6 mt16">
  77                         <h3>A Section Subtitle</h3>
  78                         <p>
  79                             Write one or two paragraphs describing your product,
  80                             services or a specific feature. To be successful
  81                             your content needs to be useful to your readers.
  82                         </p><p>
  83                             Start with the customer – find out what they want
  84                             and give it to them.
  85                         </p>
  86                     </div>
  87                 </div>
  88             </div>
  89         </section>
  90     </div>
  91
  92
  93     <div name="Big Message" class="o_block_jumbotron">
  94         <section class="jumbotron mt16 mb16">
  95             <div class="container">
  96                 <h1>Sell Online. Easily.</h1>
  97                 <p>
  98                     Write one sentence to convince visitor about your message.
  99                 </p>
 100                 <p>
 101                     <a class="btn btn-primary btn-lg" href="/page/website.contactus">
 102                         Contact us
 103                     </a>
 104                 </p>
 105             </div>
 106         </section>
 107     </div>
 108
 109
 110     <div name="Text Block" class="o_block_text_block">
 111         <section class="mt16 mb16">
 112             <div class="container">
 113                 <div class="row">
 114                     <div class="col-md-12 text-center mt16 mb32">
 115                         <h2>
 116                             A Great Headline
 117                         </h2>
 118                         <h3 class="text-muted">A good subtitle</h3>
 119                     </div>
 120                     <div class="col-md-12 mb16 mt16">
 121                         <p>
 122                             A great way to catch your reader's attention is to tell a story.
 123                             Everything you consider writing can be told as a story.
 124                         </p><p>
 125                             <b>Great stories have personality.</b> Consider telling
 126                             a great story that provides personality. Writing a story
 127                             with personality for potential clients will asist with
 128                             making a relationship connection. This shows up in small
 129                             quirks like word choices or phrases. Write from your point
 130                             of view, not from someone else's experience.
 131                         </p><p>
 132                             <b>Great stories are for everyone even when only written for
 133                             just one person.</b> If you try to write with a wide general
 134                             audience in mind, your story will ring false and be bland.
 135                             No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
 136                         </p>
 137                     </div>
 138                 </div>
 139             </div>
 140         </section>
 141     </div>
 142
 143
 144     <div name="Title" class="o_block_title">
 145         <section>
 146             <div class="container">
 147                 <div class="row">
 148                     <div class="col-md-12">
 149                         <h1 class="text-center">Your Website Title</h1>
 150                         <h3 class="text-muted text-center">And a great subtitle too</h3>
 151                     </div>
 152                 </div>
 153             </div>
 154         </section>
 155     </div>
 156
 157     <div name="Features" class="o_block_features">
 158         <section class="mb16">
 159             <div class="container">
 160                 <div class="row mt16 mb16">
 161                     <div class="col-md-4 text-center">
 162                         <span class="fa fa-suitcase fa-5x"></span>
 163                         <h3 class="mt8 mb0">First Feature</h3>
 164                         <div class="text-muted">Tell what's the value for the</div>
 165                         <div class="text-muted">customer for this feature.</div>
 166                     </div>
 167                     <div class="col-md-4 text-center">
 168                         <span class="fa fa-lock fa-5x"></span>
 169                         <h3 class="mt8 mb0">Second Feature</h3>
 170                         <div class="text-muted">Write what the customer would like to know,</div>
 171                         <div class="text-muted">not what you want to show.</div>
 172                     </div>
 173                     <div class="col-md-4 text-center">
 174                         <span class="fa fa-heart fa-5x"></span>
 175                         <h3 class="mt8 mb0">Third Feature</h3>
 176                         <div class="text-muted">A small explanation of this great</div>
 177                         <div class="text-muted">feature, in clear words.</div>
 178                     </div>
 179                 </div>
 180             </div>
 181         </section>
 182     </div>
 183
 184     <div name="Big Picture" class="o_block_big_picture">
 185         <section class="oe_dark mt16 mb16">
 186             <div class="container">
 187                 <div class="row">
 188                     <div class="col-md-12 text-center mt32 mb32">
 189                         <h2>A Punchy Headline</h2>
 190                     </div>
 191                     <div class="col-md-12">
 192                         <img class="img img-responsive" src="/website/static/src/img/big_picture.png" style="margin: 0 auto;"/>
 193                     </div>
 194                     <div class="col-md-6 col-md-offset-3 mb16 mt16">
 195                         <p class="text-center">
 196                             <b>A Small Subtitle</b>
 197                         </p>
 198                         <p class="text-center">
 199                             Choose a vibrant image and write an inspiring paragraph
 200                             about it. It does not have to be long, but it should
 201                             reinforce your image.
 202                         </p>
 203                         <p class="text-center">
 204                             <a href="/page/website.contactus">Contact us »</a>
 205                         </p>
 206                     </div>
 207                 </div>
 208             </div>
 209         </section>
 210     </div>
 211
 212     <div name="Three Columns" class="o_block_three_columns">
 213         <section class="mt16 mb16">
 214             <div class="container">
 215                 <div class="row">
 216                     <div class="col-md-4">
 217                         <img class="img img-rounded img-responsive" src="/website/static/src/img/desert_thumb.jpg"/>
 218                         <h4 class="mt16">Feature One</h4>
 219                         <p>
 220                             Adapt these three columns to fit you design need.
 221                             To duplicate, delete or move columns, select the
 222                             column and use the top icons to perform your action.
 223                         </p>
 224                     </div>
 225                     <div class="col-md-4">
 226                         <img class="img img-rounded img-responsive" src="/website/static/src/img/deers_thumb.jpg"/>
 227                         <h4 class="mt16">Feature Two</h4>
 228                         <p>
 229                             To add a fourth column, reduce the size of these
 230                             three columns using the right icon of each block.
 231                             Then, duplicate one of the column to create a new
 232                             one as a copy.
 233                         </p>
 234                     </div>
 235                     <div class="col-md-4">
 236                         <img class="img img-rounded img-responsive" src="/website/static/src/img/china_thumb.jpg"/>
 237                         <h4 class="mt16">Feature Three</h4>
 238                         <p>
 239                             Delete the above image or replace it with a picture
 240                             that illustrates your message. Click on the picture to
 241                             change it's <em>rounded corner</em> style.
 242                         </p>
 243                     </div>
 244                 </div>
 245             </div>
 246         </section>
 247     </div>
 248
 249 </div>
 250
 251 <div id="snippet_content" class="tab-pane">
 252
 253     <div name="Well" class="o_block_well">
 254         <div class="well">
 255             Explain the benefits you offer. Don't write about products or
 256             services here, write about solutions.
 257         </div>
 258     </div>
 259
 260
 261     <div name="Quote" class="o_block_quote">
 262         <blockquote>
 263             <p>
 264                 Write a quote here from one of your customers. Quotes are a
 265                 great way to build confidence in your products or services.
 266             </p>
 267             <small>Author of this quote</small>
 268         </blockquote>
 269     </div>
 270
 271
 272     <div name="Panel" class="o_block_panel">
 273         <div class="panel panel-default">
 274             <div class="panel-heading">
 275                 <h3 class="panel-title">Feature Title</h3>
 276             </div>
 277             <div class="panel-body">
 278                 Panels are a great tool to compare offers or to emphasize on
 279                 key features. To compare products, use the inside columns.
 280             </div>
 281         </div>
 282     </div>
 283
 284
 285     <div name="Separator" class="o_block_separator">
 286         <hr/>
 287     </div>
 288
 289
 290     <div name="Share" class="o_block_button">
 291         <div class="oe_share">
 292             <h3>
 293                 Share
 294                 <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
 295                 <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&amp;url={url}"><i class="fa fa-twitter"></i></a>
 296                 <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;"><i class="fa fa-linkedin"></i></a>
 297                 <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}"><i class="fa fa-google-plus-square"></i></a>
 298                 <a href="mailto:?body={url}&amp;subject={title}"><i class="fa fa-envelope-o"></i></a>
 299             </h3>
 300         </div>
 301     </div>
 302
 303     <div name="Table" class="o_block_table">
 304         <section class="oe_snippet_body mt16 mb16">
 305             <div class="container">
 306                 <div class="row">
 307                     <div class="col-md-8">
 308                         <table cellspacing="0" class="table_desc">
 309                             <tbody>
 310                                 <tr><th class="table_heading" colspan="2">Description</th></tr>
 311                                 <tr>
 312                                     <td></td>
 313                                     <td>(Press Tab to add a new row)</td>
 314                                 </tr>
 315                             </tbody>
 316                         </table>
 317                     </div>
 318                     <div class="col-md-4">
 319                         <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
 320                         <h4 class="mt16">Description</h4>
 321                         <p>
 322                             To add a related product list, reduce
 323                             the size of these three columns using
 324                             the right icon of each block.
 325                         </p>
 326                     </div>
 327                 </div>
 328             </div>
 329         </section>
 330     </div>
 331 </div>
 332
 333 <div id="snippet_feature" class="tab-pane">
 334
 335     <div name="Image Gallery" class="o_block_image_gallery">
 336         <section class="o_gallery o_nomode o_spc-none">
 337             <div class="container">
 338                 <div class="row">
 339                     <div class="col-md-6">
 340                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert.jpg"/>
 341                     </div>
 342                     <div class="col-md-3">
 343                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
 344                     </div>
 345                     <div class="col-md-3">
 346                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
 347                     </div>
 348                     <div class="col-md-3">
 349                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert_thumb.jpg"/>
 350                     </div>
 351                     <div class="col-md-3">
 352                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
 353                     </div>
 354                     <div class="col-md-3">
 355                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
 356                     </div>
 357                     <div class="col-md-6">
 358                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/landscape.jpg"/>
 359                     </div>
 360                     <div class="col-md-3">
 361                         <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
 362                     </div>
 363                 </div>
 364             </div>
 365         </section>
 366     </div>
 367
 368
 369     <div name="Comparisons" class="o_block_comparison">
 370         <section>
 371             <div class="container">
 372               <div class="row">
 373                 <div class="col-md-12 text-center mt16 mb32">
 374                     <h2>Our Offers</h2>
 375                 </div>
 376
 377                 <div class="col-md-4">
 378                     <div class="panel panel-info">
 379
 380                       <div class="panel-heading text-center">
 381                           <h2 style="margin: 0">Beginner</h2>
 382                           <p style="margin: 0" class="text-muted">
 383                               Starter package
 384                           </p>
 385                       </div>
 386                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
 387                         <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h2>
 388                         <div>per month</div>
 389                       </div>
 390
 391
 392                       <ul class="list-group">
 393                         <li class="list-group-item active">Battery: 8 hours</li>
 394                         <li class="list-group-item">Screen: 2.5 inch</li>
 395                         <li class="list-group-item">Weight: 1.1 ounces</li>
 396                         <li class="list-group-item">No support</li>
 397                       </ul>
 398                       <div class="panel-footer text-center">
 399                           <p class="text-muted">
 400                               <i>Free shipping, satisfied or reimbursed.</i>
 401                           </p>
 402                           <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
 403                       </div>
 404                     </div>
 405                 </div>
 406                 <div class="col-md-4">
 407                     <div class="panel panel-primary">
 408
 409                       <div class="panel-heading text-center">
 410                           <h2 style="margin: 0">Professional</h2>
 411                           <p style="margin: 0">
 412                               Enterprise package
 413                           </p>
 414                       </div>
 415                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
 416                         <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h2>
 417                         <div>per month</div>
 418                       </div>
 419
 420
 421                       <ul class="list-group">
 422                         <li class="list-group-item active">Battery: 12 hours</li>
 423                         <li class="list-group-item">Screen: 2.8 inch</li>
 424                         <li class="list-group-item">Weight: 1.2 ounces</li>
 425                         <li class="list-group-item">Limited support</li>
 426                       </ul>
 427                       <div class="panel-footer text-center">
 428                           <p class="text-muted">
 429                               <i>Free shipping, satisfied or reimbursed.</i>
 430                           </p>
 431                           <a href="/page/website.contactus" class="btn btn-primary btn-lg">Order now</a>
 432                       </div>
 433                     </div>
 434                 </div>
 435                 <div class="col-md-4">
 436                     <div class="panel panel-info">
 437
 438                       <div class="panel-heading text-center">
 439                           <h2 style="margin: 0">Expert</h2>
 440                           <p style="margin: 0" class="text-muted">
 441                               The top of the top
 442                           </p>
 443                       </div>
 444                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
 445                         <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h2>
 446                         <div>per month</div>
 447                       </div>
 448
 449
 450                       <ul class="list-group">
 451                         <li class="list-group-item active">Battery: 20 hours</li>
 452                         <li class="list-group-item">Screen: 2.8 inch</li>
 453                         <li class="list-group-item">Weight: 1.2 ounces</li>
 454                         <li class="list-group-item">Unlimited support</li>
 455                       </ul>
 456                       <div class="panel-footer text-center">
 457                           <p class="text-muted">
 458                               <i>Free shipping, satisfied or reimbursed.</i>
 459                           </p>
 460                           <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
 461                       </div>
 462                     </div>
 463
 464                 </div>
 465               </div>
 466             </div>
 467         </section>
 468     </div>
 469
 470
 471     <div name="Button" class="o_block_button">
 472         <section class="jumbotron">
 473             <div class="container">
 474                 <div class="row">
 475                     <div class="col-md-9 text-muted">
 476                         <p class="mb0">
 477                             <strong>50,000+ companies run Odoo to grow their businesses.</strong>
 478                         </p><p class="mb0">
 479                             Join us and make your company a better place.
 480                         </p>
 481                     </div>
 482                     <div class="col-md-3">
 483                         <a href="/page/website.contactus" class="btn btn-primary btn-lg pull-right mt8">
 484                             <i class="fa fa-arrow-right"></i>
 485                             Contact Us Now
 486                         </a>
 487                     </div>
 488                 </div>
 489             </div>
 490         </section>
 491     </div>
 492
 493
 494     <div name="FAQ" class="o_block_faq">
 495         <section>
 496             <div class="container">
 497                 <h2 class="page-header">
 498                     Point of Sale Questions <small>v7</small>
 499                 </h2>
 500                 <h3>
 501                     Which hardware does Odoo POS support?
 502                 </h3>
 503                 <p>
 504                     Odoo's POS is a web application that can run on any device that
 505                     can display websites with little to no setup required.
 506                 </p><p>
 507                     The Point of Sale works perfectly on any kind of touch enabled
 508                     device, whether it's multi-touch tablets like an iPad or
 509                     keyboardless resistive touchscreen terminals.
 510                 </p>
 511                 <h3>
 512                     Does it works offline?
 513                 </h3>
 514                 <p>
 515                     Deploy new stores with just an internet connection: no
 516                     installation, no specific hardware required. It works with any
 517                     iPad, Tablet PC, laptop or industrial POS machine.
 518                 </p><p>
 519                     While an internet connection is required to start the Point of
 520                     Sale, it will stay operational even after a complete disconnection.
 521                 </p>
 522
 523                 <h2 class="page-header">
 524                     Project Management Questions <small>v7</small>
 525                 </h2>
 526                 <h3>
 527                     Can I use it to manage projects based on agile methodologies?
 528                 </h3>
 529                 <p>
 530                     Yes.
 531                 </p>
 532             </div>
 533         </section>
 534     </div>
 535
 536
 537     <div name="References" class="o_block_references">
 538         <section class="mb32 mt16">
 539             <div class="container">
 540                 <div class="row">
 541                     <div class="col-md-12">
 542                         <h1 class="text-center">
 543                             Our References
 544                         </h1>
 545                         <h3 class="text-muted text-center">
 546                             More than 500 happy customers.
 547                         </h3>
 548                     </div>
 549                     <div class="col-md-4 col-md-offset-1 mt16 mb32">
 550                         <blockquote>
 551                             <p>
 552                                 Write a quote here from one of your customers. Quotes are a
 553                                 great way to build confidence in your products or services.
 554                             </p>
 555                             <small>Author of this quote</small>
 556                         </blockquote>
 557                     </div>
 558                     <div class="col-md-4 col-md-offset-2 mt16 mb32">
 559                         <blockquote>
 560                             <p>
 561                                 Odoo provides essential platform for our project management.
 562                                 Things are better organized and more visible with it.
 563                             </p>
 564                             <small>John Doe, CEO</small>
 565                         </blockquote>
 566                     </div>
 567                     <div class="col-md-2 col-md-offset-1">
 568                         <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
 569                     </div>
 570                     <div class="col-md-2">
 571                         <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
 572                     </div>
 573                     <div class="col-md-2">
 574                         <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
 575                     </div>
 576                     <div class="col-md-2">
 577                         <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
 578                     </div>
 579                     <div class="col-md-2">
 580                         <img src="/website/static/src/img/openerp_logo.png" class="img img-responsive img-thumbnail"/>
 581                     </div>
 582                 </div>
 583             </div>
 584         </section>
 585     </div>
 586
 587     <div name="Quotes Slider" class="o_block_quotes_slider">
 588         <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
 589             <!-- Indicators -->
 590             <ol class="carousel-indicators mb0">
 591                 <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
 592                 <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
 593             </ol>
 594             <div class="carousel-inner">
 595
 596                 <div class="item text_only active">
 597                     <div class="container">
 598                         <div class="content">
 599
 600                             <div class="row">
 601                                 <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
 602                                         <p>
 603                                             Write a quote here from one of your customers. Quotes are a
 604                                             great way to build confidence in your products or services.
 605                                         </p>
 606                                         <small>Author of this quote</small>
 607                                 </blockquote>
 608                             </div>
 609
 610                         </div>
 611                     </div>
 612                 </div>
 613
 614                 <div class="item text_only">
 615                     <div class="container">
 616                         <div class="content">
 617
 618                             <div class="row">
 619                                 <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
 620                                         <p>
 621                                             Odoo provides essential platform for our project management.
 622                                             Things are better organized and more visible with it.
 623                                         </p>
 624                                         <small>John Doe, CEO</small>
 625                                 </blockquote>
 626                             </div>
 627
 628                         </div>
 629                     </div>
 630
 631                 </div>
 632             </div>
 633         </div>
 634     </div>
 635
 636     <div name="Feature Grid" class="o_block_features">
 637         <section class="mb16">
 638             <div class="container">
 639                 <div class="row">
 640                     <div class="col-md-5 text-center">
 641                         <h2>List of Features</h2>
 642                         <h4 class="text-muted">Add a great slogan</h4>
 643                     </div>
 644                     <div class="col-md-5 text-center col-md-offset-2">
 645                         <h2>Second List</h2>
 646                         <h4 class="text-muted">Add a great slogan</h4>
 647                     </div>
 648                 </div><div class="row">
 649                     <div class="col-md-5 mt16 mb16">
 650                         <div class="row">
 651                           <div class="col-md-12">
 652                             <span style="min-width: 45px" class="fa fa-3x fa-comment pull-left mb16"></span>
 653                             <h3 class="mt0 mb0">Change Icons</h3>
 654                             <p>Click on the icon to adapt it to your feature</p>
 655                           </div><div class="col-md-12">
 656                             <span style="min-width: 45px" class="fa fa-3x fa-columns pull-left mb16"></span>
 657                             <h3 class="mt0 mb0">Duplicate</h3>
 658                             <p>Duplicate blocks to add more features.</p>
 659                           </div><div class="col-md-12">
 660                             <span style="min-width: 45px" class="fa fa-3x fa-user pull-left mb16"></span>
 661                             <h3 class="mt0 mb0">Delete Blocks</h3>
 662                             <p class="text-muted">Select and delete blocks to remove some features.</p>
 663                           </div>
 664                         </div>
 665                     </div>
 666                     <div class="col-md-5 col-md-offset-2 mt16 mb16">
 667                         <div class="row">
 668                           <div class="col-md-12">
 669                             <span style="min-width: 45px" class="fa fa-3x fa-magic pull-left mb16"></span>
 670                             <h3 class="mt0 mb0">Great Value</h3>
 671                             <p>Tell features the visitor would like to know, not what you'd like to say.</p>
 672                           </div><div class="col-md-12">
 673                             <span style="min-width: 45px" class="fa fa-3x fa-bolt pull-left mb16"></span>
 674                             <h3 class="mt0 mb0">Change Background</h3>
 675                             <p>From the main container, you can change the background to highlight features.</p>
 676                           </div><div class="col-md-12">
 677                             <span style="min-width: 45px" class="fa fa-3x fa-picture-o pull-left mb16"></span>
 678                             <h3 class="mt0 mb0">Sample images</h3>
 679                             <p>All these icons are licensed under creative commons so that you can use them.</p>
 680                           </div>
 681                         </div>
 682                     </div>
 683                 </div>
 684             </div>
 685         </section>
 686     </div>
 687
 688 </div>
 689
 690 <div id="snippet_effect" class="tab-pane">
 691
 692     <div name="Parallax" class="o_block_parallax">
 693         <section class="parallax"
 694                 style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
 695                 data-scroll-background-ratio="0.3">
 696                 <div><div class="oe_structure"/></div>
 697         </section>
 698     </div>
 699
 700     <div name="Parallax Slider" class="o_block_quotes_slider">
 701         <section class="parallax"
 702                  style="background-image: url('/website/static/src/img/parallax/quote.png')"
 703                 data-scroll-background-ratio="0.3">
 704             <div><div><div class="oe_structure">
 705                     <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
 706                         <!-- Indicators -->
 707                         <ol class="carousel-indicators mb0">
 708                             <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
 709                             <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
 710                         </ol>
 711                         <div class="carousel-inner">
 712
 713                             <div class="item text_only active">
 714                                 <div class="container">
 715                                     <div class="content">
 716
 717                                         <div class="row">
 718                                             <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
 719                                                 <p>
 720                                                     Write a quote here from one of your customers. Quotes are a
 721                                                     great way to build confidence in your products or services.
 722                                                 </p>
 723                                                 <small>Author of this quote</small>
 724                                             </blockquote>
 725                                         </div>
 726
 727                                     </div>
 728                                 </div>
 729                             </div>
 730
 731                             <div class="item text_only">
 732                                 <div class="container">
 733                                     <div class="content">
 734
 735                                         <div class="row">
 736                                             <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
 737                                                 <p>
 738                                                     Odoo provides essential platform for our project management.
 739                                                     Things are better organized and more visible with it.
 740                                                 </p>
 741                                                 <small>John Doe, CEO</small>
 742                                             </blockquote>
 743                                         </div>
 744
 745                                     </div>
 746                                 </div>
 747
 748                             </div>
 749                         </div>
 750                     </div>
 751             </div></div></div>
 752         </section>
 753     </div>
 754
 755 </div>
 756
 757 <div id="snippet_options" class="hidden">
 758
 759     <t t-call="website.snippet_options"/>
 760
 761 </div>
 762
 763     </div>
 764 </div>
 765 </template>
 766
 767 <template id="snippet_options">
 768
 769     <div data-js='blog-style'
 770         data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
 771         <li class="dropdown-submenu">
 772             <a tabindex="-1" href="#">Style</a>
 773             <ul class="dropdown-menu">
 774                 <li data-toggle_class="para_large"><a>Bigger Text</a></li>
 775                 <li data-toggle_class="readable"><a>Narrow</a></li>
 776             </ul>
 777         </li>
 778     </div>
 779
 780     <div data-js='background'
 781         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
 782         <li class="dropdown-submenu" data-background="">
 783             <a tabindex="-1" href="#">Background</a>
 784             <ul class="dropdown-menu">
 785                 <li data-background="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
 786                 <li data-background="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
 787                 <li data-background="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
 788                 <li data-background="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
 789                 <li data-background="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
 790                 <li data-background="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
 791                 <li data-background="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
 792                 <li data-background="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
 793                 <li data-background="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
 794                 <li data-background="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
 795                 <li data-background="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
 796                 <li data-background="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
 797                 <li data-background="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
 798                 <li data-background="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
 799                 <li data-background="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
 800                 <li data-background="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
 801                 <li data-background="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
 802                 <li data-background=""><a>None</a></li>
 803                 <li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>
 804                 <li data-choose_image="choose_image" data-background=""><a><b>Choose an image...</b></a></li>
 805             </ul>
 806         </li>
 807     </div>
 808
 809     <div data-js='gallery' data-selector=".o_gallery">
 810         <li class="dropdown-submenu">
 811             <a tabindex="-2" href="#">Mode</a>
 812
 813             <ul class="dropdown-menu">
 814                 <li data-mode="nomode"   > <a>None</a></li>
 815                 <li data-mode="masonry"  > <a>Masonry</a> </li>
 816                 <li data-mode="grid"     > <a>Grid</a> </li>
 817                 <li data-mode="slideshow"> <a>Slideshow</a> </li>
 818             </ul>
 819         </li>
 820         <li class="dropdown-submenu">
 821             <a tabindex="-2" href="#">Slideshow speed</a>
 822             <ul class="dropdown-menu">
 823                  <li data-interval="1000"> <a>1s</a> </li>
 824                  <li data-interval="2000"> <a>2s</a> </li>
 825                  <li data-interval="3000"> <a>3s</a> </li>
 826                  <li data-interval="5000"> <a>5s</a> </li>
 827                  <li data-interval="10000"> <a>10s</a></li>
 828                  <li data-interval="0"   > <a>Disable autoplay</a> </li>
 829             </ul>
 830         </li>
 831         <li class="dropdown-submenu">
 832             <a tabindex="-2" href="#">Columns</a>
 833
 834             <ul class="dropdown-menu">
 835                 <li data-columns="1"  > <a>1</a> </li>
 836                 <li data-columns="2"  > <a>2</a> </li>
 837                 <li data-columns="3"  > <a>3</a> </li>
 838                 <li data-columns="4"  > <a>4</a> </li>
 839                 <li data-columns="6"  > <a>6</a> </li>
 840                 <li data-columns="12" > <a>12</a> </li>
 841             </ul>
 842         </li>
 843         <li class="dropdown-submenu">
 844             <a tabindex="-2" href="#">Images spacing</a>
 845
 846             <ul class="dropdown-menu">
 847                 <li data-select_class="o_spc-none"  > <a>None</a>   </li>
 848                 <li data-select_class="o_spc-small" > <a>Small</a>  </li>
 849                 <li data-select_class="o_spc-medium"> <a>Medium</a> </li>
 850                 <li data-select_class="o_spc-big"   > <a>Big</a>    </li>
 851             </ul>
 852         </li>
 853         <li class="dropdown-submenu">
 854            <a tabindex="-2" href="#">Album</a>
 855
 856            <ul class="dropdown-menu">
 857                <li data-albumimages="images_add"> <a>Add images</a></li>
 858                <li data-albumimages="images_rm"><a>Remove all images</a></li>
 859            </ul>
 860         </li>
 861         <li class="dropdown-submenu">
 862            <a tabindex="-2" href="#">Styling</a>
 863
 864            <ul class="dropdown-menu">
 865                <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
 866                <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
 867                <li data-styling="img-circle"    ><a>Circle</a></li>
 868                <li data-styling="shadow"        ><a>Shadows</a></li>
 869                <li data-styling="fa-spin"       ><a>Spinning</a></li>
 870            </ul>
 871         </li>
 872     </div>
 873
 874     <div data-js='colorpicker'
 875         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
 876         <li class="dropdown-submenu">
 877             <a tabindex="-1" href="#">Color</a>
 878             <ul class="dropdown-menu">
 879                 <li></li>
 880             </ul>
 881         </li>
 882     </div>
 883
 884     <div data-js='gallery' data-selector=".gallery">
 885         <li class="dropdown-submenu">
 886             <a tabindex="-2" href="#">Mode</a>
 887
 888             <ul class="dropdown-menu">
 889                 <li data-mode="nomode"   > <a>None</a></li>
 890                 <li data-mode="masonry"  > <a>Masonry</a> </li>
 891                 <li data-mode="grid"     > <a>Grid</a> </li>
 892                 <li data-mode="slideshow"> <a>Slideshow</a> </li>
 893             </ul>
 894         </li>
 895         <li class="dropdown-submenu">
 896             <a tabindex="-2" href="#">Slideshow speed</a>
 897             <ul class="dropdown-menu">
 898                  <li data-interval="1000"> <a>1s</a> </li>
 899                  <li data-interval="2000"> <a>2s</a> </li>
 900                  <li data-interval="3000"> <a>3s</a> </li>
 901                  <li data-interval="5000"> <a>5s</a> </li>
 902                  <li data-interval="10000"> <a>10s</a></li>
 903                  <li data-interval="0"   > <a>Disable autoplay</a> </li>
 904             </ul>
 905         </li>
 906         <li class="dropdown-submenu">
 907             <a tabindex="-2" href="#">Columns</a>
 908
 909             <ul class="dropdown-menu">
 910                 <li data-columns="1"  > <a>1</a> </li>
 911                 <li data-columns="2"  > <a>2</a> </li>
 912                 <li data-columns="3"  > <a>3</a> </li>
 913                 <li data-columns="4"  > <a>4</a> </li>
 914                 <li data-columns="6"  > <a>6</a> </li>
 915                 <li data-columns="12" > <a>12</a> </li>
 916             </ul>
 917         </li>
 918         <li class="dropdown-submenu">
 919             <a tabindex="-2" href="#">Images spacing</a>
 920
 921             <ul class="dropdown-menu">
 922                 <li data-select_class="spc-none"  > <a>None</a>   </li>
 923                 <li data-select_class="spc-small" > <a>Small</a>  </li>
 924                 <li data-select_class="spc-medium"> <a>Medium</a> </li>
 925                 <li data-select_class="spc-big"   > <a>Big</a>    </li>
 926             </ul>
 927         </li>
 928         <li class="dropdown-submenu">
 929            <a tabindex="-2" href="#">Album</a>
 930
 931            <ul class="dropdown-menu">
 932                <li data-albumimages="images_add"> <a>Add images</a></li>
 933                <li data-albumimages="images_rm"><a>Remove all images</a></li>
 934            </ul>
 935         </li>
 936         <li class="dropdown-submenu">
 937            <a tabindex="-2" href="#">Styling</a>
 938
 939            <ul class="dropdown-menu">
 940                <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
 941                <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
 942                <li data-styling="img-circle"    ><a>Circle</a></li>
 943                <li data-styling="shadow"        ><a>Shadows</a></li>
 944                <li data-styling="fa-spin"       ><a>Spinning</a></li>
 945            </ul>
 946         </li>
 947     </div>
 948
 949     <div data-js='carousel'
 950         data-selector=":not(.o_gallery > .container) > .carousel">
 951         <li class="dropdown-submenu">
 952             <a tabindex="-2" href="#">Slideshow speed</a>
 953             <ul class="dropdown-menu">
 954                  <li data-interval="1000"> <a>1s</a> </li>
 955                  <li data-interval="2000"> <a>2s</a> </li>
 956                  <li data-interval="3000"> <a>3s</a> </li>
 957                  <li data-interval="5000"> <a>5s</a> </li>
 958                  <li data-interval="10000"> <a>10s</a></li>
 959                  <li data-interval="0"   > <a>Disable autoplay</a> </li>
 960             </ul>
 961         </li>
 962         <li class="divider"></li>
 963         <li data-add_slide="true"> <a href="#">Add Slide</a> </li>
 964         <li data-remove_slide="true"> <a href="#" >Remove Slide</a></li>
 965     </div>
 966
 967     <div data-js='margin-y'
 968         data-selector="section, .row > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
 969     </div>
 970
 971     <div data-js='resize'
 972         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
 973         data-drop-in=".oe_structure, [data-oe-type=html]">
 974     </div>
 975
 976     <div data-js='margin-x'
 977         data-selector=".row > [class*='col-md-']"
 978         data-drop-near=".row > [class*='col-md-']">
 979     </div>
 980
 981     <div data-js='content'
 982         data-selector="blockquote, .well, .panel, .oe_share"
 983         data-drop-near="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
 984         data-drop-in=".content">
 985     </div>
 986
 987     <div data-js='separator'
 988         data-selector="hr"
 989         data-drop-in=".oe_structure, [data-oe-type=html]">
 990     </div>
 991
 992     <div data-js='parallax'
 993         data-selector=".parallax">
 994         <li class="dropdown-submenu">
 995             <a tabindex="-1" href="#">Scroll Speed</a>
 996             <ul class="dropdown-menu" name="parallax-scroll">
 997                 <li data-scroll="0"><a>Static</a></li>
 998                 <li data-scroll="0.3"><a>Very Slow</a></li>
 999                 <li data-scroll="0.6"><a>Slow</a></li>
1000                 <li data-scroll="1"><a>Fixed</a></li>
1001                 <li data-scroll="1.4"><a>Fast</a></li>
1002                 <li data-scroll="1.7"><a>Very Fast</a></li>
1003             </ul>
1004         </li>
1005     </div>
1006
1007     <div data-js='media'
1008         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa, .glyphicon">
1009         <li data-edition="edition"><a>Change...</a></li>
1010     </div>
1011
1012     <div data-js='transform'
1013         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
1014         <li class="dropdown-submenu">
1015             <a tabindex="-1" href="#">Style</a>
1016             <ul class="dropdown-menu" name="parallax-scroll">
1017                 <li data-select_class="img-rounded"><a>Rounded corners</a></li>
1018                 <li data-select_class="img-thumbnail"><a>Box</a></li>
1019                 <li data-select_class="img-circle"><a>Circle</a></li>
1020                 <li data-select_class="shadow"><a>Shadow</a></li>
1021                 <li data-select_class="fa-spin"><a>Spin</a></li>
1022             </ul>
1023         </li>
1024         <li data-style=""><a>Transform</a></li>
1025         <li data-clear_style=""><a>Reset Transformation</a></li>
1026     </div>
1027
1028 </template>
1029
1030
1031 </data>
1032 </openerp>