Merge branch 'feature/style' into develop

Conflicts:
    bitshift/languages.py

.gitignore

@@ -1,3 +1,6 @@
+static/css/*
+!static/css/lib/*
+
 *.swp
 .sass-cache
 .DS_Store
@@ -21,7 +24,6 @@ var
 sdist
 develop-eggs
 .installed.cfg
-lib
 lib64
 __pycache__
 

app.py

@@ -6,8 +6,9 @@ from flask import Flask
 from flask import render_template, session
 
 from bitshift import assets
-from bitshift.database import Database
-from bitshift.query import parse_query
+from bitshift import languages
+# from bitshift.database import Database
+# from bitshift.query import parse_query
 
 app = Flask(__name__)
 app.config.from_object("bitshift.config")
@@ -16,17 +17,25 @@ app_env = app.jinja_env
 app_env.line_statement_prefix = "="
 app_env.globals.update(assets=assets)
 
-database = Database()
+# database = Database()
 
 @app.route("/")
 def index():
-    return render_template("index.html")
+    return render_template("index.html", typeahead_languages=languages.LANGS)
 
 @app.route("/search/<query>")
 def search(query):
-    tree = parse_query(query)
-    database.search(tree)
+    # tree = parse_query(query)
+    # database.search(tree)
     pass
 
+@app.route("/about")
+def about():
+    return render_template("about.html")
+
+@app.route("/developers")
+def developers():
+    return render_template("developers.html")
+
 if __name__ == "__main__":
-    app.run()
+    app.run(debug=True)

bitshift/languages.py

@@ -1 +1,5 @@
-LANGS = ["Python", "C", "Java", "Ruby"]
+import json
+
+with open("bitshift/resources/languages.json") as lang_json:
+    LANGS = [lang.encode("ascii","ignore") for lang in
+            json.load(lang_json)["languages"]]

bitshift/resources/languages.json

@@ -0,0 +1,4 @@
+{
+    "_comment" : "A list of programming languages supported by `bitshift`.",
+    "languages" : ["Debian Sourcelist", "Delphi", "JavaScript+Mako", "Brainfuck", "Ceylon", "JavaScript+Django/Jinja", "HTML+Evoque", "NumPy", "Modula-2", "LiveScript", "Nimrod", "Bash", "HTML+Django/Jinja", "CSS+PHP", "XML+Lasso", "VimL", "CSS+Genshi Text", "Fancy", "Coldfusion HTML", "cfstatement", "Scalate Server Page", "Smarty", "XML+Evoque", "haXe", "PowerShell", "Tea", "HTML+Cheetah", "Mason", "Django/Jinja", "JAGS", "ApacheConf", "DTD", "Lighttpd configuration file", "Java", "JavaScript+Genshi Text", "Scheme", "Nemerle", "RHTML", "Ragel in Java Host", "Darcs Patch", "Puppet", "Octave", "CoffeeScript", "Ragel in D Host", "Scilab", "Monkey", "HTML+Myghty", "CSS", "JavaScript+Smarty", "Io", "COBOLFree", "Asymptote", "vhdl", "Python 3", "CSS+Ruby", "Fortran", "d-objdump", "MySQL", "REBOL", "C++", "ERB", "CBM BASIC V2", "Befunge", "Julia", "MoonScript", "Ruby", "XML+Smarty", "Dylan", "Groovy", "MoinMoin/Trac Wiki markup", "autohotkey", "C", "HTML", "Felix", "CMake", "NSIS", "SourcePawn", "Mako", "VGL", "Velocity", "Koka", "CUDA", "Gnuplot", "IRC logs", "Prolog", "Python", "CSS+Django/Jinja", "verilog", "Smalltalk", "JavaScript+Myghty", "YAML", "Julia console", "ANTLR With ActionScript Target", "XML+Mako", "XSLT", "UrbiScript", "Scaml", "S", "DylanLID", "MAQL", "sqlite3con", "Boo", "OCaml", "eC", "ActionScript", "VB.net", "SquidConf", "XQuery", "D", "Fantom", "Gettext Catalog", "Logos", "Lasso", "SCSS", "BBCode", "Haml", "FoxPro", "Python 3.0 Traceback", "MuPAD", "XML+Ruby", "Dart", "IDL", "dg", "Evoque", "Jade", "c-objdump", "Kconfig", "Java Server Page", "reg", "ABAP", "XML+Velocity", "JavaScript+Cheetah", "HTML+Mako", "Ragel in Ruby Host", "RobotFramework", "Protocol Buffer", "CFEngine3", "Ragel", "GLSL", "COBOL", "TypeScript", "Ada", "PostgreSQL SQL dialect", "Xtend", "Logtalk", "objdump", "CSS+Mako", "ca65", "Objective-C++", "Gherkin", "HTML+PHP", "Makefile", "PostScript", "Hxml", "Kotlin", "PL/pgSQL", "Vala", "Haskell", "Bro", "Lua", "POVRay", "Sass", "ANTLR With Java Target", "Tcl", "ANTLR With ObjectiveC Target", "JavaScript+Ruby", "Racket", "AspectJ", "Base Makefile", "ANTLR With Python Target", "cpp-objdump", "Genshi Text", "Ioke", "PyPy Log", "Croc", "Objective-J", "GAS", "Batchfile", "Snobol", "XML", "ANTLR", "Opa", "XML+Cheetah", "Go", "Diff", "MiniD", "Cython", "Ragel in C Host", "Erlang", "Debian Control file", "aspx-vb", "BUGS", "Ragel in CPP Host", "aspx-cs", "Properties", "Groff", "Clojure", "Modelica", "QML", "JavaScript+Lasso", "ANTLR With Perl Target", "Genshi", "BlitzMax", "Treetop", "Matlab", "Myghty", "HTML+Genshi", "Duel", "Perl", "FSharp", "reStructuredText", "NewLisp", "Scala", "CSS+Lasso", "XML+PHP", "Stan", "INI", "MOOCode", "Shell Session", "RPMSpec", "Newspeak", "Bash Session", "Coq", "Raw token data", "Tcsh", "HTML+Lasso", "C#", "Gosu Template", "RConsole", "MXML", "TeX", "CSS+Smarty", "Text only", "ANTLR With C# Target", "OpenEdge ABL", "Cheetah", "Smali", "CSS+Myghty", "Rd", "LLVM", "Standard ML", "Elixir", "Nginx configuration file", "GoodData-CL", "AppleScript", "HTML+Smarty", "Objective-C", "JavaScript", "Rust", "Common Lisp", "Embedded Ragel", "ActionScript 3", "systemverilog", "Literate Haskell", "Python Traceback", "PHP", "ANTLR With CPP Target", "Gosu", "Hybris", "JavaScript+PHP", "Factor", "HTML+Velocity", "Mscgen", "Ooc", "SQL", "HTTP", "ECL", "Redcode", "Ragel in Objective C Host", "XML+Django/Jinja", "Awk", "JSON", "NASM", "ANTLR With Ruby Target", "XML+Myghty", "AutoIt", "Mako", "CSS+Mako", "HTML+Mako", "XML+Mako", "JavaScript+Mako"]
+}

static/css/main.css

@@ -1,4 +0,0 @@
-/* Global project stylesheet.
- */
-p {
-  font-size: 1.5em; }

