Skip to content

Commit

Permalink
UI index page (#55)
Browse files Browse the repository at this point in the history 
* Update top menu

* Change Index UI
  • Loading branch information
@miladsoft
miladsoft committed Mar 17, 2024
1 parent ce316f5 commit c43a04c
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 82 deletions.
86 changes: 74 additions & 12 deletions src/Angor/Client/Pages/Index.razor
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,76 @@
@page "/"

<PageTitle>Index</PageTitle>

<div class="container my-4">
<h1>Welcome to Angor !</h1>

<h5>
<br />
A decentralized crowdfunding platform built on Bitcoin and Nostr.
<br /><br />
Think of it as a trustless, risk-minimized open source funding platform.
</h5>
</div>
<PageTitle>Angor</PageTitle>

<div class="row">
<div class="col-lg-7 col-md-6 mb-md-0 mb-4">
<div class="card h-100">
<div class="card-header pb-0">
<div class="row">
<h6>What is Angor?</h6>
<div class="col-lg-6 col-5 my-auto text-end">
<div class="dropdown float-lg-end pe-4">
<a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-ellipsis-v text-secondary" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable" style="">
<li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
<li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body px-0 pb-2">
<div class="ratio ratio-16x9">
<iframe width="1022" height="575" src="https://www.youtube.com/embed/hZFFJR5CZUQ" title="Blockcore Vault - Intro to prototype" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="card-footer">
<p>
A decentralized crowdfunding platform built on Bitcoin
</p>
</div>

</div>
</div>
<div class="col-lg-5 col-md-6 mb-md-0 mb-4">
<div class="card h-100">
<div class="card-header p-3 pb-0">
<div class="d-flex align-items-center">
<h6 class="mb-0">
How to use Angor?
</h6>
<a href="https://github.com/block-core/angor" class="btn btn-sm bg-gradient-dark ms-auto mb-0">
GitHub
</a>
</div>
</div>
<div class="card-body p-3">

<div class="container d-flex align-items-center justify-content-center mb-4 mt-sm-5 mt-3">
<img src="/assets/img/angor-icon.svg" class="m-auto w-40" alt="Angor" />
</div>
<p class="text-muted text-sm mb-4">
Angor is a browser-based platform that can be installed as a PWA.
It can be downloaded directly from this GitHub.
</p>
<div class="card">
<div class="card-body border-radius-lg bg-gradient-dark p-3">
<h6 class="mb-0 text-white">
Questions about Angor?
</h6>
<p class="text-white text-sm mb-4">
Have a question, concern, or comment
about Angor? Please contact us.
</p>
<a href="https://www.blockcore.net/discord" target="_blank" class="btn btn-white mb-0">Discord</a>
</div>
</div>
</div>
</div>

</div>
</div>

107 changes: 58 additions & 49 deletions src/Angor/Client/Shared/MainLayout.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,74 @@
@inherits LayoutComponentBase
@inject IJSRuntime Js;

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 bg-gradient-dark"
id="sidenav-main">
<NavMenu />
</aside>
<main class="main-content d-flex flex-column min-vh-100">
<!-- Navbar -->

<nav class="navbar navbar-main navbar-expand-lg px-0 mx-3 border-radius-xl position-sticky mt-2 top-2 z-index-sticky blur left-auto bg-gradient-dark-topmenu" id="navbarBlur"
data-scroll="true">
<div class="container-fluid py-1 px-3">
<nav>
<div class="mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
<div class="text-sm">
<h6 class="font-weight-bolder">Alpha app - only use test wallets.</h6>
</div>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbar">
<div class="ms-md-auto pe-md-3 d-flex align-items-center">
</div>
<ul class="navbar-nav justify-content-end user-select-none">

<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
<span role="button" class="material-icons opacity-10 btn-angor fs-3" id="iconNavbarSidenav" onclick="toggleSidenav()">
menu
</span>
</li>
<li class="nav-item ps-3 d-flex align-items-center" id="dark-version" onclick="toggleDarkMode()">
<span role="button" class="material-icons opacity-10 btn-angor fs-3" id="theme-icon">
dark_mode
</span>
</li>
<li class="nav-item ps-3 d-flex align-items-center d-none" id="installButton">
<span @onclick="InstallApp" role="button" class="material-icons opacity-10 btn-angor fs-3">
install_desktop
</span>
</li>
</ul>
</div>
</div>
</nav>

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 bg-gradient-dark"
id="sidenav-main">
<NavMenu />
</aside>

<!-- End Navbar -->
<div class="container-fluid mt-5 mb-2 flex-shrink-0">
@Body
</div>

<main class="main-content">
<!-- Navbar -->
<footer class="footer mt-auto py-3 px-0 mx-3 left-auto">
<div class="container">
<div class="row align-items-center justify-content-lg-between">

<nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
data-scroll="true">
<div class="container-fluid py-1 px-3">
<nav class="d-none d-xl-block">
<div class="mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
<div class="text-sm">
<span>Alpha app - only use test wallets.</span>
<div class="nav nav-footer justify-content-center justify-content-lg-end">
<div>
<span class="w-100">Version: @_softwareVersion</span>
</div>
</div>

</div>
<h6 class="font-weight-bolder mb-0"> Version: @_softwareVersion</h6>
</nav>
<div class="collapse navbar-collapse mt-2" id="navbar">
<div class="ms-md-auto pe-md-3 d-flex align-items-center">
<div class="input-group input-group-outline">
<label class="form-label">search ...</label>
<input type="text" class="form-control" />
</div>
</div>
<ul class="navbar-nav justify-content-end user-select-none">

<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
<span role="button" class="material-icons opacity-10 btn-angor fs-3" id="iconNavbarSidenav" onclick="toggleSidenav()">
menu
</span>
</li>
<li class="nav-item ps-3 d-flex align-items-center" id="dark-version" onclick="toggleDarkMode()">
<span role="button" class="material-icons opacity-10 btn-angor fs-3" id="theme-icon">
dark_mode
</span>
</li>
<li class="nav-item ps-3 d-flex align-items-center d-none" id="installButton">
<span @onclick="InstallApp" role="button" class="material-icons opacity-10 btn-angor fs-3">
install_desktop
</span>
</li>
</ul>
</div>
</div>
</nav>
</footer>
</main>

<!-- End Navbar -->
@Body

</main>


@code {
private string _softwareVersion = "0.0.0";
ElementReference contentRef;
ElementReference footerRef;

private async Task InstallApp()
{
Expand All @@ -85,11 +94,11 @@
var version = assembly?.GetName().Version;

if (version != null) _softwareVersion = version.ToString();

}

/// <summary>
///
///
/// </summary>
/// <param name="firstRender"></param>
protected override async Task OnAfterRenderAsync(bool firstRender)
Expand Down
41 changes: 20 additions & 21 deletions src/Angor/Client/wwwroot/assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22678,22 +22678,22 @@ label,
bottom: 0;
}

.footer .nav-link {
color: #344767;
font-weight: 400;
font-size: 0.875rem;
padding-top: 0;
padding-bottom: 0.25rem;
}

.footer .nav-link:hover {
opacity: 1 !important;
transition: opacity 0.3 ease;
.footer .nav-link {
color: #344767;
font-weight: 400;
font-size: 0.875rem;
padding-top: 0;
padding-bottom: 0.25rem;
}

.footer .footer-logo {
max-width: 2rem;
}
.footer .nav-link:hover {
opacity: 1 !important;
transition: opacity 0.3 ease;
}

.footer .footer-logo {
max-width: 2rem;
}

.bg-gradient-primary {
background-image: linear-gradient(195deg, #1f5d6a 0%, #1f5d6a 100%);
Expand Down Expand Up @@ -24393,7 +24393,7 @@ hr {

.sidenav.fixed-start + .main-content {
padding-left: 17.125rem;
height: 100vh;
height: 100%;
}

.sidenav.fixed-end + .main-content {
Expand Down Expand Up @@ -27817,17 +27817,11 @@ pre[class*="language-"] {
background-color: #FFFDFA;
}

.card {
background-color: #FFFBF5;
}

.modal-body-scroll {
max-height: 500px;
overflow-y: auto;
}



.content {
padding-top: 1.1rem;
}
Expand Down Expand Up @@ -28078,3 +28072,8 @@ Adding a bit of styling to the <p > elements
-webkit-transition: all 0.3s ease;
color: #e08604;
}

.dark-version .bg-gradient-dark-topmenu {
background-image: linear-gradient(195deg, #04060a, #08111f) !important;
box-shadow: none !important;
}

0 comments on commit c43a04c

Please sign in to comment.