modified: package-lock.json

modified:   package.json
	new file:   postcss.config.js
	modified:   public/img/Like-to-listen.jpg
	new file:   public/img/Like-to-listen_old.jpg
	modified:   public/img/likeToListen.jpg
	new file:   public/img/likeToListen_old.jpg
	modified:   src/app/globals.css
	deleted:    src/app/page.module.css
	modified:   src/app/page.tsx
	modified:   src/pages/api/podcasts/all.ts
	modified:   "src/\321\201omponents/podcasts/getRssXml.ts"
	new file:   tailwind.config.js

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3002",
+    "dev": "concurrently \"next dev\" \"tailwindcss --input ./app/globals.css --output ./app/output.css --watch\"",
     "build": "next build",
     "start": "next start -p 3002",
     "lint": "next lint"
@@ -13,6 +13,7 @@
     "@types/node": "18.13.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "daisyui": "^2.50.1",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
     "mysql2": "^3.1.2",
@@ -24,5 +25,11 @@
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.4",
     "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "concurrently": "^7.6.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.6"
   }
 }

postcss.config.js

@@ -0,0 +1,9 @@
+// postcss.config.js
+
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };
+  

src/app/globals.css

@@ -1,107 +1,9 @@
-:root {
+@tailwind base;
-  --max-width: 1100px;
+@tailwind components;
-  --border-radius: 12px;
+@tailwind utilities;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
 
-  --primary-glow: conic-gradient(
+.width_99 {
-    from 180deg at 50% 50%,
+    width: 99%;
-    #16abff33 0deg,
+    text-align: justify;
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
 }

src/app/page.module.css

@@ -1,271 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(33%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 34ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo,
-.thirteen {
-  position: relative;
-}
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile and Tablet */
-@media (max-width: 1023px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo,
-  .thirteen img {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/app/page.tsx

@@ -9,6 +9,7 @@ import {
   Segment,
   Label,
 } from 'semantic-ui-react';
+import Image from 'next/image'
 import { Item } from 'semantic-ui-react';
 import 'semantic-ui-css/semantic.min.css';
 import AudioPlayer from 'react-h5-audio-player';
@@ -21,6 +22,7 @@ type Props = {
   urlImg: string;
   title_items: string;
   children: Node;
+  datePub: string;
 }
 
 
@@ -33,27 +35,29 @@ const Views = async (e : number) =>{
 }
 
 
-const PodcastBlocks: React.FC<Props> = ({id, audio, description, urlImg, title_items}) => (
+const PodcastBlocks: React.FC<Props> = ({id, audio, description, urlImg, title_items, datePub}) => (
   <>
-  <Item>
+  <div className="m-3 card lg:card-side bg-base-100 shadow-xl">
-      <Item.Image size='medium' src={'img/'+urlImg} />
+    <div className="hero-content flex-col lg:flex-row">
-      <Item.Content>
+      <Image
-        <Item.Header as='a'>{title_items}</Item.Header>
+        src={'/img/'+urlImg}
-        <Item.Meta>
+        alt={title_items}
-          <span className='cinema'></span>
+        width={500}
-        </Item.Meta>
+        height={500}
-        <Item.Description>
+      />
-          {description}
+    </div>
-        </Item.Description>
+    <div className="card-body width_99">
+      <h2 className="card-title">{title_items}</h2>
+      <p>{description}</p>
+      <div className="card-actions justify-end">
         <AudioPlayer
           src={"audio/"+audio}
           onPlay={e => Views(id)}
         />
-        <Item.Extra>
+      </div>
-          <Label icon='globe' content='-' />
+      <p> Дата публикации: {datePub} </p> 
-        </Item.Extra>
+    </div>
-      </Item.Content>
+  </div>
-    </Item>
   </>
 )
 
@@ -73,6 +77,7 @@ export default function Home() {
       .then((res) => res.json())
       .then((data) => {
         setData(data);
+        console.log(data)
         setLoading(false);
       })
   }, [])
@@ -102,7 +107,7 @@ export default function Home() {
         </Grid.Row>
       </Grid>
     </Segment>
-    <Segment style={{ padding: '8em 0em' }} vertical>
+    <Segment vertical>
       <Container textAlign='left'>
         <Item.Group>
           {podcasts}

src/pages/api/podcasts/all.ts

@@ -1,7 +1,7 @@
 import Select from "../../../server/db/select";
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-const sql = "SELECT items.id, urlImg,items.description, items.title_items, items.audio FROM podcasts, items WHERE podcasts.id=items.id_podcasts and items.status=1 ORDER BY items.pubDate DESC";
+const sql = "SELECT items.id, urlImg,items.description, items.title_items, items.audio, DATE_FORMAT(items.pubDate, '%d - %m - %Y') as datePub FROM podcasts, items WHERE podcasts.id=items.id_podcasts and items.status=1 ORDER BY items.pubDate DESC";
 
 export default function handler(
     req: NextApiRequest,

src/сomponents/podcasts/getRssXml.ts

@@ -36,7 +36,7 @@ export const getRssXml = (data: Props) => {
         <itunes:summary>`+data.description+`</itunes:summary>
         <itunes:owner>
             <itunes:name>`+data.nameCompanies+`</itunes:name>
-            <itunes:email>julialazar90@gmail.com</itunes:email>
+            <itunes:email>crapsh@gmail.com</itunes:email>
         </itunes:owner>
         <itunes:image href="`+data.webSite+'/img/'+data.urlImg+`"/>
         <itunes:category text="Education">

tailwind.config.js

@@ -0,0 +1,41 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [
+    "./src/app/*.{js,ts,jsx,tsx}",
+    "src/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+
+  // daisyUI config (optional)
+  daisyui: {
+    styled: true,
+    themes: true,
+    base: true,
+    utils: true,
+    logs: true,
+    rtl: false,
+    prefix: "",
+    darkTheme: "white",
+  },
+  themes: [
+    {
+      mytheme: {
+        "primary": "#6419E6",
+        "secondary": "#D926A9",
+        "accent": "#1FB2A6",
+        "neutral": "#191D24",
+        "base-100": "#2A303C",
+        "info": "#3ABFF8",
+        "success": "#36D399",
+        "warning": "#FBBD23",
+        "error": "#F87272",
+      },
+    },
+  ],
+}