index.pug

//- main landing page

//- important detail: those anchor links aren't generated automatically. they need to adhere to a given pattern:
//- h1 or h2 -> signal **where** and then a div#name element in the parent signals the **name**.
//- the corresponding anchor link is then a.anchor#a-name

extends _base.pug

mixin start_button
  p
    a.btn.btn-success.btn-xlg(href="app") Start #{NAME}
  p or #[a(href="app") sign in] with your account

block vars
  - var subtitle = htmlWebpackPlugin.options.description;

block header
  - var recent_times = htmlWebpackPlugin.options.SCHEMA.RECENT_TIMES
  - var stat_times_keys = htmlWebpackPlugin.options.SCHEMA.RECENT_TIMES_KEY
  - var stat_times = JSON.stringify([stat_times_keys.last_hour, stat_times_keys.last_day, stat_times_keys.last_week, stat_times_keys.last_month])
  script(type="text/javascript").
    window.stat_times = !{stat_times};
  script(type="text/javascript")
    include:coffee-script index.coffee
  meta(name="description" content=htmlWebpackPlugin.options.description)

block content
  - var free_quotas = htmlWebpackPlugin.options.SCHEMA.DEFAULT_QUOTAS
  - var free_memory_gb = (free_quotas['memory'] / 1000).toFixed(1)
  - var free_disk_gb = (free_quotas['disk_quota'] / 1000).toFixed(1)

  a.anchor#a-top
  div.container
    div.row.intro#top
      //- div.col-sm-12.center.alert.alert-info(role="alert").
      //-   Looking for #[strong SageMathCloud]? #{NAME} is a rebranding.
      //-   Your old account and projects are still there.
      //-   #[a(href="app") Sign in] with your existing account and you're ready to go.
      div.col-sm-4.col-sm-offset-4.center
        a(href="app")
          img(src=require('!url?mimetype=image/svg+xml!cocalc-logo.svg'))
      div.col-sm-12.center.descr.
        #{htmlWebpackPlugin.options.description}
      div.col-sm-12.center
        +start_button

    div.row
      div.col-md-12.center
        h1 Online computing environment
      div.col-sm-6
        img(src=require('!file-loader!sagepreview/01-worksheet.png'))
      div.col-sm-6
        p #{NAME} is a #[strong sophisticated web service] for online computation:
        ul
          li.
            #[strong Mathematical calculation]:
            #[a(href="http://www.sagemath.org/") SageMath], #[a(href="https://www.sympy.org/") SymPy], #[a(href="http://maxima.sourceforge.net/") Maxima];
          li.
            #[strong Statistical analysis]:
            #[a(href="https://www.r-project.org/") R project], #[a(href="http://pandas.pydata.org/") Pandas], #[a(href="http://www.statsmodels.org/") statsmodels],
            #[a(href="http://scikit-learn.org/") scikit-learn], #[a(href="https://www.tensorflow.org/") Tensorflow], #[a(href="http://www.nltk.org/") NLTK];
          li.
            #[strong Various other computation]:
            #[a(href="https://www.gnu.org/software/octave/") Octave], #[a(href="https://julialang.org/") Julia], etc.
        p #[strong Zero Setup:] getting started does not require any software setup.
          ol
            li First, create your personal #[strong account].
            li Then, create a #[strong project] to instantiate your own private workspace.
            li Finally, create a #[strong worksheet] or upload your own files: #{NAME} supports Sage Worksheets, Jupyter Notebooks, Latex files, etc.
        p #[strong Collaborative Environment]
        p
          ul
            li Share your files #[em privately] with project collaborators — all files are synchronized in real-time.
            li #[em Time-travel] is a detailed history of all your edits and everything is backed up in #[em consistent snapshots].
            li Finally, you can select any document to #[em publish it online].
        p.
          A default project under a free plan has a quota of #{free_memory_gb} GB memory and #{free_disk_gb} GB of disk space.
          #[a(href="policies/pricing.html") Subscriptions] make hosting more robust and increase quotas.

  a.anchor#a-explore
  div.space#explore
    div.container
      div.row
        div.col-md-12.center
          h1 #[i.fa.fa-lightbulb-o] Explore #{NAME}
        div.col-md-3.col-sm-6
          h3 #[i.fa.fa-archive] Projects
          div.
            Your work on #{htmlWebpackPlugin.options.title} happens inside #[strong private projects].
            They form your personal workspaces containing your files, computational worksheets, and data.
            You run your computations through the web interface, via interactive worksheets and notebooks,
            or by executing a program in a terminal.
        div.col-md-3.col-sm-6
          h3 #[i.fa.fa-users] Collaboration
          div.
            You can invite collaborators to work with you inside a project.
            Like you, they can edit the files in that project.
            Edits are visible in #[strong real time] for everyone online.
            You can share your thoughts in a #[strong side chat] next to each document.
        div.clearfix.visible-sm-block
        div.col-md-3.col-sm-6
          h3 #[i.fa.fa-graduation-cap] Teaching
          div.
            #{htmlWebpackPlugin.options.title}
            #[a(href="https://tutorial.cocalc.com/" target="_blank") offers sophisticated tools for teaching].
            Start by creating a #[strong course], add your students, create assignments and distribute them to all students.
            While students work on it, you can assist them by jumping right into their files where they're working.
            Later, collect, grade and re-distribute the files.
          div.
            #[a(href="https://github.com/sagemathinc/cocalc/wiki/Teaching" target="_blank") Courses using #{htmlWebpackPlugin.options.title}]
        div.col-md-3.col-sm-6
          h3 #[i.fa.fa-file-text-o] Authoring
          div.
            Write scientific documents online in a #[strong LaTeX editor].
            It offers a full LaTeX setup, has a side-by-side preview with forward and inverse search,
            also supports advanced features like
            #[a(href="http://doc.sagemath.org/html/en/tutorial/sagetex.html" target="_blank") SageTeX] and
            #[a(href="https://yihui.name/knitr/" target="_blank") R's Knitr].

  a.anchor#a-teaching
  div.space#teaching
    div.container
      div.row
        div.col-md-12.center
          h1 #[i.fa.fa-graduation-cap] Teaching made easy
        div.col-sm-6
          div
            img(src="https://storage.googleapis.com/cocalc-extra/cocalc-teaching.svg.png").fit
        div.col-sm-6
          p.
            Have you experienced the pain of setting up the software environments for your students?
            With #{NAME} #[strong no software needs to be setup] and you
            can finally #[strong focus on your students]!
          ol
            li Create a course file on #{NAME}
            li Add your students
            li Distribute assignments and handouts
            li Jump into student's files right where they are working
            li Collect and grade assignments
          p.
            Combined with #{NAME}'s other unique features you can check, guide and retrace all steps a student takes.
          ul
            li Use #[strong TimeTravel] to see each step a student took to get to the solution.
            li Consistent and immutable #[strong Backups] make losing files impossible.
            li #[strong Integrated Chat] allows your to guide students directly where they work or discuss collected files with your teaching assistents.
            li The project's #[strong Activity Log] records exactly when a file is accessed and by which user.
          p More information
          ul
            li #[a(href="https://tutorial.cocalc.com/" target="_blank") Tutorial for Teaching]
            li #[a(href="https://github.com/sagemathinc/cocalc/wiki/Teaching" target="_blank") Courses using #{htmlWebpackPlugin.options.title}]

  a.anchor#a-testimonials
  div#testimonials
    div.container
      div.row
        div.col-md-12.center
          h1 #[i.fa.fa-commenting-o] Testimonials
        div.col-md-6
          blockquote.blockquote
            img.pull-left.img-rounded(src=require('!file-loader!kiran.jpeg') title="© Autor: Mathematisches Forschungsinstitut Oberwolfach gGmbH (MFO) -- Lizenz: CC BY-SA 2.0 (de)")
            p.
              I just found out that my #{NAME} class got by far the best course evaluations
              for any course I've taught at UCSD to date (over 85% on the favorable/­unfavorable scale),
              which makes it a sure thing that I'll be teaching this course again (in some form) next year!
              Many thanks for the backend work on #{NAME}, for the course materials, for the guest lecture...
            footer.
              #[strong Kiran Kedlaya] — UC San Diego, March 2017
        div.col-md-6
          blockquote.blockquote
            img.pull-left.img-rounded(src=require('!file-loader!will_conley.jpg'))
            p.
              #{NAME} provides a user-friendly interface.
              Students don't need to install any software at all.
              They just open up a web browser and go to #[a(href=URL) #{URL}] and that's it.
              They just type code directly in, hit shift+enter and it runs, and they can see if it works.
              It provides immediate feedback.
              The #[a(href="https://tutorial.cocalc.com/") course management features] work really well.
            footer.
              #[strong Will Conley] — Math professor, University of California at Los Angeles, Fall 2016

  a.anchor#a-unique
  div.space#unique
    div.container
      div.row
        div.col-md-12.center
          h1 #[i.fa.fa-exclamation-circle] Unique Features
        div.col-md-6
          h2 #[i.fa.fa-history] Time-Travel
          div.
            All your changes are recorded in fine detail.
            You can go back and forth in time across hundreds of changes to recover your previous edits.
          br/
          div
            +video-player
              source(src="https://storage.googleapis.com/cocalc-extra/cocalc-jupyter2-timetravel-20170515-3x.webm" type="video/webm; codecs=vp9")
              source(src="https://storage.googleapis.com/cocalc-extra/cocalc-jupyter2-timetravel-20170515-3x.mp4" type="video/mp4")
        div.col-md-6
          h2 #[i.fa.fa-camera-retro] Backups
          div.
            Every couple of minutes, all files are saved in consistent read-only snapshots.
            This means you can always recover older versions of your files
            in case they got corrupted or accidentally deleted.
          br/
          div
            img(src=require("webapp-lib/assets/cocalc-backup-1.png")).fit
      div.row
        div.col-md-6
          h2 #[i.fa.fa-comments-o] Chat
          div.
            A #[strong stand-alone] chat and #[strong side-by-side] chat for each file
            gives you the ability to discuss the content with your collegues.
            Collaborators who are not online will be notified about new messages the next time they sign in.
            Chat supports markdown formatting and Latex formulas.
          br/
          div
            img(src=require("webapp-lib/assets/smc-side-chat-20170508.png")).fit
        div.col-md-6
          h2 #[i.fa.fa-fw.cc-icon-jupyter] Native Jupyter Notebooks
          div.
            This is a fully compatible #[strong complete rewrite] of the classical Jupyter Notebook.
            It is tightly integrated into #{NAME} and adds real-time collaboration,
            time-travel history and
            #[a(href="http://blog.sagemath.com/jupyter/2017/05/05/jupyter-rewrite-for-smc.html") much more].
          br/
          div
            img(src=require("webapp-lib/assets/cocalc-jupyter2-20170508.png")).fit

  a.anchor#a-authoring
  div.space#authoring
    div.container
      div.row
        div.col-md-12.center
          h1 #[i.fa.fa-file-text-o] Authoring
        div.col-md-6
          h2 #[i.fa.cc-icon-tex-file] LaTeX Editor
          div.
            #{NAME} includes a full #[strong LaTeX editor] with
            #[strong side-by-side] preview and forward/inverse search.
            This allows you to not only do computations online,
            but also create scientific documents for their dissemination.
          br/
          div
            img(src="https://storage.googleapis.com/cocalc-extra/smc-latex-20170516.png").fit
        div.col-md-6
          h2 #[i.fa.cc-icon-markdown] Markdown/HTML
          div.
            There is also support for editing #[a(href="https://en.wikipedia.org/wiki/Markdown") Markdown] or HTML documents.
            The live preview supports LaTeX formulas and embedded graphics.
          br/
          div
            img(src="https://storage.googleapis.com/cocalc-extra/smc-mdhtml-20170516.png").fit

  a.anchor#a-bottom
  div.space#bottom
    div.container
      div.row
        a.anchor#a-included
        div.col-md-6#included
          h2 #[i.fa.fa-battery-three-quarters] Batteries included
          p.
            Out of the box hundreds of open-source tools are available for you.
            Here is a short list of a selected few:
          include _static_third_party_software.html
        a.anchor#a-stats
        div.col-md-6#stats
          h2 #[i.fa.fa-line-chart] Statistics
          div.
            There are currently #[strong #[span#sum_clients ?] users] connected to #{htmlWebpackPlugin.options.title}.
          div(style="margin-top: 3rem")
            table.table.bordered.condensed.hover.cc-help-stats-table#statstable
              thead
                tr
                  th past
                  th hour
                  th day
                  th week
                  th month
              tbody
                tr
                  td.left(colspan="4") Loading ...
                tr
                tr

  div
    div.container
      div.row
        div.col-sm-12.center(style="margin-top: 6rem")
          +start_button

  //- CSS comes at the bottom: overwrites styles defined in the header
  style
    :sass
      @import "smc-webapp/_colors.sass"
      body > div.space
        margin-top       : 5rem
      div#top
        margin           : 10rem 0 5rem 0
        .descr
          color          : $COL_GRAY
          font-size      : 2rem
        > div
          margin-bottom  : 2rem
      #statstable td,
      #statstable th
        text-align       : right
      blockquote.blockquote
        font-size        : 16px
        img
          height         : 10rem
          width          : auto
          float          : left
          margin         : 0 1rem 1rem 0
      ul,
      ol
        padding-left     : 2rem
      div
        img
          width             : 100%
          height            : auto
        &.row
          margin-top        : 2rem
          margin-bottom     : 4rem
          > div
            > h1
              margin-bottom : 4rem
            > h2, h3
              margin-bottom : 2rem
      .left,
      #statstable td.left
        text-align     : left
      #explore,
      #bottom
        background-color : $COL_GRAY_LL
        div > h3
          white-space    : nowrap
      #included > div
        padding          : 0