Skip to content

Instantly share code, notes, and snippets.

@darkfrog26

darkfrog26/Generated.html

Created June 13, 2012 19:57
Show Gist options
  • Save darkfrog26/2926095 to your computer and use it in GitHub Desktop.
Save darkfrog26/2926095 to your computer and use it in GitHub Desktop.
Download ZIP
TodoMVC Template
Raw
Generated.html
<!DOCTYPE html>
<html>
<head>
<title>Webframework - TodoMVC</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus="autofocus"/>
</header>
<section id="main">
<input id="toggle-all" type="checkbox"/>
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li class="completed">
<div class="view">
<input class="toggle" checked="checked" type="checkbox"/>
<label>Create a TodoMVC template</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template"/>
</li>
<li>
<div class="view">
<input class="toggle" type="checkbox"/>
<label>Rule the web</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web"/>
</li>
</ul>
</section>
<footer id="footer">
<span id="todo-count">
<strong>1</strong>
item left
</span>
<ul id="filters">
<li>
<a class="selected" href="#">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed">Clear completed (1)</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Template by
<a href="http://github.com/sindresorhus">Sindre Sorhus</a>
</p>
<p>
Created by
<a href="http://www.matthicks.com">Matt Hicks</a>
</p>
<p>
Part of
<a href="http://www.todomvc.com">TodoMVC</a>
</p>
</footer>
<script src="javascript/base.js"></script>
<script src="javascript/app.js"></script>
</body>
</html>
Raw
TodoMVC.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="../assets/base.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Create a TodoMVC template</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li>
<div class="view">
<input class="toggle" type="checkbox">
<label>Rule the web</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer id="footer">
<!-- This should be `0 items left` by default -->
<span id="todo-count"><strong>1</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed">Clear completed (1)</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove this ↓ -->
<script src="../assets/base.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Raw
TodoMVC.scala
package com.github.todomvc
import com.outr.webframework.WebPage
import com.outr.webframework.tags._
import attributes.InputType
object TodoMVC extends WebPage("index.html") {
head.title := "Webframework - TodoMVC"
head.contents += new Link(rel = "stylesheet", href = "css/base.css")
head.contents += new Link(rel = "stylesheet", href = "css/app.css")
body.contents += new Section(id = "todoapp") {
contents += new Header(id = "header") {
contents += new H1(content = "todos")
contents += new Input(id = "new-todo", placeHolder = "What needs to be done?", autoFocus = "autofocus")
}
contents += new Section(id = "main") {
contents += new Input(id = "toggle-all", inputType = InputType.CheckBox)
contents += new Label(forElement = "toggle-all", content = "Mark all as complete")
contents += new Ul(id = "todo-list") {
contents += new Li(clazz = "completed") {
contents += new Div(clazz = "view") {
contents += new Input(clazz = "toggle", inputType = InputType.CheckBox, checked = "checked")
contents += new Label(content = "Create a TodoMVC template")
contents += new Button(clazz = "destroy")
}
contents += new Input(clazz = "edit", value = "Create a TodoMVC template")
}
contents += new Li {
contents += new Div(clazz = "view") {
contents += new Input(clazz = "toggle", inputType = InputType.CheckBox)
contents += new Label(content = "Rule the web")
contents += new Button(clazz = "destroy")
}
contents += new Input(clazz = "edit", value = "Rule the web")
}
}
}
contents += new Footer(id = "footer") {
contents += new Span(id = "todo-count") {
contents += new Strong(content = "1")
contents += " item left"
}
contents += new Ul(id = "filters") {
contents += new Li {
contents += new A(clazz = "selected", href = "#", content = "All")
}
contents += new Li {
contents += new A(href = "#/active", content = "Active")
}
contents += new Li {
contents += new A(href = "#/completed", content = "Completed")
}
}
contents += new Button(id = "clear-completed", content = "Clear completed (1)")
}
}
body.contents += new Footer(id = "info") {
contents += new P(content = "Double-click to edit a todo")
contents += new P {
contents += "Template by "
contents += new A(href = "http://github.com/sindresorhus", content = "Sindre Sorhus")
}
contents += new P {
contents += "Created by "
contents += new A(href = "http://www.matthicks.com", content = "Matt Hicks")
}
contents += new P {
contents += "Part of "
contents += new A(href = "http://www.todomvc.com", content = "TodoMVC")
}
}
body.contents += new Script(src = "javascript/base.js")
body.contents += new Script(src = "javascript/app.js")
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment