Mini Kabibi Habibi

Current Path : C:/Users/Public/Documents/DXTREME 13.1 Demos/DXTravel/DXTravel.Tablet/views/
Upload File :
Current File : C:/Users/Public/Documents/DXTREME 13.1 Demos/DXTravel/DXTravel.Tablet/views/Index.dxview

<div data-options="dxView : { name: 'Index', layout: 'index', 'current-navigation-item-id': 'home' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div class="index-center">
            <h1>Go Somewhere Beautiful</h1>
            <div class="index-trip-list">
                <h2 class="lighter flight-icon has-icon">Next trip</h2>
                <div class="clickable" style="line-height:17px;">
                    <span class="marker-icon index-marker-icon">1</span>
                    <span data-bind="text: nextTrip().location, dxAction: nextTrip().summaryAction" style="font-size: 1.3em; "></span>
                </div>
                <h2 class="softer hot-deals-gray-icon has-icon" style="margin-top: 16px; ">Hot deals</h2>
                <ul>
                    <!-- ko foreach: suggestedLocations -->
                    <li style="line-height:17px;">
                        <span class="marker-icon index-marker-icon" data-bind="text: $index() + 2"></span>
                        <a data-bind="text: $data, attr: { href: 'http://google.com/search?q=' + $data }" target="_blank"></a>
                    </li>
                    <!-- /ko -->
                    <li class="has-icon">
                        many others &hellip;
                    </li>
                </ul>
            </div>
            <div class="index-map">
                <img src="images/map-of-the-world.png" style="width: 100%;"/>
                <div class="index-images-container">                    
                    <div class="index-next-trip-name" data-bind="dxAction: nextTrip().summaryAction">
                      <span data-bind="text: nextTrip().location"></span>
                      <br />
                      <span data-bind="text: nextTrip().dates"></span>
                    </div>
                  
                    <img class="index-next-trip-image" src="images/index-new-york.jpg"/>
                    <div class="index-suggested-trips">Suggested Trips</div>
                    <div class="index-hot-deals-images">
                        <img src="images/paris.jpg" />
                        <img src="images/praga.jpg" />
                        <img src="images/sarasotaflorida.jpg" />
                    </div>
                </div>
            </div>
        </div>
        
        <div class="index-bottom-wrapper ">
            <div class="index-bottom-bevel"></div>

            <div class="index-bottom-grid">
                <!-- row 1 -->
                <div class="index-bottom-cell-title">
                    <h2 class="lighter gray-create-icon">Create A Trip</h2>
                </div>

                <!-- row 2 -->
                <div class="index-bottom-cell-caption index-bottom-new-line">
                    From
                </div>
                <div class="index-bottom-cell-caption">
                    Destination
                </div>

                <!-- row 3 -->
                <div class="index-bottom-cell-label index-bottom-new-line flight-icon">
                    &nbsp;
                </div>
                <div class="index-bottom-cell-editor">
                    <input type="text" placeholder="Type here..." />
                </div>

                <div class="index-bottom-cell-label flight-return-icon">
                    &nbsp;
                </div>
                <div class="index-bottom-cell-editor">
                    <input type="text" placeholder="Type here..." />
                </div>

                <div class="index-bottom-cell-editor">
                    <div class="index-find-deal-button" onclick="DXTravel.notImplemented()"></div>
                </div>
            
                <!-- row 4 -->
                <div class="index-bottom-cell-label index-bottom-new-line">
                    Date
                </div>
                <div class="index-bottom-cell-editor">
                    <input type="date" data-bind="value: Globalize.format(new Date(), 'yyyy-MM-dd')" />
                </div>

                <div class="index-bottom-cell-label">
                    Date
                </div>
                <div class="index-bottom-cell-editor">
                    <input type="date" />
                </div>
            </div>

        </div>

    </div>
</div>