Skip to content

Commit

Permalink
added files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aref-Akminasi
Aref-Akminasi committed Sep 5, 2023
1 parent c8ea42e commit 8d4e5cc
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 75 deletions.
0 assets/correct-98b79404.svg → assets/correct-1ee4ff26.svg
View file
File renamed without changes
0 assets/icon-a1b983f4.svg → assets/icon-2aa18a4a.svg
View file
File renamed without changes
2 changes: 1 addition & 1 deletion assets/index-5446ea7c.css → assets/index-0a2f93fa.css
View file

Large diffs are not rendered by default.

0 assets/index-4115fae0.js → assets/index-46b40085.js
View file
File renamed without changes.
0 assets/mistake-293b52aa.svg → assets/mistake-70a736ab.svg
View file
File renamed without changes
0 assets/sun-bdbe231c.svg → assets/sun-5b38f918.svg
View file
File renamed without changes
117 changes: 43 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./assets/icon-a1b983f4.svg" />
<link rel="icon" href="/assets/icon-2aa18a4a.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<title>Quizify</title>
<script type="module" crossorigin src="./assets/index-4115fae0.js"></script>
<link rel="stylesheet" href="./assets/index-5446ea7c.css" />
<script type="module" crossorigin src="/assets/index-46b40085.js"></script>
<link rel="stylesheet" href="/assets/index-0a2f93fa.css">
</head>
<body class="bg-bgColor dark:bg-darkBlue">
<!-- Nav -->
<nav class="container mx-auto p-4 flex justify-between items-center">
<nav class="container mx-auto flex items-center justify-between p-4">
<h1
class="font-fredoka text-3xl md:text-5xl font-bold text-navyBlue dark:text-white"
class="font-fredoka text-3xl font-bold text-navyBlue dark:text-white md:text-5xl"
>
Quizify
</h1>
<!-- Dark mode wraper -->
<button
class="cursor-pointer border border-navyBlue dark:border-white p-2 rounded-md shadow-md"
class="cursor-pointer rounded-md border border-navyBlue p-2 shadow-md dark:border-white"
id="darkmode"
>
<img
src="./assets/moon-7e3b1d99.svg"
src="/assets/moon-7e3b1d99.svg"
alt="moon"
class="w-8 inline-block dark:hidden"
class="inline-block w-8 dark:hidden"
/>
<img
src="./assets/sun-bdbe231c.svg"
src="/assets/sun-5b38f918.svg"
alt="moon"
class="w-8 hidden dark:inline-block"
class="hidden w-8 dark:inline-block"
/>
</button>
</nav>
Expand All @@ -45,128 +45,96 @@
<!-- Question -->
<section class="container mx-auto mt-24 p-4">
<h2
class="text-center mx-auto max-w-3xl text-3xl md:text-4xl font-fredoka font-medium text-navyBlue dark:text-white h-24"
class="mx-auto h-24 max-w-3xl text-center font-fredoka text-3xl font-medium text-navyBlue dark:text-white md:text-4xl"
id="question"
></h2>
</section>

<!-- Answers -->
<section class="container mx-auto max-w-5xl mt-12 px-12">
<section class="container mx-auto mt-12 max-w-5xl px-12">
<!-- Progress -->
<div class="flex justify-center md:justify-start">
<span
class="font-fredoka text-2xl text-navyBlue dark:text-white inline-block progress"
class="progress inline-block font-fredoka text-2xl text-navyBlue dark:text-white"
>0 / 0</span
>
</div>

<!-- Options -->
<!-- Options 1 & 2 container -->
<div
class="flex flex-col space-y-4 space-x-0 md:space-x-4 md:space-y-0 md:flex-row mt-4 cursor-pointer"
class="mt-4 flex cursor-pointer flex-col space-x-0 space-y-4 md:flex-row md:space-x-4 md:space-y-0"
>
<div
class="py-8 px-4 bg-white dark:bg-navyBlue rounded-lg flex-1 flex justify-between opr"
class="opr flex flex-1 justify-between rounded-lg bg-white px-4 py-8 dark:bg-navyBlue"
>
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka"
class="font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
>A
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka op ml-2"
class="op ml-2 font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
></span
></span>

