Skip to content

Commit

Permalink
Apply a dark theme to the classic page styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@OceanOak
OceanOak committed Feb 23, 2024
1 parent 95301b1 commit 4c2e9bc
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 65 deletions.
103 changes: 68 additions & 35 deletions public/classic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@
</script>
</head>

<body class="bg-light-background box-border m-0 p-0">
<div class="sticky bg-light-background w-full top-0 left-0 z-50">
<body class="bg-dark-gray box-border m-0 p-0">
<div class="sticky bg-dark-gray w-full top-0 left-0 z-50">
<div
class="text-center bg-dark-gray text-white flex items-center justify-center"
class="text-center bg-[#1c1c1c] text-white flex items-center justify-center"
>
<span>
<svg
Expand All @@ -102,11 +102,11 @@
<!--Navbar-->
<nav>
<div
class="container flex flex-wrap items-center justify-between mx-auto p-4"
class="container flex flex-wrap items-center justify-between mx-auto p-4 text-white"
>
<a href="/" class="flex items-center">
<img
src="./img/wordmark-light-transparent@2x.png"
src="./img/wordmark-dark-transparent.png"
class="h-12 mr-3"
alt="Darklang logo"
/>
Expand All @@ -123,7 +123,7 @@
<a href="https://login.darklang.com">Log in</a>
</li>
<li
class="bg-blue hover:bg-purple text-white cursor-pointer px-2 py-1 md:px-4 md:py-2 rounded"
class="bg-[#9B62BC] hover:bg-purple text-white cursor-pointer px-2 py-1 md:px-4 md:py-2 rounded"
>
<a href="./classic/signup">Sign up</a>
</li>
Expand Down Expand Up @@ -174,31 +174,37 @@

<section-wrapper>
<div
class="flex flex-col justify-center items-center mx-auto text-center mt-8 md:mb-16 xl:mt-20 2xl:mt-28"
class="flex flex-col justify-center items-center mx-auto text-center mt-20 mb-12"
>
<h1
class="text-4xl md:text-5xl xl:text-7xl 2xl:text-8xl font-bold text-blue font-Quicksand"
>
Darklang <span class="text-purple">Classic</span>
</h1>
<img
src="./img/darklang-classic.png"
class="max-w-xs md:max-w-2xl 2xl:max-w-4xl"
alt="logo"
/>
</div>

<!-- Deployless cloud backends -->
<div class="my-10 text-center">
<p
class="text-xl md:text-2xl xl:text-[28px] 2xl:text-4xl text-gray-500 font-Quicksand"
class="text-xl md:text-2xl xl:text-[28px] 2xl:text-4xl text-white font-Quicksand"
>
<span class="text-blue">Dark </span> is a new way of building
serverless backends. Just code your backend, with no infra, framework
or deployment nightmares. Build APIs, CRUD apps, internal tools and
bots - whatever your backend needs.
<span class="text-blue font-semibold">Dark </span> is a new way of
building serverless backends. Just code your backend, with no infra,
framework or deployment nightmares. Build
<span class="text-[#A1B56C]">APIs</span>,
<span class="text-[#A1887F]">CRUD</span> apps,
<span class="text-[#E6BD81]">internal tools</span> and
<span class="text-[#86C1B9]">bots</span> - whatever your backend
needs.
</p>

<p
class="text-gray-500 text-base lg:text-lg 2xl:text-2xl mt-12 md:mt-16"
class="text-gray-300 text-base lg:text-base 2xl:text-2xl mt-12 md:mt-16"
>
The classic version of darklang is still accessible but is currently
in maintenance mode, with no ongoing development.
in maintenance mode, with no ongoing development. Darklang-next is the
next iteration of Dark, applicable to both the cloud runtime and to
local scripts and CLIs
</p>
</div>

Expand All @@ -215,7 +221,7 @@
<items-wrapper>
<simple-item data-target="">
<item-heading>
<span class="text-purple">Internal</span> Tools & Bots
Internal Tools <span class="text-purple">&</span> Bots
</item-heading>
<indented-body>
Dark is ideal for quickly building slackbots and automating internal
Expand Down Expand Up @@ -289,24 +295,50 @@
</simple-item>
</items-wrapper-classic>

