basic pages

2011-08-30 11:37:44 +02:00 · 2011-08-30 11:37:44 +02:00 · 3d8eba76bf
commit 3d8eba76bf
parent 693bd32c15
4 changed files with 374 additions and 1 deletions
--- a/forkMe.png
+++ b/forkMe.png
--- a/index.html
+++ b/index.html
@ -1 +1,126 @@
-My GitHub Page
+<DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>edn - new IDE for Linux</title>
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script type="text/javascript" src="script.js"></script>
+	<link rel="stylesheet" type="text/css" href="modele.css"/>
+	<script>
+		setInterval(function(){
+			$('.highlight').animate({
+				opacity: 0.5
+			}, 500).animate({
+				opacity: 1
+			}, 500)
+		},1000)
+	</script>
+</head>
+<body>
+	<a href="http://github.com/coreh/nide">
+		<img style="position: absolute; top: 0; left: 0; border: 0; z-index: 1" src="forkMe.png" alt="Fork me on GitHub">
+	</a>
+	<div id="gallery">
+		<div id="menu">
+			<ul class="menu">
+				<li class="menuItem"><a href="">About</a></li>
+				<li class="menuItem"><a href="">The Features</a></li>
+			</ul>
+		</div>
+		<div id="wrapper">
+			<div id="slides">
+				<div class="slide initial">
+					<h1>Edn</h1>
+					<h2>new IDE for Linux</h2>
+					<div class="description">
+						<p><code>edn</code> is a gtk+ based IDE for linux, Simplicity for writing and moving inside code.</p>
+						<p>The current version is not fully stable.</p>
+					</div>
+					<br>
+					<h2>Try it out!</h2>
+					<div class="description">
+						<p>todo ...</p>
+					</div>
+					<br>
+					<h2>Spread the word</h2>
+					<div class="description wide">
+					<p>Spread the word about Edn on <!--Facebook, Twitter or--> Google+:</p>
+					<!-- FaceBook -->
+					<!--
+					<p>
+						<iframe src="http://www.facebook.com/plugins/like.php?href&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font=lucida+grande&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true">
+						</iframe>
+					</p>
+					-->
+					<!-- Tweeter -->
+					<!--
+					<p>
+						<a href="http://twitter.com/share"
+						   class="twitter-share-button"
+						   data-count="horizontal">
+							Tweet
+						</a>
+						<script type="text/javascript" src="http://platform.twitter.com/widgets.js"/>
+					</p>
+					-->
+					<!-- Google + -->
+					<p>
+						<div class="g-plusone" data-annotation="inline"></div>
+						<script type="text/javascript">
+							(function() {
+								var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+								po.src = 'https://apis.google.com/js/plusone.js';
+								var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+							})();
+						</script>
+					</p>
+				</div>
+			</div>
+			<div class="slide">
+				<h2 class="top">Features</h2>
+				<div class="description">
+				<ul>
+					<li>Open file in list
+					<li>Internal syntax highlighted code editing
+					<li>Ctag search
+				</ul>
+			</div>
+			<h2>License</h2>
+			<div class="description">
+				<p>You can:
+					<ul>
+						<li>Redistribute the sources code and binaries.
+						<li>Modify the Sources code.
+						<li>Use a part of the sources (less than 50%) in an other software, just write somewhere "Edn is great" visible by the user (on your product or on your website with a link to my page).
+						<li>Redistribute the modification only if you want.
+						<li>Send me the bug-fix (it could be great).
+						<li>Pay me a beer or some other things.
+						<li>Print the source code on WC paper ...
+					</ul>
+					You can NOT:
+					<ul>
+						<li>Earn money with this Software (But I can).
+						<li>Add malware in the Sources.
+						<li>Do something bad with the sources.
+						<li>Use it to travel in the space with a toaster.
+					</ul>
+					I reserve the right to change this licence. If it change the version of the copy you have keep its own license
+				</p>
+			</div>
+		</div>
+	</div>
+	<script type="text/javascript">
+
+		var _gaq = _gaq || [];
+		_gaq.push(['_setAccount', 'UA-25417303-1']);
+		_gaq.push(['_trackPageview']);
+		(function() {
+			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+		})();
+
+	</script>
+  </div>
+</body>
+</html>
--- a/modele.css
+++ b/modele.css
@ -0,0 +1,195 @@
+html {
+	background: #fafafa;
+}
+
+body {
+	font-family: 'Lucida Grande', 'Segoe UI', 'Ubuntu', sans-serif;
+	text-align: center;
+	width: 968px;
+	margin: 0 auto;
+	padding: 0;
+	text-shadow: 0 1px 0 white;
+	position: relative;
+	color: #111;
+}
+
+h1 {
+	font-family: 'Myriad Pro', 'Lucida Grande', 'Segoe UI', 'Ubuntu', sans-serif;
+	font-size: 200px;
+	margin: 150px 0 0 100px;
+	padding: 0;
+	line-height: 0.7em;
+}
+h1.fit {
+	font-size:150px;
+}
+
+h2 {
+	margin: 0 100px 0 100px;
+	padding: 0;
+}
+
+h2.top {
+	margin-top: 75px;
+}
+
+.description {
+	margin: 0 0 0 100px;
+	width: 400px;
+}
+
+.description.wide {
+	width: 800px;
+}
+
+a {
+	color: #12c;
+}
+
+p.center {
+	text-align: center;
+}
+
+/* Gallery styles */
+
+#gallery{
+
+	/* CSS3 Rounded Corners */
+
+	-moz-border-radius-bottomleft:4px;
+	-webkit-border-bottom-left-radius:4px;
+	border-bottom-left-radius:4px;
+
+	-moz-border-radius-bottomright:4px;
+	-webkit-border-bottom-right-radius:4px;
+	border-bottom-right-radius:4px;
+
+	/* The width of the gallery */
+	width:968px;
+	overflow:hidden;
+}
+
+#slides{
+	/* This is the slide area */
+	height:1360px;
+
+	/* jQuery changes the width later on to the sum of the widths of all the slides. */
+	width:968px;
+	overflow:hidden;
+}
+
+#wrapper {
+	background: white;
+	border-radius: 5px;
+}
+
+.slide{
+	float:left;
+	min-height: 600px;
+	width: 968px;
+	text-align: left;
+	position: relative;
+}
+
+
+ul.menu{
+	margin: 20px 0 20px;
+	padding: 0;
+	background: #ddd;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 -30px 20px -10px rgba(0,0,0,0.1) inset;
+	border-radius: 3px;
+}
+
+ul.menu li{
+	/* Every thumbnail is a li element */
+	width:120px;
+	display:inline-block;
+	list-style:none;
+	overflow:hidden;
+	padding: 8px;
+	margin: 0;
+}
+
+ul.menu li.inact:hover{
+}
+
+ul.menu li.act,li.act:hover{
+	background: rgba(0,0,0,0.35);
+	color: #eee;
+	text-shadow: 0 1px 1px black;
+	box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
+}
+
+ul.menu li.act a{
+	cursor:default;
+}
+
+li a{
+	display:block;
+	text-decoration: none;
+	padding: 4px;
+	color: inherit;
+}
+
+a img{
+	border:none;
+}
+
+.initial {
+	background: url('main.jpg') right top no-repeat;
+}
+
+.highlight {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: #e11;
+	border-radius: 100px;
+	border: 5px solid white;
+	box-shadow: 0 0 2px 2px rgba(240, 18, 18, 0.5);
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.highlight:hover {
+	overflow: visible;
+	opacity: 1 !important;
+	z-index: 1;
+}
+
+.highlight .highlight-content {
+	position: absolute;
+	left: -25px;
+	top: 10px;
+	padding: 8px;
+	background: rgba(0,0,0,0.8);
+	border-radius: 4px;
+	opacity: 0;
+	color: white;
+	text-shadow: 0 1px black;
+	min-width: 250px;
+	font-size: 90%;
+}
+
+.highlight .highlight-content.right {
+	left: -200px;
+}
+
+.highlight:hover .highlight-content {
+	opacity: 1;
+	-webkit-transition: 1s ease opacity;
+	-moz-transition: 1s ease opacity;
+	-ms-transition: 1s ease opacity;
+	-o-transition: 1s ease opacity;
+	transition: 1s ease opacity;
+}
+
+.description li {
+	margin: 10px 0
+}
+
+#vote {
+	position: absolute;
+	right: 0;
+	top: 10px;
+}
--- a/script.js
+++ b/script.js
@ -0,0 +1,53 @@
+$(document).ready(function(){
+	/* This code is executed after the DOM has been completely loaded */
+	
+	var totWidth=0;
+	var positions = new Array();
+	
+	$('#slides .slide').each(function(i){
+		
+		/* Traverse through all the slides and store their accumulative widths in totWidth */
+		
+		positions[i]= totWidth;
+		totWidth += $(this).width();
+		
+		/* The positions array contains each slide's commulutative offset from the left part of the container */
+		
+		if(!$(this).width())
+		{
+			alert("Please, fill in width & height for all your images!");
+			return false;
+		}
+		
+	});
+	
+	$('#slides').width(totWidth);
+
+	/* Change the cotnainer div's width to the exact width of all the slides combined */
+
+	$('#menu ul li a').click(function(e,keepScroll){
+
+			/* On a thumbnail click */
+
+			$('li.menuItem').removeClass('act').addClass('inact');
+			$(this).parent().addClass('act');
+			
+			var pos = $(this).parent().prevAll('.menuItem').length;
+			
+			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
+			/* Start the sliding animation */
+			
+			e.preventDefault();
+			/* Prevent the default action of the link */
+			
+			
+			// Stopping the auto-advance if an icon has been clicked:
+			if(!keepScroll) clearInterval(itvl);
+	});
+	
+	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
+	/* On page load, mark the first thumbnail as active */
+	
+
+
+});