<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting started</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.main-container {
box-sizing: border-box;
margin: 0 auto;
width: 90%;
}
.app-logo {
width: 200px;
margin-top: 1rem;
}
.top-container {
}
.top-container > h1 {
color: #3773c2;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
}
.section-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.section-container .content-box {
flex: 0 1 32%;
}
.section-container .content-box > h1 {
color: #3773c2;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
}
.section-container .content-box > a {
background-color: #27bf89;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px auto;
cursor: pointer;
border-radius: 50px;
transition: all 0.1s ease;
border-width: 0;
}
.section-container .content-box > a:after {
font-size: 16px;
padding-top: 10px;
padding-left: 10px;
font-family: "FontAwesome";
content: "\f061";
}
.section-container .content-box > a:hover {
background-color: #52cba0;
transition: background-color 0.3s;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="main-container">
<img src="https://www.dotvvm.com/wwwroot/Images/logos/logo-dotvvm.svg" class="app-logo" />
<section class="top-container">
<h1>
Project Contents
</h1>
The project you have just created contains the following files:
<ul>
<li><code>Views/*.dothml</code> are the files that describe individual pages of your app using enhanced HTML syntax.</li>
<li><code>Views/masterpage.dotmaster</code> is a master page of your application. It should define the base layout for your site and is common for all of your pages. See <a href="https://www.dotvvm.com/docs/tutorials/basics-master-pages/latest">documentation</a> for more information about master pages.</li>
<li><code>ViewModels/*.cs</code> are viewmodels of your application - C# classes referenced from <code>.dothtml</code> files using the <code>@viewModel</code> directive.</li>
<li><code>Startup.cs</code> is OWIN / ASP.NET Core startup class which registers DotVVM and all other middlewares.</li>
<li><code>DotvvmStartup.cs</code> contains the configuration of DotVVM (see <a href="https://www.dotvvm.com/docs/tutorials/basics-configuration/latest">documentation</a> for details).</li>
</ul>
</section>
<!--Theese are information that will be shown to an empty project.-->
<section class="section-container">
<div class="content-box">
<h1><i class="fa fa-graduation-cap"></i> Tutorial</h1>
If you are new to DotVVM, you can learn basics of DotVVM at DotVVM Academy. It will guide you through the principles of DotVVM and make you ready to get started with DotVVM development.<br />
<a href="https://academy.dotvvm.com/">Visit DotVVM Academy</a>
</div>
<div class="content-box">
<h1><i class="fa fa-code"></i> Bootstrap controls</h1>
You have installed Bootstrap 4 package in your project. <strong>Bootstrap 4 for DotVVM</strong> contains more than 60 Bootstrap controls with full support of DotVVM data-binding.<br />
<a href="https://www.dotvvm.com/docs/controls/bootstrap4/Accordion/2.0">List of Bootstrap 4 controls</a>
</div>
<div class="content-box">
<h1><i class="fa fa-shield"></i> Authentication</h1>
You have chosen not to add authentication to the project. If you change your mind, you can find all the information about authentication in DotVVM in the documentation.<br />
<a href="https://www.dotvvm.com/docs/tutorials/advanced-authentication-authorization/latest">More information</a>
</div>
</section>
</div>
</body>
</html>