worked on the main page

10 files changed, 70 insertions, 169 deletions

diff --git a/hell-link b/hell-link
index b604d0e..73a5466 100755
--- a/hell-link
+++ b/hell-link
diff --git a/main.go b/main.go
index 168c98a..837dce2 100644
--- a/main.go
+++ b/main.go
@@ -16,12 +16,13 @@ func main() {
 	router.Use(gin.Logger())
 	router.LoadHTMLGlob("templates/*")
 
-	// css static routes
+	// static routes
 	router.Static("/css", "static/css")
 	router.Static("/old/css", "static/css/old")
-	// js static routes
-	/*router.Static("/scripts", "static/scripts")
-	router.Static("/media", "static/media")*/
+
+	router.Static("/media", "static/media")
+
+	//router.Static("/scripts", "static/scripts")
 
 	// serve classic themed pages
 	router.GET("/old", func (c *gin.Context) {
@@ -40,5 +41,10 @@ func main() {
 		fmt.Println(name)
 	})
 
+	// serve new themed pages
+	router.GET("/", func (c *gin.Context) {
+		c.HTML(http.StatusOK, "index.html", nil)
+	})
+
 	router.Run(":" + port)
 }
diff --git a/static/css/new.main.css b/static/css/new.main.css
deleted file mode 100644
index 403d1e4..0000000
--- a/static/css/new.main.css
+++ /dev/null
@@ -1,111 +0,0 @@
-body {
-	background-color: #232627;
-}
-
-strong {
-	color: red;
-}
-
-.navbar {
-	background-color: #222526;
-	overflow: hidden;
-}
-
-.navbar a {
-	float: right;
-	display: block;
-	color: #9e00ff;
-	text-align: right;
-/*	padding: 30px 50px;*/
-	padding: 30px 8%;
-	text-decoration: none;
-	font-size: 24;
-}
-
-.navbar #logo {
-	float: left;
-	padding: 0px 0px;
-}
-
-.navbar .hamburger-icon {
-	display: none;
-}
-
-/*hamburger menu shit*/
-@media screen and (max-width: 481px) {
-	.navbar a:not(:first-child) {display: none;}
-	.navbar a.hamburger-icon {
-		float: right;
-		display: block;
-	}
-}
-
-@media screen and (max-width: 481px) {
-	.navbar.responsive {position: relative;}
-	.navbar.responsive a.hamburger-icon {
-/*		display: none;*/
-		position: relative;
-		right: 0;
-		top: 0;
-		padding: 30px 8%;
-		float:right;
-	}
-	.navbar.responsive a {
-		float: right;
-		display: block;
-		text-align: center;
-		padding: 30px 8%;
-	}
-}
-
-/*Navbar is done*/
-.body {
-	background-image: url("HG.png");
-	background-repeat: no-repeat;
-	background-position: left top;
-	text-align: center;
-	margin-left: 4%;
-}
-
-.body h1, h3 {
-	color: #f0f0f0;
-	background-color: #23262766;
-	display: inline;
-	padding: 1px 1px;
-}
-
-.rightflex {
-	float: right; 
-	margin-right: 10%;
-}
-
-.form {
-	padding: 9%;
-}
-
-#send {
-	margin-left: 6%;
-	color: #000000;
-	background-color: #ff0057;
-	border: 1px solid #e30808;
-	border-radius: 8px;
-	padding: 1% 5%;
-	transition-duration: 0.4s;
-}
-
-#send:hover {
-	background-color: #ff0000;
-}
-
-#name {
-	color: #ff0000;
-}
-
-.big {
-	font-size: 20px;
-	padding: 4px 4px;
-}
-
-.subtext {
-	margin-top: 3%;
-}
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..8714d21
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,37 @@
+body {
+	background-color: #232627;
+	height: 100vh;
+	margin: 0;
+	color: #FFFFFF;
+}
+
+.navbar {
+	height: 3.5rem;
+	border-bottom: 1px solid pink;
+	margin-bottom: 2.5rem;
+}
+
+.root {
+	width: 100%;
+	height: 25rem;
+	margin: auto;
+	background: url("/media/hell-girl-full.png");
+	background-repeat: no-repeat;
+}
+
+strong, em {
+	color: red;
+	font-style: normal;
+}
+em {
+	font-size: 2rem;
+}
+
+.content {
+	text-align: center;
+}
+
+
+
+@media only screen and (max-device-width: 480px) {
+}
diff --git a/static/media/HG.png b/static/media/hell-girl-full.png
index ff657d1..ff657d1 100644
--- a/static/media/HG.png
+++ b/static/media/hell-girl-full.png
diff --git a/static/media/HG2.png b/static/media/hell-girl-half.png
index d5ed4e8..d5ed4e8 100644
--- a/static/media/HG2.png
+++ b/static/media/hell-girl-half.png
diff --git a/static/media/image-big.png b/static/media/image-big.png
deleted file mode 100644
index 44bb792..0000000
--- a/static/media/image-big.png
+++ /dev/null
diff --git a/static/media/index.png b/static/media/logo.png
index edb81a5..edb81a5 100644
--- a/static/media/index.png
+++ b/static/media/logo.png
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..eec0057
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Hell Correspondence (new ver.)</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body>
+	<div class="navbar">
+	</div>
+	<div class="root">
+		<div class="content">
+			<h1>Enter someone's name to send them to <strong>hell.</strong></h1>
+			<form>
+				<input type="text" name="name" id="name-input"/>
+				<input type="submit" value="send" id="submit-button"/>
+			</form>
+			<h3><em>Notice:</em> When you <strong>curse</strong> someone, there will be two holes that you dig...</h3>
+			<h3>One is for the cursed person and the other one is for <em>yourself.</em></h3>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/templates/new.index.html b/templates/new.index.html
deleted file mode 100644
index 565b80e..0000000
--- a/templates/new.index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<link rel="stylesheet" type="text/css" href="static/css/new.main.css">
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-		<script>
-		function myFunction() {
-			var x = document.getElementById("topnavbar");
-			if (x.className === "navbar") {
-				x.className += " responsive";
-			} else {
-				x.className = "navbar";
-			}
-		} 
-		</script>
-		<meta name="viewport" content="width=device-width, initial-scale=1"/>
-		<title>(beta)Hell Correspondence</title>
-	</head>
-	<body>
-		<div class="navbar" id="topnavbar">
-			<a href="/" class="logo" id="logo">
-				<img src="media/index.png" alt="Hell Girl anime version" width="80" height="80"></a>
-			<a href="javascript:void(0);" class="hamburger-icon" onclick="myFunction()">
-			<i class="fa fa-bars"></i></a>
-			<a href="/en">More</a>
-		</div>
-
-
-		<div class="body" id="body">
-			<div class="rightflex">
-				<br>
-				<h1>Enter someone's name to send them to <strong>hell</strong>.</h1></span>
-				<div class="form" method="POST">
-					<input type="text" id="name" name="name">
-					<button type="button" id="send">Send</button>
-				</div>
-				<div class="subtext">
-					<h3 id="subtext1">
-					<strong class="big">Notice:</strong>
-					When you <strong>curse</strong> someone, there will be two holes that you dig...
-					</h3>
-					<br>
-					<h3 id="subtext2">
-						One is for the cursed person and the other one is for <strong class="big">yourself.
-					</h3>
-				</div>
-			</div>
-			
-			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-		</div>
-		<div id="foot">
-		</div>
-	</body>
-</html>