static/js/index.advanced-search-form.js

@@ -0,0 +1,147 @@
+/*
+ * @file Manages all advanced search form logic.
+ */
+
+var searchGroups = $("div#search-groups");
+
+/*
+ * Load all advanced search form libraries.
+ */
+(function loadInputFieldWidgets(){
+    $(".search-group input#date-last-modified").datepicker();
+    $(".search-group input#date-created").datepicker();
+    $("#autocomplete").autocomplete({
+        source: function(request, response){
+            var matcher = new RegExp(
+                $.ui.autocomplete.escapeRegex(request.term), "i");
+            response($.grep(AUTOCOMPLETE_LANGUAGES, function(item){
+                return matcher.test(item);
+            }));
+        }
+    });
+}());
+
+/*
+ * Set all advanced search form button callbacks.
+ */
+(function setSearchFormCallbacks(){
+    // Create a new search group, and update the `#sidebar` checklist.
+    $("button#add-group").click(function(){
+        $("div#sidebar input[type=checkbox]").prop("checked", false);
+
+        searchGroups.children("#selected").removeAttr("id");
+        var searchGroup = $("<div/>", {
+            class : "search-group",
+            id : "selected"
+        });
+        searchGroups.append(
+            searchGroup.append(createSearchGroupInput("language")));
+        $("div#sidebar input[type=checkbox]#language").prop("checked", true);
+    });
+
+    // Remove the currently selected group if it's not the only one, and mark
+    // one of its siblings as selected.
+    $("button#remove-group").click(function(){
+        var currentGroup = $("div.search-group#selected");
+
+        if($("div.search-group").length == 1)
+            return;
+        else {
+            var nextGroup = currentGroup.prev();
+            if(nextGroup.size() == 0)
+                nextGroup = currentGroup.next();
+        }
+        currentGroup.remove();
+        nextGroup.click();
+    });
+
+    // Select a search group, and update the `#sidebar` checklist accordingly.
+    $(document).on("click", "div.search-group", function(){
+        searchGroups.children("#selected").removeAttr("id");
+        $(this).attr("id", "selected");
+        $("div#sidebar input[type=checkbox]").prop("checked", false);
+        $(this).find("input[type=text]").each(function(){
+            var checkBoxSelector = "div#sidebar input[type=checkbox]";
+            $(checkBoxSelector + "#" + $(this).attr("class").split(" ")[0]).
+                    prop("checked", true);
+        })
+    });
+
+    // Add an input field to the currently selected search group.
+    $("div#sidebar input[type=checkbox]").click(function(){
+        var fieldId = $(this).prop("id");
+        if($(this).is(":checked")){
+            $("div.search-group#selected").append(
+                    $.parseHTML(createSearchGroupInput(fieldId)));
+            if(fieldId.slice(0, 4) == "date")
+                $(".search-group#selected ." + fieldId).datepicker();
+        }
+        else
+            $("div.search-group#selected #" + fieldId).remove()
+    });
+
+    var previousAdvancedQuery = "";
+    var searchBar = $("form#search-bar input[name=query]");
+
+    window.setInterval(function(){
+        var currentQuery = assembleQuery();
+        if(currentQuery != previousAdvancedQuery){
+            previousAdvancedQuery = currentQuery;
+            searchBar.val(assembleQuery());
+        }
+    }, 1e3 / 15);
+}());
+
+/*
+ * Return an HTML string representing a new input field div in a search group.
+ *
+ * @param fieldId The id of the input field div, and its child elements.
+ */
+function createSearchGroupInput(fieldId){
+    return [
+        "<div id='" + fieldId + "'>",
+            "<div class='name'>" + fieldId.replace(/-/g, " ") + "</div>",
+            "<input class='" + fieldId + "' name='" + fieldId + "'type='text'>",
+            "<input type='checkbox' name='regex'>",
+            "<span class='regex'>Regex</span>",
+        "</div>"
+    ].join("");
+}
+
+/*
+ * Create a query from advanced-search groups.
+ */
+function assembleQuery(){
+    var groups = searchGroups.children(".search-group");
+    var groupQueries = [];
+
+    for(var group = 0; group < groups.length; group++){
+        var inputFields = groups[group].querySelectorAll("input[type=text]");
+        var regexCheckbox = groups[group].querySelectorAll("input[name=regex]");
+        var groupQuery = [];
+
+        for(var field = 0; field < inputFields.length; field++)
+            if(inputFields[field].value.length > 0)
+                groupQuery.push(genFieldQueryString(
+                        inputFields[field], regexCheckbox[field].checked));
+
+        groupQueries.push(groupQuery.join(" AND "));
+    }
+
+    return groupQueries.join(" OR ");
+}
+
+/*
+ * Generate a processed query string for an input field's value.
+ *
+ * @param field (DOM element) An `input[type=text]` element.
+ * @param hasRegex (boolean) Whether or not the field's value has regex.
+ */
+function genFieldQueryString(field, hasRegex){
+    var terms = field.value.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
+    var query = field.getAttribute("name") + ":" + (hasRegex?"re:":"") + terms;
+    if(field.value.indexOf('"') >= 0){
+        return '"' + query + '"';
+    }
+    return query;
+}

