caMicroscope/apps/landing/landing.html at a05b302e10971b4463de4e98a0c00da39e2ebf36 · camicroscope/caMicroscope · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html lang="en">
<head>

    <title>caMicroscope</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css" />
    <!-- common styling -->
	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.png">

</head>
<body>

<!-- loading animation -->
<div class="main-site">
    <!-- adding css -->
    <div class="main-content" role="timer" id="mainContent">
        <div class="loader loader-black loader-5"></div>
    </div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
    <div class="container-fluid">
        <button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="width: 100%;">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent" >
                <ul class="navbar-nav mr-auto gap-1">
                    <li class="nav-item active link" style="font-family: sans-serif;">
                       <a class="nav-link" href="landing.html"> <i class="fas fa-home"></i> Home</a>
                    </li>
                    <li class="nav-item  link" style="font-family: sans-serif;">
                        <a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i>  Slides</a>
                    </li>
                    <li class="nav-item link">
                        <a class="nav-link" href="../Info.html"> <i class="fas fa-info-circle"></i> Info</a>
                    </li>
                    <li class="nav-item link">
                        <a class="nav-link" href="../dev-workbench/workbench.html"> <i class="fas fa-pencil-ruler"></i> Workbench</a>
                    </li>
                    <li class="nav-item link" style="font-family: sans-serif;">
                        <a class="nav-link" href="../signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
                    </li>
                    <li class="nav-item link" style="font-family: sans-serif;">
                        <a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i class="fas fa-comment"></i> Feedback</a>
                    </li>

                    <!-- Darkmode Button as List Item -->
                    <li class="nav-item link">
                        <button onclick="darkMode()" class="darkmode-btn">
                            <i class="fas fa-moon"></i> Darkmode
                        </button>
                    </li>

                    <script>
                    function darkMode() {
                        var element = document.body;
                        element.classList.toggle("dark-mode");
                    }
                    </script>
                </ul>
            </div>
    </div>
</nav>


<!-- Main -->

<section id="main" class="wrapper">

    <div class="inner">

        <div role="heading">
            <header class="major">
                <h1>caMicroscope</h1>
            </header>
        </div>

        <!-- Content -->
        <div role="contentinfo" class="content">
            <p>caMicroscope is a tool to view, annotate, and analyze biomedical images.</p>
            <a href="#" class="image fit" aria-label="Reload Home Page"><img src="./banner1.jpg" alt="" /></a>

        </div>

        <div class="posts" role="main" style="margin-top: 5em;">
            <section class="post">
                <a href="../table.html" class="image" aria-label="Visit Slides Page"><img src="./camic.jpg" alt=""/></a>
                <div class="content">
                    <h3>caMicroscope</h3>
                    <p>Use camicroscope to explore and mark slides uploaded. If this is a restricted access deployment, you will be prompted to log in here.</p>
                    <a href="../table.html" class="button">More</a>
                </div>
            </section>
            <section class="post">
                <a target="_blank" href="https://camicroscope.github.io/docs/" class="image" aria-label="Visit Documentation Page"><img src="./code.jpg" alt=""/></a>
                <div class="content">
                    <h3>Documentation</h3>
                    <p>Read documentation for using and developing caMicroscope.</p>
                    <a target="_blank" href="https://camicroscope.github.io/docs/" class="button">More</a>
                </div>
            </section>
        </div>
</section>


<!-- Footer -->
<footer id="footer-layout"></footer>


<!-- Scripts -->
<!-- loading animation script -->
<script>
    var loader= document.querySelector('.loader');
    window.addEventListener('load', function() {
        loader.style.display = 'none';
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="./jquery.min.js"></script>

<script src="./jquery.dropotron.min.js"></script>

<script src="./jquery.scrollex.min.js"></script>

<script src="./skel.min.js"></script>

<script src="./util.js"></script>
<script src="../../common/util.js"></script>

    <!-- script to call a footer(layout footer in the common > utils folder) function -->
<script> insertFooterLayout(); </script>
</body>

</html>