Skip to content

Commit 23152e7

Browse files
dbougetdbouget
committed
Setting up the different part.
1 parent 7ce1ec9 commit 23152e7

File tree

2 files changed

+236
-1
lines changed

2 files changed

+236
-1
lines changed

‎assets/raidionics_preview.gif‎

9.11 MB
Loading

‎index.html‎

Lines changed: 236 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,236 @@
1-
Raidionics
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>W3.CSS Template</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<style>
11+
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
12+
13+
body, html {
14+
height: 100%;
15+
line-height: 1.8;
16+
}
17+
18+
/* Full height image header */
19+
.bgimg-1 {
20+
background-position: center;
21+
background-size: cover;
22+
background-image: url("/assets/raidionics_preview.gif");
23+
min-height: 100%;
24+
}
25+
26+
.w3-bar .w3-button {
27+
padding: 16px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
33+
<!-- Navbar (sit on top) -->
34+
<div class="w3-top">
35+
<div class="w3-bar w3-white w3-card" id="myNavbar">
36+
<a href="#home" class="w3-bar-item w3-button w3-wide">Raidionics</a>
37+
<!-- Right-sided navbar links -->
38+
<div class="w3-right w3-hide-small">
39+
<a href="#about" class="w3-bar-item w3-button"><i class="fa fa-th"></i> ABOUT</a>
40+
<a href="#team" class="w3-bar-item w3-button"><i class="fa fa-user"></i> TEAM</a>
41+
<a href="#download" class="w3-bar-item w3-button"><i class="fa fa-cloud-download" aria-hidden="true"></i>DOWNLOAD</a>
42+
<a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> CONTACT</a>
43+
</div>
44+
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
45+
46+
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
47+
<i class="fa fa-bars"></i>
48+
</a>
49+
</div>
50+
</div>
51+
52+
<!-- Sidebar on small screens when clicking the menu icon -->
53+
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
54+
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
55+
<a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">ABOUT</a>
56+
<a href="#team" onclick="w3_close()" class="w3-bar-item w3-button">TEAM</a>
57+
<a href="#download" onclick="w3_close()" class="w3-bar-item w3-button">ABOUT</a>
58+
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">CONTACT</a>
59+
</nav>
60+
61+
<!-- Header with full-height image -->
62+
<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
63+
<div class="w3-display-left w3-text-white" style="padding:48px">
64+
<span class="w3-jumbo w3-hide-small">Preoperative brain tumor segmentation and reporting</span><br>
65+
<span class="w3-xxlarge w3-hide-large w3-hide-medium">Preoperative brain tumor segmentation and reporting</span><br>
66+
<!-- <span class="w3-large">Stop wasting valuable time with projects that just isn't you.</span>-->
67+
<p><a href="#download" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Start now</a></p>
68+
</div>
69+
<div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
70+
<i class="fa fa-globe w3-hover-opacity" href="https://www.sintef.no/sintef-teknologi-og-samfunn/avdelinger/helse/forskningsgrupper/medtek/"></i>
71+
<i class="fa fa-github w3-hover-opacity"></i>
72+
</div>
73+
</header>
74+
75+
<!-- About Section -->
76+
<div class="w3-container" style="padding:128px 16px" id="about">
77+
<h3 class="w3-center">ABOUT Raidionics</h3>
78+
<p class="w3-center w3-large">Key features of the software</p>
79+
<div class="w3-row-padding w3-center" style="margin-top:64px">
80+
<div class="w3-quarter">
81+
<i class="fa fa-pencil-square w3-margin-bottom w3-jumbo w3-center"></i>
82+
<p class="w3-large">Segmentation</p>
83+
<p>.</p>
84+
</div>
85+
<div class="w3-quarter">
86+
<i class="fa fa-pie-chart w3-margin-bottom w3-jumbo"></i>
87+
<p class="w3-large">Reporting</p>
88+
<p>.</p>
89+
</div>
90+
<div class="w3-quarter">
91+
<i class="fa fa-book w3-margin-bottom w3-jumbo"></i>
92+
<p class="w3-large">Research</p>
93+
<p>.</p>
94+
</div>
95+
<div class="w3-quarter">
96+
<i class="fa fa-hospital-o w3-margin-bottom w3-jumbo"></i>
97+
<p class="w3-large">Partners</p>
98+
<p>.</p>
99+
</div>
100+
</div>
101+
</div>
102+
103+
<!-- Team Section -->
104+
<div class="w3-container w3-dark-grey" style="padding:128px 16px" id="team">
105+
<h3 class="w3-center">THE TEAM</h3>
106+
<p class="w3-center w3-large">Active participants</p>
107+
<div class="w3-row-padding w3-grayscale" style="margin-top:64px">
108+
<div class="w3-col l3 m6 w3-margin-bottom">
109+
<div class="w3-card">
110+
<!-- <img src="/w3images/team2.jpg" alt="John" style="width:100%">-->
111+
<div class="w3-container">
112+
<h3>Team1</h3>
113+
<p class="w3-opacity">Developer</p>
114+
<p>.</p>
115+
<p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
116+
</div>
117+
</div>
118+
</div>
119+
<div class="w3-col l3 m6 w3-margin-bottom">
120+
<div class="w3-card">
121+
<!-- <img src="/w3images/team1.jpg" alt="Jane" style="width:100%">-->
122+
<div class="w3-container">
123+
<h3>Team2</h3>
124+
<p class="w3-opacity">Developer</p>
125+
<p>.</p>
126+
<p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
127+
</div>
128+
</div>
129+
</div>
130+
<div class="w3-col l3 m6 w3-margin-bottom">
131+
<div class="w3-card">
132+
<!-- <img src="/w3images/team3.jpg" alt="Mike" style="width:100%">-->
133+
<div class="w3-container">
134+
<h3>Team3</h3>
135+
<p class="w3-opacity">Designer</p>
136+
<p>.</p>
137+
<p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
138+
</div>
139+
</div>
140+
</div>
141+
<div class="w3-col l3 m6 w3-margin-bottom">
142+
<div class="w3-card">
143+
<!-- <img src="/w3images/team4.jpg" alt="Dan" style="width:100%">-->
144+
<div class="w3-container">
145+
<h3>Team4</h3>
146+
<p class="w3-opacity">Designer</p>
147+
<p>.</p>
148+
<p><button class="w3-button w3-light-grey w3-block"><i class="fa fa-envelope"></i> Contact</button></p>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
155+
<!-- Download Section -->
156+
<div class="w3-container" style="padding:128px 16px" id="download">
157+
<h3 class="w3-center">Downloads</h3>
158+
<p class="w3-center w3-large">Latest stable release (1.1.0)</p>
159+
<div class="w3-row-padding w3-center" style="margin-top:64px">
160+
<div class="w3-third">
161+
<i class="fa fa-windows w3-margin-bottom w3-jumbo w3-center"></i>
162+
<p class="w3-large">Windows</p>
163+
<i><a href="https://github.com/dbouget/Raidionics/releases/download/v1.1.0/Raidionics-1.1.0-win.exe">Download for <strong>Windows</strong></a></i>
164+
</div>
165+
<div class="w3-third">
166+
<i class="fa fa-apple w3-margin-bottom w3-jumbo"></i>
167+
<p class="w3-large">MacOs</p>
168+
<i><a href="https://github.com/dbouget/Raidionics/releases/download/v1.1.0/Raidionics-1.1.0-macOS.pkg">Download for <strong>MacOs</strong></a></i>
169+
</div>
170+
<div class="w3-third">
171+
<i class="fa fa-linux w3-margin-bottom w3-jumbo"></i>
172+
<p class="w3-large">Linux</p>
173+
<i><a href="https://github.com/dbouget/Raidionics/releases/download/v1.1.0/Raidionics-1.1.0-ubuntu.deb">Download for <strong>Linux</strong></a></i>
174+
</div>
175+
</div>
176+
</div>
177+
178+
<!-- Modal for full size images on click-->
179+
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
180+
<span class="w3-button w3-xxlarge w3-black w3-padding-large w3-display-topright" title="Close Modal Image">×</span>
181+
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
182+
<img id="img01" class="w3-image">
183+
<p id="caption" class="w3-opacity w3-large"></p>
184+
</div>
185+
</div>
186+
187+
<!-- Contact Section -->
188+
<div class="w3-container w3-light-grey" style="padding:128px 16px" id="contact">
189+
<h3 class="w3-center">CONTACT</h3>
190+
<p class="w3-center w3-large">Lets get in touch. Send us a message:</p>
191+
<div style="margin-top:48px">
192+
<p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> Trondheim, Norway</p>
193+
<p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: [email protected]</p>
194+
<br>
195+
</div>
196+
</div>
197+
198+
<!-- Footer -->
199+
<footer class="w3-center w3-black w3-padding-64">
200+
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
201+
<div class="w3-xlarge w3-section">
202+
<i class="fa fa-globe w3-hover-opacity"></i>
203+
<i class="fa fa-github w3-hover-opacity"></i>
204+
</div>
205+
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
206+
</footer>
207+
208+
<script>
209+
// Modal Image Gallery
210+
function onClick(element) {
211+
document.getElementById("img01").src = element.src;
212+
document.getElementById("modal01").style.display = "block";
213+
var captionText = document.getElementById("caption");
214+
captionText.innerHTML = element.alt;
215+
}
216+
217+
218+
// Toggle between showing and hiding the sidebar when clicking the menu icon
219+
var mySidebar = document.getElementById("mySidebar");
220+
221+
function w3_open() {
222+
if (mySidebar.style.display === 'block') {
223+
mySidebar.style.display = 'none';
224+
} else {
225+
mySidebar.style.display = 'block';
226+
}
227+
}
228+
229+
// Close the sidebar with the close button
230+
function w3_close() {
231+
mySidebar.style.display = "none";
232+
}
233+
</script>
234+
235+
</body>
236+
</html>

0 commit comments

Comments
 (0)