Implementacao inicial de mockups para o FISL

davilima6 · Jun 27, 2011 · d8452dd · d8452dd
1 parent 4a2616f
commit d8452dd
Show file tree

Hide file tree

Showing 7 changed files with 837 additions and 48 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1 +1,18 @@
-#jqm-homeheader { margin: 0 1em;  }
+#home { background: url(images/topo-fisl-2012.png) top center no-repeat; }
+
+.ui-page .ui-header, .ui-page .ui-footer { text-align: center;  }
+
+.content-primary {
+  width: 60%;
+  float: right;
+  margin: 0;
+  padding: 1.5em 6% 3em 0;
+}
+
+.content-secondary {
+  width: 30%;
+  float: left;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+}
diff --git a/images/logo-fisl-2012.png b/images/logo-fisl-2012.png
diff --git a/images/topo-fisl-2012.png b/images/topo-fisl-2012.png
diff --git a/index.html b/index.html
@@ -2,32 +2,111 @@
 <html>
 <head>
   <meta charset="utf-8" />
-  <title>Python Brasil - 6&ordf; Edi&ccedil;&atilde;o</title>
+  <title>Python Brasil - 6ª Edição</title>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
   <link rel="stylesheet" href="css/styles.css" />
   <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
 </head>
 <body>
-<div data-role="page" data-theme="b" id="jqm-home">
-  <div id="jqm-homeheader">
-    <h1 id="jqm-logo"><img src="images/pythonbrasil_logo.png" alt="python brasil" /></h1>
-    <p>Python Brasil - 6&ordf; Edi&ccedil;&atilde;o</p>
+
+<div data-role="page" data-theme="a" id="home">
+  <div data-role="header">
+    <h1>
+      <a href="#home">
+        <img src="images/logo-fisl-2012.png" alt="Logo FISL 2012" />
+      </a>
+    </h1>
+    <a href="#login" data-icon="gear" data-rel="dialog" data-transition="slidedown" class="ui-btn-right">Login</a>
+    <a href="#igo" data-icon="star">Eu vou!</a>
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
   </div>
   <div data-role="content">
-    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
+    <p><a href="#search" data-role="button" data-icon="search">Busca</a></p>
+    <ul data-role="listview" data-inset="true" data-dividertheme="e">
       <li data-role="list-divider">Programa&ccedil;&atilde;o</li>
-      <li><a href="palestras.html">Palestras</a></li>
-      <li><a href="features.html">Trilhas</a></li>
-      <li><a href="accessibility.html">Salas</a></li>
-      <li><a href="platforms.html">Busca</a></li>
+      <li><a href="talks.html">Agora! <span class="ui-li-count">12</span> </a></li>
+      <li><a href="talks.html#by-day">Por dia <span class="ui-li-count">4</span></a></li>
+      <li><a href="talks.html#by-track">Por trilha <span class="ui-li-count">7</span></a></li>
+      <li><a href="talks.html#by-room">Por sala <span class="ui-li-count">12</span></a></li>
+    </ul>
+    <ul data-role="listview" data-inset="true">
+      <li><a href="my-event.html">Meu evento</a></li>
+      <li><a href="twitter.html">Twitter</a></li>
+      <li><a href="sponsors.html">Patrocinadores</a></li>
+    </ul>
+  </div>
+  <div data-role="footer">
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
+  </div>
+</div>
+
+
+<div data-role="page" data-theme="a" id="talks">
+  <div data-role="header">
+    <h1>
+      <a href="#home" data-rel="back" data-direction="reverse">
+        <img src="images/logo-fisl-2012.png" alt="Logo FISL 2012" border="0" />
+      </a>
+    </h1>
+    <p>Palestras</p>
+  </div>
+  <div data-role="content">
+    <ul data-role="listview" data-inset="true" data-dividertheme="e">
+      <li data-role="list-divider">Palestras</li>
+      <li><a href="talks-now.html">Agora!</a></li>
+      <li><a href="talks-by-day.html">Por dia</a></li>
+      <li><a href="talks-by-zone.html">Por trilha</a></li>
+      <li><a href="talks-by-room.html">Por sala</a></li>
+      <li><a href="talks-by-speaker.html">Por palestrante</a></li>
         </ul>
-        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
-      <li><a href="platforms.html">Meu evento</a></li>
-      <li><a href="platforms.html">Twitter</a></li>
-      <li><a href="platforms.html">Patrocinadores</a></li>
+        <ul data-role="listview" data-inset="true">
+      <li><a href="my-event.html">Meu evento</a></li>
+      <li><a href="twitter.html">Twitter</a></li>
+      <li><a href="sponsors.html">Patrocinadores</a></li>
     </ul>
   </div>
+  <div data-role="footer">
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
+  </div>
+</div>
+
+
+<div data-role="page" data-theme="a" id="search">
+  <div data-role="header">
+    <h1>
+      <a href="#home" data-rel="back" data-direction="reverse">
+        <img src="images/logo-fisl-2012.png" alt="Logo FISL 2012" border="0" />
+      </a>
+    </h1>
+    <p>Busca</p>
+  </div>
+  <div data-role="content">
+    <div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c ui-focus"><input type="true" data-type="search" name="password" id="search" value="" class="ui-input-text ui-body-null"><a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-input-clear-hidden" title="clear text" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span></a></div>
+  </div>
+  <div data-role="footer">
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
+  </div>
+</div>
+
+
+<div data-role="page" data-theme="a" id="login">
+  <div data-role="header">
+    <h1>
+      <a href="#home" data-rel="back" data-direction="reverse">
+        <img src="images/logo-fisl-2012.png" alt="Logo FISL 2012" border="0" />
+      </a>
+    </h1>
+    <p>Login</p>
+  </div>
+  <div data-role="content">
+
+
+  </div>
+  <div data-role="footer">
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
+  </div>
 </div>
+
 </body>
 </html>
diff --git a/palestras.html b/palestras.html
diff --git a/talk.html b/talk.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="utf-8" />
+  <title>FISL 2012 - Fórum Internacional do Software Livre</title>
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
+  <link rel="stylesheet" href="css/styles.css" />
+  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
+  <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
+</head>
+<body>
+
+<div data-role="page">
+
+  <div data-role="header" data-theme="b">
+    <h1>Título da palestra</h1>
+    <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+  </div>
+
+  <div data-role="content">
+    <h6 class="">29/06 11:00 | Sala 12</h6>
+    <h2>Título da palestra</h2>
+    <h4><a href="palestrante.html">Palestrante</a></h4>
+    <p>Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso.</p>
+    <p>Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso.</p>
+    <p>Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso.</p>
+    <p>Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso. Este sumário falso, muito falso, sempre falso.</p>
+  </div>
+
+  <div data-role="footer">
+    <p>
+      <a href="#igo">Eu vou!</a> |
+      <a href="#relacionadas">Palestras relacionadas</a> |
+      <a href="#share">Compartilhe!</a>
+    </p>
+    <p>FISL 2012 - F&oacute;rum Internacional de Software Livre</p>
+  </div>
+
+</div>
+
+</body>
+</html>