function _createSequentialLayoutView() {
var sequentialLayoutView = new SequentialLayout({
direction: 1
});
var sequentialLayoutSurfaces = [];
sequentialLayoutView.sequenceFrom(sequentialLayoutSurfaces);
for (var i = 0, temp; i < 8; i++) {
sequentialLayoutSurface = new Surface({
content: 'Surface #' + (i + 1),
size: [undefined, 50],
properites: {
backgroundColor: 'white',
borderBottom: '1px solid rgba(82, 101, 107, 0.2)',
lineHeight: '75px',
textAlign: 'center'
}
});
sequentialLayoutSurfaces.push(sequentialLayoutSurface);
}
this.add(sequentialLayoutView);
}
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var SequentialLayout = require("famous/views/SequentialLayout");
var mainContext = Engine.createContext();
var sequentialLayout = new SequentialLayout({
direction: 1
});
var surfaces = [];
sequentialLayout.sequenceFrom(surfaces);
for (var i = 0; i < 10; i++) {
surfaces.push(new Surface({
content: "Surface: " + (i + 1),
size: [undefined, window.innerHeight/10],
properties: {
backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
lineHeight: window.innerHeight/10 + "px",
textAlign: "center"
}
}));
}
mainContext.add(sequentialLayout);
});
Login.prototype.getField = function(icon, placeholder, type) {
var fieldLayout = new SequentialLayout({direction: 0, itemSpacing: 0});
var items = [];
fieldLayout.sequenceFrom(items);
var iconSurface = new Surface({
size: [50, 50],
content: '<img src="' + icon + '">',
classes: ['field-icon']
});
items.push(iconSurface);
var textField = new InputSurface({
size: [document.body.clientWidth - 70, 50],
content: '',
classes: ['field-input'],
placeholder: placeholder,
type: type
});
items.push(textField);
return fieldLayout;
};
FriendsPage.prototype.getSummary = function() {
var self = this;
var firstPrize = localStorage.getItem('prizeCat').split(',')[0];
if(firstPrize.indexOf('$') == -1) {
}
var category = localStorage.getItem('prizeCat').split(',')[1];
var extra = false;
if(localStorage.getItem('shared') != false) {
extra = true;
}
var layout = new SequentialLayout({
direction: 1,
itemSpacing: 10
});
var items =[];
layout.sequenceFrom(items);
var firstLine = new ImageSurface({
size: [500, 236],
content: 'content/images/facebookFriends.jpg',
classes: ['facebook-image']
});
var view = new View();
view.add(firstLine);
items.push(view);
var continueSurface = new Surface({
size: [175, 30],
content: 'Continue',
classes: ['continue-button']
});
this.addListeners(continueSurface, continueSurface.getContent());
var buttonView = new View();
var buttonModifier = new Modifier({
origin: [1, 0],
transform: Transform.translate(0, 5, 0)
});
buttonView.add(buttonModifier).add(continueSurface);
items.push(buttonView);
return layout;
}
// ---------------------------------------------------------------------------
function _TournamentAdd(options) {
View.apply(this, arguments);
var form = new SequentialLayout({
direction: Utility.Direction.Y,
});
this.name = new InputSurface({
size: [240, 60],
classes: [
"addTournament",
"name"
],
placeholder: "Enter a name for a new tournament",
type: 'text'
});
var addButton = new Surface({
classes: [
"addTournament",
"addButton"
],
content: "",
size: [240, 80]
});
addButton.on("click", this.onAddButtonClick.bind(this));
var backButton = new Surface({
classes: [
"addTournament",
"backButton"
],
content: "",
size: [240, 80]
});
backButton.on("click", this.onBackButtonClick.bind(this));
form.sequenceFrom([
this.name,
addButton,
backButton
]);
var modifier = new StateModifier({
origin: [0.5, 0],
transform: Transform.translate(0, 50, 0)
});
this.add(modifier).add(form);
this.progress = new ProgressIndicator();
this.add(this.progress);
this.alert = new AnimatedAlert();
this.add(this.alert);
}
function AppView() {
var color = '#627699';
var layout = new SequentialLayout({ direction: 1 });
var inputLayout = new SequentialLayout({ direction: 0 });
var label = new Surface({
content: '请选择日期: ',
size: [100, 50],
properties: {
textAlign: 'center',
lineHeight: '50px',
fontSize: '16px',
color: color
}
});
layout.input = new Surface({
content: '2005-01-01',
size: [window.innerWidth - 120, 50],
properties: {
textAlign: 'center',
lineHeight: '50px',
fontSize: '20px',
borderBottom: '1px solid ' + color,
color: color
}
});
inputLayout.sequenceFrom([label, layout.input]);
var gap = new Surface({
size: [window.innerWidth - 20, 10]
});
layout.button = new Surface({
content: '确定',
size: [window.innerWidth - 20, 50],
properties: {
textAlign: 'center',
lineHeight: '50px',
backgroundColor: color,
color: 'white',
borderRadius: '4px'
}
});
layout.sequenceFrom([inputLayout, gap, layout.button]);
return layout;
}
/**
* @desc Construtor for DateView class
*/
function DateView() {
// Applies View's constructor function to DateView class
View.apply(this, arguments);
// SequentialLayout vertical
var sequentialLayout = new SequentialLayout({
direction: Utility.Direction.Y,
classes: ['dateLayout']
});
var elements = [];
sequentialLayout.sequenceFrom(elements);
// Month
this.monthSurface = new Surface({
size:[undefined, 85],
classes: ['pad-left', 'month']
});
elements.push(this.monthSurface);
// DateScrollView, container: hide pre-loaded weeks
container = new ContainerSurface({
size: [undefined, 63],
properties: {
overflow: 'hidden',
classes: ['week-cal', 'pad-top']
}
});
this.dateScrollview = new DateScrollView();
container.add(this.dateScrollview);
elements.push(container);
// handle dateScrollview events
this.dateScrollview.eventHandler.on('dateSelected', function(newDate) {
updateDateTime.call(this);
}.bind(this));
// Exact date
this.exactDateSurface = new Surface({
size: [undefined, 104],
classes: ['pad-2x', 'center-text', 'exactDate', 'month']
});
elements.push(this.exactDateSurface);
this.add(sequentialLayout);
// Gap with parent
this.updateTime = function(time) {
this.selectedTime = time;
updateDateTime.call(this);
};
this.selectedTime = new Date();
this.selectedTime = this.selectedTime.getHours() + ':00';
// initial contents
updateDateTime.call(this);
}
Login.prototype.getUserPass = function() {
var inputsLayout = new SequentialLayout({direction: 1, itemSpacing: 30});
var inputs = [];
inputsLayout.sequenceFrom(inputs);
inputs.push(this.getField("content/images/headshot.png", 'Username', 'text'));
inputs.push(this.getField("content/images/lock.png", 'Password', 'password'));
return inputsLayout;
}
CongratulationsPage.prototype.showPage = function(){
var self = this;
var mainLayout = new SequentialLayout({
direction: 1,
itemSpacing: 30
});
var mainItems = [];
mainLayout.sequenceFrom(mainItems);
var titleSurface = new Surface({
size: [700, 200],
content: 'Congratulations!',
classes: ['congrats-title']
});
var titleView = new View();
var titleModifier = new Modifier({
origin: [0.5, 0.2]
});
titleView.add(titleSurface);
var mainContent = new Surface({
size: [700, 400],
content: this.message,
classes: ['congrats-content']
});
var contentView = new View();
var contentModifier = new Modifier({
origin: [0.5, .3],
transform: Transform.translate(0, 200, 0)
});
contentView.add(mainContent);
this.mainView.add(titleModifier).add(titleSurface);
this.mainView.add(contentModifier).add(mainContent);
var shareButton = new Surface({
size: [150, 50],
content: 'Share',
classes: ['congrats-share']
});
this.addListeners(shareButton);
var shareModifier = new Modifier({
origin: [0.5, 0.6]
});
this.mainView.add(shareModifier).add(shareButton);
}
UserView.prototype._initLogin = function() {
var loginLayout = new SequentialLayout({direction: 1, itemSpacing: 40});
var mainItems = [];
loginLayout.sequenceFrom(mainItems);
mainItems.push(this.getUserPass());
mainItems.push(this.getButtons());
this.mainView.add(loginLayout);
}
function SettingsView() {
View.apply(this, arguments);
this.surfaces = [];
var sequentialLayout = new SequentialLayout({
direction: 1
});
sequentialLayout.sequenceFrom(this.surfaces);
this.add(sequentialLayout);
_createMenuHeader.call(this, "Tags");
[ "Elephants", "Kittens", "Puppies", "Parrots", "Sloths" ].forEach(function (item) {
_createMenuItem.call(this, item, false);
}.bind(this));
_createMenuItem.call(this, "Olinguito", true);
_createMenuFooter.call(this);
}
Login.prototype._initLogin = function() {
var loginLayout = new SequentialLayout({direction: 1, itemSpacing: 40});
var mainItems = [];
var initTime = Date.now();
var logoMod = new Modifier({
origin: [0.5, 0],
transform: function() {
return Transform.multiply(Transform.translate(0, -30, 0), Transform.rotateY(.0007 * (Date.now() - initTime)));
}
});
var logo = new Surface({
size: [126, 126],
content: '<img src="content/images/logo.png" width="126px" height="126px">',
classes: ['backface-Visible']
});
var logoView = new View();
logoView.add(logoMod).add(logo);
loginLayout.sequenceFrom(mainItems);
var companyName = new Surface({
size: [200, 40],
content: 'myCHA',
classes: ['company-name']
});
compView = new View();
compView.add(new Modifier({
origin: [0.5, 0]
})).add(companyName);
mainItems.push(logoView);
mainItems.push(compView);
mainItems.push(this.getUserPass());
mainItems.push(this.getButtons());
this.mainView.add(loginLayout);
}
function createContent() {
var surfaces = [];
var sequentialLayout = new SequentialLayout();
sequentialLayout.sequenceFrom(surfaces);
surfaces.push(new ImageSurface({
size: [undefined, window.innerHeight / 2.5],
content: 'content/images/profile.png'
}))
surfaces.push(new ImageSurface({
size: [undefined, window.innerHeight / 2.5],
content: 'content/images/bottom.jpg'
}))
return sequentialLayout;
}
Login.prototype.getButtons = function() {
var buttonLayout = new SequentialLayout({direction: 1, itemSpacing: 20});
var items = [];
buttonLayout.sequenceFrom(items);
var self = this;
var loginButtonView = new View();
var loginTT = new TransitionableTransform();
var buttonModifier = new Modifier({
transform: loginTT
});
var loginButton = new Surface({
size: [document.body.clientWidth - ((document.body.clientWidth/2) - 30), 40],
content: 'Login',
classes: ['login-button']
});
loginButtonView.add(buttonModifier).add(loginButton);
loginButton.on('click', function() {
loginTT.halt();
loginTT.set(Transform.scale(1, 1, 1), {method: SpringTransition, period: 350, dampingratio: .8, velocity: [0.002, .009, 0]});
self.mainView._eventOutput.emit('login');
});
items.push(loginButtonView);
var exitButton = new Surface({
size: [document.body.clientWidth - ((document.body.clientWidth/2) - 30), 40],
content: 'Exit',
classes: ['login-button']
});
var exitTT = new TransitionableTransform();
var exitModifier = new Modifier({
transform: exitTT
});
var exitButtonView = new View();
exitButtonView.add(exitModifier).add(exitButton);
exitButton.on('click', function() {
exitTT.halt();
exitTT.set(Transform.scale(1, 1, 1), {method: SpringTransition, period: 350, dampingratio: .5, velocity: [0.002, .009, 0]});
self.mainView._eventOutput.emit('exit');
});
//items.push(exitButtonView);
var buttonView = new View();
var layoutModifier = new Modifier({
origin: [0.5, 0]
});
buttonView.add(layoutModifier).add(buttonLayout);
return buttonView;
}
LayoutBuilder.prototype.createSequentialLayout = function(options){
var that = this;
var tmp = new SequentialLayout({
direction: options.direction === 0 ? 0 : 1
});
tmp.Views = [];
if(options.size){
// Expecting a True in either one
// - otherwise, returning undefined for h/w
// Used for true Height or Width(v2)
// - only allowing horizontal direction for now?
var h,w;
if(options.direction == 0 && options.size[1] === true){
tmp.getSize = function(){
var maxHeight = 0;
tmp.Views.forEach(function(v){
// console.log(v);
// console.log(v.getSize());
var h = 0;
try{
h = v.getSize(true)[1];
}catch(err){
console.log('nosize');
}
if(h > maxHeight){
maxHeight = h;
}
});
return [undefined, maxHeight];
}
}
}
// sequenceFrom
options.sequenceFrom.forEach(function(obj){
var tmpNode;
if(obj instanceof SequentialLayout ||
obj instanceof ElementOutput ||
obj instanceof RenderNode ||
obj instanceof View ||
obj instanceof Surface){
tmpNode = obj;
} else if(obj == null){
// skip this one
return;
} else if((typeof obj).toLowerCase() == 'object'){
var typofLayout = _.without(Object.keys(obj),'size','mods','deploy','dimensions','sequenceFrom','deploy','plane')[0]; // "surface"
var name = obj[typofLayout].key ? obj[typofLayout].key : Object.keys(obj[typofLayout])[0];
tmpNode = new LayoutBuilder(obj);
// if(name === 'grid' || tmpNode.hasName){
// alert(tmpNode.hasName);
// alert(name);
// debugger;
// }
if(tmpNode.hasName){
tmp[tmpNode.hasName] = tmpNode[tmpNode.hasName];
tmp[tmpNode.hasName].NodeWithMods = tmpNode;
} else {
console.log(name);
debugger;
tmp[name] = tmpNode;
}
// var typofLayout = _.without(Object.keys(obj),'size','mods','deploy')[0]; // "surface"
// var name = obj[typofLayout].key ? obj[typofLayout].key : Object.keys(obj[typofLayout])[0];
// tmpNode = new LayoutBuilder(obj);
// tmp[name] = tmpNode;
} else {
console.error('unknown type');
debugger;
}
// console.info('tmpNode', tmpNode);
tmp.Views.push(tmpNode);
});
tmp.sequenceFrom(tmp.Views);
var newNode = this.buildModsForNode( tmp, options );
newNode = this.buildMargins( newNode, options);
return [tmp, newNode];
};
this.model._related.Email.toJSON().forEach(function(email, index){
// SequentialLayout to hold Header(To,From,Actions),Body, Signature
var EmailView = new View();
EmailView.TransitionModifier = new StateModifier({
// transform: Transform.translate(window.innerWidth,0,0)
transform: Transform.translate(0,0,0)
});
var EmailsSeqLayout = new SequentialLayout();
EmailView.EmailsSeqLayout = EmailsSeqLayout;
var EmailSeq = [];
var views = {};
// Create the From
views.From = new View();
views.From.Surface = new Surface({
content: Handlebars.helpers.personName(email.original.headers.From_Parsed[0]),
size: [undefined, 20],
classes: [],
properties: {
color: "black",
backgroundColor: "#f8f8f8",
lineHeight: "20px"
}
});
views.From.add(views.From.Surface);
views.From.Surface.pipe(that.contentScrollView);
// Cc
// Bcc
// console.log(Handlebars);
// console.log(Handlebars.helpers.personName(email.original.headers.From_Parsed[0]));
// Pretty headers surface
views.PrettyHeaders = new View();
views.PrettyHeaders.Surface = new ModifiedSurface({
content: JSON.stringify(email.original.headers),
size: [undefined, true]
});
views.PrettyHeaders.DisplayMod = new StateModifier();
views.PrettyHeaders.add(views.PrettyHeaders.DisplayMod).add(views.PrettyHeaders.Surface.RealSizeMod).add(views.PrettyHeaders.Surface);
views.PrettyHeaders.Surface.pipe(that.contentScrollView);
views.Body = new View();
views.Body.Surface = new ModifiedSurface({
content: that.display_bodies(email),
// content: nl2br(emails[index]),
// size: [(window.innerWidth) - ((window.innerWidth / 5) * index), true],
size: [window.innerWidth - 10, true],
classes: ["email-list-item"],
properties: {
lineHeight: '20px',
padding: '5px',
// borderRadius: "3px",
backgroundColor: "white"
// backgroundColor: "hsl(" + ((index+1) * 360 / 40) + ", 100%, 50%)",
}
});
views.Body.Surface.pipe(that.contentScrollView);
// views.Body.Surface.on('sizeUpdated', function(newSize){
// console.info('deployed newSize in Thread', newSize);
// // console.log(this);
// // console.log(this._size);
// // console.log(this.getSize(true));
// var paddingSize = 10;
// this.View.PaddingModifier.setSize([undefined, newSize[1] + paddingSize]);
// // console.log(newSize[1] + paddingSize);
// // this.View.bgSizeModifier.setSize([undefined, newSize[1]]);
// // surface.PaddingModifier.setSize([undefined, surface.getSize()[1]]);
// }.bind(views.Body));
views.Body.Email = email;
views.Body.Surface.Email = email;
// views.Body.bg = new Surface({
// size: [undefined, undefined],
// properties: {
// // backgroundColor: "blue",
// zIndex: "-1"
// }
// });
// views.Body.bg.pipe(that.contentScrollView);
// views.Body.bg.SizeModifier = new StateModifier();
// views.Body.TransitionModifier = new StateModifier({
// transform: Transform.translate(window.innerWidth,0,0)
// });
// views.Body.PaddingModifier = new StateModifier({
// // will be changing size
// // size: [window.innerWidth - 20, true]
// });
// views.Body.OriginModifier = new StateModifier({
// origin: [0.5, 0.5]
// // will be changing size
// // size: [window.innerWidth - 20, true]
// });
// var node = surface.View.add(surface.View.TransitionModifier).add(surface.View.PaddingModifier);
// node.add(surface.View.bg);
// node.add(surface.View.OriginModifier).add(surface);
views.Body.add(views.Body.Surface.RealSizeMod).add(views.Body.Surface);
views.Spacer = new View();
views.Spacer.Surface = new Surface({
size: [undefined, 20]
});
views.Spacer.add(views.Spacer.Surface);
views.Spacer.Surface.pipe(that.contentScrollView);
EmailSeq.push(views.From);
EmailSeq.push(views.Body);
EmailSeq.push(views.Spacer);
// Add views to SeqLayout object for accessing easily later
EmailsSeqLayout.views = views;
EmailsSeqLayout.sequenceFrom(EmailSeq);
// Transform in
// - not sure if it has even been displayed
// that.whenPageVisible(function(){
if(that._whenPageVisible === true){
Timer.setTimeout(function(){
this.TransitionModifier.setTransform(Transform.translate(0,0,0), { duration: 500, curve: 'easeOutBounce' });
}.bind(EmailView), index * 100);
console.log('transform in from PageVisible');
}
// });
// // surface.pipe(surface.draggable)
// surface.pipe(that.contentScrollView);
EmailView.add(EmailView.TransitionModifier).add(EmailsSeqLayout);
// EmailView.TransitionModifier.add(EmailsSeqlayout)
that.scrollSurfaces.push(EmailView);
// window.setTimeout(function(){
// var newSize = this.getSize(true);
// this.PaddingModifier.setSize([undefined, newSize[1] + 25]);
// }.bind(surface), 100);
// surface.touchSync = new GenericSync({
// "mouse" : {},
// "touch" : {}
// });
// surface.position = new Transitionable([0,0]);
// surface.pipe(surface.touchSync);
// surface.pipe(that.contentScrollView);
// surface.touchSync.on('update', function(data){
// var currentPosition = surface.position.get();
// surface.position.set([
// currentPosition[0] + data.delta[0],
// currentPosition[1] + data.delta[1]
// ]);
// });
// surface.draggable.on('end', function(data){
// // transition the position back to [0,0] with a bounce
// // position.set([0,0], {curve : 'easeOutBounce', duration : 300});
// var velocity = data.velocity;
// surface.draggable.setPosition([0, 0], {
// method : 'spring',
// period : 150,
// velocity : velocity
// });
// });
// surface.View.positionModifier = new Modifier({
// transform : function(){
// var currentPosition = surface.position.get();
// return Transform.translate(currentPosition[0], 0, 0); // currentPosition[1]
// }
// });
// surface.View.add(surface.View.positionModifier).add(surface);
});
FriendsPage.prototype.initPage = function(){
var self = this;
var leftModifier = new Modifier({
});
var leftView = new View();
leftView.add(leftModifier).add(this.productLayout);
var FriendsPageLayout = new SequentialLayout({
direction: 0,
itemSpacing: 200
});
var items = [];
FriendsPageLayout.sequenceFrom(items);
items.push(leftView);
var rightView = new View();
var rightModifier = new Modifier({
});
var temp = new Surface({
size: [400, 500],
content: '',
properties: {
backgroundColor: 'white'
}
});
rightView.add(rightModifier).add(this.getSummary());
items.push(rightView);
var titleSurface = new Surface({
size: [true, true],
content: '<img src="./content/images/header.svg" width="60%">',
classes: ['home-title']
});
var titleModifier = new Modifier({
origin: [0.5, 0],
transform: Transform.translate(-100, -100, 0)
});
var titleView = new View();
titleView.add(titleModifier).add(titleSurface);
var topDown = new SequentialLayout({
direction: 1,
itemSpacing: 10
});
var topDownItems = [];
topDown.sequenceFrom(topDownItems);
topDownItems.push(titleView);
var finalView = new View();
var modifier = new Modifier({
origin: [0.5, 0]
});
finalView.add(modifier).add(FriendsPageLayout);
topDownItems.push(finalView);
var mainMod = new Modifier({
origin: [0.6, 0],
transform: Transform.translate(0, 150, 0)
});
this.mainView.add(mainMod).add(topDown);
}
function _createStories() {
this.container = new ContainerSurface({
size: [undefined, (this.options.height + this.options.margin) * (this.options.total / 2) + this.options.sloganHeight],
classes: ['stories-container']
});
var grid = [], surf, mod, container, view, data, masker;
var storiesContent = new SequentialLayout({
direction: Utility.Direction.Y
});
storiesContent.sequenceFrom(grid);
container = new ContainerSurface({
size: [this.options.width * 2 + this.options.margin, this.options.sloganHeight]
});
surf = new Surface({
size: [undefined, this.options.sloganHeight / 10],
classes: ['stories-slogan', 'text-uppercase'],
content: 'Featured stories'
});
mod = new Modifier({
origin: [0.5, 0.5]
});
container.add(mod).add(surf);
mod = new Modifier({
origin: [0.5, 0]
});
this.container.add(mod).add(container);
grid.push(container);
var gridLayout = new GridLayout({
dimensions: [2, 5],
cellSize: [this.options.width, this.options.height + this.options.margin]
});
gridLayout.sequenceFrom(this.stories);
for (var j = 0; j < this.options.total; j++) {
container = new ContainerSurface({
size: [this.options.width, this.options.height + this.options.margin]
});
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story'],
properties: {
backgroundImage: 'url(http://placekitten.com/'+this.options.width+'/'+this.options.height+'?image='+j+')'
}
});
container.add(surf);
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story-masker']
});
masker = new Modifier({
opacity: 0
});
this.maskers.push(masker);
container.add(masker).add(surf);
data = {
author: 'Hina Chen',
slogan: 'I\'m Hina.'
};
surf = new Surface({
size: [this.options.width / 2, this.options.height / 2],
classes: ['story-item-content'],
content: '<h3 class="author">'+data.author+'</h3><hr class="short-line"><h2 class="slogan">'+data.slogan+'</h2>'
});
mod = new Modifier({
origin: [0.5, 0.5]
});
container.add(mod).add(surf);
surf = new Surface({
size: [this.options.width, this.options.height],
classes: ['story-masker-trigger']
});
surf.on('mouseenter', function(key, event) {
if (this._maskerTimer !== undefined) clearTimeout(this._maskerTimer);
this._maskerTimer = setTimeout(function(key) {
this.maskers[key].setOpacity(1, this.options.transition);
}.bind(this, key), 300);
}.bind(this, j));
surf.on('mouseleave', function(key, event) {
if (this._maskerTimer !== undefined) clearTimeout(this._maskerTimer);
this.maskers[key].setOpacity(0, this.options.transition);
}.bind(this, j));
container.add(surf);
view = new View();
view.add(container);
this.stories.push(view);
}
container = new ContainerSurface({
size: [this.options.width * 2 + this.options.margin, (this.options.height + this.options.margin) * (this.options.total / 2)]
});
mod = new Modifier({
origin: [0.5, 0.9]
});
container.add(gridLayout);
this.container.add(mod).add(container);
this.container.pipe(this.options.scroller);
this.add(this.container);
}