<div class="my-10 text-base md:text-xl font-medium">
<div class="my-10 text-base md:text-xl text-white font-medium">
<p>
Dark lets you build any backend that needs API endpoints, data stores,
background workers, scheduled jobs, and calling HTTP APIs. You just
write the code in Dark, and we'll manage the rest.
</p>
</div>
<a
href="https://www.youtube.com/watch?v=orRn2kTtRXQ&t=38s"
target="_blank"
class="flex justify-center items-center text-decoration-none"
>
<div class="flex justify-center items-center">
<button
class="bg-blue hover:bg-blue text-white font-bold py-2 px-2 rounded-full inline-flex items-center justify-center relative"
>
<span
class="absolute w-full h-full bg-blue rounded-full opacity-75 animate-ping"
></span>
<svg
viewBox="0 0 16 16"
class="bi bi-play-fill z-10 h-4 w-4"
fill="currentColor"
xmlns="https://www.w3.org/2000/svg"
>
<path
d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"
/>
</svg>
</button>
<p class="mx-4 text-white text-lg">see it in action!</p>
</div>
</a>
</section-wrapper>

<section-wrapper>
<div
class="flex flex-col md:flex-row justify-between items-center lg:mx-44 px-8 py-8 bg-dark-gray text-white rounded-xl"
class="flex flex-col md:flex-row justify-between items-center lg:mx-44 px-8 py-8 bg-[#1c1c1c] text-white rounded-xl"
>
<p class="text-xl font-medium">Access Darklang-classic</p>

<div class="mt-4 md:m-0">
<a
class="bg-blue hover:bg-purple text-white cursor-pointer px-6 py-2 rounded mx-2"
class="bg-[#9B62BC] hover:bg-purple text-white cursor-pointer px-6 py-2 rounded mx-2"
href="./classic/signup"
>Sign up</a
>
Expand All @@ -326,17 +358,18 @@
<div>
<a href="/">
<img
src="./img/wordmark-light-transparent@2x.png"
src="./img/wordmark-dark-transparent.png"
class="h-14"
alt="logo"
/>
</a>
</div>

<div class="text-sm text-gray-600 ml-5">
<div class="text-sm text-gray-300 ml-5">
<p>Copyright &copy; 2024 Dark Inc.</p>
</div>

<!-- todo fix icons -->
<div class="mt-6 mx-4 text-2xl">
<a href="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/darklang/dark" target="_blank"
><i class="fab fa-github"></i
Expand All @@ -357,8 +390,8 @@
class="grid grid-cols-2 gap-y-2 md:container md:flex md:flex-row md:justify-around mt-8"
>
<div>
<h5 class="font-medium mb-2">Darklang Classic</h5>
<ul class="text-gray-500">
<h5 class="font-medium mb-2 text-white">Darklang Classic</h5>
<ul class="text-gray-400">
<li>
<a href="https://login.darklang.com" target="_blank">Sign in</a>
</li>
Expand All @@ -379,8 +412,8 @@ <h5 class="font-medium mb-2">Darklang Classic</h5>
</div>

<div>
<h5 class="font-medium mb-2">Learning Darklang Classic</h5>
<ul class="text-gray-500">
<h5 class="font-medium mb-2 text-white">Learning Darklang Classic</h5>
<ul class="text-gray-400">
<li>
<a
href="https://www.youtube.com/watch?v=orRn2kTtRXQ"
Expand Down Expand Up @@ -419,8 +452,8 @@ <h5 class="font-medium mb-2">Learning Darklang Classic</h5>
</div>

<div>
<h5 class="font-medium mb-2">Development</h5>
<ul class="text-gray-500">
<h5 class="font-medium mb-2 text-white">Development</h5>
<ul class="text-gray-400">
<li>
<a href="https://blog.darklang.com" target="_blank">Blog</a>
</li>
Expand All @@ -446,8 +479,8 @@ <h5 class="font-medium mb-2">Development</h5>
</div>

<div>
<h5 class="font-medium mb-2">Community</h5>
<ul class="text-gray-500">
<h5 class="font-medium mb-2 text-white">Community</h5>
<ul class="text-gray-400">
<li>
<a href="https://darklang.com/discord" target="_blank">Discord</a>
</li>
Expand Down Expand Up @@ -504,7 +537,7 @@ <h5 class="font-medium mb-2">Community</h5>
</template>

<template id="section-heading">
<p class="text-4xl font-bold mb-5 mx-2 md:mx-0">
<p class="text-4xl text-white font-bold mb-5 mx-2 md:mx-0">
<span content-section-heading>REPLACE ME</span>
</p>
</template>
Expand All @@ -529,7 +562,7 @@ <h5 class="font-medium mb-2">Community</h5>

<template id="simple-item">
<div
class="h-full mt-4 flex flex-col justify-center md:mt-0 bg-white drop-shadow-md p-5 md:p-8 rounded-2xl"
class="h-full mt-4 flex flex-col justify-center md:mt-0 bg-[#1c1c1c] drop-shadow-md p-5 md:p-8 rounded-2xl text-white"
>
<span content-simple-item>REPLACE ME</span>
<p placeholder-data-target class="text-purple -ml-3"></p>
Expand Down
Binary file added public/img/darklang-classic.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4c2e9bc

Please sign in to comment.