static/js/index.js

@@ -0,0 +1,149 @@
+/*
+ * @file Manages all library initialization, jQuery callbacks, query entry
+ *      callbacks, server querying, and results diplay for `index.html`.
+ */
+
+var advancedSearchDiv = $("div#advanced-search");
+var advancedSearchButton = $("button#advanced-search");
+advancedSearchButton.click(function(){
+    var searchField = $("div#search-field");
+    if(!advancedSearchDiv.hasClass("visible")){
+        searchField.addClass("partly-visible");
+        advancedSearchDiv.fadeIn(500).addClass("visible");
+        advancedSearchButton.addClass("clicked");
+    }
+    else {
+        advancedSearchDiv.fadeOut(300).removeClass("visible");
+        advancedSearchButton.removeClass("clicked");
+        if($("div#results .result").length == 0)
+            searchField.removeClass("partly-visible");
+    }
+});
+
+FINISH_TYPING_INTERVAL = 650;
+searchBar = $("form#search-bar input[type='text']")[0];
+resultsDiv = $("div#results")[0];
+
+var typingTimer, lastValue;
+searchBar.onkeyup = typingTimer;
+
+// Enable infinite scrolling down the results page.
+$(window).scroll(function() {
+    if($(window).scrollTop() + $(window).height() == $(document).height()){
+        loadMoreResults();
+    }
+});
+
+// Enable capturing the `enter` key.
+$("form#search-bar").submit(function(event){
+    event.preventDefault();
+    return false;
+});
+
+/*
+ * Clear the existing timer and set a new one the the user types text into the
+ * search bar.
+ */
+function typingTimer(event){
+    clearTimeout(typingTimer);
+
+    var enterKeyCode = 13;
+    if(event.keyCode != enterKeyCode){
+        if(lastValue != searchBar.value)
+            typingTimer = setTimeout(finishedTyping, FINISH_TYPING_INTERVAL);
+    }
+    else {
+        event.preventDefault();
+        finishedTyping();
+        return false;
+    }
+};
+
+/*
+ * Callback which queries the server whenver the user stops typing.
+ *
+ * Whenever the user doesn't type for a `FINISH_TYPING_INTERVAL` after having
+ * entered new text in the search bar, send the current query request to the
+ * server.
+ */
+function finishedTyping(){
+    lastValue = searchBar.value;
+    var searchField = $("div#search-field");
+
+    clearResults();
+    if(searchBar.value){
+        searchField.addClass("partly-visible");
+        populateResults();
+    }
+    else {
+        searchField.removeClass("partly-visible");
+        $("div#advanced-search").fadeOut(50);
+        advancedSearchButton.removeClass("clicked");
+    }
+}
+
+/*
+ * Removes any child elements of `div#results`.
+ */
+function clearResults(){
+    while(resultsDiv.firstChild)
+        resultsDiv.removeChild(resultsDiv.firstChild);
+}
+
+/*
+ * Query the server with the current search string, and populate `div#results`
+ * with its response.
+ */
+function populateResults(){
+    var results = queryServer();
+
+    for(var result = 0; result < results.length; result++){
+        var newDiv = results[result];
+        resultsDiv.appendChild(newDiv);
+        setTimeout(
+            (function(divReference){
+                return function(){
+                    divReference.classList.add("cascade");
+                };
+            }(newDiv)), result * 20);
+    }
+}
+
+/*
+ * AJAX the current query string to the server, and return its response.
+ *
+ * @return {Array} The server's response in the form of `div.result` DOM
+ *      elements, to fill `div#results`.
+ */
+function queryServer(){
+    var resultDivs = []
+    for(var result = 0; result < 20; result++){
+        var newDiv = document.createElement("div");
+        newDiv.classList.add("result");
+        newDiv.innerHTML = Math.random();
+        newDiv.style.textAlign = "center";
+        newDiv.style.color = "#" + Math.floor(Math.random() *
+                16777215).toString(16);
+        resultDivs.push(newDiv);
+    }
+
+    return resultDivs;
+}
+
+/*
+ * Adds more results to `div#results`.
+ */
+function loadMoreResults(){
+    results = queryServer();
+    for(var result = 0; result < results.length; result++){
+        var newDiv = results[result];
+        resultsDiv.appendChild(newDiv);
+        setTimeout(
+            (function(divReference){
+                return function(){
+                    divReference.classList.add("cascade");
+                };
+            }(newDiv)),
+            result * 20);
+    }
+}

