anulax
/
visite360.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Light/Dark Theme

Browse Source
main
anulax1225 ago%!(EXTRA string=11 months)
parent 395c86c43f
commit 015cc5d585
8 changed files with 83 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/img/light-1.svg
  2. 2
      public/img/light-2.svg
  3. 28
      resources/css/app.css
  4. 12
      resources/js/app.js
  5. 2
      resources/views/demo.blade.php
  6. 46
      resources/views/home.blade.php
  7. 46
      resources/views/layout.blade.php
  8. 10
      tailwind.config.js

2
public/img/light-1.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="1600px" height="1600px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6.797a3.191 3.191 0 0 0-3.2 3.201 3.19 3.19 0 0 0 3.2 3.199 3.19 3.19 0 0 0 3.199-3.199A3.19 3.19 0 0 0 10 6.797zm0 5.25a2.049 2.049 0 1 1 0-4.1 2.05 2.05 0 0 1 0 4.1zM15 5c-.312-.312-.883-.248-1.273.142-.39.391-.453.959-.141 1.272s.882.25 1.273-.141c.39-.39.453-.961.141-1.273zm-9.858 8.729c-.391.39-.454.959-.142 1.271s.882.25 1.273-.141.454-.961.142-1.273-.883-.248-1.273.143zM5 5c-.312.312-.249.883.141 1.273.391.391.961.453 1.273.141s.249-.883-.142-1.273C5.883 4.752 5.312 4.688 5 5zm8.727 9.857c.39.391.96.455 1.273.143s.249-.883-.142-1.274-.96-.453-1.273-.141-.248.882.142 1.272zM10 4.998c.441 0 .8-.447.8-1C10.799 3.445 10.441 3 10 3c-.442 0-.801.445-.801.998s.358 1 .801 1zM10 17c.441 0 .8-.447.8-1s-.358-.998-.799-.998c-.442 0-.801.445-.801.998-.001.553.357 1 .8 1zm-5-7c0-.441-.45-.8-1.003-.8S3 9.559 3 10c0 .442.444.8.997.8S5 10.442 5 10zm12 0c0-.441-.448-.8-1.001-.8-.553 0-.999.359-.999.8 0 .442.446.8.999.8.553 0 1.001-.358 1.001-.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
public/img/light-2.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19 9.199h-.98c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799H19c.552 0 1-.357 1-.799 0-.441-.449-.801-1-.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.05 0 5.5-2.449 5.5-5.5S13.049 4.5 10 4.5zm0 9.5c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4a4 4 0 0 1 0 8zm-7-4c0-.441-.449-.801-1-.801H1c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799h1c.551 0 1-.358 1-.799zm7-7c.441 0 .799-.447.799-1V1c0-.553-.358-1-.799-1-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1zm0 14c-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1 .441 0 .799-.447.799-1v-1c0-.553-.358-1-.799-1zm7.365-13.234c.391-.391.454-.961.142-1.273s-.883-.248-1.272.143l-.7.699c-.391.391-.454.961-.142 1.273s.883.248 1.273-.143l.699-.699zM3.334 15.533l-.7.701c-.391.391-.454.959-.142 1.271s.883.25 1.272-.141l.7-.699c.391-.391.454-.961.142-1.274s-.883-.247-1.272.142zm.431-12.898c-.39-.391-.961-.455-1.273-.143s-.248.883.141 1.274l.7.699c.391.391.96.455 1.272.143s.249-.883-.141-1.273l-.699-.7zm11.769 14.031l.7.699c.391.391.96.453 1.272.143.312-.312.249-.883-.142-1.273l-.699-.699c-.391-.391-.961-.455-1.274-.143s-.248.882.143 1.273z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

28
resources/css/app.css
Unescape View File