<img
src="./assets/correct-98b79404.svg"
alt=""
class="w-4 hidden"
/>
<img
src="./assets/mistake-293b52aa.svg"
alt=""
class="w-3 hidden"
/>
<img src="/assets/correct-1ee4ff26.svg" alt="" class="hidden w-4" />
<img src="/assets/mistake-70a736ab.svg" alt="" class="hidden w-3" />
</div>
<div
class="py-8 px-4 bg-white dark:bg-navyBlue rounded-lg flex-1 flex justify-between opr"
class="opr flex flex-1 justify-between rounded-lg bg-white px-4 py-8 dark:bg-navyBlue"
>
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka"
class="font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
>B
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka op ml-2"
class="op ml-2 font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
></span
></span>
<img
src="./assets/correct-98b79404.svg"
alt=""
class="w-4 hidden"
/>
<img
src="./assets/mistake-293b52aa.svg"
alt=""
class="w-3 hidden"
/>
<img src="/assets/correct-1ee4ff26.svg" alt="" class="hidden w-4" />
<img src="/assets/mistake-70a736ab.svg" alt="" class="hidden w-3" />
</div>
</div>
<!-- Options 3 & 4 container -->
<div
class="flex flex-col space-y-4 space-x-0 md:space-x-4 md:space-y-0 md:flex-row mt-4 cursor-pointer"
class="mt-4 flex cursor-pointer flex-col space-x-0 space-y-4 md:flex-row md:space-x-4 md:space-y-0"
>
<div
class="py-8 px-4 bg-white dark:bg-navyBlue rounded-lg flex-1 flex justify-between opr"
class="opr flex flex-1 justify-between rounded-lg bg-white px-4 py-8 dark:bg-navyBlue"
>
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka"
class="font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
>C
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka op ml-2"
class="op ml-2 font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
></span
></span>

<img
src="./assets/correct-98b79404.svg"
alt=""
class="w-4 hidden"
/>
<img
src="./assets/mistake-293b52aa.svg"
alt=""
class="w-3 hidden"
/>
<img src="/assets/correct-1ee4ff26.svg" alt="" class="hidden w-4" />
<img src="/assets/mistake-70a736ab.svg" alt="" class="hidden w-3" />
</div>
<div
class="py-8 px-4 bg-white dark:bg-navyBlue rounded-lg flex-1 flex justify-between opr"
class="opr flex flex-1 justify-between rounded-lg bg-white px-4 py-8 dark:bg-navyBlue"
>
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka"
class="font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
>D
<span
class="text-xl md:text-2xl text-navyBlue dark:text-white font-fredoka op ml-2"
class="op ml-2 font-fredoka text-xl text-navyBlue dark:text-white md:text-2xl"
></span
></span>
<img
src="./assets/correct-98b79404.svg"
alt=""
class="w-4 hidden"
/>
<img
src="./assets/mistake-293b52aa.svg"
alt=""
class="w-3 hidden"
/>
<img src="/assets/correct-1ee4ff26.svg" alt="" class="hidden w-4" />
<img src="/assets/mistake-70a736ab.svg" alt="" class="hidden w-3" />
</div>
</div>
</section>
</div>

<!-- Score container -->
<section class="container mx-auto mt-24 px-4 hidden" id="score">
<section class="container mx-auto mt-24 hidden px-4" id="score">
<div
class="max-w-lg bg-white dark:bg-navyBlue mx-auto flex flex-col items-center space-y-4 p-8 rounded-lg"
class="mx-auto flex max-w-lg flex-col items-center space-y-4 rounded-lg bg-white p-8 dark:bg-navyBlue"
>
<h2
class="text-3xl md:text-4xl font-medium font-fredoka text-navyBlue dark:text-white"
class="font-fredoka text-3xl font-medium text-navyBlue dark:text-white md:text-4xl"
>
Your Score!
</h2>
Expand Down Expand Up @@ -197,20 +165,21 @@
</svg>
<h3
id="quiz-score"
class="font-fredoka text-3xl font-medium absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-navyBlue dark:text-white"
class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] font-fredoka text-3xl font-medium text-navyBlue dark:text-white"
></h3>
</div>
<span
id="score-precentage"
class="text-navyBlue dark:text-white font-fredoka font-medium text-2xl"
class="font-fredoka text-2xl font-medium text-navyBlue dark:text-white"
></span>
<button
id="try-again"
class="bg-navyBlue dark:bg-white font-fredoka font-medium py-2 px-4 text-xl rounded-md text-white dark:text-navyBlue"
class="rounded-md bg-navyBlue px-4 py-2 font-fredoka text-xl font-medium text-white dark:bg-white dark:text-navyBlue"
>
Try Again
</button>
</div>
</section>

</body>
</html>

0 comments on commit 8d4e5cc

Please sign in to comment.