static/sass/_mixins.sass

@@ -1,11 +1,20 @@
 /*
- Partial to contain all globally-applicable mixins
+ Partial to contain all globally-applicable mixins.
  */
 
-// add vendor prefixes for the property $property with value $value
+// Add vendor prefixes for the property $property with value $value.
 @mixin vendor($property, $value)
     -webkit-#{$property}: $value
     -moz-#{$property}: $value
     -ms-#{$property}: $value
     -o-#{$property}: $value
     #{$property}: $value
+
+.t1
+    @include vendor(transition, all 0.1s ease-out)
+
+.t2
+    @include vendor(transition, all 0.2s ease-out)
+
+.t3
+    @include vendor(transition, all 0.3s ease-out)

static/sass/_variables.sass

@@ -0,0 +1,12 @@
+/*
+ Partial to contain all globally-applicable variables.
+ */
+
+$baseColor1: #A31F34
+$baseColor2: #8A8B8C
+$baseColor3: #C2C0BF
+
+$lightGray: #F1F1F1
+
+$lightBlue: #67A0FD
+$blue: #3177EB

static/sass/index.sass

@@ -0,0 +1,294 @@
+/*
+ Stylesheet for `index.html`.
+ */
+
+@import mixins
+@import variables
+
+$minSearchFieldsWidth: 490px
+
+.ui-datepicker
+    font-size: 70%
+
+.ui-autocomplete
+    max-height: 30%
+    overflow-x: hidden
+    overflow-y: scroll
+    padding: 0px
+
+    >li.ui-menu-item a.ui-state-focus
+        @include vendor(transition, background-color 0.3s ease-out)
+
+div#search-field
+    @extend .t2
+
+    bottom: 0
+    height: 50%
+    left: 0
+    margin: auto
+    margin-top: 15%
+    max-height: 100px
+    right: 0
+    position: absolute
+    top: 0
+    width: 40%
+
+    a#title
+        text-decoration: none
+
+        div#title
+            font-size: 400%
+            padding-bottom: 0.2em
+            text-align: center
+
+            #title-bit
+                color: $baseColor1
+
+            #title-angle
+                color: $baseColor3
+
+            #title-shift
+                color: $baseColor2
+                font-style: italic
+
+    form#search-bar
+        min-width: $minSearchFieldsWidth
+
+        input[type="text"], button
+            @extend .t3
+            @include vendor(box-sizing, border-box)
+
+            border: 1px solid $baseColor2
+            font-size: 110%
+            margin-bottom: 0px
+            padding: 6px
+
+        input[type="text"]
+            width: 85%
+
+            &:hover
+                border-color: $baseColor1
+
+        button#advanced-search
+            background-color: white
+            border: 1px solid white
+            width: 15%
+            height: 10%
+            padding: 0px
+            float: right
+
+            &:hover
+                img
+                    background-color: black
+                    cursor: pointer
+
+            &.clicked
+                img
+                    background-color: $baseColor1
+
+            &:focus
+                outline: 0
+
+            img
+                @extend .t3
+
+                background-color: $baseColor2
+                margin-top: 5px
+                width: 26px
+                height: 26px
+
+    &.partly-visible
+        margin-top: 0%
+        padding-bottom: 3%
+        position: absolute
+        width: 100%
+
+        #title
+            position: absolute
+            top: -1%
+            left: 1%
+
+            span
+                font-size: 50%
+
+        form#search-bar
+            padding-top: 3%
+            margin-left: auto
+            margin-right: auto
+            width: 60%
+
+div#advanced-search
+    background-color: white
+    border: 1px solid $baseColor3
+    display: none
+    font-size: 96%
+    height: 400px
+    min-width: $minSearchFieldsWidth
+    padding-top: 0px
+    overflow-x: auto
+    overflow-y: hidden
+
+    #heading
+        color: $baseColor2
+        display: block
+        font-size: 120%
+        padding-left: 1%
+        padding-top: 1%
+        width: 100%
+
+        div
+            display: inline-block
+            font-size: 110%
+
+            &#col1
+                width: 25%
+
+            &#col2
+                width: 75%
+
+    >div
+        @include vendor(box-sizing, border-box)
+
+        display: inline-block
+        float: left
+
+    #sidebar
+        padding-left: 1%
+        width: 25%
+
+        >ul
+            list-style: none
+            padding-left: 0
+            margin-bottom: 8%
+            margin-top: 2%
+
+            li
+                margin-bottom: 2%
+
+                label
+                    user-select: none
+
+                    div
+                        @extend .t3
+
+                        background-color: $lightGray
+                        border: none
+                        padding: 3%
+                        width: 85%
+
+                        &:hover, &.selectedInputField
+                            @extend .t3
+
+                            background-color: $baseColor2
+                            color: white
+                            cursor: pointer
+                            width: 90%
+
+                input[type="checkbox"]
+                    display: none
+
+                    &:checked + label > div
+                        @extend .selectedInputField
+
+                        background-color: $baseColor1
+                        color: white
+                        width: 90%
+
+        button#add-group
+            background-color: $lightBlue
+            border: none
+            color: white
+            display: block
+            height: 40px
+            margin-bottom: 2%
+            overflow: hidden
+            white-space: nowrap
+            width: 40px
+
+            span
+                font-size: 150%
+                font-weight: bold
+                margin-left: 6px
+                margin-right: 14px
+
+            &:hover
+                @extend .t3
+
+                background-color: $blue
+                cursor: pointer
+                width: 90%
+
+        button#remove-group
+            @extend button#add-group
+
+            background-color: #D82D48
+
+            span
+                padding-left: 3px
+
+            &:hover
+                @extend .t3
+
+                background-color: #F11437
+
+    #search-groups
+        margin-top: 1%
+        max-height: 93%
+        overflow-y: auto
+        width: 75%
+
+        .search-group
+            @include vendor(transition, all 0.6s ease-out)
+
+            background-color: $lightGray
+            padding: 1%
+            margin-bottom: 2%
+            width: 97%
+
+            >div
+                margin-bottom: 0.7%
+
+                >div.name
+                    display: inline-block
+                    font-size: 90%
+                    width: 20%
+
+                >input[type=text]
+                    display: inline-block
+                    padding: 2px
+                    width: 60%
+
+                >input[type=checkbox]
+                    margin-left: 2%
+
+                    &:checked + span
+                        @extend .t2
+
+                        color: green
+                        font-weight: bold
+
+                    &:hover
+                        cursor: checkbox
+
+                span.regex
+                    font-size: 80%
+
+            &#selected
+                background-color: #CACACA
+
+div#results
+    margin: 3% auto 0 auto
+    margin-left: auto
+    margin-right: auto
+    width: 80%
+
+    div.result
+        background-color: #F8F8F8
+        margin-bottom: 10%
+        margin-top: 1%
+        padding: 1%
+
+        &.cascade
+            @extend .t3
+
+            margin-bottom: 0%