@ -5,19 +5,19 @@
@layer base {
h1 {
@apply text-gray-50;
@apply text-gray-50 dark:text-gray-1000;
}
h2 {
@apply text-gray-150;
@apply text-gray-150 dark:text-gray-850;
}
h3 {
@apply text-gray-250;
@apply text-gray-250 dark:text-gray-750;
}
h4 {
@apply text-gray-350;
@apply text-gray-350 dark:text-gray-650;
}
h5 {
@ -25,7 +25,7 @@ @layer base {
}
p {
@apply text-gray-550;
@apply text-gray-550 dark:text-gray-450;
}
}
@ -77,6 +77,24 @@ @layer utilities {
animation-delay: var(--delay);
}
.focus-camera {
animation-name: blur-anim;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes blur-anim {
from {
filter: blur(0px);
}
to {
filter: blur(5px);
}
}
@keyframes social-icon-in-anim {
from {
background-color: inherit;

12
resources/js/app.js
Unescape View File

@ -5,4 +5,14 @@ window.addEventListener("scroll", () => {
"--scroll",
window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
);
});
});
function themeToggle() {
document.querySelector("html").classList.toggle("dark");
document.querySelector("#btn-theme").querySelector("img").setAttribute("src",
document.querySelector("html").classList.contains("dark") ?
"/img/dark.svg" : "/img/light-2.svg"
)
}
window.themeToggle = themeToggle;

2
resources/views/demo.blade.php
Unescape View File

@ -1,7 +1,7 @@
@extends("layout")
@section("content")
<div class="flex flex-col w-3/4 mx-auto mt-2 pt-5 h-full">
<div class="flex flex-col desktop:w-3/4 laptop:w-[90%] mx-auto mt-2 pt-5 h-full">
<h1 class="px-3 text-[3rem] font-semibold border-b border-gray-750 mb-5">Demo</h1>
<div class="w-full h-3/4 bg-gradient-to-r from-orange-400 to-orange-600 p-[3px] rounded-2xl mt-2 shadow-sm shadow-gray-950 overflow-hidden">
<div class="rounded-2xl bg-gray-900 p-[30px] overflow-hidden w-full h-full">

46
resources/views/home.blade.php
Unescape View File

@ -2,19 +2,19 @@
@section("content")
<div class="relative flex flex-col items-center justify-center overflow-hidden">
<img class="w-full absolute right-0 left-0 -z-10 blur-[4px]" src="/img/immo.jpg">
<div class="w-3/4 bg-gradient-to-tr from-orange-600/80 to-orange-400/80 rounded-lg
<img class="w-full absolute right-0 left-0 -z-10 focus-camera" src="/img/immo.jpg">
<div class="desktop:w-3/4 laptop:w-[90%] bg-gradient-to-tr from-orange-600/80 to-orange-400/80 rounded-lg
shadow-lg shadow-gray-800 flex flex-col items-center p-14 my-7">
<h5 class="text-[6rem] font-bold mx-auto leading-none">Ma Visite 360</h5>
<h5 class="text-[1.2rem] italic text-center mx-auto">Ma visite, mon choix à 360°</h5>
</div>
</div>
<div class="flex flex-col w-3/4 h-fit mx-auto mb-10">
<h1 class="mt-10 px-3 text-[3rem] font-bold border-b border-gray-750">Histoire</h1>
<div class="flex flex-col desktop:w-3/4 laptop:w-[90%] h-fit mx-auto mb-10">
<h1 class="mt-10 px-3 text-[3rem] font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1>
<div class="w-full flex items-start mt-2">
<h2 class="pl-3 mr-16 w-1/2 text-[1.5rem] font-semibold">
Fondée en 2024 et basée à Neuchâtel.<br>
MaVisite360 est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle.
"Ma Visite 360" est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle.
</h2>
<div class="mt-1">
<h2 class="text-[1.3rem]">
@ -33,17 +33,17 @@
</div>
</div>
<div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 pb-1">
<div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 dark:border-gray-200 pb-1">
<div class="mt-5 flex w-full items-center">
<div class="w-[40%] p-3 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md shadow-gray-900 rounded-lg">
<div class="w-[40%] p-3 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold w-full text-center">Vision</h5>
<h5 class="px-2 text-[1.2rem] font-semibold">Transformer la présentation immobilière en une expérience immersive, accessible et sans contraintes.</h5>
</div>
<div class="w-[40%] p-6 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-[40%] p-6 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Mission</h5>
<h5 class="px-2 text-[1.2rem] pb-2 font-semibold">Offrir une solution clé en main de visites virtuelles 360°, permettant aux agences immobilières et autres secteurs de valoriser leurs espaces et de gagner en efficacité.</h5>
</div>
<div class="w-[20%] p-3 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-[20%] p-3 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Valeurs</h5>
<ul class="text-gray-50 text-[1.2rem] list-disc px-5">
<li><h5 class="font-semibold">Innovation</h5></li>
@ -54,9 +54,9 @@
</div>
</div>
<h1 class="px-3 text-[3rem] font-semibold mt-8 border-b border-gray-750 mb-5">Services et offres</h1>
<h1 class="px-3 text-[3rem] font-semibold mt-8 border-b border-gray-750 dark:border-gray-200 mb-5">Services et offres</h1>
<div class="w-full px-3 flex justify-between items-center">
<div class="w-[40%] p-8 mr-2 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-[40%] p-8 mr-2 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Visite</h5>
<ul class="text-gray-50 text-[1rem] list-disc px-5">
<li><h5 class="font-semibold mb-2">Capture des photos 360° haute définition.</h5></li>
@ -64,7 +64,7 @@
<li><h5 class="font-semibold">Hébergement en ligne sur notre plateforme.</h5></li>
</ul>
</div>
<div class="w-[60%] p-5 ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-[60%] p-5 ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Valeur ajoutée</h5>
<ul class="text-gray-50 text-[1rem] list-disc px-5">
<li><h5 class="font-semibold mb-2">Simplifie les visites pour les acheteurs potentiels.</h5></li>
@ -74,33 +74,33 @@
</div>
</div>
<div class="w-full flex justify-between mt-5">
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-full h-full bg-gray-900 rounded-md p-5 flex flex-col justify-between">
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div>
<div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Visite unique</h1>
<h3 class="text-[1.6rem]">200.-</h3>
</div>
<ul class="text-gray-150 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem]">Prise des photo de votre visite</h5></li>
<li><h5 class="text-[1rem]">Création de la visite virtuelle</h5></li>
<li><h5 class="text-[1rem]">Hébergement (inclue des frais supplémentaire)</h5></li>
<ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem] dark:text-gray-1000">Prise des photo de votre visite</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Création de la visite virtuelle</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement (inclue des frais supplémentaire)</h5></li>
</ul>
</div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105
bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button>
</div>
</div>
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 rounded-lg">
<div class="w-full h-full bg-gray-900 rounded-md p-5 flex flex-col justify-between">
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div>
<div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Abonnement premium</h1>
<h3 class="text-[1.6rem]">60.-/mois</h3>
</div>
<ul class="text-gray-150 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem]">Réduction de 10% sur les la création de visite virtuelle</h5></li>
<li><h5 class="text-[1rem]">Hébergement offert</h5></li>
<ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem] dark:text-gray-1000">Réduction de 10% sur les la création de visite virtuelle</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement offert</h5></li>
</ul>
</div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105