static/sass/main.sass

@@ -2,6 +2,58 @@
  Global project stylesheet.
  */
 
-// placeholder
-p
-    font-size: 1.5em
+@import mixins
+@import variables
+
+html, body
+    height: 100%
+    margin: 0
+    padding: 0
+
+    *
+        font-family: sans-serif
+
+div#container
+    min-height: 100%
+    position: relative
+
+    div#header
+        padding: 10px
+
+    div#body
+        height: 100%
+        padding-bottom: 110px
+        padding-top: 4%
+
+        div#center
+            margin-left: auto
+            margin-right: auto
+            width: 75%
+
+    div#footer
+        @extend .t3
+
+        background-color: $baseColor1
+        bottom: 0
+        height: 60px
+        padding-top: 12px
+        position: absolute
+        text-align: center
+        width: 100%
+
+        *
+            color: white
+
+        a
+            @extend .t3
+
+            font-size: 1.2em
+            margin-left: 5%
+            margin-right: 5%
+            text-decoration: none
+
+            &:hover
+                text-decoration: underline
+
+        p span
+            font-size: 0.7em

templates/about.html

@@ -0,0 +1,11 @@
+= extends "layout.html"
+
+= block title
+  About
+= endblock
+
+= block body
+  <div>
+    About us, son.
+  </div>
+= endblock