46
resources/views/layout.blade.php
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -10,49 +10,37 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Ma Visite 360 - {{ $title }}</title>
@vite("resources/js/app.js")
@vite("resources/css/app.css")
</head>
<body class="w-screen h-screen antialiased font-robo bg-gray-850 -z-10">
<body class="w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-50 -z-10">
<!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">-->
<nav class="sticky right-0 left-0 top-0 h-16 z-50">
<div class="w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-850 via-gray-600 to-gray-850 pb-[2px]">
<div class="w-full h-full px-[12.5%] flex justify-between bg-gray-850">
<div class="w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-850 dark:from-gray-0 via-gray-600 dark:via-gray-300 to-gray-850 dark:to-gray-0 pb-[2px]">
<div class="w-full h-full desktop:px-[12.5%] laptop:px-[5%] flex justify-between bg-gray-850 dark:bg-gray-0">
<div class="flex items-center h-full">
<a href="/" class="h-full"><img src="/img/logo-mavisite360.png" class="h-full hover:scale-105 mr-2 p-3"></a>
<p class="text-lg text-white bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg px-4 font-semibold">{{ $title }}</p>
<h5 class="text-lg text-white bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg px-4 font-semibold">{{ $title }}</h5>
</div>
<div class="flex items-center h-full">
<a href="/"><h1 class="mr-4 text-xl font-bold hover:scale-110">home</h1></a>
<a href="/demo"><h1 class="font-bold mr-4 text-xl hover:scale-110">demo</h1></a>
<a href="#contact"><h1 class="font-bold mr-9 text-xl hover:scale-110">contact</h1></a>
<div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700">
<button class="relative group flex items-center justify-center mr-6"
onclick="document.querySelector('#theme-panel').classList.toggle('hidden')">
<img src="/img/dark.svg" class="w-[1.4rem] hover:scale-105 invert">
<div id="theme-panel" class="absolute hidden bg-gray-800 -bottom-[110px] right-4/5
w-[160px] rounded-xl overflow-hidden">
<div class="px-4 pt-2 grid grid-cols-4 hover:bg-gray-600 items-center">
<img src="/img/dark.svg" class="w-[1.4rem] invert pl-1">
<h1 class="font-semibold text-[1.1rem] col-span-3 mb-1 text-left">Dark</h1>
</div>
<div class="px-4 pb-2 grid grid-cols-4 hover:bg-gray-600 items-center">
<img src="/img/light.svg" class="w-[1.4rem] invert">
<h1 class="font-semibold text-[1.1rem] mt-1 col-span-3 text-left">Light</h1>
</div>
</div>
<button id="btn-theme" class="relative group flex items-center justify-center mr-6"
onclick="window.themeToggle()">
<img src="/img/light-2.svg" class="w-[1.4rem] hover:scale-105 invert dark:invert-0">
</button>
<img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert mr-3">
<img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert">
<img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-3">
<img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
</div>
</div>
</div>
</div>
</nav>
@yield("content")
<footer class="w-full bg-gray-800">
<div class="w-3/4 px-3 mx-auto flex flex-col items-center justify-between">
<footer class="w-full bg-gray-800 dark:bg-gray-0">
<div class="desktop:w-3/4 laptop:w-[90%] px-3 mx-auto flex flex-col items-center justify-between">
<div class="w-full mt-5 flex items-center">
<div id="contact" class="w-1/3 mb-10">
<h2 class="font-semibold text-[1.7rem] border-b-2 border-gray-750 w-3/4 pr-20 mb-2">Nous contacter</h2>
@ -70,19 +58,19 @@ class="h-fit rounded-lg text-sm hover:scale-105 bg-orange-600 px-4 py-2 text-whi
</div>
<div class="flex items-start justify-evenly w-1/3 mb-10">
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert">
<img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert dark:invert-0">
</div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/discord.svg" class="w-[2rem] invert">
<img src="/img/discord.svg" class="w-[2rem] invert dark:invert-0">
</div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/facebook.svg" class="w-[2rem] invert">
<img src="/img/facebook.svg" class="w-[2rem] invert dark:invert-0">
</div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/instagram.svg" class="w-[2rem] invert">
<img src="/img/instagram.svg" class="w-[2rem] invert dark:invert-0">
</div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/twitter.svg" class="w-[2rem] invert">
<img src="/img/twitter.svg" class="w-[2rem] invert dark:invert-0">
</div>
</div>
</div>

10
tailwind.config.js
Unescape View File

@ -9,16 +9,12 @@ export default {
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: 'class',
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
'desktop': '1400px',
},
extend: {
fontFamily: {
@ -28,6 +24,7 @@ export default {
},
colors: {
gray: {
1000: "hsl(0 0 2)",
950: "hsl(0 0 5)",
900: "hsl(0 0 10)",
850: "hsl(0 0 15)",
@ -47,6 +44,7 @@ export default {
150: "hsl(0 0 85)",
100: "hsl(0 0 90)",
50: "hsl(0 0 95)",
0: "hsl(0 0 98)",
},
},
},

Write Preview
Loading…
Cancel
Save