templates/developers.html

@@ -0,0 +1,11 @@
+= extends "layout.html"
+
+= block title
+  About
+= endblock
+
+= block body
+  <div>
+    For developers, son.
+  </div>
+= endblock

templates/index.html

@@ -4,6 +4,98 @@
   Home
 = endblock
 
+= block head
+  {{ assets.tag("lib/jqueryui.custom.min.css") }}
+  {{ assets.tag("lib/jquery.min.js") }}
+  {{ assets.tag("lib/jquery-ui.min.js") }}
+  {{ assets.tag("lib/typeahead.bundle.min.js") }}
+
+  {{ assets.tag("index.css") }}
+
+  <script>
+    AUTOCOMPLETE_LANGUAGES = {{ autocomplete_languages | safe }};
+  </script>
+= endblock
+
 = block body
-  <p>Hello, world.</p>
+  <div id="search-field">
+    <a id="title" href="/">
+      <div id="title">
+        <span id="title-bit">bit</span
+        ><span id="title-angle">&laquo;</span
+        ><span id="title-shift">shift</span>
+      </div>
+    </a>
+
+    <form id="search-bar">
+      <input type="text" name="query"
+      ><button id="advanced-search" title="advanced search">
+        <img src="static/img/search_bar_magnifying_glass.png">
+      </button>
+
+      <div id="advanced-search">
+        <div id="heading">
+          <div id="col1">Fields</div
+          ><div id="col2">Search groups</div>
+        </div>
+        <div id="sidebar">
+          <ul>
+            <li>
+              <input type="checkbox" id="language" checked="true">
+              <label for="language"><div>languages</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="author">
+              <label for="author"><div>authors</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="date-last-modified">
+              <label for="date-last-modified"><div>date last modified</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="date-created">
+              <label for="date-created"><div>date created</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="symbol">
+              <label for="symbol"><div>symbols</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="function">
+              <label for="function"><div>functions</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="class">
+              <label for="class"><div>classes</div></label>
+            </li>
+            <li>
+              <input type="checkbox" id="variable">
+              <label for="variable"><div>variables</div></label>
+            </li>
+          </ul>
+          <button id="add-group">
+            <div><span>+</span> Add</div>
+          </button>
+          <button id="remove-group">
+            <div><span>-</span> Remove</div>
+          </button>
+        </div>
+        <div id="search-groups">
+          <div class="search-group" id="selected">
+            <div id="language">
+              <div class="name">language</div>
+              <input id="autocomplete" class="language" name="language" type="text">
+              <input type="checkbox" name="regex">
+              <span class="regex">Regex</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+
+  <div id="results"></div>
+
+  {{ assets.tag("index.js") }}
+  {{ assets.tag("index.advanced-search-form.js") }}
 = endblock

templates/layout.html

@@ -9,10 +9,8 @@
     </title>
 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
-    <meta name="description" content="bitshift is an online code snippet
-      exchange."/>
-    <meta name="keywords" content="code snippet exchange golf programming
-      software community"/>
+    <meta name="description" content="bitshift is a source code search engine."/>
+    <meta name="keywords" content="source code language search engine"/>
     <meta name="author" content="Benjamin Attal Ben Kurtovic Severyn Kozak"/>
 
     {{ assets.tag("main.css") }}
@@ -21,7 +19,25 @@
     = endblock
   </head>
   <body>
-    = block body
-    = endblock
+    <div id="container">
+      <div id="header">
+      </div>
+
+      <div id="body">
+        <div id="center">
+          = block body
+          = endblock
+        </div>
+      </div>
+
+      <div id="footer">
+        <a href="/">home</a>
+        <a href="/about">about</a>
+        <a href="/developers">developers</a>
+        <p>
+          &copy; 2012-2013 bitshift. <span>All Rights Reserved.</span>
+        </p>
+      </div>
+    </div>
   </body>
 </html>